Componentes Principais
<AnySpend>
O componente de interface primário para trocas de token para token e rampas de entrada de fiat.
// 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
Endereço do token de destino para o modo de compra
Chain ID do token de destino
Endereço da carteira do destinatário
hideTransactionHistoryButton
Ocultar acesso ao histórico de transações
Carregar ordem específica pelo ID
Exemplos de Uso
Troca Básica de Tokens Rampa de Entrada Fiat-para-Crypto < AnySpend
mode = "page"
recipientAddress = { userWalletAddress }
/>
Um componente de botão simplificado para compras de NFT com tratamento de pagamento integrado.
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react" ;
< AnySpendNFTButton nftContract = { nftContractDetails } recipientAddress = "0x..." /> ;
Props
Objeto de configuração do contrato NFT
Endereço da carteira para receber o NFT
Interface NFTContract
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
Identificador do tipo de ordem
Rede blockchain de destino
Token sendo usado para pagamento
Quantidade em wei/unidade menor
Endereço do contrato inteligente de destino
Dados codificados da chamada de função
Endereço do gastador de token opcional
Metadados personalizados para rastreamento
Componente de cabeçalho personalizado
onSuccess
(txHash?: string) => void
Callback de sucesso com hash da transação
Exemplo de Uso - 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.
// 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.
// 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.
// 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 : 12 px ;
}
Componente React Web React Native AnySpend
✅ ✅ AnySpendNFTButton
✅ ✅ AnySpendCustom
✅ ✅ AnySpendNFT
✅ ✅ Recursos de rampa de entrada fiat ✅ ❌
Próximos Passos