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
  isMainnet={true}
  mode="modal"
  defaultActiveTab="crypto"
  destinationTokenAddress="0x..."
  destinationTokenChainId={8333}
  recipientAddress="0x..."
  hideTransactionHistoryButton={false}
/>;

Props

isMainnet
boolean
default:"true"
Use mainnet or testnet environment
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

<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

ComponentReact WebReact Native
AnySpend
AnySpendNFTButton
AnySpendCustom
AnySpendNFT
Fiat onramp features

Next Steps