<LinkTransfer />

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

前提条件

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

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

リンク送付のリンクを作成する

有効期限付きのリンクを生成し、そのリンクを通じてトークンを送金します。

まず、送付用のURLを生成するために、makeURL関数を作成します。

import { LinkTransferResponse } from "@prex0/uikit/link-transfer"

export const makeURL = (linkTransferResponse: LinkTransferResponse) => {
  return `${window.location.origin}/receive?id=${encodeURIComponent(linkTransferResponse.id)}&s=${encodeURIComponent(linkTransferResponse.secret)}`
}

次に送付フォームを作成します。

import {
  LinkTransfer,
  LinkTransferAmountInput,
  LinkTransferButton,
  LinkTransferError,
  LinkTransferTokenSelector,
  LinkTransferShare,
} from '@prex0/uikit/link-transfer';
import { cn, pressable, text } from '@prex0/uikit/styles';
import { useState } from 'react';
import { makeURL } from './path/to/makeURL';

export const SendForm = ({token}: {token: Address}) => {
  const [isSuccess, setIsSuccess] = useState(false);

  return (
    <div>
      <LinkTransfer className="mt-4" token={token} amount='0' onSuccess={() => setIsSuccess(true)}>
        <div className='flex justify-end'>
          <LinkTransferTokenSelector />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Amount</label>
          <LinkTransferAmountInput
            className="w-full p-2 rounded-lg mt-1"
            isMaxButton
          />
        </div>
        <LinkTransferError />
        {
          isSuccess ? (
            <LinkTransferShare makeURL={makeURL} className='px-3'>
              <button className={cn(pressable.inverse, text.label1, 'rounded-lg w-full h-10')}>Share</button>
            </LinkTransferShare>  
          ):(
            <LinkTransferButton />
          )
        }
      </LinkTransfer>
    </div>
  );
};

２次元コードでの表示

<LinkTransferCode /> を使用することで、送付リンクの2次元コードを表示することができます。

import {
  LinkTransfer,
  LinkTransferAmountInput,
  LinkTransferButton,
  LinkTransferError,
  LinkTransferTokenSelector,
  LinkTransferCode,
} from '@prex0/uikit/link-transfer';
import { makeURL } from './path/to/makeURL';

export const SendForm = ({token}: {token: Address}) => {
  const [isSuccess, setIsSuccess] = useState(false);

  return (
    <div>
      <LinkTransfer className="mt-4" token={token} amount='0' onSuccess={() => setIsSuccess(true)}>
        <div className='flex justify-end'>
          <LinkTransferTokenSelector />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Amount</label>
          <LinkTransferAmountInput
            className="w-full p-2 rounded-lg mt-1"
            isMaxButton
          />
        </div>
        <LinkTransferError />
        {
          isSuccess ? (
            <LinkTransferCode makeURL={makeURL} />
          ):(
            <LinkTransferButton />
          )
        }
      </LinkTransfer>
    </div>
  );
};

数量フォームのカスタマイズ

<LinkTransferAmountForm />コンポーネントを使用して、数量フォームをカスタマイズすることができます。

<LinkTransferAmountForm>
  <div className="flex space-x-2">
    <div className="relative flex-grow">
      <AmountFormInput
        className="pr-16 pl-3 flex h-9 w-full rounded-lg border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
      />
      <AmountFormSymbol
        className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-muted-foreground"
      />
    </div>
    <AmountFormMaxButton className='w-14 p-1 border rounded-lg shadow-sm'/>
  </div>
</LinkTransferAmountForm>

リンク送付の受け取り

リンクによる送付で作成した、id, secretを利用して、トークンを受け取る。 makeURLで指定したURLで、以下のReceivePageが表示されるようにしてください。

import {
  LinkReceive,
  LinkReceiveAmount,
  LinkReceiveError,
  LinkReceiveSender,
  LinkReceiveStatus,
  LinkReceiveButton
} from '@prex0/uikit/link-receive'
import { UILabel1 } from '@prex0/uikit'
import { useCallback } from 'react'

export const ReceivePage = () => {
  const handleSuccess = useCallback(() => {
    // 受け取りが成功した時の処理
  }, [])

  return (
    <div className='p-4'>
      <div className='p-6 max-w-lg mx-auto space-y-4'>
        <LinkReceive onSuccess={handleSuccess}>
          <div className='flex items-center justify-between'>
            <UILabel1>Amount:</UILabel1>
            <LinkReceiveAmount className='text-lg'/>
          </div>
          <div className='flex items-center justify-between'>
            <UILabel1>Sender:</UILabel1>
            <LinkReceiveSender />
          </div>
          <div className='flex items-center justify-between'>
            <UILabel1>Status:</UILabel1>
            <LinkReceiveStatus />
          </div>
          <LinkReceiveError />
          <LinkReceiveButton />
        </LinkReceive>
      </div>
    </div>
  )
}