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

[hadv]

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

  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