Skip to content

TransactionItem 交易记录项

显示单条交易记录


功能描述

展示单条交易的关键信息,用于交易历史列表。


属性规范

属性类型必需默认值说明
transactionTransactionY-交易数据
onPress() => voidN-点击回调

Transaction 数据结构

Transaction {
  hash: string
  type: TransactionType
  status: TransactionStatus
  amount: string
  symbol: string
  decimals: number
  timestamp: number
  counterparty?: string    // 对方地址
  memo?: string
}

TransactionType = 
  | 'send'       // 发送
  | 'receive'    // 接收
  | 'swap'       // 兑换
  | 'approve'    // 授权
  | 'stake'      // 质押
  | 'unstake'    // 解除质押
  | 'contract'   // 合约调用
  | 'mint'       // 铸造

TransactionStatus =
  | 'pending'    // 等待确认
  | 'confirming' // 确认中
  | 'confirmed'  // 已确认
  | 'failed'     // 失败

布局规范

┌─────────────────────────────────────────┐
│  [类型图标]  发送                        │
│             To: 0x1234...5678           │
│                                         │
│                           -1.5 ETH      │  ← 金额
│             14:30  [状态]               │  ← 时间 + 状态
└─────────────────────────────────────────┘

显示规则

类型图标和标题

类型图标标题
send↑ (红)发送
receive↓ (绿)接收
swap兑换
approve授权
stake🔒质押
unstake🔓解除质押
contract合约调用
mint铸造

金额颜色

类型符号颜色
send-红色
receive+绿色
其他默认

状态标签

状态样式显示
pending黄色背景等待中
confirming蓝色背景确认中 (3/12)
confirmed无标签不显示
failed红色背景失败

时间格式

场景格式
今天HH:mm
今年MM-DD HH:mm
往年YYYY-MM-DD

行为规范

必须 (MUST)

  1. 显示交易类型图标和标题
  2. 显示金额(带符号和颜色)
  3. 显示时间
  4. pending/failed 显示状态标签

建议 (SHOULD)

  1. 显示对方地址(缩略)
  2. 点击跳转交易详情
  3. pending 状态显示加载动画

可选 (MAY)

  1. 显示备注(memo)
  2. 支持滑动操作(复制哈希、浏览器查看)

设计标注

尺寸规格

部分规格
高度72px
内边距16px
图标尺寸40px
金额字号16px
辅助文字字号14px

状态标签

部分规格
内边距4px 8px
圆角4px
字号12px

交互状态

按压态

背景色变化:--color-muted/50

加载态(pending 交易)

图标区域显示旋转动画

Released under the MIT License.