Komponen Inti
<AnySpend>
Komponen antarmuka utama untuk pertukaran token-ke-token dan onramp 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'"
Tampilkan sebagai overlay modal atau halaman penuh
defaultActiveTab
'crypto' | 'fiat'
default:"'crypto'"
Tab metode pembayaran awal
Alamat token tujuan untuk mode pembelian
Chain ID dari token tujuan
hideTransactionHistoryButton
Sembunyikan akses riwayat transaksi
Muat pesanan tertentu berdasarkan ID
Contoh Penggunaan
<AnySpend
mode="page"
recipientAddress={userWalletAddress}
/>
Komponen tombol yang disederhanakan untuk pembelian NFT dengan penanganan pembayaran terintegrasi.
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";
<AnySpendNFTButton nftContract={nftContractDetails} recipientAddress="0x..." />;
Props
Objek konfigurasi kontrak NFT
Alamat dompet untuk menerima NFT
Interface NFTContract
interface NFTContract {
chainId: number; // ID jaringan blockchain
contractAddress: string; // Alamat kontrak NFT
price: string; // Harga dalam wei
priceFormatted: string; // Harga yang mudah dibaca
currency: {
chainId: number;
address: string; // Alamat kontrak token (0x0 untuk ETH asli)
name: string;
symbol: string;
decimals: number;
metadata: {
logoURI: string;
};
};
name: string; // Nama koleksi NFT
description: string; // Deskripsi NFT
imageUrl: string; // URL gambar pratinjau
tokenId: number | null; // ID token (null untuk ERC721, ID spesifik untuk ERC1155)
type: "erc721" | "erc1155"; // Tipe kontrak NFT
}
Contoh Penggunaan
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: "Karya seni digital unik",
imageUrl: "https://example.com/nft-preview.png",
tokenId: null,
type: "erc721",
};
<AnySpendNFTButton nftContract={coolNFT} recipientAddress={userAddress} />;
<AnySpendCustom>
Komponen paling fleksibel untuk interaksi kontrak pintar khusus, termasuk gaming, staking, dan operasi DeFi.
// 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("Aksi kustom selesai", txHash)}
/>;
Props
Jaringan blockchain tujuan
Token yang digunakan untuk pembayaran
Jumlah dalam wei/satuan terkecil
Alamat kontrak pintar tujuan
Data panggilan fungsi yang dikodekan
Alamat pengeluar token opsional
Metadata kustom untuk pelacakan
onSuccess
(txHash?: string) => void
Callback sukses dengan hash transaksi
Contoh Penggunaan - Staking
// Enkode panggilan fungsi staking
const stakeAmount = "1000000000000000000"; // 1 token
const stakingCalldata = encodeFunctionData({
abi: stakingABI,
functionName: "stake",
args: [stakeAmount, 30], // 30 hari
});
<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 Token</h2>
<p>Durasi: 30 hari</p>
<p>APY yang Diharapkan: 5.2%</p>
{!isLoadingAnyspendPrice && <p>Total Biaya: ${anyspendPrice?.usdPrice}</p>}
</div>
)}
/>;
Komponen Khusus
<AnySpendNFT>
Komponen NFT yang ditingkatkan dengan fitur pasar tambahan.
Komponen NFT yang Ditingkatkan
// 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>
Komponen yang telah dikonfigurasi sebelumnya untuk staking token 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>
Komponen khusus game untuk membeli roda putar atau tiket lotere.
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendBuySpin.tsx
<AnySpendBuySpin gameContract="0x..." spinPrice="100000000000000000" recipientAddress="0x..." />
<AnySpendTournament>
Komponen pembayaran masuk turnamen.
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendTournament.tsx
<AnySpendTournament tournamentId="tournament-123" entryFee="500000000000000000" recipientAddress="0x..." />
Gaya Komponen
Semua komponen disertai dengan gaya bawaan yang dapat disesuaikan menggunakan variabel CSS:
/* Override gaya bawaan */
.anyspend-modal {
--anyspend-primary: #6366f1;
--anyspend-secondary: #f3f4f6;
--anyspend-border-radius: 12px;
}
Komponen | React Web | React Native |
---|
AnySpend | ✅ | ✅ |
AnySpendNFTButton | ✅ | ✅ |
AnySpendCustom | ✅ | ✅ |
AnySpendNFT | ✅ | ✅ |
Fitur onramp fiat | ✅ | ❌ |
Langkah Selanjutnya