Langsung ke konten utama

​
Komponen Inti

​
<AnySpend>

Komponen antarmuka utama untuk pertukaran token-ke-token dan onramp fiat.
Penggunaan Dasar
// 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
​
destinationTokenAddress
string
Alamat token tujuan untuk mode pembelian
​
destinationTokenChainId
number
Chain ID dari token tujuan
​
recipientAddress
string
Alamat dompet penerima
​
hideTransactionHistoryButton
boolean
default:"false"
Sembunyikan akses riwayat transaksi
​
loadOrder
string
Muat pesanan tertentu berdasarkan ID

​
Contoh Penggunaan

  • Penukaran Token Dasar
  • Onramp Fiat-ke-Kripto
<AnySpend
  mode="page"
  recipientAddress={userWalletAddress}
/>

​
<AnySpendNFTButton>

Komponen tombol yang disederhanakan untuk pembelian NFT dengan penanganan pembayaran terintegrasi.
Tombol Pembelian NFT
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

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

​
Props

​
nftContract
NFTContract
required
Objek konfigurasi kontrak NFT
​
recipientAddress
string
required
Alamat dompet untuk menerima NFT

​
Interface NFTContract

Definisi Tipe
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

Integrasi NFT Lengkap
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.
Interaksi Kontrak Kustom
// 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

​
orderType
'custom'
required
Pengenal tipe pesanan
​
dstChainId
number
required
Jaringan blockchain tujuan
​
dstToken
Token
required
Token yang digunakan untuk pembayaran
​
dstAmount
string
required
Jumlah dalam wei/satuan terkecil
​
contractAddress
string
required
Alamat kontrak pintar tujuan
​
encodedData
string
required
Data panggilan fungsi yang dikodekan
​
spenderAddress
string
Alamat pengeluar token opsional
​
metadata
object
Metadata kustom untuk pelacakan
​
header
React.ComponentType
Komponen header kustom
​
onSuccess
(txHash?: string) => void
Callback sukses dengan hash transaksi

​
Contoh Penggunaan - Staking

Integrasi 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.
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>

Komponen khusus game untuk membeli roda putar atau tiket lotere.
Roda Putar Game
// 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.
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:
Gaya Kustom
/* Override gaya bawaan */
.anyspend-modal {
  --anyspend-primary: #6366f1;
  --anyspend-secondary: #f3f4f6;
  --anyspend-border-radius: 12px;
}

​
Dukungan Platform

KomponenReact WebReact Native
AnySpend✅✅
AnySpendNFTButton✅✅
AnySpendCustom✅✅
AnySpendNFT✅✅
Fitur onramp fiat✅❌

​
Langkah Selanjutnya

Pelajari tentang Hooks

Temukan React hooks untuk alur pembayaran kustom

Lihat Contoh

Telusuri contoh implementasi dunia nyata

Penanganan Kesalahan

Pelajari cara menangani kesalahan dengan anggun
⌘I