<DistributionSubmit />

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

前提条件

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

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

二次元コードを作成する

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

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

import { DistributionSubmitResponse } from "@prex0/uikit/distribute"

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

次に二次元コードを生成するフォームを作ります。 初期デポジット量、一度に受け取ることのできる量、クールタイム、アドレスごとの最大配布量を設定します。

import {
  DistributionSubmit,
  DistributionSubmitNameInput,
  DistributionSubmitAmountInput,
  DistributionSubmitAmountPerWithdrawalInput,
  DistributionSubmitButton,
  DistributionSubmitCode,
  DistributionSubmitError,
  DistributionSubmitLocationInput,
  DistributionSubmitExpirationInput,
  DistributionSubmitResponse,
  DistributionSubmitCoolTimeInput,
  DistributionSubmitMaxAmountPerAddressInput,
  DistributionSubmitRadiusInput,
} from '@prex0/uikit/distribute'
import { makeURL } from './path/to/makeURL';

export const SubmitForm = ({token}: {token: Address}) => {
  return (
    <div className='max-w-md mx-auto p-4'>
      <h1 className="text-2xl font-bold mb-4">配布設定</h1>
      <DistributionSubmit token={ERC20_ADDRESS}>
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700">名前</label>
          <DistributionSubmitNameInput className="p-1 w-full rounded-lg border-gray border" />
        </div>
        <div className='flex flex-row gap-2 mb-4'>
          <div className="flex-1">
            <label className="block text-sm font-medium text-gray-700">有効期限 (1日)</label>
            <DistributionSubmitExpirationInput duration="1 days" className='mt-1 h-10' />
          </div>
          <div className="flex-1">
            <label className="block text-sm font-medium text-gray-700">有効期限 (7日)</label>
            <DistributionSubmitExpirationInput duration="7 days" className='mt-1 h-10' />
          </div>
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700">配布量</label>
          <DistributionSubmitAmountInput className="mt-1" />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700">引き出しごとの配布量</label>
          <DistributionSubmitAmountPerWithdrawalInput className="mt-1" />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700">クールタイム</label>
          <div className='flex flex-row gap-2 mb-4'>
            <div className="flex-1">
              <DistributionSubmitCoolTimeInput duration="1 hours" className="mt-1" />
              </div>
            <div className="flex-1">
              <DistributionSubmitCoolTimeInput duration="1 days" className="mt-1" />
            </div>
          </div>
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700">アドレスごとの最大配布量</label>
          <DistributionSubmitMaxAmountPerAddressInput className="mt-1" />
        </div>
        <DistributionSubmitError className="mb-4" />
        <DistributionSubmitButton className="w-full bg-blue-500 text-white py-2" text="送信" />
        <DistributionSubmitCode makeURL={makeURL} className="mt-4" showDownloadButton/>
      </DistributionSubmit>
    </div>
  );
};

二次元コードを表示する

<DistributionSubmitCode />コンポーネントを使い、二次元コードを表示します。 showDownloadButtonオプションをつけると、二次元コードをダウンロードするボタンが表示されます。

  <DistributionSubmitCode makeURL={makeURL} showDownloadButton/>

位置情報の制約をつける

DistributionSubmitLocationInputコンポーネントを使い、配布画面を表示する地理上の位置を設定します。 DistributionSubmitRadiusInputコンポーネントを使うと、半径も設定できます。 ご利用にはGoogle Maps APIのキーが必要です。

  <div className='flex flex-row gap-2 mb-4'>
    <div className="flex-1">
      <label className="block text-sm font-medium text-gray-700">半径 (100)</label>
      <DistributionSubmitRadiusInput radius={100} className="mt-1 h-10" />
    </div>
    <div className="flex-1">
      <label className="block text-sm font-medium text-gray-700">半径 (200)</label>
      <DistributionSubmitRadiusInput radius={200} className="mt-1 h-10" />
    </div>
  </div>
  <div className="mb-4">
    <label className="block text-sm font-medium text-gray-700">位置情報</label>
    <DistributionSubmitLocationInput googleApiKey={GOOGLE_MAP_KEY} className="mt-1" />
  </div>

受け取り画面を表示する

import {
  DistributionReceive,
  DistributionReceiveName,
  DistributionReceiveAmount,
  DistributionReceiveMessage,
  DistributionReceiveButton,
} from '@prex0/uikit/distribute'
import { useCallback } from 'react'

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

  return (
    <DistributionReceive onSuccess={handleSuccess}>
      <DistributionReceiveName />
      <DistributionReceiveAmount />
      <DistributionReceiveMessage />
      <DistributionReceiveButton/>
    </DistributionReceive>
  )
}

位置情報を確認する

配布リクエストに位置情報の制約をつけている場合は、<DistributionReceiveCheckLocation />コンポーネントを使い、位置情報を確認します。

    <DistributionReceive>
      <DistributionReceiveName />
      <DistributionReceiveCheckLocation>
        <DistributionReceiveAmount />
        <DistributionReceiveMessage />
        <DistributionReceiveButton/>
      </DistributionReceiveCheckLocation>
    </DistributionReceive>