クイックスタート

わずか数行のコードで埋め込みウォレットを統合できます。

インストール

Drop SDK は GitHub Packages 上のプライベートな @skydroplabs スコープから 配布されています。プロジェクトのルートに .npmrc を作成し、スコープを GitHub レジストリに向けてください。

@skydroplabs:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

GITHUB_TOKEN は read:packages スコープを持つクラシックパーソナルアクセス トークン、または CI で使っているものと 同じトークンである必要があります。

次に 2 つのパッケージをインストールします。

npm install @money-sdk/core @money-sdk/react

使い方

アプリケーションの最上位で createWallet を あなたの appId と、公開したいプロバイダを指定して呼び出します。これにより、 隠された iframe が作成され、postMessage トランスポートが接続されます。

次に、アプリケーションを <WalletProvider> コンテキストプロバイダで ラップし、<WalletWidget> をレイアウトのどこかに 描画します。

// src/index.tsx
import { createWallet } from '@money-sdk/core'
import { WalletProvider, WalletWidget } from '@money-sdk/react'
import { createRoot } from 'react-dom/client'

import App from './App'

const wallet = createWallet({
  appId: '<YOUR_APP_ID>', // Only required for production, see "App ID" below.
  providers: {
    ethereum: true,
    // solana: true,
    // bitcoin: true,
  },
})

const root = createRoot(document.getElementById('root')!)
root.render(
  <WalletProvider wallet={wallet}>
    <WalletWidget />
    <App />
  </WalletProvider>,
)

INFO

ウィジェットは非表示のままで、ユーザーがウォレットを接続したときに初めて 描画されます。常にマウントされている場所 — 通常はレイアウトのルート、 <App /> の隣 — に配置してください。

App ID

appId は統合を識別する UUID です。これは dApp ごとの設定 — 許可される親 オリジン（frame-ancestors CSP）、追加で表示するアセット、機能フラグ — を 制御し、Drop ウォレットのエッジで強制されます。

ローカル開発中は省略できます。ウォレットは localhost のみを許可するリストで 読み込まれます。

本番にリリースする準備が整ったら、App ID を登録してください。登録フローについて は App ID ガイド を参照してください。

次のステップ

• 本番オリジン用に App ID を登録 する。
• createWallet — プロバイダの全オプション。
• <WalletWidget> — theme、size、shape。