Componentes Principais

<AnySpend>

O componente de interface primário para trocas de token para token e 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'"
Exibir como sobreposição modal ou página inteira
defaultActiveTab
'crypto' | 'fiat'
default:"'crypto'"
Aba de método de pagamento inicial
destinationTokenAddress
string
Endereço do token de destino para o modo de compra
destinationTokenChainId
number
Chain ID do token de destino
recipientAddress
string
Endereço da carteira do destinatário
hideTransactionHistoryButton
boolean
default:"false"
Ocultar acesso ao histórico de transações
loadOrder
string
Carregar ordem específica pelo ID

Exemplos de Uso

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

<AnySpendNFTButton>

Um componente de botão simplificado para compras de NFT com tratamento de pagamento integrado.
Botão de Compra de NFT
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

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

Props

nftContract
NFTContract
required
Objeto de configuração do contrato NFT
recipientAddress
string
required
Endereço da carteira para receber o NFT

Interface NFTContract

Definição de Tipo
interface NFTContract {
  chainId: number; // ID da rede Blockchain
  contractAddress: string; // Endereço do contrato NFT
  price: string; // Preço em wei
  priceFormatted: string; // Preço legível por humanos
  currency: {
    chainId: number;
    address: string; // Contrato do token (0x0 para ETH nativo)
    name: string;
    symbol: string;
    decimals: number;
    metadata: {
      logoURI: string;
    };
  };
  name: string; // Nome da coleção NFT
  description: string; // Descrição do NFT
  imageUrl: string; // URL da imagem de pré-visualização
  tokenId: number | null; // ID do Token (null para ERC721, ID específico para ERC1155)
  type: "erc721" | "erc1155"; // Tipo de contrato NFT
}

Exemplo de Uso

Integração 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 única",
  imageUrl: "https://example.com/nft-preview.png",
  tokenId: null,
  type: "erc721",
};

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

<AnySpendCustom>

O componente mais flexível para interações com contratos inteligentes personalizados, incluindo jogos, staking e operações de DeFi.
Interação com Contrato Customizado
// 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("Ação customizada concluída", txHash)}
/>;

Props

orderType
'custom'
required
Identificador do tipo de ordem
dstChainId
number
required
Rede blockchain de destino
dstToken
Token
required
Token sendo usado para pagamento
dstAmount
string
required
Quantidade em wei/unidade menor
contractAddress
string
required
Endereço do contrato inteligente de destino
encodedData
string
required
Dados codificados da chamada de função
spenderAddress
string
Endereço do gastador de token opcional
metadata
object
Metadados personalizados para rastreamento
header
React.ComponentType
Componente de cabeçalho personalizado
onSuccess
(txHash?: string) => void
Callback de sucesso com hash da transação

Exemplo de Uso - Staking

Integração de Staking
// Codificar chamada de função de staking
const stakeAmount = "1000000000000000000"; // 1 token
const stakingCalldata = encodeFunctionData({
  abi: stakingABI,
  functionName: "stake",
  args: [stakeAmount, 30], // 30 dias
});

<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 de Tokens</h2>
      <p>Duração: 30 dias</p>
      <p>APY Esperado: 5.2%</p>
      {!isLoadingAnyspendPrice && <p>Custo Total: ${anyspendPrice?.usdPrice}</p>}
    </div>
  )}
/>;

Componentes Especializados

<AnySpendNFT>

Componente NFT aprimorado com recursos adicionais de marketplace.
Componente NFT Aprimorado
// 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 pré-configurado para staking de tokens B3.
Staking 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 jogos para compra de rodas de giro ou bilhetes de loteria.
Roda de Giro para Jogos
// 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 pagamento de entrada em torneios.
Entrada de Torneio
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendTournament.tsx
<AnySpendTournament tournamentId="tournament-123" entryFee="500000000000000000" recipientAddress="0x..." />

Estilização de Componentes

Todos os componentes vêm com estilização padrão que pode ser personalizada usando variáveis CSS:
Estilização Personalizada
/* Sobrescrever estilos padrão */
.anyspend-modal {
  --anyspend-primary: #6366f1;
  --anyspend-secondary: #f3f4f6;
  --anyspend-border-radius: 12px;
}

Suporte à Plataforma

ComponenteReact WebReact Native
AnySpend
AnySpendNFTButton
AnySpendCustom
AnySpendNFT
Recursos de rampa de entrada fiat

Próximos Passos