WaaS クイックスタート

インストール

npm (Node.js 18+) から helius-wallet-kit をインストール:

pnpm add helius-wallet-kit

必要なピア依存関係:

react >= 18
react-dom >= 18
@solana/web3.js ^1.98

以下の推奨ルートハンドラー設定にはnext >= 14が必要です。

セットアップ

推奨される設定ではHelius APIキーをサーバー側に保持します。Heliusキーはブラウザには送信されません。ローカルでテスト中ですか？プロトタイピングショートカットに進んでください。

プロバイダーでアプリをラップする

クライアントコンポーネントのアプリのルート付近にHeliusWalletProviderを追加します。APIキーは省略します — ルートハンドラー（次のステップ）がサーバー側で提供します。SDKはプロジェクトIDと鍵なしのSecure RPC URLを自動的に解決します。

app/providers.tsx

"use client";

import { HeliusWalletProvider } from "helius-wallet-kit";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HeliusWalletProvider config={{ cluster: "mainnet-beta" }}>
      {children}
    </HeliusWalletProvider>
  );
}

ルートハンドラーをマウントする

/api/helius/[...path]にキャッチオールルートハンドラーを追加します。これはHELIUS_API_KEYをサーバー側で保持し、ウォレットのブートストラップ、RPC、送信、および登録をプロキシします。これによりHeliusキーがブラウザに到達することはありません。送信者最適化の着地やトランザクション履歴も利用できます。

app/api/helius/[...path]/route.ts

import { createHeliusRouteHandler } from "helius-wallet-kit/next";

export const { GET, POST } = createHeliusRouteHandler();

HELIUS_API_KEYをサーバー環境変数として設定します（NEXT_PUBLIC_ではありません）。ハンドラーはそれを転送要求に注入します。

スタイルをインポートする

SDKスタイルシートを一度、ルートレイアウトでインポートします。

app/layout.tsx

import "helius-wallet-kit/ui/styles.css";

ダッシュボードでユーザーに表示されるサインイン方法を選択します — 詳細はサインイン方法を設定するを参照してください。

プロトタイピングショートカット

ローカルで試してみたいだけですか？ルートハンドラーをスキップして、APIキーをプロバイダーに直接渡します。

app/providers.tsx

<HeliusWalletProvider
  config={{ apiKey: process.env.NEXT_PUBLIC_HELIUS_API_KEY!, cluster: "devnet" }}
>
  {children}
</HeliusWalletProvider>

これはブラウザバンドルにキーを含めるため、ローカルテストのみで使用します — デプロイ前に上記のルートハンドラー設定に切り替えてください。その間、キーをドメイン制限してください（キーのセキュリティを確保するを参照）。ウォレットや資金には触れませんが、公開キーを使ってクレジットを使用することは可能です。

はじめに

データストリーミングとイベントリスニング

データAPI & RPC

トレーディング

トランザクションの送信

ウォレット・アズ・ア・サービス

プライバシー

ガイド

リソース

WaaS クイックスタート

インストール

セットアップ

プロトタイピングショートカット

次のステップ

設定

ウォレットの使用

​インストール

​セットアップ

​プロトタイピングショートカット

​次のステップ

設定

ウォレットの使用

インストール

セットアップ

プロトタイピングショートカット

次のステップ