<Swap />

Prex SDKを使用してERC20トークンの送付を行う方法を説明します。

前提条件

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

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

まず<Swap />コンポーネントで全体を囲みます。

シンプルなスワップUI

• <SwapAmountInput />コンポーネントを使用して、送金元と送金先のトークンと数量を指定します。
• <SwapButton />コンポーネントを使用して、スワップを実行します。
• <SwapToggleButton />コンポーネントを使用して、送金元と送金先のトークンを入れ替えます。

import { Swap, SwapAmountInput, SwapToggleButton, SwapButton, SwapMessage } from '@prex0/uikit/swap';

function SimpleSwap() {
  return (
    <div
      className="flex min-w-[300px] flex-col rounded-xl px-6 pt-6 pb-4"
    >
      <Swap>
        <SwapAmountInput
          label="Sell"
          type='from'
          />
        <div className="relative h-1">
          <SwapToggleButton className="-translate-x-2/4 -translate-y-2/4 absolute top-2/4 left-2/4 border-4 border-solid"/>
        </div>
        <SwapAmountInput
          label="Buy"
          type='to'/>
        <SwapButton />
        <SwapMessage />
      </Swap>
    </div>)
}

UIをカスタマイズしたい場合

• <SwapAmountSimpleInput />コンポーネントを使用して、トークンの数量を指定します。
• <SwapTokenSelector />コンポーネントを使用して、送金元と送金先のトークンを選択します。
• <SwapBalance />コンポーネントを使用して、送金元と送金先のトークンの残高を表示します。

import { Swap, SwapToggleButton, SwapButton, SwapMessage, SwapAmountSimpleInput, SwapTokenSelector, SwapBalance } from "@prex0/uikit/swap"
import { ArrowUpDown } from "lucide-react"

export const SwapForm = () => {
  return (
    <Swap className="w-full space-y-2 mi-w-md backdrop-blur-md shadow-2xl text-gray-800 border-gray-800/50 border-[1px]">
      <div className="flex flex-col gap-4">
        <div className="space-y-2">
          <div>
            You pay
          </div>
          <div className="h-10 flex items-center space-x-2">
            <SwapAmountSimpleInput type="from" amount="0" className="h-10 border-[1px]"/>
            <SwapTokenSelector type="from" className="h-10 border-[1px] cursor-pointer"/>
          </div>
          <div>
            <SwapBalance type="from" className="text-sm"/>
          </div>
        </div>

        <div className="flex justify-center items-center space-x-2">
          <SwapToggleButton className="h-6 w-6 p-1">
            <ArrowUpDown/>
          </SwapToggleButton>
        </div>

        <div className="space-y-2">
          <div>
            You receive
          </div>
          <div className="flex space-x-2">
            <SwapAmountSimpleInput type="to" amount="0" className="border-[1px]"/>
            <SwapTokenSelector type="to" className="h-10 border-[1px] cursor-pointer"/>
          </div>
          <div>
            <SwapBalance type="to" className="text-sm"/>
          </div>
        </div>
      </div>

      <div>
        <SwapMessage className="text-xs"/>
        <SwapButton className="w-full border"/>
      </div>
    </Swap>
  );
};

注意点

• Swapコンポーネントは、Arbitrumのみで利用可能です。