接收加密货币

ONE SDK 提供了 OneReceiveWidget 组件，用于显示钱包收款地址和二维码，以及生成可分享内容和区块浏览器链接的实用工具。

OneReceiveWidget

一个完整的收款 UI，包含二维码、地址显示和复制到剪贴板功能。

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

function ReceivePage() {
  return (
    <OneReceiveWidget
      walletAddress="0x1234...abcd"
      chainId={CHAIN_IDS.BASE}
      token="ETH"
      onCopy={() => console.log('Address copied to clipboard')}
    />
  );
}

OneReceiveWidgetProps

interface OneReceiveWidgetProps {
  /** 要显示并编码到二维码中的钱包地址。 */
  walletAddress: string;

  /** 用于显示链特定信息的链 ID。默认为 CHAIN_IDS.BASE。 */
  chainId?: number;

  /** 与地址一起显示的代币符号（如 'ETH'、'USDC'）。 */
  token?: string;

  /** 编码到二维码中的请求金额（EIP-681 格式）。 */
  amount?: string;

  /** 地址被复制到剪贴板时触发的回调。 */
  onCopy?: () => void;

  /** 按下分享按钮时触发的回调。 */
  onShare?: (content: ShareContent) => void;

  /** 显示链名称标签。默认为 true。 */
  showChainBadge?: boolean;

  /** 显示区块浏览器链接。默认为 true。 */
  showExplorerLink?: boolean;

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

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

interface ShareContent {
  /** 用于分享的纯文本内容。 */
  text: string;

  /** 钱包地址。 */
  address: string;

  /** 完整的 EIP-681 支付 URI。 */
  paymentUri: string;

  /** 该地址的区块浏览器 URL。 */
  explorerUrl: string;
}

二维码生成

OneReceiveWidget 会自动从钱包地址生成二维码。当提供了 amount 和 token 时，二维码会编码一个 EIP-681 支付 URI。

基础地址二维码

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

function BasicReceive() {
  return (
    <OneReceiveWidget
      walletAddress="0x1234567890abcdef1234567890abcdef12345678"
    />
  );
}

二维码编码的是纯地址：ethereum:0x1234567890abcdef1234567890abcdef12345678

支付请求二维码

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

function PaymentRequest() {
  return (
    <OneReceiveWidget
      walletAddress="0x1234567890abcdef1234567890abcdef12345678"
      chainId={CHAIN_IDS.BASE}
      token="USDC"
      amount="50.00"
    />
  );
}

二维码编码的是 EIP-681 URI：ethereum:0x1234...@8453/transfer?address=0x1234...&uint256=50000000

generateShareContent 工具函数

generateShareContent 工具函数从钱包地址创建可分享的文本和 URI。此函数从 React Native 入口导出，可在移动端分享面板中使用。

import { generateShareContent } from '@one_deploy/sdk/react-native';
import type { ShareContent } from '@one_deploy/sdk';

async function shareAddress(walletAddress: string, chainId: number) {
  const content: ShareContent = generateShareContent({
    walletAddress,
    chainId,
    token: 'ETH',
    amount: '0.1',
  });

  console.log(content.text);
  // "Send 0.1 ETH to 0x1234...abcd on Base"

  console.log(content.paymentUri);
  // "ethereum:0x1234...abcd@8453?value=1e17"

  console.log(content.explorerUrl);
  // "https://basescan.org/address/0x1234...abcd"
}

函数签名

function generateShareContent(options: {
  walletAddress: string;
  chainId?: number;
  token?: string;
  amount?: string;
}): ShareContent;

getExplorerUrl 工具函数

返回给定地址或交易哈希的区块浏览器 URL。

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

// 地址 URL
const addressUrl = getExplorerUrl({
  type: 'address',
  value: '0x1234...abcd',
  chainId: CHAIN_IDS.BASE,
});
// "https://basescan.org/address/0x1234...abcd"

// 交易 URL
const txUrl = getExplorerUrl({
  type: 'tx',
  value: '0xabcdef...',
  chainId: CHAIN_IDS.ETHEREUM,
});
// "https://etherscan.io/tx/0xabcdef..."

// 代币 URL
const tokenUrl = getExplorerUrl({
  type: 'token',
  value: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
  chainId: CHAIN_IDS.BASE,
});
// "https://basescan.org/token/0x8335..."

函数签名

function getExplorerUrl(options: {
  type: 'address' | 'tx' | 'token';
  value: string;
  chainId: number;
}): string;

支持的浏览器

链	浏览器
Base	basescan.org
Ethereum	etherscan.io
Polygon	polygonscan.com
Arbitrum	arbiscan.io
Optimism	optimistic.etherscan.io

Web 使用示例

一个完整的收款页面，将 widget 与自定义操作结合使用。

import { useState } from 'react';
import {
  OneReceiveWidget,
  getExplorerUrl,
  CHAIN_IDS,
} from '@one_deploy/sdk';
import type { ShareContent } from '@one_deploy/sdk';

function ReceiveCrypto({ walletAddress }: { walletAddress: string }) {
  const [chainId, setChainId] = useState(CHAIN_IDS.BASE);
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleShare = (content: ShareContent) => {
    if (navigator.share) {
      navigator.share({
        title: 'My Wallet Address',
        text: content.text,
        url: content.explorerUrl,
      });
    }
  };

  return (
    <div>
      <select
        value={chainId}
        onChange={(e) => setChainId(Number(e.target.value))}
      >
        <option value={CHAIN_IDS.BASE}>Base</option>
        <option value={CHAIN_IDS.ETHEREUM}>Ethereum</option>
        <option value={CHAIN_IDS.POLYGON}>Polygon</option>
        <option value={CHAIN_IDS.ARBITRUM}>Arbitrum</option>
        <option value={CHAIN_IDS.OPTIMISM}>Optimism</option>
      </select>

      <OneReceiveWidget
        walletAddress={walletAddress}
        chainId={chainId}
        showChainBadge
        showExplorerLink
        onCopy={handleCopy}
        onShare={handleShare}
      />

      {copied && <p>Address copied!</p>}

      <a
        href={getExplorerUrl({
          type: 'address',
          value: walletAddress,
          chainId,
        })}
        target="_blank"
        rel="noopener noreferrer"
      >
        View on Explorer
      </a>
    </div>
  );
}

下一步

• 发送加密货币 -- 从钱包发送代币。
• 二维码扫描 -- 解析支付和 WalletConnect 二维码。
• 交易历史 -- 跟踪收款交易。