# Dynamic Token List

[Github](https://github.com/0xoogabooga/meta-agg-fe-tutorial) 

[Live demo](https://meta-agg-fe-tutorial.vercel.app/?tab=aggregators)

<figure><img src="https://3123339049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrN7qpP33OgkfjSCciTy3%2Fuploads%2FheummxjkYUBWCOi20yAH%2Fimage.png?alt=media&#x26;token=931feabc-8104-451c-b112-86f990143410" alt=""><figcaption></figcaption></figure>

Demonstrates how to fetch and display available aggregators and their supported token pairs in real-time.

**Architecture Overview**

**🏗️ Backend Infrastructure**

* **Aggregators Registry**: Service providing real-time aggregator information
* **Token Pair Discovery**: Availability across different DEX protocols

**📁 Frontend Components**

1. **API Layer** (`src/api/api.ts`)
   * HTTP requests to the aggregators registry endpoint
   * Data fetching and caching
2. **Data Management** (`src/hooks/use-aggregators-list.ts`)
   * React hook for fetching aggregator data
   * Real-time updates and error handling
3. **UI Components** (`src/components/aggregators-list/`)
   * Interactive aggregator information display
   * Token pair selection and filtering

<br>