> For the complete documentation index, see [llms.txt](https://docs.oogabooga.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oogabooga.io/developers/meta-api/frontend-integration-guide/dynamic-token-list.md).

# 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="/files/3foJiOwSlnIiJWarDSQq" 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>