feat: added filters for categories in market section v0

Author: AGMASO

src/components/MarketAssetCategoryFilter.tsx

@@ -0,0 +1,50 @@
+import { Trans } from '@lingui/macro';
+import { Box, Button, ButtonGroup } from '@mui/material';
+import { AssetCategory } from 'src/modules/markets/utils/assetCategories';
+
+interface MarketAssetCategoryFiltersProps {
+  selectedCategory: AssetCategory;
+  onCategoryChange: (category: AssetCategory) => void;
+}
+
+export const MarketAssetCategoryFilter = ({
+  selectedCategory,
+  onCategoryChange,
+}: MarketAssetCategoryFiltersProps) => {
+  return (
+    <Box sx={{ mt: 2, mb: 2 }}>
+      <ButtonGroup
+        sx={{
+          '& .MuiButton-root': {
+            textTransform: 'none',
+            whiteSpace: 'nowrap',
+            minWidth: 'auto',
+            p: 2,
+            fontSize: '0.875rem',
+          },
+        }}
+        variant="outlined"
+        size="small"
+      >
+        <Button
+          variant={selectedCategory === AssetCategory.ALL ? 'contained' : 'outlined'}
+          onClick={() => onCategoryChange(AssetCategory.ALL)}
+        >
+          <Trans>All</Trans>
+        </Button>
+        <Button
+          variant={selectedCategory === AssetCategory.STABLECOINS ? 'contained' : 'outlined'}
+          onClick={() => onCategoryChange(AssetCategory.STABLECOINS)}
+        >
+          <Trans>Stablecoins</Trans>
+        </Button>
+        <Button
+          variant={selectedCategory === AssetCategory.ETH_CORRELATED ? 'contained' : 'outlined'}
+          onClick={() => onCategoryChange(AssetCategory.ETH_CORRELATED)}
+        >
+          <Trans>ETH Correlated</Trans>
+        </Button>
+      </ButtonGroup>
+    </Box>
+  );
+};

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>
+  );
+};

src/locales/el/messages.js

@@ -628,6 +628,7 @@ msgstr "Invalid amount to mint"
 msgid "Disconnect Wallet"
 msgstr "Disconnect Wallet"
 
+#: src/modules/markets/MarketAssetsListContainer.tsx
 #: src/modules/markets/MarketAssetsListContainer.tsx
 msgid "assets"
 msgstr "assets"
@@ -1213,6 +1214,10 @@ msgstr "{0}"
 msgid "Manage analytics"
 msgstr "Manage analytics"
 
+#: src/components/MarketAssetCategoryFilter.tsx
+msgid "Stablecoins"
+msgstr "Stablecoins"
+
 #: src/components/transactions/UnStake/UnStakeActions.tsx
 #: src/modules/umbrella/UnstakeModalActions.tsx
 msgid "Unstaking {symbol}"
@@ -1224,6 +1229,10 @@ msgstr "Unstaking {symbol}"
 msgid "Swapping"
 msgstr "Swapping"
 
+#: src/components/MarketAssetCategoryFilter.tsx
+msgid "ETH Correlated"
+msgstr "ETH Correlated"
+
 #: src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx
 msgid "You can not use this currency as collateral"
 msgstr "You can not use this currency as collateral"
@@ -1463,6 +1472,10 @@ msgstr "Invalid return value of the flashloan executor function"
 msgid "Learn more about the Kernel points distribution"
 msgstr "Learn more about the Kernel points distribution"
 
+#: src/components/MarketAssetCategoryFilter.tsx
+msgid "All"
+msgstr "All"
+
 #: src/components/isolationMode/IsolatedBadge.tsx
 msgid "Asset can be only used as collateral in isolation mode with limited borrowing power. To enter isolation mode, disable all other collateral."
 msgstr "Asset can be only used as collateral in isolation mode with limited borrowing power. To enter isolation mode, disable all other collateral."
@@ -2340,6 +2353,7 @@ msgstr "You did not participate in this proposal"
 msgid "Governance"
 msgstr "Governance"
 
+#: src/components/TitleWithFiltersAndSearchBar.tsx
 #: src/components/TitleWithSearchBar.tsx
 #: src/modules/history/HistoryWrapperMobile.tsx
 msgid "Cancel"

src/locales/en/messages.js

@@ -3,9 +3,11 @@ import { Trans } from '@lingui/macro';
 import { Box, Switch, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useState } from 'react';
 import { ListWrapper } from 'src/components/lists/ListWrapper';
+import { MarketAssetCategoryFilter } from 'src/components/MarketAssetCategoryFilter';
 import { NoSearchResults } from 'src/components/NoSearchResults';
 import { Link } from 'src/components/primitives/Link';
 import { Warning } from 'src/components/primitives/Warning';
