Pool History/Activity Feed Implementation

[JosueBrenes]

Description

Implement a real-time activity feed that displays pool transactions including supplies, borrows, liquidations, and repayments. This will provide transparency and help users track pool activity and their own transaction history.

What to Implement

• Real-time activity feed component
• Transaction monitoring and parsing
• Activity filtering and categorization
• Transaction details with links to explorers
• Pagination for historical data

Acceptance Criteria

• Display recent pool transactions in real-time
• Show transaction types with appropriate icons
• Filter activities by type (supply, borrow, liquidation, etc.)
• Link to Stellar explorer for transaction details
• Pagination for large transaction histories
• Auto-refresh without page reload

Technical Requirements

Files to Create

1. Activity Feed Component

   • Path: src/components/modules/marketplace/ui/components/ActivityFeed.tsx
   • Purpose: Main activity feed display

2. Activity Item Component

   • Path: src/components/modules/marketplace/ui/components/ActivityItem.tsx
   • Purpose: Individual transaction display

3. Pool Activity Hook

   • Path: src/hooks/usePoolActivity.ts
   • Purpose: Fetch and manage activity data

4. Transaction Monitoring Helper

   • Path: src/helpers/transaction-monitoring.helper.ts
   • Purpose: Parse and categorize transactions

5. Activity Types

   • Path: src/@types/activity.entity.ts
   • Purpose: TypeScript interfaces for activities

Files to Modify

• src/components/modules/marketplace/ui/pages/MarketplacePage.tsx
• Add activity feed section or tab

Implementation Details

Activity Types to Track

export enum ActivityType {
  SUPPLY = 'supply',
  BORROW = 'borrow',
  REPAY = 'repay',
  LIQUIDATION = 'liquidation',
  WITHDRAWAL = 'withdrawal'
}

export interface PoolActivity {
  id: string;
  type: ActivityType;
  user: string;
  asset: string;
  amount: string;
  timestamp: Date;
  transactionHash: string;
  blockNumber?: number;
}

Real-time Updates Strategy

• WebSocket connection for live updates
• Polling fallback mechanism
• Event subscription to Stellar network
• Local state management with caching

Data Sources

• Stellar blockchain transaction data
• Blend Protocol event logs
• Pool contract interactions
• User transaction history

Features to Implement

1. Activity Feed Display

• Chronological list of activities
• Visual icons for each activity type
• User-friendly formatting of amounts
• Relative timestamps (e.g., "2 minutes ago")

2. Filtering Options

• Filter by activity type
• Filter by asset type
• Filter by user (show only current user's activities)
• Date range filtering

3. Transaction Details

• Expandable details for each activity
• Links to Stellar Expert explorer
• Transaction fee information
• Block confirmation status

4. Real-time Features

• Live activity updates
• Toast notifications for new activities
• Activity counter badges
• Auto-scroll to new activities

UI/UX Considerations

Visual Design

• Consistent icons for each activity type
• Color coding for different activities
• Clear visual hierarchy
• Loading states and skeletons

User Experience

• Infinite scroll or pagination
• Quick filters easily accessible
• Search functionality
• Export functionality

Activity Icons

• 📈 Supply: Arrow up / Plus icon
• 📉 Borrow: Arrow down / Minus icon
• 💰 Repay: Circular arrow / Check icon
• ⚠️ Liquidation: Warning / Lightning icon
• 🔄 Withdrawal: Arrow left / Export icon

Performance Considerations

• Efficient data fetching and caching
• Virtual scrolling for large datasets
• Debounced real-time updates
• Optimistic UI updates

Integration Points

Stellar Network

• Transaction monitoring
• Block confirmation tracking
• Address and transaction parsing

Blend Protocol

• Pool event monitoring
• Contract interaction tracking
• Position change detection

External Services

• Stellar Expert API for transaction details
• Price feeds for USD value display
• Time zone handling for timestamps

Error Handling

• Network connectivity issues
• Failed transaction parsing
• Missing transaction data
• Rate limiting from APIs

Dependencies

• Stellar SDK for blockchain interaction
• WebSocket library for real-time updates
• Date formatting library (date-fns)
• Intersection Observer for infinite scroll

Definition of Done

• Activity feed displays real transactions
• Real-time updates work without page refresh
• All filter options function correctly
• Links to explorer work properly
• Performance is optimized for large datasets
• Error handling covers edge cases
• Mobile responsive design implemented

[respp]

Hello @JosueBrenes Can I take this issue?

I'm a developer with a solid background in Web3, working across both front-end and back-end. I've contributed to projects in ecosystems like StarkNet, Stellar, Optimism, and Worldcoin, with a focus on building scalable, secure, and efficient blockchain applications.

Currently, I'm a Fellow at OnlyDust and a maintainer at PayStell and StellarRent, where I lead the development of smart contracts and decentralized infrastructure.

[ShantelPeters]

Please can i be assigned to this issue ?