On this page

Web3Modal (AppKit)

WalletConnect’s official wallet connection UI, now part of Reown AppKit. Provides multi-chain support and mobile wallet connections.

Web3Modal has been rebranded to Reown AppKit. This guide uses the @reown/appkit packages. Follow Reown’s migration guide when upgrading an existing Web3Modal integration.

Installation


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

Basic Setup

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>
  )
}

Feature OneKey

Add these options to the existing createAppKit call to prioritize OneKey. Confirm the wallet ID in the WalletConnect wallet guide when updating your integration:


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
  ],
})

Customization

Theme


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

Custom Button


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

Hooks

Use wagmi hooks after connection:


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>
  )
}