Skip to main content

RainbowKit

RainbowKit is suitable for React projects that want to quickly get EVM wallet connection pop-ups. When accessing UKey Wallet, you only need to add UKey Wallet to RainbowKit's wallet list, and the remaining wallet selection, connection status and mobile port entry are handled by RainbowKit and wagmi.

Reference documentation​

Setup​

yarn add @rainbow-me/rainbowkit wagmi viem
# alternatively
npm install @rainbow-me/rainbowkit wagmi viem

Add UKey Wallet​

Add uKeyWallet to connectorsForWallets to make UKey Wallet appear in the wallet selection pop-up window. The following example places UKey Wallet in the "Preferred" group. You can also adjust the sorting and group name according to product needs.

// Note: Import the UKey Wallet connector
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: "Preferred",
    // Note: Put UKey Wallet into highlighted group
    wallets: [uKeyWallet({ chains })],
  },
]);

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

Demo​

  • React + wagmi Hook access: guide