RainbowKit

RainbowKit 适合希望快速获得 EVM 钱包连接弹窗的 React 项目。接入 UKey Wallet 时，你只需要把 UKey Wallet 加入 RainbowKit 的 wallet 列表，剩下的钱包选择、连接状态和移动端入口由 RainbowKit 与 wagmi 处理。

延伸资料

部署

yarn add @rainbow-me/rainbowkit wagmi viem
# 或者这样安装
npm install @rainbow-me/rainbowkit wagmi viem

添加 UKey Wallet

在 connectorsForWallets 中加入 uKeyWallet，即可让 UKey Wallet 出现在钱包选择弹窗里。下面这段参考代码把 UKey Wallet 放在“建议”分组中，你也可以根据产品需求调整排序和分组名称。

// 先把 UKey Wallet 接进来
import { uKeyWallet } from "@rainbow-me/rainbowkit/wallets";

const appName = "UKey Wallet Demo";
const projectId = "12345";

const { wallets } = getDefaultWallets({ appName, projectId, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "建议",
    // 把 UKey Wallet 放进建议分组里
    wallets: [uKeyWallet({ chains })],
  },
]);

const wagmiConfig = createConfig({
  connectors,
  publicClient,
});

示范

相关链接

• React + wagmi Hook 接入：指南