インストール
npm (Node.js 18+) からhelius-wallet-kit をインストール:
react >= 18react-dom >= 18@solana/web3.js ^1.98
next >= 14 はオプションのピアです — サーバールートハンドラーを使用する場合にインストールしてください。
セットアップ
1
アプリをプロバイダーでラップ
クライアントコンポーネント内でアプリのルート付近に ダッシュボードでユーザーに表示するサインイン方法を選択します — サインイン方法の設定を参照してください。クライアントキーはブラウザで公開されているため、RPCアクセス制御を介してドメインにロックされたキーを使用してください。
HeliusWalletProvider を追加し、Helius APIキーを渡します。それが唯一必要な設定で、SDKがプロジェクトIDとキーなしSecure RPC URLsを自動的に解決します。app/providers.tsx
2
スタイルをインポート
SDKスタイルシートをルートレイアウトに1回インポートします:
app/layout.tsx
3
(オプション) サーバールートハンドラーを追加
デフォルトでは、SDKはプロジェクトのキーなしSecure RPC URLsを使用してブラウザから直接Heliusと通信します — サーバールートは必要ありません。RPC、送信、トランザクション履歴の呼び出しを独自のサーバーを通じてルーティングするには(および送信者最適化ランディングとトランザクション履歴を使用するには)、全てを受け入れるルートハンドラーを
/api/helius/[...path] にマウントします。app/api/helius/[...path]/route.ts
HELIUS_API_KEY をサーバー環境変数として設定し、ハンドラーが転送要求にそれを注入します。ウォレットのブートストラップは依然としてクライアント側であなたの
apiKeyを使用します — それはプロバイダーconfigに渡され、ブラウザから/waas/configに送信されます — したがって、ルートハンドラーを使用してもキーはブラウザに存在します。完全にサーバーサイドでのキー管理はロードマップに載っていますので、アプリのオリジンにスコープされたドメイン制限キーを使用し、必要に応じてそれをローテーションしてください。次のステップ
構成
設定オプションとダッシュボードサインイン方法。
ウォレットの使用
認証状態の読み取り、署名、送信、履歴の読み取り。