WalletCard 钱包卡片

展示钱包概览和快捷操作

---

功能描述

展示钱包的基本信息、资产总览和常用操作入口。

---

属性规范

属性	类型	必需	默认值	说明
wallet	Wallet	Y	-	钱包数据
balance	Balance	N	-	余额数据
fiatValue	FiatValue	N	-	法币估值
onTransfer	() => void	N	-	转账回调
onReceive	() => void	N	-	收款回调
onMore	() => void	N	-	更多操作回调
loading	boolean	N	false	加载状态

Wallet 数据结构

Wallet {
  id: string
  name: string
  address: string
  chainId: string
  avatar?: string
  type: 'mnemonic' | 'privateKey' | 'watch'
}

Balance 数据结构

Balance {
  amount: string
  symbol: string
  decimals: number
}

FiatValue 数据结构

FiatValue {
  value: number
  currency: string     // USD, CNY, etc.
  change24h?: number   // 24h 涨跌幅
}

---

布局规范

┌─────────────────────────────────────────┐
│  ┌────┐                                 │
│  │头像│  钱包名称              [更多 ⋮] │
│  └────┘  0x1234...5678  [复制]          │
├─────────────────────────────────────────┤
│                                         │
│           ¥ 12,345.67                   │  ← 法币估值
│           +2.5% 今日                    │  ← 涨跌幅（可选）
│                                         │
│           1.2345 BFM                    │  ← 原生代币余额
│                                         │
├─────────────────────────────────────────┤
│                                         │
│    [转账]      [铸造]      [收款]       │  ← 快捷操作
│                                         │
└─────────────────────────────────────────┘

---

状态规范

加载态

┌─────────────────────────────────────────┐
│  ████  ████████████                     │
│        ████████████                     │
├─────────────────────────────────────────┤
│           ████████████                  │
│           ████████                      │
├─────────────────────────────────────────┤
│    ████      ████      ████             │
└─────────────────────────────────────────┘

无余额态

正常显示，余额为 "0 BFM"

错误态

显示重试按钮替代余额

---

行为规范

必须 (MUST)

1. 显示钱包名称
2. 显示缩略地址
3. 地址可复制

建议 (SHOULD)

1. 显示原生代币余额
2. 提供快捷操作按钮
3. 支持下拉刷新余额

可选 (MAY)

1. 显示法币估值
2. 显示 24h 涨跌幅
3. 显示钱包头像

---

设计标注

尺寸规格

部分	规格
卡片内边距	16px
头像尺寸	40px
法币金额字号	28px
代币余额字号	16px
操作按钮间距	24px

颜色规格

状态	涨跌颜色
上涨	--color-success
下跌	--color-destructive
持平	--color-muted-foreground

背景

• MAY 使用渐变背景突出品牌感
• 建议使用 primary 色系的浅色渐变