ChainSelector 链选择器

选择区块链网络

---

功能描述

让用户从可用的区块链网络列表中选择一个。

---

属性规范

属性	类型	必需	默认值	说明
value	ChainId	N	-	当前选中的链
onChange	(chainId) => void	Y	-	选择回调
chains	Chain[]	Y	-	可选链列表
disabled	boolean	N	false	禁用状态
placeholder	string	N	'选择链'	未选中时的提示

Chain 数据结构

Chain {
  id: string          // 链标识
  name: string        // 显示名称
  symbol: string      // 原生代币符号
  iconUrl?: string    // 链图标
  testnet?: boolean   // 是否测试网
}

---

状态机

    ┌─────────┐      tap       ┌─────────┐
    │ Closed  │ ─────────────► │  Open   │
    └─────────┘                └─────────┘
         ▲                          │
         │                          │ select / cancel / backdrop
         └──────────────────────────┘

---

布局规范

触发器

┌─────────────────────────────────┐
│  [链图标]  链名称         [▼]   │
└─────────────────────────────────┘

选择面板 (Sheet)

┌─────────────────────────────────┐
│           选择链                 │
├─────────────────────────────────┤
│  [●] BFM Chain                  │  ← 选中项
│        BFM                      │
├─────────────────────────────────┤
│  [ ] Ethereum                   │
│        ETH                      │
├─────────────────────────────────┤
│  [ ] BNB Chain                  │
│        BNB                      │
├─────────────────────────────────┤
│  [ ] Polygon                    │
│        MATIC                    │
└─────────────────────────────────┘

---

行为规范

必须 (MUST)

1. 显示当前选中链的图标和名称
2. 点击触发器打开选择面板
3. 选中项有明确的视觉标识
4. 选择后自动关闭面板

建议 (SHOULD)

1. 显示链的原生代币符号
2. 测试网标记为不同样式
3. 支持搜索（链较多时）

可选 (MAY)

1. 分组显示（主网/测试网）
2. 显示链的在线状态
3. 支持自定义添加链

---

设计标注

触发器

部分	规格
高度	44px
内边距	12px 16px
图标尺寸	24px
圆角	8px

选择项

部分	规格
高度	56px
内边距	12px 16px
图标尺寸	32px
选中图标	24px

颜色

状态	背景色
默认	transparent
选中	--color-primary/10
hover	--color-muted

---

测试网标识

┌─────────────────────────────────┐
│  [图标]  Sepolia Testnet  [测试] │
│           ETH                   │
└─────────────────────────────────┘

• "测试" 标签使用 warning 颜色
• 或在名称后显示 (Testnet) 后缀