Issue 008: Transaction History Coming Soon

**Priority:** Medium  
**Type:** Feature Request  
**Component:** UI Components  
**Created:** 2025-07-05  

## Summary

Multiple UI components show "Transaction history coming soon" placeholders, indicating this is a planned feature. While transaction history is mentioned in PRD Section 14 as a "Phase 2 Feature", it appears prominently in the current UI, suggesting user expectation for this functionality.

## Current State

### 1. ModernDashboard.tsx (line 58)
- "History" button in the main portfolio overview card
- Button is visible but non-functional
- Positioned alongside "Tokens" and "NFTs" buttons

### 2. WalletDetail.tsx (lines 114-118)
- Dedicated "Transaction History" section in wallet detail view
- Shows placeholder text: "Transaction history coming soon..."
- Takes up significant UI space in wallet details

## Expected Behavior

According to PRD Section 14 (line 552), transaction history is listed as a Phase 2 feature. However, its prominent placement in the UI suggests it should be prioritized. The feature should include:

1. **Transaction List**:
   - Chronological list of all transactions for a wallet/portfolio
   - Transaction type (swap, transfer in/out, stake, etc.)
   - Amount, token, and USD value at time of transaction
   - Transaction hash with link to Solana explorer
   - Status indicators (confirmed, pending, failed)

2. **Filtering and Search**:
   - Filter by transaction type
   - Filter by token
   - Date range selection
   - Search by transaction hash or token

3. **Transaction Details**:
   - Detailed view for each transaction
   - Gas fees paid
   - Counterparty addresses
   - Block number and timestamp
   - Related transactions (e.g., approval + swap)

## Technical Requirements

### API Endpoints Needed

```typescript
// Transaction history endpoints
GET /api/wallets/:address/transactions
  - Paginated transaction list
  - Query params: limit, offset, type, token, startDate, endDate

GET /api/portfolio/transactions
  - Aggregated transactions across all wallets
  - Same query params as wallet endpoint

GET /api/transactions/:signature
  - Detailed transaction information
  - Includes decoded instruction data
```

### Database Schema

```sql
CREATE TABLE transaction_history (
  signature TEXT PRIMARY KEY,
  wallet_address TEXT NOT NULL,
  transaction_type TEXT NOT NULL, -- 'transfer', 'swap', 'stake', etc.
  timestamp INTEGER NOT NULL,
  block_number INTEGER NOT NULL,
  status TEXT NOT NULL, -- 'confirmed', 'failed'
  from_address TEXT,
  to_address TEXT,
  token_mint TEXT,
  token_symbol TEXT,
  amount REAL,
  usd_value_at_time REAL,
  fee_lamports INTEGER,
  fee_usd REAL,
  instruction_data TEXT, -- JSON
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (wallet_address) REFERENCES wallet_balances(wallet_address)
);

CREATE INDEX idx_tx_wallet_timestamp ON transaction_history(wallet_address, timestamp DESC);
CREATE INDEX idx_tx_token ON transaction_history(token_mint);
CREATE INDEX idx_tx_type ON transaction_history(transaction_type);
```

### Data Fetching Strategy

1. **Initial Historical Sync**:
   - Use Helius Enhanced Transaction API
   - Fetch last 1000 transactions per wallet
   - Parse and categorize transaction types
   - Calculate USD values using historical prices

2. **Real-time Updates**:
   - WebSocket subscription for new transactions
   - Update transaction history in real-time
   - Trigger PNL recalculation if needed

3. **Transaction Parsing**:
   - Decode program instructions
   - Identify transaction types (Jupiter swaps, transfers, etc.)
   - Extract relevant token and amount data

## UI Implementation

### 1. Update ModernDashboard History Button

```tsx
<button 
  onclick="showTransactionHistory()"
  class="px-4 py-2 glass-card rounded-lg text-gray-300 hover:text-white transition-colors"
>
  History
</button>
```

### 2. Transaction History Component

```tsx
export const TransactionHistory = ({ walletAddress, limit = 50 }) => {
  return html\`
    <div class="glass-card rounded-2xl overflow-hidden">
      <div class="px-6 py-4 border-b border-glass-border">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold text-white">Transaction History</h3>
          <div class="flex items-center space-x-2">
            <\!-- Filter dropdown -->
            <select id="tx-filter" class="px-3 py-1 bg-white/10 border border-white/20 rounded-lg text-white text-sm">
              <option value="all">All Types</option>
              <option value="transfer">Transfers</option>
              <option value="swap">Swaps</option>
              <option value="stake">Staking</option>
            </select>
            <\!-- Date range -->
            <input type="date" id="tx-date-from" class="px-3 py-1 bg-white/10 border border-white/20 rounded-lg text-white text-sm">
            <span class="text-gray-400">to</span>
            <input type="date" id="tx-date-to" class="px-3 py-1 bg-white/10 border border-white/20 rounded-lg text-white text-sm">
          </div>
        </div>
      </div>
      
      <div class="overflow-x-auto max-h-96 overflow-y-auto">
        <table class="w-full">
          <thead class="sticky top-0 bg-glass-card z-10">
            <tr class="text-left text-gray-400 text-sm border-b border-glass-border">
              <th class="px-6 py-4 font-medium">Type</th>
              <th class="px-6 py-4 font-medium">Token</th>
              <th class="px-6 py-4 font-medium text-right">Amount</th>
              <th class="px-6 py-4 font-medium text-right">Value</th>
              <th class="px-6 py-4 font-medium">From/To</th>
              <th class="px-6 py-4 font-medium">Time</th>
              <th class="px-6 py-4 font-medium">Status</th>
            </tr>
          </thead>
          <tbody id="transactions-table">
            <\!-- Populated by JavaScript -->
          </tbody>
        </table>
      </div>
      
      <\!-- Load more button -->
      <div class="px-6 py-4 border-t border-glass-border">
        <button onclick="loadMoreTransactions()" class="w-full py-2 text-gray-400 hover:text-white transition-colors">
          Load More
        </button>
      </div>
    </div>
  \`;
};
```

