MiniWallet

React 钱包连接按钮组件：一键连接浏览器扩展钱包，展示账户、余额，并支持切换网络。

功能

• 连接 / 断开钱包
• 展示地址、余额、当前网络
• 切换网络（Ethereum / Sepolia / Polygon，可自定义）
• 多钱包支持（EIP-6963 发现）：MetaMask、OKX、Phantom、Coinbase
• 刷新后自动恢复上次连接（localStorage + eth_accounts）

安装

pnpm add miniwallet

或使用其他包管理工具：

npm install miniwallet
# 或
yarn add miniwallet

快速开始

本地 Demo

pnpm install
pnpm dev

在项目中使用

用 MiniWalletProvider 包裹应用，再放置 MiniWalletButton：

import { MiniWalletProvider, MiniWalletButton } from "miniwallet"

function App() {
  return (
    <MiniWalletProvider>
      <MiniWalletButton label="Connect Wallet" />
    </MiniWalletProvider>
  )
}

自定义支持的链（可选，不传则使用内置默认链）：

<MiniWalletProvider
  chains={[
    { id: 1, name: "Ethereum", symbol: "ETH", decimals: 18 },
    { id: 137, name: "Polygon", symbol: "MATIC", decimals: 18 },
  ]}
>
  <MiniWalletButton />
</MiniWalletProvider>

使用 Hook

需要自定义 UI 时，可直接使用 useMiniWallet（必须在 MiniWalletProvider 内）：

import { useMiniWallet } from "miniwallet"

function CustomWalletUI() {
  const {
    account,
    balance,
    isConnected,
    selectedChain,
    wallet,
    chains,
    connect,
    disconnect,
    switchChain,
  } = useMiniWallet()

  // 自定义渲染...
}

API

MiniWalletProvider

Prop	类型	默认值	说明
children	ReactNode	—	子节点
chains	ChainConfig[]	内置默认链	可选网络列表

MiniWalletButton

Prop	类型	默认值	说明
label	string | null	"Connect Wallet"	未连接时按钮文案

useMiniWallet() 返回值

字段	类型	说明
account	string	当前账户地址
balance	string	格式化后的余额
isConnected	boolean	是否已连接
selectedChain	ChainConfig | null	当前网络
wallet	WalletProvider | undefined	当前钱包信息
chains	ChainConfig[]	可用网络列表
connect	(wallet) => Promise<void>	连接指定钱包
disconnect	() => Promise<void>	断开连接
switchChain	(chain) => Promise<void>	切换网络

类型

type ChainConfig = {
  id: number        // 链 ID，如 1、11155111、137
  name: string
  symbol: string
  decimals: number
}

type WalletProvider = {
  id: string
  name: string
  icon: string
}

支持的钱包

钱包	EIP-6963 rdns
MetaMask	io.metamask
OKX	com.okex.wallet（旧品牌okex问题，兼容 com.okx.wallet）
Phantom	app.phantom
Coinbase	com.coinbase.wallet

需安装对应浏览器扩展；未检测到时会提示「请安装钱包」。

默认网络

网络	id	symbol
Ethereum	1	ETH
Sepolia	11155111	SepoliaETH
Polygon	137	MATIC

项目结构

src/
  MiniWalletProvider.tsx   # Context + 连接 / 切链 / 余额 / 自动恢复
  MiniWalletButton.tsx     # 连接按钮 UI
  useMiniWallet.ts         # Hook
  constants.ts             # 钱包列表、默认链、rdns 映射
  types.ts                 # 类型
  utils/formatUnits.ts     # wei → 可读余额
  icons/                   # 钱包与断开图标
dev/                       # 本地 Demo（不随包发布）

说明

• 钱包发现基于 EIP-6963，避免多扩展抢占 window.ethereum。
• 主动连接使用 eth_requestAccounts；刷新恢复使用 eth_accounts（不弹窗）。
• 上次连接的钱包 id 保存在 localStorage 的 miniwallet:lastWalletId。