+import { TitleWithFiltersAndSearchBar } from 'src/components/TitleWithFiltersAndSearchBar';
 import { TitleWithSearchBar } from 'src/components/TitleWithSearchBar';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import MarketAssetsList from 'src/modules/markets/MarketAssetsList';
@@ -16,6 +18,7 @@ import { useShallow } from 'zustand/shallow';
 
 import { GENERAL } from '../../utils/events';
 import { SavingsGhoBanner } from './Gho/GhoBanner';
+import { AssetCategory, isAssetInCategory } from './utils/assetCategories';
 
 function shouldDisplayGhoBanner(marketTitle: string, searchTerm: string): boolean {
   // GHO banner is only displayed on markets where new GHO is mintable (i.e. Ethereum)
@@ -45,6 +48,7 @@ export const MarketAssetsListContainer = () => {
     ])
   );
   const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<AssetCategory>(AssetCategory.ALL);
   const { breakpoints } = useTheme();
   const sm = useMediaQuery(breakpoints.down('sm'));
 
@@ -63,6 +67,8 @@ export const MarketAssetsListContainer = () => {
         res.underlyingAsset.toLowerCase().includes(term)
       );
     })
+    // Filter by category
+    .filter((res) => isAssetInCategory(res.symbol, selectedCategory))
     // Transform the object for list to consume it
     .map((reserve) => ({
       ...reserve,
@@ -88,15 +94,45 @@ export const MarketAssetsListContainer = () => {
   return (
     <ListWrapper
       titleComponent={
-        <TitleWithSearchBar
-          onSearchTermChange={setSearchTerm}
-          title={
-            <>
-              {currentMarketData.marketTitle} <Trans>assets</Trans>
-            </>
-          }
-          searchPlaceholder={sm ? 'Search asset' : 'Search asset name, symbol, or address'}
-        />
+        sm ? (
+          <Box sx={{ width: '100%' }}>
+            <TitleWithSearchBar
+              onSearchTermChange={setSearchTerm}
+              title={
+                <>
+                  {currentMarketData.marketTitle} <Trans>assets</Trans>
+                </>
+              }
+              searchPlaceholder={sm ? 'Search asset' : 'Search asset name, symbol, or address'}
+            />
+
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                width: '100%',
+                pt: 1,
+              }}
+            >
+              <MarketAssetCategoryFilter
+                selectedCategory={selectedCategory}
+                onCategoryChange={setSelectedCategory}
+              />
+            </Box>
+          </Box>
+        ) : (
+          <TitleWithFiltersAndSearchBar
+            onSearchTermChange={setSearchTerm}
+            title={
+              <>
+                {currentMarketData.marketTitle} <Trans>assets</Trans>
+              </>
+            }
+            searchPlaceholder={sm ? 'Search asset' : 'Search asset name, symbol, or address'}
+            selectedCategory={selectedCategory}
+            onCategoryChange={setSelectedCategory}
+          />
+        )
       }
     >
       {displayGhoBanner && (

src/locales/en/messages.po

@@ -0,0 +1,60 @@
+export enum AssetCategory {
+  ALL = 'all',
+  STABLECOINS = 'stablecoins',
+  ETH_CORRELATED = 'eth_correlated',
+}
+
+export const STABLECOINS_SYMBOLS = [
+  //proto_mainnet_v3
+  'USDT',
+  'USDC',
+  'PT SUSDE SEPTEMBER',
+  'PT USDE SEPTEMBER 25TH 2025',
+  'USDE',
+  'RLUSD',
+  'GHO',
+  'DAI',
+  'USDtb',
+  'PT EUSDE AUGUST',
+  'USDS',
+  'PYUSD',
+  'LUSD',
+  'EUSDE',
+  'FRAX',
+  'crvUSD',
+  'PT SUSDE JULY',
+  'PT EUSDE MAY',
+  'PT USDE JULY',
+];
+export const ETH_CORRELATED_SYMBOLS = [
+  //proto_mainnet_v3
+  'ETH',
+  'WEETH',
+  'WSTETH',
+  'RSETH',
+  'OSETH',
+  'RETH',
+  'ETHX',
+  'CBETH',
+];
+export const categorizeAsset = (symbol: string): AssetCategory[] => {
+  const categories: AssetCategory[] = [AssetCategory.ALL];
+
+  const normalizedSymbol = symbol.toUpperCase();
+  if (STABLECOINS_SYMBOLS.includes(normalizedSymbol)) {
+    categories.push(AssetCategory.STABLECOINS);
+  }
+
+  if (ETH_CORRELATED_SYMBOLS.includes(normalizedSymbol)) {
+    categories.push(AssetCategory.ETH_CORRELATED);
+  }
+
+  return categories;
+};
+
+export const isAssetInCategory = (symbol: string, category: AssetCategory): boolean => {
+  if (category === AssetCategory.ALL) {
+    return true;
+  }
+  return categorizeAsset(symbol).includes(category);
+};