feat: 添加交易历史、错误提示和打包优化
1. 交易历史记录功能 - 新增 useTransactionHistory hook 管理交易记录 - 新增 TransactionHistory 组件显示历史 - 交易记录保存到 localStorage 2. 错误处理和用户提示 - 新增 Toast 通知组件 - 交易提交/成功/失败时显示提示 - 解析并显示友好的错误信息 3. 打包优化 - 配置代码分割 (manualChunks) - 分离 react/web3/walletconnect/i18n - 提高 chunk 大小警告阈值 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
82
frontend/src/hooks/useTransactionHistory.ts
Normal file
82
frontend/src/hooks/useTransactionHistory.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
export type TransactionType = 'mint' | 'burn' | 'buy' | 'sell' | 'approve' | 'create_vault' | 'update_price' | 'test'
|
||||
|
||||
export interface TransactionRecord {
|
||||
id: string
|
||||
type: TransactionType
|
||||
hash: string
|
||||
timestamp: number
|
||||
status: 'pending' | 'success' | 'failed'
|
||||
amount?: string
|
||||
token?: string
|
||||
vault?: string
|
||||
error?: string
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'yt_asset_tx_history'
|
||||
const MAX_RECORDS = 50
|
||||
|
||||
export function useTransactionHistory() {
|
||||
const [transactions, setTransactions] = useState<TransactionRecord[]>([])
|
||||
|
||||
// 从 localStorage 加载历史记录
|
||||
useEffect(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) {
|
||||
setTransactions(JSON.parse(stored))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load transaction history:', e)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 保存到 localStorage
|
||||
const saveToStorage = (records: TransactionRecord[]) => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(records.slice(0, MAX_RECORDS)))
|
||||
} catch (e) {
|
||||
console.error('Failed to save transaction history:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新交易
|
||||
const addTransaction = (tx: Omit<TransactionRecord, 'id' | 'timestamp'>) => {
|
||||
const newTx: TransactionRecord = {
|
||||
...tx,
|
||||
id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
setTransactions(prev => {
|
||||
const updated = [newTx, ...prev].slice(0, MAX_RECORDS)
|
||||
saveToStorage(updated)
|
||||
return updated
|
||||
})
|
||||
return newTx.id
|
||||
}
|
||||
|
||||
// 更新交易状态
|
||||
const updateTransaction = (id: string, updates: Partial<TransactionRecord>) => {
|
||||
setTransactions(prev => {
|
||||
const updated = prev.map(tx =>
|
||||
tx.id === id ? { ...tx, ...updates } : tx
|
||||
)
|
||||
saveToStorage(updated)
|
||||
return updated
|
||||
})
|
||||
}
|
||||
|
||||
// 清空历史记录
|
||||
const clearHistory = () => {
|
||||
setTransactions([])
|
||||
localStorage.removeItem(STORAGE_KEY)
|
||||
}
|
||||
|
||||
return {
|
||||
transactions,
|
||||
addTransaction,
|
||||
updateTransaction,
|
||||
clearHistory,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user