feat: added dynamic assets categories using Coingecko API #2593
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
There was a problem hiding this comment.
waiting for automated categories but
hover seems off
Also i think would be more pretty to have search on left and picker right.
and full width on mobile (and check left and right padding is same as top bottom seems smaller not sure)
worth it adding in dashboard wherever we have more than X assets or assets in more than Y categories?
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
AGMASO
changed the title
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
Added the same style as in Figma, using the ReservePage timeframe buttons as a reference to ensure consistency across the app. |
|
| const CG_ENDPOINT = 'https://pro-api.coingecko.com/api/v3/coins/markets'; | ||
| const HEADERS: HeadersInit = { | ||
| accept: 'application/json', | ||
| 'x-cg-pro-api-key': process.env.NEXT_PUBLIC_CG_API_KEY ?? '', |
There was a problem hiding this comment.
let's put the api key behind a proxy so we hide it from external abuse
| setError(null); | ||
|
|
||
| try { | ||
| // Toda la lógica de fetch integrada aquí |
There was a problem hiding this comment.
english if a comment if necessary (this one we can delete yo creo)
| fetch(`${CG_ENDPOINT}?vs_currency=usd&category=stablecoins&per_page=250&page=1`, { | ||
| method: 'GET', | ||
| headers: HEADERS, | ||
| }), | ||
| fetch(`${CG_ENDPOINT}?vs_currency=usd&category=stablecoins&per_page=250&page=2`, { | ||
| method: 'GET', | ||
| headers: HEADERS, | ||
| }), |
There was a problem hiding this comment.
- how we make sure 2 pages will be enough
- maybe we can bring more items per page so more efficient
- can we ask for a specific list? https://docs.coingecko.com/reference/coins-id not sure
There was a problem hiding this comment.
-
In the CoinGecko API, we can’t set more than 250 items per page.
-
The full list of the stablecoins category has 356 items, so two pages are enough.
-
We could request specific tokens, but in this case I think the goal is to fetch the entire pre-made category so we don’t have to maintain the list ourselves.
|
|
||
| import { STABLECOINS_SYMBOLS_FALLBACK } from './assetCategories'; | ||
|
|
||
| const CG_ENDPOINT = 'https://pro-api.coingecko.com/api/v3/coins/markets'; |
There was a problem hiding this comment.
how we define the chain id? so which chain ids are supported? e.g. i can't see it loading on zkSync not sure if bc it's not supported by coingecko something to double check
There was a problem hiding this comment.
To retrieve coins from a category in CoinGecko, we can’t specify a chain ID. The API returns the general tokens (without bridge variations like USDC.e for USDC) as well as chain-specific tokens when they exist. That’s why we can use the category endpoint directly, without worrying about chain IDs.
| } | ||
| }; | ||
|
|
||
| loadStablecoins(); |
There was a problem hiding this comment.
would be possible to merge all 'use' hooks and have a simpler useAssetCategories? e.g. this may grow in the future too
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
| return await response.json(); | ||
| }, | ||
| queryKey: ['coingecko-categories'], | ||
| staleTime: 1000 * 60 * 60 * 24, |
There was a problem hiding this comment.
maybe we can even cache the response for a week?
| const [resEth1, resEth2, resEth3] = await Promise.all([ | ||
| fetch(`${CG_ENDPOINT}?vs_currency=usd&category=liquid-staked-eth&per_page=250&page=1`, { | ||
| method: 'GET', | ||
| headers: HEADERS, | ||
| }), | ||
| fetch(`${CG_ENDPOINT}?vs_currency=usd&category=ether-fi-ecosystem&per_page=250&page=1`, { | ||
| method: 'GET', | ||
| headers: HEADERS, | ||
| }), | ||
| fetch(`${CG_ENDPOINT}?vs_currency=usd&category=liquid-staking-tokens&per_page=250&page=1`, { | ||
| method: 'GET', | ||
| headers: HEADERS, | ||
| }), | ||
| ]); |
There was a problem hiding this comment.
we can make eth calls in parallel to stable to optimize
| const isOriginAllowed = (origin: string | undefined): boolean => { | ||
| if (!origin) return false; | ||
|
|
||
| if (allowedOrigins.includes(origin)) return true; | ||
|
|
||
| // Match any subdomain ending with avaraxyz.vercel.app for deployment urls | ||
| const allowedPatterns = [/^https:\/\/.*avaraxyz\.vercel\.app$/]; | ||
|
|
||
| return allowedPatterns.some((pattern) => pattern.test(origin)); | ||
| }; | ||
|
|
||
| if (process.env.CORS_DOMAINS_ALLOWED === 'true') { | ||
| res.setHeader('Access-Control-Allow-Origin', '*'); | ||
| } else if (origin && isOriginAllowed(origin)) { | ||
| res.setHeader('Access-Control-Allow-Origin', origin); | ||
| } | ||
|
|
||
| res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS'); | ||
| res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); | ||
|
|
||
| if (req.method === 'OPTIONS') { | ||
| return res.status(200).end(); | ||
| } |
| .filter((res) => | ||
| isAssetInCategoryDynamic( | ||
| res.symbol, | ||
| selectedCategory, | ||
| stablecoinSymbols, | ||
| ethCorrelatedSymbols | ||
| ) | ||
| ) |
| ETH_CORRELATED = 'eth_correlated', | ||
| } | ||
|
|
||
| export const STABLECOINS_SYMBOLS_FALLBACK = [ |
There was a problem hiding this comment.
interesting. so i imagine the effect if the request takes time and I've selected a category will see the list to update .e.g. adding more items because coingecko has more than the fallback, wondering if it makes sense to have a fallback or just disable the picker until we have data. Plus, we can cache the data in the localStorage for a long time, since categories wont change frequently.
General Changes
Added dynamic categories and asset filters on the Market page using the Coingecko API. We can now filter by: All, Stablecoins, or ETH-Correlated.
Created two new hooks for fetching Stablecoin category tokens and ETH-Correlated tokens, reusable across any component.
Implemented fallback lists for Stablecoins and ETH-Correlated tokens in case the Coingecko API is unavailable.
Improved mobile view with layout modifications.
Developers Notes:
This is version 2.0.0, which only requires manual token updates for the fallback list.
NOTE: You need to add the API key for -->
NEXT_PUBLIC_CG_API_KEY=@mgrabina → added full-width support on mobile as requested, and fixed padding to be consistent on top, bottom, left, and right.
Reviewer Checklist
Please ensure you, as the reviewer(s), have gone through this checklist to ensure that the code changes are ready to ship safely and to help mitigate any downstream issues that may occur.
.env.examplefile as well as the pertinant.github/actions/*files