メインコンテンツまでスキップ

Develop with React

Prexを使用したアプリケーション開発を始めるための手順を説明します。

前提条件​

  • Node.js と npm がインストールされていること
  • React アプリケーションの基本的な知識

インストール​

  1. Reactアプリを作成します：
npm create vite@latest my-app -- --template react-ts
cd my-app
npm i
  1. Prex UIKit SDKをインストールします：

最新バージョンは@prex0/uikit@v0.1.21です。

npm install @prex0/uikit
  1. アプリケーションのルートコンポーネント(src/main.tsx)でPrexProviderを設定します：
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { PrexUIKitProvider } from "@prex0/uikit";
import '@prex0/uikit/styles.css';

const CHAIN_ID = 42161;

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

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <PrexUIKitProvider
      chainId={CHAIN_ID}
      policyId={import.meta.env.VITE_POLICY_ID}
      apiKey={import.meta.env.VITE_API_KEY}
      tokens={DEMO_TOKEN}
    >
      <App />
    </PrexUIKitProvider>
  </StrictMode>,
)

注意: chainIdは現在42161(Arbitrum)と421614(Arbitrum Sepolia)のみ対応しています。

管理画面での設定​

  1. Prexダッシュボードで、新規にアプリを作成します。
  2. 「アプリ設定」で、http://localhost:5174 を許可オリジンに設定します。
  3. 「スタート」-「React」-「4. 環境変数を設定する」の.env.localをコピーし、プロジェクトのルートに.env.localファイルを作成します。

手動で作成する場合、サイドメニューの「ポリシー設定」を表示することで、ポリシーIDと公開可能キーを取得することができます。 VITE_POLICY_IDにはポリシーIDを、VITE_API_KEYには公開可能キーを設定します。

.env.localの例

VITE_POLICY_ID=ca77802b-1a9b-4982-bd65-4f54d8446...
VITE_API_KEY=eyJhbGciOiJFUzI1N...

基本的な使用方法​

Prex UIKitを使用して、ウォレット操作やトークン転送などの機能を実装できます。

import { EmbeddedWallet } from "@prex0/uikit/wallet";
import { Address } from "@prex0/uikit/identity";

function MyComponent() {
  return (
    <div>
      <EmbeddedWallet>
        <Address />
      </EmbeddedWallet>
    </div>
  );
}

これで基本的なPrexの統合が完了しました。詳細な機能や高度な使用方法については、後続のセクションを参照してください。