Vault Detail Page #8
Description
Description
Design the comprehensive vault detail page showing all information about a specific vault, including status, milestones, timeline, transactions, and available actions.
Target Users
- Users checking vault status
- Users tracking milestone progress
- Verifiers reviewing vault for validation
- Users needing detailed vault information
Design Requirements
Must Include:
- Vault Header:
- Vault name
- Status badge (large, prominent)
- Amount locked (large typography)
- Quick actions (based on status)
- Status Timeline:
- Visual timeline from creation to deadline
- Current position marker
- Key dates marked (start, milestones, end)
- Time remaining countdown
- Vault Information Section:
- Created date
- Deadline date
- Duration
- Creator address
- Verifier address (if assigned)
- Success destination
- Failure destination
- Vault contract address
- Milestones Section:
- List of all milestones
- Milestone status (pending, validated, failed)
- Milestone details (description, criteria)
- Validation date (if validated)
- Evidence/proof link (if submitted)
- Transaction History:
- Vault creation transaction
- Validation transactions
- Release/redirect transaction
- Links to Stellar Explorer
- Actions Panel:
- Validate milestone (if verifier)
- Cancel vault (if conditions allow)
- Extend deadline (if available)
- Add milestone (if available)
Should Include:
- Share vault link
- Export vault report
- Audit log of all changes
- Comments/notes section
- Related vaults (if part of a series)
- Notification preferences for this vault
Design Specifications
- Timeline: Visual, horizontal on desktop, vertical on mobile
- Amount: Largest typography element
- Addresses: Monospace, truncated with copy button
- Responsive: Consider tab navigation on mobile
Deliverables
- Active vault state
- Completed vault state (success)
- Failed vault state
- Cancelled vault state
- Pending validation state
- Mobile responsive design
- All interactive states
Designer Notes
- This is the "source of truth" for a vault—be comprehensive
- Status should be unmistakably clear
- Timeline visualization helps users understand progress
- Different states need visually distinct treatments