feat: [Preconf Phase 1] UI Preparation for Tiered Confirmation States
- Dominant language
- JavaScript
- Stars
- 2
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
## Parent Issue
Part of #164 - Leverage EIP-7917 Based Preconfirmations for Sub-Second Transaction UX
## Overview
Prepare the UI components and state management for tiered transaction confirmation states. This phase can be started now, before Fusaka upgrade.
## Tasks
- [ ] Define new transaction state constants
```javascript
const TRANSACTION_STATES = {
SIGNING: 'signing',
PRECONF_PENDING: 'preconf_pending',
PRECONFIRMED: 'preconfirmed',
INCLUDED: 'included',
FINALIZED: 'finalized'
}
```
- [ ] Update `TransactionResultScreen.jsx`
- Add `preconfirmed` state with distinct visual treatment
- Show "Guaranteed for next block" message
- Add progress indicator: Preconfirmed → Included → Finalized
- Display target block number from preconfirmation
- [ ] Create `PreconfirmationBadge` component
- Visual indicator showing preconf status
- Proposer signature verification status
- Countdown to expected block inclusion
- [ ] Update `TransactionResultScreen.css`
- New color scheme for preconfirmed state (distinct from pending)
- Animation for state transitions
- Progress stepper styling
- [ ] Update Toast notifications in `ToastContext.jsx`
- Add `showPreconfirmed()` method
- Show instant success feedback on preconfirmation
- Follow-up toast when finalized
- [ ] Update transaction list UI
- Show preconfirmed transactions with special badge
- Distinguish from unconfirmed pending transactions
## Design Mockup
### Tiered States Visual
```
[Preconfirmed] ────────> [Included] ────────> [Finalized]
100-500ms ~12s 12.8min/SSF
✓ Guaranteed ✓ In block ✓ Final
Block #12345678 6 confirmations Economic finality
```
### State Colors
| State | Color | Icon |
|-------|-------|------|
| Preconfirmed | Blue/Teal | Shield with checkmark |
| Included | Yellow/Amber | Clock |
| Finalized | Green | Checkmark |
## Acceptance Criteria
- [ ] UI gracefully handles all 5 transaction states
- [ ] State transitions are smooth with animations
- [ ] Preconfirmed state clearly communicates "guaranteed but not yet on-chain"
- [ ] Works with existing transaction flow (backward compatible)
- [ ] Mobile responsive
## Files to Modify
- `frontend/src/screens/TransactionResultScreen.jsx`
- `frontend/src/styles/TransactionResultScreen.css`
- `frontend/src/contexts/ToastContext.jsx`
- `frontend/src/components/Toast.jsx`
- `frontend/src/styles/Toast.css`
## Dependencies
- None (can start immediately)
## Labels
`enhancement` `ui` `preconfirmations`
Contributor guide
Assessment
This issue has not been assessed yet.