phantom-connect

Phantom Connect SDK

Phantom Connect SDK エコシステムを使って、ウォレット接続に対応した Solana アプリケーションを構築します。

SDK の選択

プラットフォーム	SDK	パッケージ
React ウェブアプリ	React SDK	@phantom/react-sdk
React Native / Expo	React Native SDK	@phantom/react-native-sdk
Vanilla JS / Vue / Angular	Browser SDK	@phantom/browser-sdk

前提条件

1. Phantom Portal アカウント — phantom.com/portal で登録します
2. App ID — Portal → App → Set Up から取得します
3. 許可リスト登録済み URL — Portal でドメインとリダイレクト URL を追加します

認証プロバイダー

プロバイダー	説明	appId が必要
"injected"	Phantom ブラウザー拡張機能	いいえ
"google"	Google OAuth（埋め込みウォレット）	はい
"apple"	Apple ID（埋め込みウォレット）	はい

重要なルール

1. 必ず signAndSendTransaction を使用してください — 埋め込みウォレットでは signTransaction と signAllTransactions はサポートされていません
2. 金額の変換には必ず @solana/web3.js の LAMPORTS_PER_SOL を使用してください — 1000000000 をハードコードしないでください
3. すべての非同期 SDK 呼び出しを try-catch で囲んでください — ユーザーはいつでもプロンプトを拒否できます
4. 署名の前に isConnected を確認してください — 操作の前にウォレット接続を確認します
5. React Native：react-native-get-random-values は最初にインポートする必要があります — ほかのインポートより前に指定してください
6. BrowserSDK はシングルトンである必要があります — アプリごとにインスタンスを 1 つ作成し、複数作成しないでください
7. AddressType は @phantom/browser-sdk からのみインポートしてください
8. テストには devnet、本番環境には mainnet-beta を使用してください — 実際の資金を使って mainnet でテストしないでください
9. 秘密鍵を公開しないでください — 署名はすべて Phantom が内部で処理します
10. 埋め込みウォレットの利用限度額：アプリごと、ユーザーごとに 1 日あたり 1,000 USD
11. ソーシャルログインのセッションは最後の認証イベントから 7 日間継続します — 有効期限切れに適切に対処してください

クイックスタート

React SDK

import { PhantomProvider, useModal, usePhantom, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"],
        appId: "your-app-id",
        addressTypes: [AddressType.solana],
        authOptions: { redirectUrl: "https://yourapp.com/callback" },
      }}
      theme={darkTheme}
    >
      <YourApp />
    </PhantomProvider>
  );
}

React Native SDK

// CRITICAL: Must be first import
import "react-native-get-random-values";
import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";

// Requires app.json: { "expo": { "scheme": "myapp", "plugins": [...] } }

Browser SDK

import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

const sdk = new BrowserSDK({
  providers: ["google", "apple", "injected"],
  appId: "your-app-id",
  addressTypes: [AddressType.solana],
  autoConnect: true,
});

リファレンスドキュメント

実装パターンの詳細については、以下のファイルを参照してください。

• references/react-sdk.md — React SDK の完全なリファレンス（フック、コンポーネント、テーマ設定）
• references/react-native-sdk.md — モバイルのセットアップ、Expo の設定、ディープリンク
• references/browser-sdk.md — Vanilla JS のパターン、イベント、ウォレット検出
• references/transactions.md — Solana トランザクションのパターン（SOL、SPL トークン）
• references/payments.md — 暗号資産決済のフロー（SOL、USDC、バックエンド検証）
• references/token-gating.md — トークン保有を条件としたアクセス制御（クライアント側、サーバー側、NFT）
• references/nft-minting.md — NFT ミントページ、Metaplex Core、圧縮 NFT

よくある問題

問題	解決策
"appId required"	google/apple プロバイダーを使用する場合は、Phantom Portal から appId を追加します
リダイレクトが機能しない	Phantom Portal で redirectUrl を許可リストに追加します
React Native がクラッシュする	react-native-get-random-values を最初にインポートします
拡張機能が検出されない	タイムアウトを指定して waitForPhantomExtension() を使用します
signTransaction エラー	代わりに signAndSendTransaction を使用します — 埋め込みウォレットは signTransaction をサポートしていません

リソース

• Phantom Portal — アプリの登録
• Phantom Docs — 完全なドキュメント
• SDK Examples — 動作するデモ
• MCP Server — AI によるドキュメントへのアクセス