feat: added dynamic assets categories using Coingecko API

.env.example

@@ -20,6 +20,7 @@ NEXT_PUBLIC_IS_CYPRESS_ENABLED=false
 NEXT_PUBLIC_AMPLITUDE_API_KEY=6b28cb736c53d59f0951a50f59597aae
 NEXT_PUBLIC_PRIVATE_RPC_ENABLED=false
 
+
 # Set to 'true' to allow all domains for CORS (use only in development)
 CORS_DOMAINS_ALLOWED=false
 
@@ -40,3 +41,4 @@ SONIC_RPC_API_KEY=
 CELO_RPC_API_KEY=
 FAMILY_API_KEY=
 FAMILY_API_URL=
+COINGECKO_API_KEY=

pages/api/coingecko-categories.ts

@@ -0,0 +1,140 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+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.COINGECKO_API_KEY ?? '',
+};
+interface CoinGeckoCoin {
+  id: string;
+  symbol: string;
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const allowedOrigins = ['https://app.aave.com', 'https://aave.com'];
+  const origin = req.headers.origin;
+
+  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();
+  }
+
+  if (req.method !== 'GET') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const coingeckoApiKey = process.env.COINGECKO_API_KEY;
+    if (!coingeckoApiKey) {
+      return res.status(500).json({ error: 'CoinGecko API key is not configured' });
+    }
+
+    // Fetch for Stablecoins Category and Eth Correlated Categories
+    const [resStable1, resStable2, resEth1, resEth2, resEth3] = await Promise.all([
+      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,
+      }),
+      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,
+      }),
+    ]);
+
+    if (!resStable1.ok) {
+      return res.status(resStable1.status).json({
+        error: `Error fetching stablecoins page 1`,
+        details: resStable1.statusText,
+      });
+    }
+    if (!resStable2.ok) {
+      return res.status(resStable2.status).json({
+        error: `Error fetching stablecoins page 2`,
+        details: resStable2.statusText,
+      });
+    }
+    if (!resEth1.ok) {
+      return res.status(resEth1.status).json({
+        error: `Error fetching liquid-staked-eth`,
+        details: resEth1.statusText,
+      });
+    }
+    if (!resEth2.ok) {
+      return res.status(resEth2.status).json({
+        error: `Error fetching ether-fi-ecosystem`,
+        details: resEth2.statusText,
+      });
+    }
+    if (!resEth3.ok) {
+      return res.status(resEth3.status).json({
+        error: `Error fetching liquid-staking-tokens`,
+        details: resEth3.statusText,
+      });
+    }
+
+    const [dataStable1, dataStable2, dataEth1, dataEth2, dataEth3] = await Promise.all([
+      resStable1.json(),
+      resStable2.json(),
+      resEth1.json(),
+      resEth2.json(),
+      resEth3.json(),
+    ]);
+    const combinedData = [...dataStable1, ...dataStable2];
+
+    const processedSymbols = combinedData
+      .map((coin: CoinGeckoCoin) => coin.symbol?.toUpperCase())
+      .filter((symbol: string) => symbol);
+
+    const uniqueSymbolsStablecoins = [...new Set([...processedSymbols])];
+
+    // Filter category 'liquid-staking-tokens' to only include coins correlated to ETH
+    const filteredData3 = dataEth3.filter((coin: CoinGeckoCoin) => {
+      const symbol = coin.symbol?.toUpperCase();
+      return symbol?.includes('ETH');
+    });
+
+    const combinedDataEth = [...dataEth1, ...dataEth2, ...filteredData3];
+
+    const symbols = combinedDataEth
+      .map((coin: CoinGeckoCoin) => coin.symbol?.toUpperCase())
+      .filter((symbol: string) => symbol);
+
+    const uniqueSymbolsEth = [...new Set([...symbols, 'WETH'])];
+
+    return res.status(200).json({ uniqueSymbolsStablecoins, uniqueSymbolsEth });
+  } catch (error) {
+    console.error('Coingecko categories proxy error:', error);
+    return res.status(500).json({ error: 'Internal server error', details: String(error) });
+  }
+}

src/components/MarketAssetCategoryFilter.tsx

