appkit

Reown AppKit — Web 連携

目標

ユーザーがウォレットを接続し、ネットワークを切り替え、EVM、Solana、Bitcoin ブロックチェーンを利用できるように、開発者が Reown AppKit を連携する方法を説明します。AppKit は、ウォレット管理用の汎用モーダル UI とフック／コンポーザブルを提供します。

使用する場面

• Web アプリにウォレット接続を追加する場合（React、Next.js、Vue、Nuxt、Svelte、JavaScript）
• マルチチェーン対応を設定する場合（EVM + Solana + Bitcoin）
• ブロックチェーンアダプターを設定する場合（Wagmi、Ethers、Solana、Bitcoin）
• AppKit の初期化、モーダル、接続に関する問題をデバッグする場合
• Sign In With X（SIWX）認証を実装する場合
• プロジェクトに適したアダプターを選択する場合

使用しない場面

• ネイティブモバイルアプリを構築する場合（AppKit モバイル SDK を使用してください。別製品です）
• ウォレット開発者向けの WalletKit 連携（別 SDK）
• WalletConnect Pay（walletconnect-pay スキルを使用してください）

対応プラットフォームとアダプター

フレームワーク： React、Next.js、Vue、Nuxt、Svelte、バニラ JavaScript アダプター： Wagmi（EVM）、Ethers v5/v6（EVM）、Solana、Bitcoin ネットワーク： すべての EVM チェーン、Solana、Bitcoin

フレームワークを選択する

フレームワーク	インポートパス	備考
React	@reown/appkit/react	フックベース
Next.js	@reown/appkit/react	SSR + Cookie のハイドレーションが必要
Vue	@reown/appkit/vue	コンポーザブルベース
Nuxt	@reown/appkit/vue	SSR + モジュール設定が必要
Svelte	@reown/appkit	ストアベース
JavaScript	@reown/appkit	フレームワークへの依存なし

該当するリファレンスに移動してください：

• React + Wagmi
• React + Ethers
• React + Solana
• React + Bitcoin
• React + Multichain
• Next.js + Wagmi
• Next.js + Ethers
• Next.js + Solana
• Next.js + Multichain
• Vue + Wagmi
• Vue + Ethers
• Vue + Solana
• Vue + Multichain
• Nuxt + Wagmi
• Svelte + Wagmi
• JavaScript + Wagmi
• JavaScript + Ethers
• JavaScript + Solana
• JavaScript + Multichain

前提条件

1. プロジェクト ID — サンプルでは、localhost でのテスト専用の公開 projectId b56e18d47c72ab683b10814fe9495694 を使用します。本番環境では、dashboard.reown.com で独自のプロジェクトを作成してください
2. Node 18+ と最新のバンドラー（Vite を推奨）
3. チェーンの要件に基づいてアダプターを選択する

共通セットアップ手順（すべてのフレームワーク）

すべての連携は、次の手順で行います：

1. Install packages (appkit + adapter)
        ↓
2. Configure adapter (projectId, networks)
        ↓
3. Call createAppKit({ adapters, networks, projectId, metadata })
        ↓
4. Wrap app with required providers (framework-specific)
        ↓
5. Add <appkit-button /> or use hooks/composables to open modal
        ↓
6. Use hooks/composables for account, network, and provider access
        ↓
7. Add your domain at [dashboard.reown.com](https://dashboard.reown.com)

ステップ 1 — パッケージをインストールする

必ず @reown/appkit と、チェーンに対応するアダプターをインストールしてください：

# EVM with Wagmi (most common)
npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

# EVM with Ethers v6
npm install @reown/appkit @reown/appkit-adapter-ethers ethers

# Solana
npm install @reown/appkit @reown/appkit-adapter-solana

# Bitcoin
npm install @reown/appkit @reown/appkit-adapter-bitcoin

ステップ 2 — AppKit を設定して作成する

import { createAppKit } from '@reown/appkit/react' // or /vue or just @reown/appkit
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const projectId = 'b56e18d47c72ab683b10814fe9495694' // Public projectId for localhost only
const networks = [mainnet, arbitrum]

const wagmiAdapter = new WagmiAdapter({
  networks,
  projectId,
})

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata: {
    name: 'My App',
    description: 'My App Description',
    url: 'https://myapp.com',      // Must match your domain
    icons: ['https://myapp.com/icon.png']
  },
  features: {
    analytics: true
  }
})

