hadv / hadv/ethaura

feat: [Preconf Phase 1] UI Preparation for Tiered Confirmation States

Open
#165 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.