用途:生成一个可运行的 React + Vite + TypeScript 应用,通过 DApp Connector API 连接 Midnight 钱包扩展,作为前端钱包连接的基础模板。
主要能力:提供完整项目结构(index.html、package.json、tsconfig、vite.config.ts 及 src 下的 main.tsx、App.tsx、WalletCard.tsx、types.ts、selectWallet.ts、vite-env.d.ts);实现钱包枚举、连接、获取地址与状态检查;可选多钱包选择器。
必要用法:需 Node.js 18+ 与 npm,安装 Midnight 钱包扩展(如 1AM、Lace 或兼容 DApp Connector 的钱包)。脚手架与安装命令: npm create vite@latest my-wallet-app -- --template react-ts cd my-wallet-app npm install @midnight-ntwrk/dapp-connector-api@4.0.1 运行:npm install 后 npm run dev,打开 http://localhost:5173。
关键实现要点:钱包以 UUID 为键注入 window.midnight,须用 Object.values(window.midnight) 枚举,不可硬编码如 window.midnight.mnLace;在 App.tsx 中副作用导入 @midnight-ntwrk/dapp-connector-api 以增强全局类型;连接流程为 selectWallet() → wallet.connect(networkId) → getUnshieldedAddress() → getConnectionStatus(),可选 getConfiguration() 获取服务 URI。网络 ID 支持 'undeployed'(本地)、'preview'、'preprod'、'mainnet',须与钱包配置网络一致,默认 'preprod'。
适用场景:构建 Midnight 前端钱包连接层;后续可扩展合约部署与调用、代币转账、余额查询、消息签名、多网络选择等。
限制:模板默认不含 CSS 样式,需自行添加;仅覆盖前端钱包连接,不含合约部署或后端逻辑;测试前必须安装钱包扩展;钱包名称与图标需安全渲染,避免使用 dangerouslySetInnerHTML。其他收费、价格、平台或效果信息暂未提供。