Transaction History Page #12
Description
Description
Design a page showing the complete history of all vault-related transactions, including vault creations, validations, fund releases, and redirections.
Target Users
- Users tracking their financial activity
- Users needing transaction records
- Users verifying on-chain activities
Design Requirements
Must Include:
- Transaction List:
- All transactions in chronological order
- Transaction type icon (create, validate, release, redirect)
- Amount involved
- Timestamp
- Status (confirmed, pending, failed)
- Associated vault name
- Transaction hash (truncated, copyable)
- Link to Stellar Explorer
- Filtering Options:
- By transaction type
- By vault
- By date range
- By amount range
- Transaction Detail Modal:
- Full transaction hash
- From/To addresses
- Amount
- Fees paid
- Block number
- Confirmation status
- Raw transaction data (expandable)
- Summary Statistics:
- Total transactions
- Total fees paid
- Total capital moved
Should Include:
- Export transactions (CSV for tax purposes)
- Search by transaction hash
- Pending transactions section
- Failed transactions with retry option
- Transaction categorization
Design Specifications
- Transaction item height: 64-72px
- Hash display: Monospace font
- Status: Color-coded badges
- Mobile: Simplified list with expandable details
Deliverables
- Transaction list page
- Transaction detail modal
- Filter bar states
- Empty state
- Loading states
- Mobile responsive design
Designer Notes
- Transaction data is for reference and records—prioritize clarity
- Users may need this for tax/accounting—make export easy
- Blockchain explorers are technical—provide in-app context
- Show transaction status clearly (confirmed vs. pending)