### 3. Transaction Row Component

```javascript
function createTransactionRow(tx) {
  const typeIcon = getTransactionTypeIcon(tx.transaction_type);
  const typeColor = getTransactionTypeColor(tx.transaction_type);
  
  return \`
    <tr class="border-b border-glass-border hover:bg-white/5 transition-colors cursor-pointer" onclick="viewTransaction('\${tx.signature}')">
      <td class="px-6 py-4">
        <div class="flex items-center space-x-2">
          <span class="\${typeColor}">\${typeIcon}</span>
          <span class="text-white capitalize">\${tx.transaction_type}</span>
        </div>
      </td>
      <td class="px-6 py-4">
        <div class="flex items-center space-x-2">
          \${tx.token_symbol ? \`
            <img src="\${tx.token_image}" alt="\${tx.token_symbol}" class="w-5 h-5 rounded-full">
            <span class="text-white">\${tx.token_symbol}</span>
          \` : '<span class="text-gray-400">SOL</span>'}
        </div>
      </td>
      <td class="px-6 py-4 text-right">
        <p class="text-white \${tx.amount < 0 ? 'text-red-400' : 'text-green-400'}">
          \${tx.amount < 0 ? '-' : '+'}\${formatNumber(Math.abs(tx.amount))}
        </p>
      </td>
      <td class="px-6 py-4 text-right">
        <p class="text-white">\${formatCurrency(tx.usd_value_at_time)}</p>
        <p class="text-xs text-gray-400">\${formatCurrency(tx.current_value)} now</p>
      </td>
      <td class="px-6 py-4">
        <p class="font-mono text-xs text-gray-400">
          \${tx.from_address ? \`\${tx.from_address.slice(0, 4)}...\${tx.from_address.slice(-4)}\` : ''}
          \${tx.to_address ? \`→ \${tx.to_address.slice(0, 4)}...\${tx.to_address.slice(-4)}\` : ''}
        </p>
      </td>
      <td class="px-6 py-4">
        <p class="text-gray-400 text-sm">\${formatRelativeTime(tx.timestamp)}</p>
      </td>
      <td class="px-6 py-4">
        <span class="px-2 py-1 rounded-full text-xs \${
          tx.status === 'confirmed' ? 'bg-green-400/20 text-green-400' : 'bg-red-400/20 text-red-400'
        }">
          \${tx.status}
        </span>
      </td>
    </tr>
  \`;
}
```

## Implementation Phases

### Phase 1: Basic Transaction Display
1. Implement transaction fetching via Helius API
2. Store last 100 transactions per wallet
3. Display in simple table format
4. Basic filtering by type

### Phase 2: Enhanced Features
1. Full historical sync (1000+ transactions)
2. Advanced filtering and search
3. Transaction categorization
4. CSV export functionality

### Phase 3: Real-time Updates
1. WebSocket integration for live updates
2. Push notifications for significant transactions
3. Integration with PNL calculations
4. Transaction simulation for pending txs

## Acceptance Criteria

- [ ] Transaction history API endpoints implemented
- [ ] Database schema created with proper indexes
- [ ] Helius Enhanced Transaction API integrated
- [ ] Transaction parsing and categorization working
- [ ] UI displays transactions in chronological order
- [ ] Filtering by type and date range functional
- [ ] Transaction details viewable with explorer links
- [ ] Loading states and error handling implemented
- [ ] Mobile responsive design maintained
- [ ] Performance: <500ms load time for 50 transactions

## Dependencies

- Helius Enhanced Transaction API access
- Historical price data for USD calculations
- Transaction parsing library (or custom implementation)
- WebSocket support for real-time updates (Phase 3)

## Notes

- Consider caching parsed transaction data to avoid re-parsing
- Implement pagination to handle wallets with thousands of transactions
- Use background jobs for initial historical sync
- Consider privacy implications of storing full transaction history
- May need to implement transaction grouping (e.g., multi-step swaps)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Issue 008: Transaction History Coming Soon #9

Summary

Current State

1. ModernDashboard.tsx (line 58)

2. WalletDetail.tsx (lines 114-118)

Expected Behavior

Technical Requirements

API Endpoints Needed

Database Schema

Data Fetching Strategy

UI Implementation

1. Update ModernDashboard History Button

2. Transaction History Component

3. Transaction Row Component

Implementation Phases

Phase 1: Basic Transaction Display

Phase 2: Enhanced Features

Phase 3: Real-time Updates

Acceptance Criteria

Dependencies

Notes

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue 008: Transaction History Coming Soon #9

Description

Summary

Current State

1. ModernDashboard.tsx (line 58)

2. WalletDetail.tsx (lines 114-118)

Expected Behavior

Technical Requirements

API Endpoints Needed

Database Schema

Data Fetching Strategy

UI Implementation

1. Update ModernDashboard History Button

2. Transaction History Component

3. Transaction Row Component

Implementation Phases

Phase 1: Basic Transaction Display

Phase 2: Enhanced Features

Phase 3: Real-time Updates

Acceptance Criteria

Dependencies

Notes

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions