Components

Core Components

`<AnySpend>`

The primary interface component for token-to-token exchanges and fiat onramps.

Basic Usage

// 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}
/>;

Props

mode

'modal' | 'page'

default:"'modal'"

Display as modal overlay or full page

defaultActiveTab

'crypto' | 'fiat'

default:"'crypto'"

Initial payment method tab

destinationTokenAddress

string

Target token address for buy mode

destinationTokenChainId

number

Chain ID of destination token

recipientAddress

string

Recipient wallet address

hideTransactionHistoryButton

boolean

default:"false"

Hide transaction history access

loadOrder

string

Load specific order by ID

Usage Examples

Basic Token Swap
Fiat-to-Crypto Onramp

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

`<AnySpendNFTButton>`

A streamlined button component for NFT purchases with built-in payment handling.

NFT Purchase Button

import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

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

Props

nftContract

NFTContract

required

NFT contract configuration object

recipientAddress

string

required

Wallet address to receive the NFT

NFTContract Interface

Type Definition

interface NFTContract {
  chainId: number; // Blockchain network ID
  contractAddress: string; // NFT contract address
  price: string; // Price in wei
  priceFormatted: string; // Human-readable price
  currency: {
    chainId: number;
    address: string; // Token contract (0x0 for native ETH)
    name: string;
    symbol: string;
    decimals: number;
    metadata: {
      logoURI: string;
    };
  };
  name: string; // NFT collection name
  description: string; // NFT description
  imageUrl: string; // Preview image URL
  tokenId: number | null; // Token ID (null for ERC721, specific ID for ERC1155)
  type: "erc721" | "erc1155"; // NFT contract type
}

Usage Example

Complete NFT Integration

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: "Unique digital artwork",
  imageUrl: "https://example.com/nft-preview.png",
  tokenId: null,
  type: "erc721",
};

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

`<AnySpendCustom>`

The most flexible component for custom smart contract interactions, including gaming, staking, and DeFi operations.

Custom Contract Interaction

// 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("Custom action completed", txHash)}
/>;

Props

orderType

'custom'

required

Order type identifier

dstChainId

number

required

Target blockchain network

dstToken

Token

required

Token being used for payment

dstAmount

string

required

Amount in wei/smallest unit

contractAddress

string

required

Target smart contract address

encodedData

string

required

Encoded function call data

spenderAddress

string

Optional token spender address

metadata

object

Custom metadata for tracking

header

React.ComponentType

Custom header component

onSuccess

(txHash?: string) => void

Success callback with transaction hash

Usage Example - Staking

Staking Integration

// Encode staking function call
const stakeAmount = "1000000000000000000"; // 1 token
const stakingCalldata = encodeFunctionData({
  abi: stakingABI,
  functionName: "stake",
  args: [stakeAmount, 30], // 30 days
});

<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>Stake Tokens</h2>
      <p>Duration: 30 days</p>
      <p>Expected APY: 5.2%</p>
      {!isLoadingAnyspendPrice && <p>Total Cost: ${anyspendPrice?.usdPrice}</p>}
    </div>
  )}
/>;

Specialized Components

`<AnySpendNFT>`

Enhanced NFT component with additional marketplace features.

Enhanced NFT Component

// 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>`

Pre-configured component for B3 token staking.

B3 Staking

// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendStakeB3.tsx
<AnySpendStakeB3 stakeAmount="1000000000000000000" stakingDuration={30} recipientAddress="0x..." />

`<AnySpendBuySpin>`

Gaming-specific component for purchasing spin wheels or lottery tickets.

Gaming Spin Wheel

// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendBuySpin.tsx
<AnySpendBuySpin gameContract="0x..." spinPrice="100000000000000000" recipientAddress="0x..." />

`<AnySpendTournament>`

Tournament entry payment component.

Tournament Entry

// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendTournament.tsx
<AnySpendTournament tournamentId="tournament-123" entryFee="500000000000000000" recipientAddress="0x..." />

Component Styling

All components come with default styling that can be customized using CSS variables:

Custom Styling

/* Override default styles */
.anyspend-modal {
  --anyspend-primary: #6366f1;
  --anyspend-secondary: #f3f4f6;
  --anyspend-border-radius: 12px;
}

Platform Support

Component	React Web	React Native
`AnySpend`	✅	✅
`AnySpendNFTButton`	✅	✅
`AnySpendCustom`	✅	✅
`AnySpendNFT`	✅	✅
Fiat onramp features	✅	❌

Next Steps

Learn about Hooks

Discover React hooks for custom payment flows

See Examples

Browse real-world implementation examples

Error Handling

Learn how to handle errors gracefully

Getting Started

React

REST API

Advanced

Core Components

`<AnySpend>`

Props

Usage Examples

`<AnySpendNFTButton>`

Props

NFTContract Interface

Usage Example

`<AnySpendCustom>`

Props

Usage Example - Staking

Specialized Components

`<AnySpendNFT>`

`<AnySpendStakeB3>`

`<AnySpendBuySpin>`

`<AnySpendTournament>`

Component Styling

Platform Support

Next Steps

Learn about Hooks

See Examples

Error Handling

Getting Started

React

REST API

Advanced

​Core Components

​<AnySpend>

​Props

​Usage Examples

​<AnySpendNFTButton>

​Props

​NFTContract Interface

​Usage Example

​<AnySpendCustom>

​Props

​Usage Example - Staking

​Specialized Components

​<AnySpendNFT>

​<AnySpendStakeB3>

​<AnySpendBuySpin>

​<AnySpendTournament>

​Component Styling

​Platform Support

​Next Steps

Learn about Hooks

See Examples

Error Handling

Core Components

`<AnySpend>`

Props

Usage Examples

`<AnySpendNFTButton>`

Props

NFTContract Interface

Usage Example

`<AnySpendCustom>`

Props

Usage Example - Staking

Specialized Components

`<AnySpendNFT>`

`<AnySpendStakeB3>`

`<AnySpendBuySpin>`

`<AnySpendTournament>`

Component Styling

Platform Support

Next Steps