How to Build a Liquidity Pool Finder App

CoinGecko API recently released its exclusive on-chain Megafilter endpoint—a powerful and advanced filtering feature for fetching on-chain pool data across multiple networks and DEXs.

In this article, we'll leverage the Megafilter endpoint to build a web application for exploring and filtering liquidity pools to help identify promising pools early, while ensuring they are trusted and healthy. We'll be using SvelteKit, so familiarity with Svelte or modern JavaScript frameworks is recommended but not necessary.

As always, we'll include a GitHub link at the end of the article, allowing you to get started quickly.

How to Use the Megafilter API Endpoint

The Megafilter API returns a paginated list of liquidity pool data, aggregated by GeckoTerminal from multiple networks and decentralized exchanges (DEXs)—all accessible through a single endpoint.

Since the results are paginated, displaying them in a paginated table is a natural fit for web or app integration. To navigate through the pages, simply adjust the page parameter in the request URL:

https://pro-api.coingecko.com/api/v3/onchain/pools/megafilter?page=1

The endpoint provides several ways to slide and dice the data by allowing you to append multiple filter and sorter parameters to the request URL. Filter by:

• Networks (comma separated)
• DEXs (comma separated)
• FDV
• Volume
• Transaction count
• And more

Here's an example of a request for pools on the Polygon, BSC, and Solana networks, with a FDV and minimum volume of $10,000:

https://pro-api.coingecko.com/api/v3/onchain/pools/megafilter?page=1&networks=polygon_poly%2C%20bsc%2C%20sol&fdv_usd_min=10000&h24_volume_usd_min=10000

Some parameters, like networks, require calls to other CoinGecko API endpoints to fetch valid properties since the endpoint searches by CoinGecko ID.

Now that we have a basic understanding of how the endpoint works, we'll use a practical example to slice and dice the endpoint data.

Pre-requisites

• A CoinGecko Pro API Key
• Node.js and npm (or pnpm)

Obtaining a CoinGecko API Key

To obtain a CoinGecko API key, head over to the Developer’s Dashboard and click on +Add New Key in the top right corner. For detailed instructions on generating and setting up your key, refer to this guide. Because we’re relying on the Megafilter endpoint, an Analyst plan or higher is required for access.

Installing Node.js and npm

Install node.js by opening a new console or terminal window and type in the corresponding commands for your operating system:

Step 1. Configure the Project

With the requirements covered, let's set up our project by initializing SvelteKit, adding a component library, and securely storing our API keys.

Initializing Sveltekit

We chose Sveltekit because it's easy to get started with, keeps the code concise, and, more importantly, with the right component library, we can easily build a paginated table for our Megafilter endpoint data.

To get started, create an empty directory and run the following command in your terminal/cmd:

npx sv create my-app

Here are the configuration options that we’re going to use for this project:

Note that you’ll need to include at least TypeScript and tailwindcss to follow along with this guide.

Installing Flowbite (Component Library)

A component library is a collection of pre-styled, customizable elements that help quickly build a visually appealing app while saving time on creating a consistent design. Flowbite is a well-established library in the Svelte ecosystem, but we picked it because of how easy it makes it to display our Megafilter data.

Start by installing the Flowbite and Flowbite Icons library:

Now, navigate to src/app.css and replace the contents of the file with the following settings:

This defines our theme’s primary colors, so feel free to pick any other colors you prefer.

To confirm the installation, run npm run dev and your app should be available at http://localhost:5173.

Storing API Keys

Create a new file called .env at the root of your project to securely store your CoinGecko API key:

Step 2. Define Megafilter Types

The Megafilter is a complex endpoint that takes in multiple parameters, so mapping out all the various filters gives us a good idea of what our requests must look like. See the CoinGecko API documentation for a detailed breakdown of all the Megafilter endpoint parameters. Here is an example of how these can be mapped:

Start by creating a new file called Filter.ts under src/lib/Types.

Now that we’ve explored the data going into the Megafilter, it's equally important to understand the shape of the output. The API responds with an array of PoolData[] that contains several nested objects, so we can map those as follows:

You may define this in a file called PoolData.ts. Note that despite it being a paged endpoint, it does not return any common pagination properties such as recordCount, itemsPerPage, and pageNumber.

