​
Componentes Principales

​
<AnySpend>

El componente de interfaz principal para intercambios de token a token y rampas de entrada de fiat.
Uso Básico
// 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'"
Mostrar como superposición modal o página completa
​
defaultActiveTab
'crypto' | 'fiat'
default:"'crypto'"
Pestaña de método de pago inicial
​
destinationTokenAddress
string
Dirección del token de destino para el modo de compra
​
destinationTokenChainId
number
Chain ID del token de destino
​
recipientAddress
string
Dirección de la cartera del destinatario
​
hideTransactionHistoryButton
boolean
default:"false"
Ocultar acceso al historial de transacciones
​
loadOrder
string
Cargar orden específica por ID

​
Ejemplos de Uso

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

​
<AnySpendNFTButton>

Un componente de botón simplificado para compras de NFT con manejo de pago integrado.
Botón de Compra de NFT
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

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

​
Props

​
nftContract
NFTContract
required
Objeto de configuración del contrato NFT
​
recipientAddress
string
required
Dirección de la cartera para recibir el NFT

​
Interfaz NFTContract

Definición de Tipo
interface NFTContract {
  chainId: number; // ID de la red blockchain
  contractAddress: string; // Dirección del contrato NFT
  price: string; // Precio en wei
  priceFormatted: string; // Precio legible por humanos
  currency: {
    chainId: number;
    address: string; // Contrato de token (0x0 para ETH nativo)
    name: string;
    symbol: string;
    decimals: number;
    metadata: {
      logoURI: string;
    };
  };
  name: string; // Nombre de la colección NFT
  description: string; // Descripción del NFT
  imageUrl: string; // URL de la imagen de vista previa
  tokenId: number | null; // ID del token (null para ERC721, ID específico para ERC1155)
  type: "erc721" | "erc1155"; // Tipo de contrato NFT
}

​
Ejemplo de Uso

Integración Completa de 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: "Arte digital único",
  imageUrl: "https://example.com/nft-preview.png",
  tokenId: null,
  type: "erc721",
};

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

​
<AnySpendCustom>

El componente más flexible para interacciones de contratos inteligentes personalizadas, incluyendo juegos, staking y operaciones de DeFi.
Interacción de Contrato Personalizado
// 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("Acción personalizada completada", txHash)}
/>;

​
Props

​
orderType
'custom'
required
Identificador del tipo de orden
​
dstChainId
number
required
Red blockchain de destino
​
dstToken
Token
required
Token utilizado para el pago
​
dstAmount
string
required
Cantidad en wei/unidad más pequeña
​
contractAddress
string
required
Dirección del contrato inteligente de destino
​
encodedData
string
required
Datos codificados de la llamada a la función
​
spenderAddress
string
Dirección del gastador del token opcional
​
metadata
object
Metadatos personalizados para seguimiento
​
header
React.ComponentType
Componente de encabezado personalizado
​
onSuccess
(txHash?: string) => void
Callback de éxito con hash de la transacción

​
Ejemplo de Uso - Staking

Integración de Staking
// Codificar llamada a función de staking
const stakeAmount = "1000000000000000000"; // 1 token
const stakingCalldata = encodeFunctionData({
  abi: stakingABI,
  functionName: "stake",
  args: [stakeAmount, 30], // 30 días
});

<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>Duración: 30 días</p>
      <p>APY Esperado: 5.2%</p>
      {!isLoadingAnyspendPrice && <p>Costo Total: ${anyspendPrice?.usdPrice}</p>}
    </div>
  )}
/>;

​
Componentes Especializados

​
<AnySpendNFT>

Componente NFT mejorado con características adicionales del mercado.
Componente NFT Mejorado
// 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>

Componente preconfigurado para staking de tokens B3.
Staking de 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>

Componente específico para juegos para la compra de ruletas o boletos de lotería.
Ruleta de Juegos
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendBuySpin.tsx
<AnySpendBuySpin gameContract="0x..." spinPrice="100000000000000000" recipientAddress="0x..." />

​
<AnySpendTournament>

Componente de pago de entrada a torneos.
Entrada al Torneo
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendTournament.tsx
<AnySpendTournament tournamentId="tournament-123" entryFee="500000000000000000" recipientAddress="0x..." />

​
Estilización de Componentes

Todos los componentes vienen con un estilo predeterminado que se puede personalizar usando variables CSS:
Estilización Personalizada
/* Sobrescribir estilos predeterminados */
.anyspend-modal {
  --anyspend-primary: #6366f1;
  --anyspend-secondary: #f3f4f6;
  --anyspend-border-radius: 12px;
}

​
Soporte de Plataforma

ComponenteReact WebReact Native
AnySpend✅✅
AnySpendNFTButton✅✅
AnySpendCustom✅✅
AnySpendNFT✅✅
Características de rampa de entrada fiat✅❌

​
Próximos Pasos

Aprende sobre Hooks

Descubre hooks de React para flujos de pago personalizados

Ver Ejemplos

Explora ejemplos de implementación del mundo real

Manejo de Errores

Aprende cómo manejar errores de manera elegante