​
核心组件

​
<AnySpend>

用于代币到代币交换和法币通道的主要界面组件。
基本用法
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpend.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

<AnySpend
  mode="modal"
  defaultActiveTab="crypto"
  destinationTokenAddress="0x..."
  destinationTokenChainId={8333}
  recipientAddress="0x..."
  hideTransactionHistoryButton={false}
/>;

​
属性

​
mode
'modal' | 'page'
default:"'modal'"
以模态覆盖或全页显示
​
defaultActiveTab
'crypto' | 'fiat'
default:"'crypto'"
初始支付方式标签页
​
destinationTokenAddress
string
购买模式的目标代币地址
​
destinationTokenChainId
number
目标代币的链 ID
​
recipientAddress
string
接收者钱包地址
​
hideTransactionHistoryButton
boolean
default:"false"
隐藏交易历史访问按钮
​
loadOrder
string
通过 ID 加载特定订单

​
使用示例

<AnySpend
  mode="page"
  recipientAddress={userWalletAddress}
/>

​
<AnySpendNFTButton>

具有内置支付处理的简化 NFT 购买按钮组件。
NFT 购买按钮
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

<AnySpendNFTButton nftContract={nftContractDetails} recipientAddress="0x..." />;

​
属性

​
nftContract
NFTContract
required
NFT 合约配置对象
​
recipientAddress
string
required
接收 NFT 的钱包地址

​
NFTContract 接口

类型定义
interface NFTContract {
  chainId: number; // 区块链网络 ID
  contractAddress: string; // NFT 合约地址
  price: string; // 价格，以 wei 计
  priceFormatted: string; // 人类可读的价格
  currency: {
    chainId: number;
    address: string; // 代币合约地址（对于原生 ETH 为 0x0）
    name: string;
    symbol: string;
    decimals: number;
    metadata: {
      logoURI: string;
    };
  };
  name: string; // NFT 集合名称
  description: string; // NFT 描述
  imageUrl: string; // 预览图片 URL
  tokenId: number | null; // 代币 ID（对于 ERC721 为 null，对于 ERC1155 为特定 ID）
  type: "erc721" | "erc1155"; // NFT 合约类型
}

​
使用示例

完整 NFT 集成
const coolNFT = {
  chainId: 8333,
  contractAddress: "0x9c275ff1634519E9B5449ec79cd939B5F900564d",
  price: "500000000000000000", // 0.5 ETH
  priceFormatted: "0.5",
  currency: {
    chainId: 8333,
    address: "0x0000000000000000000000000000000000000000",
    name: "Ether",
    symbol: "ETH",
    decimals: 18,
    metadata: {
      logoURI: "https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628",
    },
  },
  name: "Cool Art Collection",
  description: "独特的数字艺术作品",
  imageUrl: "https://example.com/nft-preview.png",
  tokenId: null,
  type: "erc721",
};

<AnySpendNFTButton nftContract={coolNFT} recipientAddress={userAddress} />;

​
<AnySpendCustom>

用于自定义智能合约交互的最灵活组件，包括游戏、质押和 DeFi 操作。
自定义合约交互
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendCustom.tsx
import { AnySpendCustom } from "@b3dotfun/sdk/anyspend/react";

<AnySpendCustom
  orderType="custom"
  dstChainId={8333}
  dstToken={tokenDetails}
  dstAmount="1000000000000000000"
  contractAddress="0x..."
  encodedData="0x..."
  spenderAddress="0x..."
  metadata={customMetadata}
  header={CustomHeaderComponent}
  onSuccess={txHash => console.log("自定义操作完成", txHash)}
/>;

​
属性

​
orderType
'custom'
required
订单类型标识符
​
dstChainId
number
required
目标区块链网络
​
dstToken
Token
required
用于支付的代币
​
dstAmount
string
required
金额，以 wei/最小单位计
​
contractAddress
string
required
目标智能合约地址
​
encodedData
string
required
编码的函数调用数据
​
spenderAddress
string
可选的代币支出地址
​
metadata
object
用于跟踪的自定义元数据
​
header
React.ComponentType
自定义头部组件
​
onSuccess
(txHash?: string) => void
成功回调，带有交易哈希

​
使用示例 - 质押

质押集成
// 编码质押函数调用
const stakeAmount = "1000000000000000000"; // 1 代币
const stakingCalldata = encodeFunctionData({
  abi: stakingABI,
  functionName: "stake",
  args: [stakeAmount, 30], // 30 天
});

<AnySpendCustom
  orderType="custom"
  dstChainId={8333}
  dstToken={stakingToken}
  dstAmount={stakeAmount}
  contractAddress="0xStakingContract..."
  encodedData={stakingCalldata}
  metadata={{
    action: "stake",
    duration: 30,
    expectedRewards: "5.2%",
  }}
  header={({ anyspendPrice, isLoadingAnyspendPrice }) => (
    <div className="staking-header">
      <h2>质押代币</h2>
      <p>期限：30 天</p>
      <p>预期 APY：5.2%</p>
      {!isLoadingAnyspendPrice && <p>总成本：${anyspendPrice?.usdPrice}</p>}
    </div>
  )}
/>;

​
专用组件

​
<AnySpendNFT>

具有额外市场功能的增强型 NFT 组件。
增强型 NFT 组件
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendNFT.tsx
<AnySpendNFT nftContract={nftDetails} recipientAddress="0x..." showMetadata={true} showPriceHistory={true} />

​
<AnySpendStakeB3>

为 B3 代币质押预配置的组件。
B3 质押
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendStakeB3.tsx
<AnySpendStakeB3 stakeAmount="1000000000000000000" stakingDuration={30} recipientAddress="0x..." />

​
<AnySpendBuySpin>

专为购买转盘或彩票的游戏特定组件。
游戏转盘
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendBuySpin.tsx
<AnySpendBuySpin gameContract="0x..." spinPrice="100000000000000000" recipientAddress="0x..." />

​
<AnySpendTournament>

比赛入场费支付组件。
比赛入场
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendTournament.tsx
<AnySpendTournament tournamentId="tournament-123" entryFee="500000000000000000" recipientAddress="0x..." />

​
组件样式

所有组件都带有默认样式，可以使用 CSS 变量进行自定义：
自定义样式
/* 覆盖默认样式 */
.anyspend-modal {
  --anyspend-primary: #6366f1;
  --anyspend-secondary: #f3f4f6;
  --anyspend-border-radius: 12px;
}

​
平台支持

组件React WebReact Native
AnySpend✅✅
AnySpendNFTButton✅✅
AnySpendCustom✅✅
AnySpendNFT✅✅
法币通道功能✅❌

​
下一步

了解 Hooks

探索用于自定义支付流程的 React 钩子

查看示例

浏览现实世界的实现示例

错误处理

了解如何优雅地处理错误