dApp 集成

当你的应用需要通过钱包 Provider 与 UKey Wallet 交互，而不是直接调用硬件 SDK 时，请从本节开始。Provider 层面向 dApp，覆盖 EVM 请求，并提供多条非 EVM 链的连接与签名能力。

选择集成方式

方案	推荐场景	技术栈
RainbowKit	希望快速接入成熟钱包选择器的 React 应用	React
Web3Modal	需要跨框架钱包弹窗的前端项目	React / Vue / JS
Web3-Onboard	希望对钱包接入流程做更多定制的项目	React / Vue / JS
Wagmi	用 React hooks 自行搭建钱包 UI 的场景	React
Provider API	不依赖 UI 套件，直接调用 Provider	任意技术栈

💡

快速建议

React 项目如果希望少写 UI，可优先选择 RainbowKit；Vue 或原生 JS 项目通常更适合 Web3Modal 或 Web3-Onboard。

---

快上手

RainbowKit (React)

npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

import "@rainbow-me/rainbowkit/styles.css";
import {
  getDefaultConfig,
  RainbowKitProvider,
  ConnectButton,
} from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { mainnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const config = getDefaultConfig({
  appName: "UKey Wallet 示例钱包",
  projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // 可从 cloud.walletconnect.com 申请
  chains: [mainnet],
});

export default function RainbowKitDemoApp() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={new QueryClient()}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

完整指南

Provider API（无依赖）

// 通过 EIP-6963 让已安装的钱包主动广播自己的 Provider。
const providers = [];
window.addEventListener("eip6963:announceProvider", (e) =>
  providers.push(e.detail),
);
window.dispatchEvent(new Event("eip6963:requestProvider"));

// 选出 UKey Wallet Provider，然后发起账户请求。
const ukey = providers.find((p) => p.info.rdns === "so.ukey.app.wallet");
const accounts = await ukey.provider.request({
  method: "eth_requestAccounts",
});

完整指南

---

UKey Wallet 检测

属性	值
EIP-6963 rdns	so.ukey.app.wallet
Provider	window.$ukey.ethereum

---

链列表

EVM： Ethereum, Polygon, BSC, Arbitrum, Optimism, Base，以及其他 EVM 兼容网络。

非 EVM： Bitcoin, Solana, Cosmos, Aptos, Sui, TON, TRON, Polkadot, Cardano, NEAR 等。

查看所有 Provider API

---

链接