✨ Add Transaction Status Tracking and History

[Mosas2000]

Description

After submitting transactions, users have no way to track their status or view transaction history within the app.

Current State

• Transactions show "submitted" but no follow-up
• No pending transaction indicator
• No transaction history page
• Users must manually check Stacks Explorer

Proposed Features

1. Pending Transaction Indicator

• Global indicator in header showing pending txs
• Click to see pending transaction details
• Notification when transaction confirms

2. Transaction Status Polling

// hooks/useTransactionStatus.ts
export function useTransactionStatus(txId: string) {
  // Poll Stacks API for transaction status
  // Return: 'pending' | 'success' | 'failed'
  // Include block confirmation count
}

3. Transaction History Page

• List all user's transactions with 0xCast contracts
• Filter by type (stake, claim, create, vote)
• Link to Stacks Explorer for each tx
• Show gas fees paid

4. In-App Notifications

// When tx confirms:
toast.success('Your stake of 10 STX on Market #5 confirmed!');

UI Mockup

┌─ Header ─────────────────────────────────┐
│ [0xCast]  Markets  Portfolio  🔔 (2)     │
└──────────────────────────────────────────┘
         │
         ▼
┌─ Pending Transactions ───────────────────┐
│ • Stake 10 STX on Market #5     Pending  │
│   0x1234...abcd              ⏳ 2 mins   │
│                                          │
│ • Claim winnings Market #3    Confirming │
│   0x5678...efgh              ✓ 1/3      │
└──────────────────────────────────────────┘

Files to Create

• frontend/src/hooks/useTransactionStatus.ts
• frontend/src/hooks/useTransactionHistory.ts
• frontend/src/pages/TransactionsPage.tsx
• frontend/src/components/PendingTxIndicator.tsx
• frontend/src/components/TransactionToast.tsx

API Endpoints

Use Hiro API for transaction tracking:

• GET /extended/v1/tx/{tx_id}
• GET /extended/v1/address/{address}/transactions

Priority

🟡 Medium - Important UX improvement

[Mosas2000]

Implemented transaction status tracking and history with 11 commits:

Changes:

1. Add transaction status types and utility functions
2. Add transaction tracking hook with API polling
3. Add TransactionHistory component with status display
4. Add TransactionToast component for status notifications
5. Add TransactionProvider context for global state management
6. Integrate TransactionProvider into App component
7. Add TransactionHistoryPage with stats and filtering
8. Add transactions route to App routing
9. Add Activity link to Header navigation
10. Add centralized transaction feature exports module
11. Fix TypeScript type imports for verbatimModuleSyntax

Features:

• Real-time transaction status tracking (pending, success, failed, dropped)
• Automatic polling of pending transactions via Stacks API
• Toast notifications for transaction status updates
• Dedicated Activity page with transaction history
• Transaction status filtering and statistics
• Explorer links for all transactions
• Local storage persistence for transaction history

Build verified successfully.