feat: [Preconf Phase 4] Optimistic UI with Preconfirmation Guarantees
- 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
Leverage preconfirmation guarantees to provide optimistic UI updates, making EthAura feel instant like Web2 applications. Since preconfirmations provide cryptographic guarantees of inclusion, we can safely update UI state before on-chain finality.
## Tasks
### Optimistic Balance Updates
- [ ] Update wallet balances immediately on preconfirmation
```javascript
// On preconf receipt
const optimisticBalance = currentBalance - txAmount - estimatedGas
setBalance(optimisticBalance, { pending: true, preconfirmed: true })
// On block inclusion
const confirmedBalance = await fetchOnChainBalance()
setBalance(confirmedBalance, { pending: false })
```
- [ ] Show pending indicator on optimistic balances
- Subtle visual treatment (e.g., slightly faded, pulsing)
- Tooltip: "Balance reflects preconfirmed transaction"
- [ ] Handle balance reconciliation on finality
- Compare optimistic vs actual
- Alert user if discrepancy (should be rare)
### Transaction Chaining
- [ ] Allow sending new transactions without waiting for finality
```javascript
// User sends Tx A → gets preconf
// User can immediately send Tx B using preconf nonce
const nextNonce = preconfirmedTx.nonce + 1n
```
- [ ] Track pending nonces from preconfirmed transactions
- [ ] Handle nonce gaps if preconf fails (rare)
### Preconfirmed Transaction List
- [ ] Add "Preconfirmed" section to transaction history
```
┌─────────────────────────────────────┐
│ Preconfirmed (Guaranteed) │
│ ├─ Swap 0.5 ETH → 1,250 USDC ✓ │
│ └─ Target: Block #12345678 │
├─────────────────────────────────────┤
│ Recent Transactions │
│ ├─ Received 1.0 ETH │
│ └─ Sent 0.1 ETH to 0x... │
└─────────────────────────────────────┘
```
- [ ] Show "Guaranteed" badge with proposer info
- [ ] Display countdown to expected block
- [ ] Auto-move to confirmed list on inclusion
### Swap UX Optimization
- [ ] Show swap as complete on preconfirmation
```
✓ Swap Complete!
You'll receive 1,250 USDC in ~12 seconds
Guaranteed by proposer 0x...
```
- [ ] Update token balances optimistically
- [ ] Lock swap quote once preconfirmed (no more price changes)
### Notification System
- [ ] Instant success notification on preconf
```
🛡️ Transaction Preconfirmed!
Guaranteed inclusion in next block
```
- [ ] Follow-up notification on finality (optional, configurable)
```
✓ Transaction Finalized
12 confirmations
```
- [ ] Handle edge case: preconf broken (very rare)
```
⚠️ Preconfirmation Failed
Proposer did not include transaction
Resubmitting automatically...
```
### Settings & Preferences
- [ ] Add preconf settings to wallet settings
```
Preconfirmations
├─ Enable optimistic balances: [ON/OFF]
├─ Show finality notifications: [ON/OFF]
└─ Auto-resubmit on preconf failure: [ON/OFF]
```
- [ ] Allow users to wait for full confirmation if preferred
## UI Components
### PreconfirmedBadge
```jsx
```
### OptimisticBalance
```jsx
```
### TransactionChainIndicator
```jsx
```
## Files to Create/Modify
- `frontend/src/screens/WalletDetailScreen.jsx` - Optimistic balances
- `frontend/src/screens/ViewAllTransactionsScreen.jsx` - Preconf section
- `frontend/src/screens/SwapScreen.jsx` - Instant swap feedback
- `frontend/src/components/PreconfirmedBadge.jsx` - New component
- `frontend/src/components/OptimisticBalance.jsx` - New component
- `frontend/src/contexts/PreconfContext.jsx` - Track preconf state
- `frontend/src/screens/SettingsScreen.jsx` - Preconf preferences
## State Management
```javascript
// PreconfContext
const preconfState = {
pendingPreconfs: Map,
optimisticBalanceAdjustments: Map,
nextNonce: bigint, // Accounts for preconfirmed txs
}
```
## Acceptance Criteria
- [ ] Wallet balances update within 500ms of transaction
- [ ] Users can chain transactions without waiting
- [ ] Preconfirmed transactions clearly distinguished in UI
- [ ] Graceful handling of preconf failures
- [ ] Settings to control optimistic behavior
- [ ] Mobile responsive
## Dependencies
- Phase 1: UI Preparation (complete)
- Phase 2: Bundler Abstraction (complete)
- Phase 3: Preconf Protocol Integration (complete)
## Labels
`enhancement` `ui` `preconfirmations` `ux`
Contributor guide
Assessment
This issue has not been assessed yet.