第 02 章入门

钱包连接与账户管理

实现多钱包连接、账户状态管理和网络切换功能

6 课时3小时

概述

钱包连接是 DApp 的入口。本章深入讲解如何使用 wagmi hooks 实现完整的钱包管理功能。

核心 Hooks 详解

wagmi 提供了一系列强大的 hooks： - **useAccount**: 获取当前连接的账户信息 - **useConnect**: 处理钱包连接逻辑 - **useDisconnect**: 断开钱包连接 - **useChainId**: 获取当前网络 ID - **useSwitchChain**: 切换网络

连接状态管理

账户状态包含多个关键字段： 1. **address**: 当前钱包地址 2. **isConnected**: 是否已连接 3. **isConnecting**: 是否正在连接 4. **isDisconnected**: 是否已断开 5. **connector**: 当前使用的连接器

代码示例

自定义连接按钮

不依赖 UI 库的自定义钱包连接组件

typescript

1'use client'
2 
3import { useAccount, useConnect, useDisconnect } from 'wagmi'
4import { injected, walletConnect } from 'wagmi/connectors'
5 
6export function ConnectWallet() {
7  const { address, isConnected, isConnecting } = useAccount()
8  const { connect, connectors } = useConnect()
9  const { disconnect } = useDisconnect()
10 
11  if (isConnected) {
12    return (
13      <div className="flex items-center gap-4">
14        <span className="text-sm">
15          {address?.slice(0, 6)}...{address?.slice(-4)}
16        </span>
17        <button
18          onClick={() => disconnect()}
19          className="px-4 py-2 bg-red-500 rounded-lg"
20        >
21          断开连接
22        </button>
23      </div>
24    )
25  }
26 
27  return (
28    <div className="flex gap-2">
29      {connectors.map((connector) => (
30        <button
31          key={connector.uid}
32          onClick={() => connect({ connector })}
33          disabled={isConnecting}
34          className="px-4 py-2 bg-blue-500 rounded-lg disabled:opacity-50"
35        >
36          {isConnecting ? '连接中...' : connector.name}
37        </button>
38      ))}
39    </div>
40  )
41}

网络切换组件

支持多链切换的网络选择器

typescript

1'use client'
2 
3import { useChainId, useSwitchChain } from 'wagmi'
4import { mainnet, polygon, arbitrum, optimism } from 'wagmi/chains'
5 
6const chains = [mainnet, polygon, arbitrum, optimism]
7 
8export function NetworkSwitcher() {
9  const chainId = useChainId()
10  const { switchChain, isPending } = useSwitchChain()
11 
12  return (
13    <select
14      value={chainId}
15      onChange={(e) => switchChain({ chainId: Number(e.target.value) })}
16      disabled={isPending}
17      className="px-3 py-2 bg-gray-800 rounded-lg"
18    >
19      {chains.map((chain) => (
20        <option key={chain.id} value={chain.id}>
21          {chain.name}
22        </option>
23      ))}
24    </select>
25  )
26}

相关资源

wagmi useAccount wagmi useConnect

代码示例

自定义连接按钮

不依赖 UI 库的自定义钱包连接组件

typescript

1'use client'
2 
3import { useAccount, useConnect, useDisconnect } from 'wagmi'
4import { injected, walletConnect } from 'wagmi/connectors'
5 
6export function ConnectWallet() {
7  const { address, isConnected, isConnecting } = useAccount()
8  const { connect, connectors } = useConnect()
9  const { disconnect } = useDisconnect()
10 
11  if (isConnected) {
12    return (
13      <div className="flex items-center gap-4">
14        <span className="text-sm">
15          {address?.slice(0, 6)}...{address?.slice(-4)}
16        </span>
17        <button
18          onClick={() => disconnect()}
19          className="px-4 py-2 bg-red-500 rounded-lg"
20        >
21          断开连接
22        </button>
23      </div>
24    )
25  }
26 
27  return (
28    <div className="flex gap-2">
29      {connectors.map((connector) => (
30        <button
31          key={connector.uid}
32          onClick={() => connect({ connector })}
33          disabled={isConnecting}
34          className="px-4 py-2 bg-blue-500 rounded-lg disabled:opacity-50"
35        >
36          {isConnecting ? '连接中...' : connector.name}
37        </button>
38      ))}
39    </div>
40  )
41}

网络切换组件

支持多链切换的网络选择器

typescript

1'use client'
2 
3import { useChainId, useSwitchChain } from 'wagmi'
4import { mainnet, polygon, arbitrum, optimism } from 'wagmi/chains'
5 
6const chains = [mainnet, polygon, arbitrum, optimism]
7 
8export function NetworkSwitcher() {
9  const chainId = useChainId()
10  const { switchChain, isPending } = useSwitchChain()
11 
12  return (
13    <select
14      value={chainId}
15      onChange={(e) => switchChain({ chainId: Number(e.target.value) })}
16      disabled={isPending}
17      className="px-3 py-2 bg-gray-800 rounded-lg"
18    >
19      {chains.map((chain) => (
20        <option key={chain.id} value={chain.id}>
21          {chain.name}
22        </option>
23      ))}
24    </select>
25  )
26}