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

<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