<PrexUIKitProvider />

利用方法

PrexUIKitProviderをコンポーネントのトップに置くことで、PrexUIKitのコンポーネントが利用可能になります。 tokensに設定したトークンを、送付や交換コンポーネントで使用できます。

import { PrexUIKitProvider } from "@prex0/uikit";
import { TOKEN_LIST } from "./constants";

export function App() {
  return (
    <PrexUIKitProvider
      chainId={/* 42161 or 421614 */}
      policyId={/* Policy ID from Prex Dashboard */}
      apiKey={/* API Key from Prex Dashboard */}
      tokens={TOKEN_LIST}
    >
      <MyComponent />
    </PrexUIKitProvider>
  );
}

constants.tsなどに、利用するトークンリストを定義します。

export const TOKEN_LIST = [
  {
    name: 'USDCoin',
    address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
    symbol: 'USDC',
    decimals: 6,
    precision: 2,
    image: 'icon URL',
    chainId: 42161,
  }
]

モックデータを使用する

dryRunをtrueに設定すると、すべてのAPIはトランザクションを発行せずにモックデータを返します。 ローカルでの開発では、DryRunモードを使用すると便利です。 DryRunモードでも、トークンリスト tokens は必要です。

import { PrexUIKitProvider } from "@prex0/uikit";
import { TOKEN_LIST } from "./constants";

export function App() {
  return (
    <PrexUIKitProvider
      chainId={/* 42161 or 421614 */}
      policyId={/* Policy ID from Prex Dashboard */}
      apiKey={/* API Key from Prex Dashboard */}
      tokens={TOKEN_LIST}
      dryRun={true} // <- DryRunモードを設定する
    >
      <MyComponent />
    </PrexUIKitProvider>
  );
}

ローカライズ

localizationを設定すると、UIコンポーネントで表示されるテキストをカスタマイズできます。

import { PrexUIKitProvider } from "@prex0/uikit";
import { TOKEN_LIST } from "./constants";
import { ja } from "./lang/ja";

export function App() {
  return (
    <PrexUIKitProvider
      chainId={/* 42161 or 421614 */}
      policyId={/* Policy ID from Prex Dashboard */}
      apiKey={/* API Key from Prex Dashboard */}
      tokens={TOKEN_LIST}
      localization={{
        defaultLocale: 'ja',
        variables: {
          "ja": ja
        }
      }}
    >
      <MyComponent />
    </PrexUIKitProvider>
  );
}

lang/ja.tsなどにローカライズデータを定義します。

export const ja = {
  approve: '承認する',
  transfer: '送付する',
  receive: '受け取る',
  tryAgain: 'もう一度試してください',
  // Generic
  GENERIC_ERROR_MESSAGE: 'サーバとの接続がうまくいきませんでした。もう一度お試しください。',
  FETCH_ERROR: 'インターネット接続に問題があるかもしれません',
  WALLET_NOT_FOUND: 'ウォレットが見つかりません',
  PASSKEY_NOT_ALLOWED: 'パスキーの使用がキャンセルされました',
  INSUFFICIENT_CREDIT: 'クレジットが不足しています',
  // Distribute
  INSUFFICIENT_FUNDS_IN_DISTRIBUTION_REQUEST: '配布リクエストの資金が不足しています',
  NO_ENOUGH_COOL_TIME: 'クールタイムが足りません',
  EXCEED_MAX_DISTRIBUTE_AMOUNT: '最大配布額を超えています',
  // Link Transfer
  TOKEN_NOT_SET: 'トークンが設定されていません',
  INVALID_AMOUNT: '無効な金額',
  INCOMPLETE_FIELD: 'すべてのフィールドを埋めてください',
  INSUFFICIENT_BALANCE: '残高が不足しています',
  // Identity
  NICKNAME_TOO_SHORT: 'ニックネームが短すぎます',
  NICKNAME_TOO_LONG: 'ニックネームが長すぎます',
  // Link Transfer Status
  STATUS_PENDING: '保留中',
  STATUS_COMPLETED: 'すでに受け取り済みです',
  STATUS_EXPIRED: '期限切れです',
  STATUS_CANCELLED: 'キャンセルされました',
}