多くの有名なトークンはすでにサポートされていますが、場合によってはユーザーがカスタムトークンへスワップできるようにしたいこともあります。
この例では、Web SDKを使って2ステップでその方法をご紹介します。
インテグレーション
オンランプとカスタムトークンへのスワップを組み込むには、以下の手順に従ってください。
オンランプが成功した後に状態を更新する
オンランプが成功したら、onOrderSuccessful
コールバックを使ってアプリの状態を更新できます。
import { useState } from 'react'
import { useAddFundsModal } from '@0xsequence/checkout'
import { useAccount } from 'wagmi'
export const OnRampAndSwap = () => {
const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
const { address: smartWalletAddress } = useAccount()
const [canSwap, setCanSwap] = useState(true)
const onTriggerAddFunds = () => {
if (smartWalletAddress) {
toggleAddFunds({
walletAddress: smartWalletAddress,
onOrderSuccessful(data) {
console.log('Order successful', data)
setCanSwap(true)
},
})
}
}
return (
<>
<button onClick={onTriggerAddFunds}>On Ramp</button>
</>
)
}
Smart Swapsでカスタムトークンにスワップする
オンランプが完了したら、useSwapModal
フックを使って購入したトークンをカスタムトークンにスワップできます。
オンランプしたトークンがスマートウォレットで利用可能になるまで数分(1〜3分)かかるため、スワップモーダルを開く前に残高を確認してください。
サポートされている支払いトークンの残高が十分にあれば、モーダルで支払いオプションとして表示されます。支払いトークンを指定する必要はありません。
カスタムトークンに十分な流動性が、スワップを実行するチェーン上にあることを確認してください。
import { useState } from 'react'
import { SwapModalSettings, useAddFundsModal, useSwapModal } from '@0xsequence/checkout'
import { useAccount } from 'wagmi'
export const OnRampAndSwap = () => {
const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
const { openSwapModal } = useSwapModal()
const { address: smartWalletAddress, chainId } = useAccount()
const [canSwap, setCanSwap] = useState(true)
const toTokenAmount = '10000000000' // amount in wei
const toTokenAddress = '0x...' // custom token address
const onTriggerAddFunds = () => {
if (smartWalletAddress) {
toggleAddFunds({
walletAddress: smartWalletAddress,
onOrderSuccessful(data) {
console.log('Order successful', data)
setCanSwap(true)
},
})
}
}
const onSwap = () => {
const swapModalSettings: SwapModalSettings = {
onSuccess: () => {
console.log('Swap successful')
},
chainId,
toTokenAddress,
toTokenAmount,
title: `Buy our custom token`,
description: 'Choose your payment method'
}
openSwapModal(swapModalSettings)
}
return (
<>
{canSwap ? <button onClick={onSwap}>Swap</button> : <button onClick={onTriggerAddFunds}>On Ramp</button>}
</>
)
}
おめでとうございます!Web SDKを使ってオンランプし、カスタムトークンへスワップする方法を学びました。