Advanced Pool Filters Implementation

[JosueBrenes]

Description

Implement advanced filtering and sorting options for the pool marketplace to help users find pools that match their preferences. This includes filtering by asset types, APY ranges, and sorting by various metrics.

What to Implement

• Filter component with multiple criteria options
• Sort functionality for different metrics
• Search capability for pools
• Filter persistence across sessions
• Clear and intuitive filter UI

Acceptance Criteria

• Filter pools by asset type (USDC, XLM, TBRG)
• APY range slider for supply and borrow rates
• Sort by TVL, APY, utilization rate
• Search pools by name or pool ID
• Filter state persists across page refreshes
• Clear all filters functionality

Technical Requirements

Files to Create

1. Pool Filters Component

   • Path: src/components/modules/marketplace/ui/components/PoolFilters.tsx
   • Purpose: Main filter interface

2. Filter Hook

   • Path: src/hooks/usePoolFilters.ts
   • Purpose: Filter state management and logic

3. Filter Types

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

Files to Modify

1. Marketplace Page

   • Path: src/components/modules/marketplace/ui/pages/MarketplacePage.tsx
   • Add filters section and integrate filtering logic

2. Marketplace Hook

   • Path: src/components/modules/marketplace/hooks/useMarketplace.hook.ts
   • Integrate filter logic with pool data

Implementation Details

Filter Types Definition

export interface PoolFilters {
  assets: string[];
  supplyAPYRange: [number, number];
  borrowAPYRange: [number, number];
  utilizationRange: [number, number];
  tvlRange: [number, number];
  searchQuery: string;
  sortBy: SortOption;
  sortOrder: 'asc' | 'desc';
}

export enum SortOption {
  NAME = 'name',
  SUPPLY_APY = 'supplyAPY',
  BORROW_APY = 'borrowAPY',
  TVL = 'tvl',
  UTILIZATION = 'utilization'
}

Filter Components Structure

1. Asset Type Filters

   • Checkbox group for supported assets
   • Visual asset icons and names
   • Select all/none functionality

2. Range Sliders

   • APY range slider (0-20%)
   • TVL range slider (dynamic based on data)
   • Utilization range slider (0-100%)

3. Search Input

   • Text input for pool name/ID search
   • Debounced search functionality
   • Search icon and clear button

4. Sort Controls

   • Dropdown for sort criteria
   • Toggle for ascending/descending order
   • Visual indicators for current sort

Filter Categories

1. Asset Filters

• USDC Pools: Pools with USDC reserves
• XLM Pools: Pools with XLM reserves
• TBRG Pools: Pools with TBRG reserves
• Multi-asset: Pools with multiple assets

2. APY Filters

• Supply APY Range: 0% to 20%
• Borrow APY Range: 0% to 25%
• APY Spread: Difference between borrow and supply

3. Pool Metrics

• TVL Range: Total Value Locked filtering
• Utilization Rate: 0% to 100%
• Pool Age: New vs established pools

4. Search & Sort

• Search: By pool name, ID, or description
• Sort Options:
  • APY (supply/borrow)
  • TVL (Total Value Locked)
  • Utilization rate
  • Pool name (alphabetical)

UI/UX Design

Filter Layout

┌─ Search Input ────────────────────────┐
├─ Asset Types ─────────────────────────┤
│  ☑ USDC  ☑ XLM  ☑ TBRG              │
├─ APY Ranges ──────────────────────────┤
│  Supply: [====●────] 0% - 5%          │
│  Borrow: [======●──] 0% - 8%          │
├─ Pool Metrics ────────────────────────┤
│  TVL: [===●───────] $100K - $1M       │
│  Util: [════●─────] 0% - 80%          │
├─ Sort & Order ────────────────────────┤
│  Sort by: [TVL ▼]  Order: [Desc ▼]    │
└─ [Clear All] ────────────────────────┘

Filter Indicators

• Show active filter count
• Visual badges for applied filters
• Quick remove buttons for individual filters

State Management

Filter State

• Use React state with useReducer for complex filters
• Debounce filter changes to avoid excessive re-renders
• Persist filters in localStorage

URL Integration (Optional)

• Sync filters with URL query parameters
• Allow sharing of filtered views
• Browser back/forward navigation support

Implementation Strategy

Phase 1: Basic Filters

• Asset type checkboxes
• Search functionality
• Basic sort options

Phase 2: Advanced Filters

• Range sliders for APY and metrics
• Complex filter combinations
• Filter persistence

Phase 3: Enhanced UX

• URL integration
• Filter presets
• Advanced search operators

Performance Considerations

• Debounce search input (300ms)
• Memoize filter functions
• Efficient array filtering and sorting
• Virtual scrolling for large pool lists

Accessibility

• Keyboard navigation for all filters
• Screen reader labels and descriptions
• High contrast mode compatibility
• Focus management and indicators

Filter Logic Examples

const filterPools = (pools: Pool[], filters: PoolFilters) => {
  return pools.filter(pool => {
    // Asset filter
    if (filters.assets.length > 0) {
      const hasAsset = filters.assets.some(asset =>
        pool.reserves.some(reserve => reserve.asset === asset)
      );
      if (!hasAsset) return false;
    }

    // APY range filter
    const supplyAPY = parseFloat(pool.supplyAPY);
    if (supplyAPY < filters.supplyAPYRange[0] ||
        supplyAPY > filters.supplyAPYRange[1]) {
      return false;
    }

    // Search filter
    if (filters.searchQuery) {
      const query = filters.searchQuery.toLowerCase();
      return pool.name.toLowerCase().includes(query) ||
             pool.id.toLowerCase().includes(query);
    }

    return true;
  });
};

Dependencies

• Existing UI components (slider, checkbox, input)
• Pool data from marketplace hook
• LocalStorage for persistence
• Debouncing utility (lodash.debounce or custom)

Definition of Done

• All filter types work correctly
• Search functionality is responsive and accurate
• Sort options work for all metrics
• Filter state persists across sessions
• UI is intuitive and accessible
• Performance is optimized for large datasets
• Mobile responsive design implemented

[emarc99]

Would love to do this!

[emarc99]

PR in a few..