実装例
これらの実装例は、アプリにコピーして利用できます。Seamsウォレットを使う場合は、まずプロバイダーを設定し、ウォレットを登録またはアンロックします。 その後、製品に必要な操作を選んでください。
外部NEARウォレットには、コンパイル対象のコネクター実装例を使用してください。 専用のインポート先を使う開発プレビューで、Seamsのプロバイダーは不要です。 以下の前提条件はSeamsウォレットの実装例に適用されます。
前提条件
SDKをインストールし、アプリが使うウォレットオリジン、リレーヤー、登録用の環境変数を設定してください。
pnpm add @seams/wallet@0.42.0import { SeamsWebProvider, seamsTestnetConfig, useSeams } from '@seams/wallet/react';
// Everything else — wallet service path, SDK base path, relayer account, chain
// RPC and explorer URLs — comes from the SDK defaults.
const seamsConfig = seamsTestnetConfig({
walletOrigin: import.meta.env.VITE_WALLET_ORIGIN,
relayerUrl: import.meta.env.VITE_RELAYER_URL,
publishableKey: import.meta.env.VITE_SEAMS_PUBLISHABLE_KEY,
});
function WalletApp() {
const { loginState } = useSeams();
return <p>{loginState.isLoggedIn ? 'Wallet unlocked' : 'Wallet locked'}</p>;
}
export function App() {
return (
<SeamsWebProvider config={seamsConfig}>
<WalletApp />
</SeamsWebProvider>
);
}実装例の対象は、リリース0.42.0とiframeプロトコル23.0.0です。 この設定例では、NEARとTempoのテストネットを設定します。 Ethereum Sepoliaの実装例を使う場合は、署名ガイドのとおり、そのチェーンを追加してください。
設定例は、プロバイダーをアプリの境界に配置します。ウォレットUIはSeamsWebProviderの内側に配置してください。 各操作の実装例には、seamsインスタンスとウォレットの識別情報を渡します。
実装例を選ぶ
- ウォレットの設定と認証：パスキー、アンロック、GoogleとメールOTP。
- 取引とメッセージへの署名：NEAR、NEP-413、EVM系チェーン。
- ウォレットの高度な操作：デバイス連携、復元、鍵のエクスポート。
- ウォレットUIのカスタマイズ：ReactとウォレットiframeのUIの統一。
コードの使い方
<<<ブロックは、ソースのexamplesディレクトリーにある共通のTypeScript実装例を読み込みます。 必要な関数やコンポーネントをコピーし、自社のUIとエラー通知につないでください。 walletId、nearAccountId、Google IDトークンなどの値は、認証済みのアプリ状態から取得します。
各処理は、型付きの成功・失敗結果を返すか、イベントコールバックで進行状況を通知します。 実装例を変更する際も結果の分岐処理を残し、キャンセル、ポリシーによる拒否、セッションの期限切れに対処できるようにしてください。
次に読む
- SDKリファレンス：公開される型とエントリーポイント。
- 結果とエラー：失敗の分岐。
- イベントと進行状況：処理の進捗。
- 基本概念とセキュリティ：動作する実装の背景にあるプロトコル。