Quickstart

只需几行代码即可集成嵌入式钱包。

安装

Drop SDK 在 GitHub Packages 上的私有 @skydroplabs scope 下发布。 在你的项目根目录创建一个 .npmrc，将该 scope 指向 GitHub 的 registry：

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

GITHUB_TOKEN 必须是一个具有 read:packages scope 的 经典 personal access token，或者是 你的 CI 所使用的同一个 token。

然后安装这两个包：

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

使用方法

在应用的顶层调用 createWallet，传入 你的 appId 以及你希望暴露的 providers。这会创建隐藏的 iframe 并接好 postMessage 传输通道。

接着，用 <WalletProvider> context provider 包裹你的应用，并在布局中的某处渲染 <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 的设置 —— 允许的父 origin（frame-ancestors CSP）、需要额外展示的资产、 特性开关 —— 并在 Drop 钱包的边缘层强制执行。

在本地开发时你可以省略它：钱包会以仅允许 localhost 的允许列表加载。

当你准备好部署到生产环境时，请注册一个 App ID。注册流程请参阅 App ID 指南。

下一步

• 为你的生产 origin 注册 App ID。
• createWallet —— 完整的 provider 选项。
• <WalletWidget> —— theme、size 和 shape。