Smart Swapsの強みは、ユーザーが保有する通貨をインテリジェントに検出し、Sequenceウォレットを利用している場合は複数の取引をまとめてUXを簡素化できる点です。これにより、approveやtransferなどの取引を個別に行う必要がなくなります。

カスタムトークンでSmart Swapsを利用する場合は、サポートされているDEX（例：Uniswap）上で十分な流動性（推奨：USDC、USDT、ETH）を確保してください。

スワップで対応しているチェーンは以下の通りです：

  • Ethereum（メインネット）
  • Ethereum（Sepolia）
  • Arbitrum
  • Avalanche
  • Base
  • Blast
  • BSC
  • Optimism
  • Polygon

サポートしている流動性プールプロバイダーの例：

UniSwap SushiSwap Pancake Swap Curve Balancer Bancor Synapse Solidly

​
インストールとセットアップ

Web SDKでスワップ機能を統合するには、以下の手順に従ってください。

1

@0xsequence/checkout ライブラリをインストールする

npm install @0xsequence/checkout
# or
pnpm install @0xsequence/checkout
# or
yarn add @0xsequence/checkout
2

アプリ内で `SequenceConnect` プロバイダーの下に `SequenceCheckoutProvider` を配置する：

import { SequenceCheckoutProvider } from '@0xsequence/checkout'
import { SequenceConnect } from '@0xsequence/connect'
import { config } from './config'

const App = () => {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
        <Page />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  )
}
3

スワップの依存関係とロジックをインポートする

  • toTokenAddress: 交換後にユーザーが受け取るトークンのアドレスです。
  • toTokenAmount: 交換後にユーザーが受け取るトークンの数量です。
  • postSwapTransactions：スワップ後にスワップしたトークンで実行する追加取引の配列（オプション）。
  • title：モーダルのタイトル。
  • description：スワップや支払いプロセスの説明。
  • chainId：ターゲット通貨のチェーンID。
  • onSuccess：スワップが成功した際に呼ばれるコールバック関数。
import { useSwapModal, type SwapModalSettings } from '@0xsequence/checkout'

const MyComponent = () => {
  const { openSwapModal } = useSwapModal()

  const onClick = () => {
    const chainId = 137
    const toTokenAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
    const toTokenAmount = '20000'

    const contractAbiInterface = new ethers.Interface(['function demo()']) // Optionally, replace with your contract's abi interface

    const data = contractAbiInterface.encodeFunctionData('demo', []) as `0x${string}` // Optionally, replace 'demo' with the function you want to call,

    const swapModalSettings: SwapModalSettings = {
      onSuccess: () => {
        console.log('swap successful!')
      },
      chainId,
      toTokenAddress,
      toTokenAmount,
      postSwapTransactions: [ // Optionally, replace with the transaction you would like to execute after the swap has taken place.
        {
          to: '0x37470dac8a0255141745906c972e414b1409b470',
          data
        }
      ],
      title: 'Swap and Pay',
      description: 'Select a token in your wallet to swap to 0.2 USDC.'
    }

    openSwapModal(swapModalSettings)
  }

  return <button onClick={onClick}>Swap and Pay</button>
}

おめでとうございます！Web SDKでSmart Swapsの使い方を習得しました。