@@ -0,0 +1,87 @@
+import { Trans } from '@lingui/macro';
+import { SxProps, Theme, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { AssetCategory } from 'src/modules/markets/utils/assetCategories';
+
+interface MarketAssetCategoryFiltersProps {
+  selectedCategory: AssetCategory;
+  onCategoryChange: (category: AssetCategory) => void;
+  sx?: {
+    buttonGroup?: SxProps<Theme>;
+    button?: SxProps<Theme>;
+  };
+}
+const categoryLabels = {
+  [AssetCategory.ALL]: <Trans>All</Trans>,
+  [AssetCategory.STABLECOINS]: <Trans>Stablecoins</Trans>,
+  [AssetCategory.ETH_CORRELATED]: <Trans>ETH Correlated</Trans>,
+} as const;
+const categories = [
+  AssetCategory.ALL,
+  AssetCategory.STABLECOINS,
+  AssetCategory.ETH_CORRELATED,
+] as const;
+
+export const MarketAssetCategoryFilter = ({
+  selectedCategory,
+  onCategoryChange,
+  ...props
+}: MarketAssetCategoryFiltersProps) => {
+  const handleChange = (_event: React.MouseEvent<HTMLElement>, newCategory: AssetCategory) => {
+    if (newCategory !== null) {
+      onCategoryChange(newCategory);
+    }
+  };
+
+  return (
+    <ToggleButtonGroup
+      value={selectedCategory}
+      exclusive
+      onChange={handleChange}
+      aria-label="Asset category"
+      sx={{
+        width: '100%',
+        height: '36px',
+        '&.MuiToggleButtonGroup-grouped': {
+          borderRadius: 'unset',
+        },
+        ...props.sx?.buttonGroup,
+      }}
+    >
+      {categories.map((category) => (
+        <ToggleButton
+          key={category}
+          value={category}
+          disableRipple
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          sx={(theme): SxProps<Theme> | undefined => ({
+            flex: { xs: 1, xsm: 1, sm: 'auto' },
+            '&.MuiToggleButtonGroup-grouped:not(.Mui-selected), &.MuiToggleButtonGroup-grouped&.Mui-disabled':
+              {
+                border: '1px solid transparent',
+                backgroundColor: 'background.surface',
+                color: 'action.disabled',
+              },
+            '&.MuiToggleButtonGroup-grouped&.Mui-selected': {
+              borderRadius: '4px',
+              border: `1px solid ${theme.palette.divider}`,
+              boxShadow: '0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)',
+              backgroundColor: 'background.paper',
+            },
+            ...props.sx?.button,
+          })}
+        >
+          <Typography
+            variant="buttonM"
+            sx={{
+              fontSize: '0.875rem',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {categoryLabels[category]}
+          </Typography>
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+};

src/components/TitleWithFiltersAndSearchBar.tsx

@@ -0,0 +1,110 @@
+import { SearchIcon } from '@heroicons/react/solid';
+import { Trans } from '@lingui/macro';
+import {
+  Box,
+  Button,
+  IconButton,
+  SvgIcon,
+  Typography,
+  TypographyProps,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { ReactNode, useState } from 'react';
+import { AssetCategory } from 'src/modules/markets/utils/assetCategories';
+
+import { MarketAssetCategoryFilter } from './MarketAssetCategoryFilter';
+import { SearchInput } from './SearchInput';
+
+interface TitleWithFiltersAndSearchBarProps<C extends React.ElementType> {
+  onSearchTermChange: (value: string) => void;
+  searchPlaceholder: string;
+  titleProps?: TypographyProps<C, { component?: C }>;
+  title: ReactNode;
+  selectedCategory: AssetCategory;
+  onCategoryChange: (category: AssetCategory) => void;
+}
+
+export const TitleWithFiltersAndSearchBar = <T extends React.ElementType>({
+  onSearchTermChange,
+  searchPlaceholder,
+  titleProps,
+  title,
+  selectedCategory,
+  onCategoryChange,
+}: TitleWithFiltersAndSearchBarProps<T>) => {
+  const [showSearchBar, setShowSearchBar] = useState(false);
+
+  const { breakpoints } = useTheme();
+  const sm = useMediaQuery(breakpoints.down('sm'));
+
+  const showSearchIcon = sm && !showSearchBar;
+  const showMarketTitle = !sm || !showSearchBar;
+
+  const handleCancelClick = () => {
+    setShowSearchBar(false);
+    onSearchTermChange('');
+  };
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {showMarketTitle && (
+        <Typography component="div" variant="h2" sx={{ mr: 4 }} {...titleProps}>
+          {title}
+        </Typography>
+      )}
+
+      <Box
+        sx={{
+          height: '40px',
+          width: showSearchBar && sm ? '100%' : 'unset',
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          justifyContent: 'space-between',
+        }}
+      >
+        <MarketAssetCategoryFilter
+          selectedCategory={selectedCategory}
+          onCategoryChange={onCategoryChange}
+        />
+        {showSearchIcon && (
+          <IconButton onClick={() => setShowSearchBar(true)}>
+            <SvgIcon>
+              <SearchIcon />
+            </SvgIcon>
+          </IconButton>
+        )}
+        {(showSearchBar || !sm) && (
+          <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+            <SearchInput
+              wrapperSx={{
+                width: {
+                  xs: '100%',
+                  sm: '340px',
+                },
+              }}
+              placeholder={searchPlaceholder}
+              onSearchTermChange={onSearchTermChange}
+            />
+            {sm && (
+              <Button sx={{ ml: 2 }} onClick={() => handleCancelClick()}>
+                <Typography variant="buttonM">
+                  <Trans>Cancel</Trans>
+                </Typography>
+              </Button>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};