跳至主要内容

发送加密货币

ONE SDK 提供了 UI 组件和程序化 API 来发送加密货币。使用 OneSendWidget 可获得完整的发送流程，使用单独的交易按钮可执行特定操作，或使用 sendTransaction engine 方法实现完全控制。

仅限 Web

OneSendWidget、其预设变体和交易按钮组件仅在 Web 端可用。它们不会从 React Native 入口导出。详见移动端与桌面端了解平台详情。

OneSendWidget​

一个完整的发送表单，包含地址输入、金额输入、代币选择和确认功能。

import { OneSendWidget } from '@one_deploy/sdk';

function SendPage() {
  return (
    <OneSendWidget
      fromAddress="0xYourWallet..."
      chainId={8453}
      onSuccess={(tx) => {
        console.log('Sent! Hash:', tx.transactionHash);
      }}
      onError={(error) => {
        console.error('Send failed:', error.message);
      }}
    />
  );
}

OneSendWidgetProps​

interface OneSendWidgetProps {
  /** 发送方钱包地址。 */
  fromAddress: string;

  /** 交易的链 ID。默认为 CHAIN_IDS.BASE。 */
  chainId?: number;

  /** 预填收款方地址。 */
  toAddress?: string;

  /** 预填要发送的代币。默认为原生代币。 */
  token?: string;

  /** 预填金额。 */
  amount?: string;

  /** 将代币选择限制为这些符号。 */
  allowedTokens?: string[];

  /** 交易成功时触发的回调。 */
  onSuccess?: (tx: TransactionResult) => void;

  /** 交易失败时触发的回调。 */
  onError?: (error: OneSDKError) => void;

  /** 用户取消时触发的回调。 */
  onCancel?: () => void;

  /** 额外的 CSS 类名。 */
  className?: string;

  /** 内联样式。 */
  style?: React.CSSProperties;
}

interface TransactionResult {
  /** 链上交易哈希。 */
  transactionHash: string;

  /** ONE SDK 内部交易 ID。 */
  transactionId: string;

  /** 交易提交的链 ID。 */
  chainId: number;

  /** 交易状态。 */
  status: 'pending' | 'confirmed' | 'failed';

  /** 交易的区块浏览器 URL。 */
  explorerUrl: string;
}

预设变体​

OneSendETHWidget​

用于发送 ETH（或当前链上的原生 Gas 代币）的预配置 widget。

import { OneSendETHWidget } from '@one_deploy/sdk';

function SendETH() {
  return (
    <OneSendETHWidget
      fromAddress="0xYourWallet..."
      chainId={8453}
      onSuccess={(tx) => console.log('ETH sent:', tx.transactionHash)}
    />
  );
}

OneSendUSDCWidget​

用于发送 USDC 的预配置 widget。

import { OneSendUSDCWidget } from '@one_deploy/sdk';

function SendUSDC() {
  return (
    <OneSendUSDCWidget
      fromAddress="0xYourWallet..."
      chainId={8453}
      toAddress="0xRecipient..."
      amount="100.00"
      onSuccess={(tx) => console.log('USDC sent:', tx.transactionHash)}
    />
  );
}

sendTransaction API​

如需完全的程序化控制，请使用 engine client 的 sendTransaction 方法。

import { useOneClient, CHAIN_IDS } from '@one_deploy/sdk';

function ProgrammaticSend() {
  const { engineClient } = useOneClient();

  const handleSend = async () => {
    const tx = await engineClient.sendTransaction({
      fromAddress: '0xYourWallet...',
      toAddress: '0xRecipient...',
      chainId: CHAIN_IDS.BASE,
      value: '0.5',
      currency: 'ETH',
    });

    console.log('Hash:', tx.transactionHash);
    console.log('Status:', tx.status);
    console.log('Explorer:', tx.explorerUrl);
  };

  return <button onClick={handleSend}>Send 0.5 ETH</button>;
}

发送 ERC-20 代币​

const tx = await engineClient.sendTransaction({
  fromAddress: '0xYourWallet...',
  toAddress: '0xRecipient...',
  chainId: CHAIN_IDS.BASE,
  value: '100',
  currency: 'USDC',
  contractAddress: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
});

EngineTransactionRequest 类型​

interface EngineTransactionRequest {
  /** 发送方钱包地址。 */
  fromAddress: string;

  /** 接收方钱包地址。 */
  toAddress: string;

  /** 交易的链 ID。 */
  chainId: number;

  /** 发送金额，以十进制字符串表示（人类可读格式，非 wei）。 */
  value: string;

  /** 代币符号（如 'ETH'、'USDC'）。 */
  currency: string;

  /** ERC-20 合约地址。非原生代币时必填。 */
  contractAddress?: string;

  /** 高级交易的可选原始 calldata。 */
  data?: string;

  /** 可选的 Gas 限制覆盖。 */
  gasLimit?: string;

  /** 附加到交易的可选备注。 */
  memo?: string;
}

交易按钮​

SDK 提供了用于常见交易操作的预构建按钮组件。

OneTransactionButton​

一个通用按钮，点击时执行交易请求。

import { OneTransactionButton } from '@one_deploy/sdk';
import type { EngineTransactionRequest } from '@one_deploy/sdk';

function TransactionButtonExample() {
  const txRequest: EngineTransactionRequest = {
    fromAddress: '0xYourWallet...',
    toAddress: '0xRecipient...',
    chainId: 8453,
    value: '0.1',
    currency: 'ETH',
  };

  return (
    <OneTransactionButton
      transaction={txRequest}
      label="Send 0.1 ETH"
      onSuccess={(tx) => console.log('Done:', tx.transactionHash)}
      onError={(err) => console.error('Failed:', err.message)}
    />
  );
}

OneSendETHButton​

用于发送 ETH 的预配置按钮。

import { OneSendETHButton } from '@one_deploy/sdk';

function SendETHButton() {
  return (
    <OneSendETHButton
      fromAddress="0xYourWallet..."
      toAddress="0xRecipient..."
      amount="0.05"
      chainId={8453}
      onSuccess={(tx) => console.log('ETH sent:', tx.transactionHash)}
    />
  );
}

OneApproveButton​

发送 ERC-20 代币授权交易的按钮。

import { OneApproveButton, CHAIN_IDS } from '@one_deploy/sdk';

function ApproveUSDC() {
  return (
    <OneApproveButton
      ownerAddress="0xYourWallet..."
      spenderAddress="0xSpenderContract..."
      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      amount="1000"
      chainId={CHAIN_IDS.BASE}
      label="Approve USDC"
      onSuccess={(tx) => console.log('Approved:', tx.transactionHash)}
      onError={(err) => console.error('Approval failed:', err.message)}
    />
  );
}

完整发送流程示例​

组合连接按钮、余额显示和发送 widget，实现完整的发送流程。

import { useState } from 'react';
import {
  OneConnectButton,
  OneWalletBalance,
  OneSendWidget,
  CHAIN_IDS,
} from '@one_deploy/sdk';
import type { ConnectedWallet } from '@one_deploy/sdk';

function SendFlow() {
  const [wallet, setWallet] = useState<ConnectedWallet | null>(null);

  if (!wallet) {
    return <OneConnectButton onConnect={setWallet} />;
  }

  return (
    <div>
      <OneWalletBalance
        walletAddress={wallet.address}
        chains={[CHAIN_IDS.BASE]}
      />
      <OneSendWidget
        fromAddress={wallet.address}
        chainId={CHAIN_IDS.BASE}
        onSuccess={(tx) => {
          console.log('Transaction confirmed:', tx.transactionHash);
        }}
      />
    </div>
  );
}

下一步​