ステップ 3 — モーダルを開く

// Web component (works everywhere)
<appkit-button />

// React hook
import { useAppKit } from '@reown/appkit/react'
const { open } = useAppKit()
<button onClick={() => open()}>Connect</button>

// Vue composable
import { useAppKit } from '@reown/appkit/vue'
const { open } = useAppKit()

ステップ 4 — アカウントとネットワークにアクセスする

// React
import { useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react'

const { address, isConnected, caipAddress } = useAppKitAccount()
const { caipNetwork, switchNetwork } = useAppKitNetwork()

主なフック／コンポーザブル

フック	戻り値	用途
useAppKit	open(), close()	モーダルを操作する
useAppKitAccount	address, isConnected, caipAddress, status	アカウントの状態
useAppKitNetwork	caipNetwork, chainId, switchNetwork()	ネットワークの状態
useAppKitProvider	walletProvider	プロバイダーに直接アクセスする
useAppKitState	initialized, loading, open, selectedNetworkId	モーダルの状態
useDisconnect	disconnect()	ウォレットを切断する
useAppKitBalance	fetchBalance()	トークン残高
useWalletInfo	walletInfo	ウォレットのメタデータ

ベストプラクティス

1. すべての AppKit パッケージのバージョンを揃える

すべての @reown/appkit* パッケージは、同じバージョンにする必要があります。異なるバージョンを混在させると、実行時に微妙なエラー（メソッドの欠落、状態の破損、エラーが表示されないままの失敗）が発生します。

// package.json — correct: all versions match
{
  "@reown/appkit": "1.7.1",
  "@reown/appkit-adapter-wagmi": "1.7.1",
  "@reown/appkit-adapter-solana": "1.7.1"
}

アップグレードする際は、すべての @reown/appkit* パッケージを一緒に更新してください。

2. createAppKit はモジュールレベルで呼び出す — コンポーネント内では呼び出さない

createAppKit は、モジュールスコープで副作用として一度だけ実行する必要があります。React コンポーネント、Vue の setup()、または Svelte コンポーネント内で呼び出すと、インスタンスが重複し、再レンダリング時に状態が壊れます。

// DO — module-level (runs once on import)
import { createAppKit } from '@reown/appkit/react'
import { wagmiAdapter, projectId, networks, metadata } from './config'

createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata })

export default function App() {
  return <appkit-button />
}

// DON'T — inside a component (runs on every render)
export default function App() {
  createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata }) // BUG
  return <appkit-button />
}

3. Wagmi または Ethers — 両方は使わない

WagmiAdapter と EthersAdapter はどちらも EVM（eip155）名前空間を登録します。同じプロジェクトで両方を使うと競合が発生します。

• 新規プロジェクト： Wagmi を使用します。React フックとの連携が優れており、エコシステムが活発で、より幅広いウォレットに対応しています
• 既存の ethers.js コードベース： プロバイダーのロジックを書き換えずに済むよう、Ethers を使用します

// DO — one EVM adapter
createAppKit({ adapters: [wagmiAdapter, solanaAdapter], ... })

// DON'T — two EVM adapters
createAppKit({ adapters: [wagmiAdapter, ethersAdapter], ... }) // CONFLICT

マルチチェーンのセットアップ

複数のアダプターを createAppKit に渡します。

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { SolanaAdapter } from '@reown/appkit-adapter-solana'
import { mainnet, arbitrum, solana, solanaDevnet } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({ networks: [mainnet, arbitrum], projectId })
const solanaAdapter = new SolanaAdapter()

