Add token type filter pills to tokens list

oasisprotocol · Feb 27, 2025 · c2f94dd · c2f94dd
1 parent b115c35
commit c2f94dd
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/app/components/SubPageCard/index.tsx b/src/app/components/SubPageCard/index.tsx
@@ -12,7 +12,7 @@ type StyledComponentProps = {
   featured?: boolean
   isLoadingTitle?: boolean
   title?: ReactNode
-  subheader?: string
+  subheader?: ReactNode
   action?: ReactNode
   /**
    * An optional second title which will be displayed under title / subheader / action

diff --git a/src/app/pages/TokensOverviewPage/index.tsx b/src/app/pages/TokensOverviewPage/index.tsx
@@ -1,10 +1,11 @@
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
-import { Layer, useGetRuntimeEvmTokens } from '../../../oasis-nexus/api'
+import { EvmTokenType, Layer, useGetRuntimeEvmTokens } from '../../../oasis-nexus/api'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { AppErrors } from '../../../types/errors'
@@ -14,11 +15,13 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { TokenList } from '../../components/Tokens/TokenList'
 import { TokenDetails } from '../../components/Tokens/TokenDetails'
 import { VerticalList } from '../../components/VerticalList'
+import { TokenTypeFilter } from '../../components/Tokens/TokenTypeFilter'
 
 const PAGE_SIZE = NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
 
 export const TokensPage: FC = () => {
   const [tableView, setTableView] = useState<TableLayout>(TableLayout.Horizontal)
+  const [type, setType] = useState(EvmTokenType.ERC20)
   const { isMobile } = useScreenSize()
   const { t } = useTranslation()
   const pagination = useSearchParamsPagination('page')
@@ -70,6 +73,11 @@ export const TokensPage: FC = () => {
         action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
         noPadding={tableView === TableLayout.Vertical}
         mainTitle
+        subheader={
+          <Box sx={{ display: 'inline-flex', ml: 4, fontStyle: 'normal' }}>
+            <TokenTypeFilter onSelect={setType} value={type} />
+          </Box>
+        }
       >
         {tableView === TableLayout.Horizontal && (
           <TokenList