​
핵심 컴포넌트

​
<AnySpend>

토큰 간 교환 및 법정 화폐 온램프를 위한 주요 인터페이스 컴포넌트입니다.
기본 사용법
// 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}
/>;

​
속성

​
mode
'modal' | 'page'
default:"'modal'"
모달 오버레이 또는 전체 페이지로 표시
​
defaultActiveTab
'crypto' | 'fiat'
default:"'crypto'"
초기 결제 방법 탭
​
destinationTokenAddress
string
구매 모드의 대상 토큰 주소
​
destinationTokenChainId
number
대상 토큰의 체인 ID
​
recipientAddress
string
수령인 지갑 주소
​
hideTransactionHistoryButton
boolean
default:"false"
거래 내역 접근 숨김
​
loadOrder
string
ID로 특정 주문 로드

​
사용 예시

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

​
<AnySpendNFTButton>

내장된 결제 처리 기능을 갖춘 NFT 구매를 위한 간소화된 버튼 컴포넌트입니다.
NFT 구매 버튼
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

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

​
속성

​
nftContract
NFTContract
required
NFT 계약 구성 객체
​
recipientAddress
string
required
NFT를 받을 지갑 주소

​
NFTContract 인터페이스

타입 정의
interface NFTContract {
  chainId: number; // 블록체인 네트워크 ID
  contractAddress: string; // NFT 계약 주소
  price: string; // wei 단위 가격
  priceFormatted: string; // 사람이 읽을 수 있는 가격
  currency: {
    chainId: number;
    address: string; // 토큰 계약 주소 (기본 ETH의 경우 0x0)
    name: string;
    symbol: string;
    decimals: number;
    metadata: {
      logoURI: string;
    };
  };
  name: string; // NFT 컬렉션 이름
  description: string; // NFT 설명
  imageUrl: string; // 미리보기 이미지 URL
  tokenId: number | null; // 토큰 ID (ERC721의 경우 null, ERC1155의 경우 특정 ID)
  type: "erc721" | "erc1155"; // NFT 계약 유형
}

​
사용 예시

완전한 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: "독특한 디지털 아트워크",
  imageUrl: "https://example.com/nft-preview.png",
  tokenId: null,
  type: "erc721",
};

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

​
<AnySpendCustom>

게임, 스테이킹, 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("Custom action completed", txHash)}
/>;

​
속성

​
orderType
'custom'
required
주문 유형 식별자
​
dstChainId
number
required
대상 블록체인 네트워크
​
dstToken
Token
required
결제에 사용되는 토큰
​
dstAmount
string
required
wei/최소 단위의 금액
​
contractAddress
string
required
대상 스마트 계약 주소
​
encodedData
string
required
인코딩된 함수 호출 데이터
​
spenderAddress
string
선택적 토큰 지출 주소
​
metadata
object
추적을 위한 맞춤형 메타데이터
​
header
React.ComponentType
맞춤형 헤더 컴포넌트
​
onSuccess
(txHash?: string) => void
거래 해시와 함께 성공 콜백

​
사용 예시 - 스테이킹

스테이킹 통합
// 스테이킹 함수 호출 인코딩
const stakeAmount = "1000000000000000000"; // 1 토큰
const stakingCalldata = encodeFunctionData({
  abi: stakingABI,
  functionName: "stake",
  args: [stakeAmount, 30], // 30일
});

<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>토큰 스테이킹</h2>
      <p>기간: 30일</p>
      <p>예상 APY: 5.2%</p>
      {!isLoadingAnyspendPrice && <p>총 비용: ${anyspendPrice?.usdPrice}</p>}
    </div>
  )}
/>;

​
특수 컴포넌트

​
<AnySpendNFT>

추가 마켓플레이스 기능을 갖춘 향상된 NFT 컴포넌트입니다.
향상된 NFT 컴포넌트
// 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>

B3 토큰 스테이킹을 위한 사전 구성된 컴포넌트입니다.
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>

스핀 휠이나 복권 티켓 구매를 위한 게임 전용 컴포넌트입니다.
게임 스핀 휠
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendBuySpin.tsx
<AnySpendBuySpin gameContract="0x..." spinPrice="100000000000000000" recipientAddress="0x..." />

​
<AnySpendTournament>

토너먼트 참가비 결제 컴포넌트입니다.
토너먼트 참가
// https://github.com/b3-fun/b3/blob/main/packages/sdk/src/anyspend/react/components/AnySpendTournament.tsx
<AnySpendTournament tournamentId="tournament-123" entryFee="500000000000000000" recipientAddress="0x..." />

​
컴포넌트 스타일링

모든 컴포넌트는 CSS 변수를 사용하여 사용자 정의할 수 있는 기본 스타일을 제공합니다:
사용자 정의 스타일링
/* 기본 스타일 재정의 */
.anyspend-modal {
  --anyspend-primary: #6366f1;
  --anyspend-secondary: #f3f4f6;
  --anyspend-border-radius: 12px;
}

​
플랫폼 지원

컴포넌트React WebReact Native
AnySpend✅✅
AnySpendNFTButton✅✅
AnySpendCustom✅✅
AnySpendNFT✅✅
법정 화폐 온램프 기능✅❌

​
다음 단계

훅에 대해 알아보기

맞춤형 결제 흐름을 위한 React 훅 발견하기

예시 보기

실제 구현 예시 탐색하기

오류 처리

오류를 우아하게 처리하는 방법 배우기