<Transfer />

ERC20トークンの送付を行う方法を説明します。

前提条件

• ウォレットが作成されていること
• 使用するERC20トークンが管理画面で設定されていること

コンポーネントの利用方法

送付フォームを表示する

宛先とトークンが予め決まった状態のフォームを作成する。

import { useState } from 'react'
import { Address } from 'viem'
import {
  Transfer,
  TransferButton,
  TransferError,
  TransferAmountInput,
  TransferAmountButtonInput,
  TransferRecipient
} from '@prex0/uikit/transfer'

const TransferView = ({token, recipient}: {token: Address, recipient: Address}) => {
  const [succeeded, setSucceeded] = useState(false)

  return (
    <Transfer
      className="p-4"
      token={token}
      toAddress={recipient as Address}
      amount='0'
      onSuccess={() => setSucceeded(true)}
    >
      {succeeded ? (
        <div>送付成功</div>
      ):(
        <div>
          <div className="flex justify-center">
            <div className={cn(text.headline)}> <TransferRecipient /> {token}を送付します。</div>
          </div>
          <div className="flex justify-between space-x-1 text-sm">
            <TransferAmountButtonInput amount='1'/>
            <TransferAmountButtonInput amount='2'/>
            <TransferAmountButtonInput amount='3'/>
            <TransferAmountButtonInput amount='4'/>
          </div>
          <TransferError />
          <TransferButton />
        </div>
      )}
    </Transfer>
  )
}

export default TransferView

宛先を入力するフォームを追加する。

<TransferRecipientInput />を追加することで、宛先を入力するフォームを追加することができます。

import { useState } from 'react'
import { Address } from 'viem'
import {
  Transfer,
  TransferButton,
  TransferError,
  TransferAmountInput,
  TransferAmountButtonInput,
  TransferRecipientInput
} from '@prex0/uikit/transfer'

const TransferView = ({token}: {token: Address}) => {
  const [succeeded, setSucceeded] = useState(false)

  return (
    <Transfer
      className="p-4"
      token={token}
      amount='0'
      onSuccess={() => setSucceeded(true)}
    >
      {succeeded ? (
        <div>送付成功</div>
      ):(
        <div>
          <div className="flex justify-between space-x-1 text-sm">
            <TransferAmountButtonInput amount='1'/>
            <TransferAmountButtonInput amount='2'/>
            <TransferAmountButtonInput amount='3'/>
            <TransferAmountButtonInput amount='4'/>
          </div>
          <TransferRecipientInput />
          <TransferError />
          <TransferButton />
        </div>
      )}
    </Transfer>
  )
}

export default TransferView