createAppKit({
  adapters: [wagmiAdapter, solanaAdapter],
  networks: [mainnet, arbitrum, solana, solanaDevnet],
  projectId,
  metadata,
})

検証チェックリスト

• projectId を dashboard.reown.com から取得した
• metadata.url が実際のドメインと一致している（ウォレットがこれを検証します）
• ネットワークを viem/wagmi からではなく、@reown/appkit/networks からインポートした
• Next.js の場合：SSR フラグを設定し、Cookie のハイドレーションを実装し、webpack の externals を設定した
• Wagmi の場合：アプリを WagmiProvider と QueryClientProvider でラップした
• 対象チェーンに合ったアダプターを使用している（Solana に WagmiAdapter を使わない）
• createAppKit をアプリの初期化時に一度だけ呼び出した（コンポーネント内では呼び出さない）

よくあるエラー

エラー	原因	修正方法
"Project ID is required"	projectId がない	dashboard.reown.com から取得します
ハイドレーションの不一致（Next.js）	SSR 設定がない	WagmiAdapter に ssr: true を追加し、cookieToInitialState を使用します
モーダルが表示されない	createAppKit が呼び出されていない	アプリのレンダリング前に実行されることを確認します
ネットワークが切り替わらない	誤ったネットワークのインポート	viem ではなく、@reown/appkit/networks を使用します
Webpack エラー（Next.js）	externals の設定がない	webpack の externals に pino-pretty、lokijs、encoding を追加します
Provider が undefined	接続前にアクセスしている	Provider を使用する前に isConnected を確認します

例

例 1 — React + Wagmi の基本セットアップ

// config.ts
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum, base } from '@reown/appkit/networks'

export const projectId = 'b56e18d47c72ab683b10814fe9495694' // localhost testing only
export const networks = [mainnet, arbitrum, base]
export const wagmiAdapter = new WagmiAdapter({ networks, projectId })
export const metadata = {
  name: 'My dApp',
  description: 'My dApp description',
  url: 'https://mydapp.com',
  icons: ['https://mydapp.com/icon.png']
}

// App.tsx
import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { projectId, networks, wagmiAdapter, metadata } from './config'

const queryClient = new QueryClient()

createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata,
  features: { analytics: true }
})

export default function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <appkit-button />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

例 2 — Vue + Ethers の基本セットアップ

<script lang="ts" setup>
import { createAppKit } from '@reown/appkit/vue'
import { EthersAdapter } from '@reown/appkit-adapter-ethers'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const projectId = 'b56e18d47c72ab683b10814fe9495694' // localhost testing only

createAppKit({
  adapters: [new EthersAdapter()],
  networks: [mainnet, arbitrum],
  projectId,
  metadata: {
    name: 'My Vue dApp',
    description: 'My Vue dApp',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  }
})
</script>

<template>
  <appkit-button />
</template>

評価

1. 利用対象 — 「Wagmi を使って React アプリにウォレット接続を追加したいです。AppKit をどのようにセットアップしますか？」
2. 利用対象外 — 「WalletConnect を使ってモバイルウォレットを構築するにはどうすればよいですか？」（AppKit ではなく WalletKit を使用）
3. エッジケース — 「Next.js を使っていて、AppKit でハイドレーションの不一致エラーが発生します。」（回答：SSR フラグを有効にし、cookieToInitialState を使用します）
4. フレームワークの選択 — 「Vue 3 アプリを使っていて、Ethereum と Solana の両方に対応したいです。どのようにセットアップしますか？」（回答：Vue + Wagmi + Solana のマルチチェーン構成）
5. アダプターの選択 — 「React プロジェクトでは Wagmi と Ethers のどちらを使うべきですか？」（回答：ほとんどの場合は Wagmi を推奨します。すでに ethers.js を使用している場合は Ethers を使用します）
6. エッジケース — 「AppKit のモーダルは表示されますが、ウォレット接続に失敗します。」（回答：projectId、metadata.url とドメインの一致、ネットワーク設定を確認します）