Depending on your implementation, you may want to create specific types for some filter options. For instance, here we're creating a new file called Checks.ts and defining a type for the &checks= parameter. This can take up to four comma-separated parameters.

The next type is not required for the Megafilter, but in most cases, you will want to map the value of a filter (ie, no_honeypot) to a user-facing label such as No Honeypot. Inside a new file called Sorters.ts, define the following type:

Step 3. Set Up Megafilter Requests

A good way to make requests to the Megafilter endpoint is to define a CoinGecko class that you can reuse throughout your application. Under src/lib/Providers, we can create a new file called CGProdiver.ts.

Since the Megafilter endpoint expects a query string for our parameters, we need to make sure we provide this on every call. One way to do this is to build a simple helper function to parse our parameters and convert them to a query string. For instance, under src/lib/Utils/QueryParser.ts and append the output to the endpoint URL:

Step 4. Define Filter Options

Some filter options, like the networks filter, require fetching data from other CoinGecko endpoints to retrieve a list of filter options before passing them to the Megafilter.

One way to do this is to use Postman to make a request to the relevant endpoint and store the response. 

Under src/lib/Data create a new file called AvailableNetworks.ts and store the response from Supported Networks List as a Sorter type:

Note that we modified the response to look more user-friendly.

Next, we need to have an easy way to send filter values to the various megafilter parameters. We could use simple input fields, but those are prone to errors as it relies on the user to input a value manually. So, we'll create a few dropdown options to avoid sending bad requests to the Megafilter endpoint. Under src/lib/Data create another file called PoolSortingOptions.ts:

Step 5: Interact with the API

In a production environment, you want to keep your CoinGecko API Keys secure. One way to achieve this is to ensure that all requests made to the Megafilter endpoint are handled server-side. In Svelte, it’s possible to create server-side code execution for specific routes, by defining a +page.server.ts file. 

Under src/routes create a new file called +page.server.ts:

This server-side function extracts query parameters and fetches data from the Megafilter endpoint using cg.getFilteredPools(). It also securely reads our API Key from the .env file.

Step 6. Build the UI

We'll start building the UI by defining components such as sorters and filters before rendering the response in a data table.

Building Components

Under src/lib/Components start by creating a file called SorterButtonGroup.svelte.

This component takes any number of sorter options and is well suited to work with Megafilter options where only one value may be specified, such as the trending &sort= parameter:

Next, let’s create a filter button inside a new file called FilterButton.svelte.

We’ll use this to render filters that allow us to select multiple options, such as the comma-separated &checks= parameter.

Next, let’s create a price tag, under PriceTag.svelte

We’ll use this to render some of the responses back from the Megafilter, such as the price_change_percentage.

Next, to display options well suited for dropdown components, such as the &fdv_usd_min= we can create a Dropdown button group inside a new file called DropDownButtonGroup.svelte.

This will help us render drop-down filter options like so:

Building the Filter Tabs

Since we have many filters, we can use Filter Tabs to display filters without cluttering the application. Under the same directory (src/lib/Components) create a new file called FilterTabs.svelte.

This component binds most of its properties, allowing them to be edited. This is useful for modifying parent properties directly from a child component.

Building the Data Table

This is where we define how the Megafilter response will render on the page. We opted for a paginated table, which makes navigation easy and saves space. We can start by creating a new file called DataTable.svelte.  

Step 7. Putting It All Together

We now have all the necessary data and elements required to start filtering through on-chain pools using the Megafilter. All we need to do is define a variable for our server data, and pass this to the appropriate components. 

Replace the contents inside src/routes/+page.svelte with the following: 

Every time a filter is selected or modified, or when the page number changes on the table, Svelte automatically makes a filtered request to the Megafilter endpoint and returns the new set of data.

To launch and interact with your web app, run npm run dev and navigate to http://localhost:5173 (or the next available port).

The end result should look something like this:

Interacting with the filters immediately updates the table data and the query string. Clicking on a row expands it and provides more details about that specific liquidity pool.

Use the Tabs to navigate through various filters and sorting options that we have defined, and use the Pagination buttons to navigate the table results. You may also expand this interface by creating more filter options. See the Filters type for all possible filtering options.

If you enjoyed this article, be sure to check out others like building a candlestick chart app.