本页目录

Web3Modal（AppKit）

WalletConnect 官方钱包连接界面，现已归入 Reown AppKit，支持多链和移动端钱包连接。

Web3Modal 已更名为 Reown AppKit。本指南使用 @reown/appkit 包。升级已有 Web3Modal 集成时，请遵循 Reown 的迁移指南。

安装


npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@^2 viem@^2 @tanstack/react-query@^5

基础设置

App.tsx


import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { mainnet, polygon, arbitrum, type AppKitNetwork } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 
// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'
 
// 2. Configure networks
const networks: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, polygon, arbitrum]
 
// 3. Create wagmi adapter
const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks,
})
 
// 4. Create modal
createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata: {
    name: 'My dApp',
    description: 'My dApp description',
    url: 'https://mydapp.com', // Must match your deployed dApp origin
    icons: ['https://mydapp.com/icon.png'],
  },
})
 
const queryClient = new QueryClient()
 
export default function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        {/* Use the web component */}
        <appkit-button />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

优先显示 OneKey

在已有的 createAppKit 调用中添加以下选项，即可优先显示 OneKey。更新集成时，请在 WalletConnect 钱包指南中确认钱包 ID：


createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  featuredWalletIds: [
    // OneKey Wallet ID from WalletConnect Explorer
    '1aedbcfc1f31aade56ca34c38b0a1607b41cccfa3de93c946ef3b4ba2dfab11c',
  ],
  // Optional: Only show specific wallets
  includeWalletIds: [
    '1aedbcfc1f31aade56ca34c38b0a1607b41cccfa3de93c946ef3b4ba2dfab11c',
    // Add other wallet IDs as needed
  ],
})

自定义界面

主题


createAppKit({
  // ...
  themeMode: 'dark', // or 'light'
  themeVariables: {
    '--w3m-accent': '#00B812', // OneKey green
    '--w3m-border-radius-master': '8px',
  },
})

自定义按钮


import { useAppKit } from '@reown/appkit/react'
 
function CustomButton() {
  const { open } = useAppKit()
 
  return (
    <button onClick={() => open()}>
      Connect Wallet
    </button>
  )
}

Hooks

连接后使用 wagmi hooks：


import { useAccount, useDisconnect } from 'wagmi'
import { useAppKit } from '@reown/appkit/react'
 
function Wallet() {
  const { address, isConnected } = useAccount()
  const { disconnect } = useDisconnect()
  const { open } = useAppKit()
 
  if (!isConnected) {
    return <button onClick={() => open()}>Connect</button>
  }
 
  return (
    <div>
      <p>{address}</p>
      <button onClick={() => disconnect()}>Disconnect</button>
    </div>
  )
}