このページの内容

Web3Modal (AppKit)

WalletConnect の公式ウォレット接続 UI。現在は 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>
  )
}

フック

接続後に wagmi フックを使用します:


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