wagmi와 함께 SDK 사용하기

createStable은 viem WalletClient를 허용하며, 이는 wagmi의 useWalletClient가 반환하는 것과 정확히 같습니다. 평소와 같이 wagmi를 통해 지갑을 연결한 다음, 지갑 클라이언트가 변경될 때마다 StableClient를 메모화합니다.

이 가이드는 wagmi v2 및 @tanstack/react-query를 가정합니다.

1. wagmi 구성

wagmi 구성에 Stable을 추가합니다. viem은 두 네트워크에 대한 체인 정의를 제공합니다.

import { http, createConfig } from "wagmi";
import { stable as stableMainnet, stableTestnet } from "viem/chains";
import { injected } from "wagmi/connectors";
 
export const wagmiConfig = createConfig({
  chains: [stableMainnet, stableTestnet],
  connectors: [injected()],
  transports: {
    [stableMainnet.id]: http(),
    [stableTestnet.id]: http(),
  },
});

WagmiConfig { chains: [988, 2201], connectors: [injected] }

2. `StableClient`를 반환하는 훅 빌드

현재 WalletClient에 대해 StableClient를 메모화합니다. 지갑 클라이언트 ID가 변경될 때 재생성합니다.

import { useMemo } from "react";
import { useWalletClient } from "wagmi";
import { createStable, Network, type StableClient } from "@stablechain/sdk";
 
export function useStable(network: Network = Network.Mainnet): StableClient | null {
  const { data: walletClient } = useWalletClient();
 
  return useMemo(() => {
    if (!walletClient) return null;
    return createStable({ network, walletClient });
  }, [walletClient, network]);
}

3. 컴포넌트에서 사용하기

import { useAccount, useChainId } from "wagmi";
import { Network } from "@stablechain/sdk";
import { useStable } from "./useStable";
 
export function PayButton() {
  const { address } = useAccount();
  const chainId = useChainId();
  const stable = useStable(Network.Mainnet);
 
  async function onClick() {
    if (!stable || !address) return;
    const { txHash } = await stable.transfer({
      from: address,
      to: "0xRecipient",
      amount: 1,
    });
    console.log("Sent:", txHash);
  }
 
  return (
    <button disabled={!stable} onClick={onClick}>
      Pay 1 USDT0 (chain {chainId})
    </button>
  );
}

Sent: 0x8f3a...2d41

4. React에서 브릿지 및 스왑하기

동일한 stable 인스턴스가 브릿지 및 스왑을 처리합니다. 이펙트 또는 useQuery에서 견적을 가져온 다음 클릭 시 실행합니다. StableQuoteError를 catch합니다. Stable에 대한 LI.FI의 DEX 범위는 여전히 제한적이며, 경로가 없는 쌍은 "No available quotes for the requested transfer"를 발생시킵니다.

const stable = useStable(Network.Mainnet);
 
const onSwap = async () => {
  if (!stable) return;
  const quote = await stable.quoteSwap({
    fromToken: "0x8a2B28364102Bea189D99A475C494330Ef2bDD0B",
    toToken: "0x779Ded0c9e1022225f8E0630b35a9b54bE713736",
    amount: 100,
    fromDecimals: 6,
  });
  const { txHash, toAmount } = await stable.swap({
    fromToken: quote.fromToken,
    toToken: "0x779Ded0c9e1022225f8E0630b35a9b54bE713736",
    amount: 100,
    fromDecimals: 6,
    quote,
  });
  console.log({ txHash, toAmount });
};

{ txHash: "0xabcd...", toAmount: 99.81 }

다음 권장 사항

SDK 참조: 모든 메서드, 구성 필드 및 오류 클래스.
viem과 함께 사용하기: 세 가지 서명 모드를 나란히 비교합니다.
SDK 퀵스타트: 테스트넷에서 첫 전송, 브릿지 및 스왑을 실행합니다.

1. wagmi 구성

2. StableClient를 반환하는 훅 빌드

3. 컴포넌트에서 사용하기

4. React에서 브릿지 및 스왑하기

다음 권장 사항

2. `StableClient`를 반환하는 훅 빌드