Add TX filtering on the consensus dashboard, too

oasisprotocol · Jan 21, 2025 · 562b068 · 562b068
1 parent 76355e7
commit 562b068
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx b/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx
@@ -8,16 +8,31 @@ import Link from '@mui/material/Link'
 import { useGetConsensusTransactions } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
 import { ConsensusTransactions } from '../../components/Transactions'
-import { NUMBER_OF_ITEMS_ON_DASHBOARD as limit } from '../../config'
+import { NUMBER_OF_ITEMS_ON_DASHBOARD as limit, FILTERING_ON_DASHBOARD as shouldFilter } from '../../config'
 import { RouteUtils } from '../../utils/route-utils'
+import {
+  getConsensusTransactionMethodFilteringParam,
+  WantedConsensusTxMethod,
+} from '../../components/ConsensusTransactionMethod'
+import Box from '@mui/material/Box'
+import { ConsensusTransactionTypeFilter } from '../../components/Transactions/ConsensusTransactionTypeFilter'
+import { useScreenSize } from '../../hooks/useScreensize'
 
-export const LatestConsensusTransactions: FC<{ scope: SearchScope }> = ({ scope }) => {
+export const LatestConsensusTransactions: FC<{
+  scope: SearchScope
+  method: WantedConsensusTxMethod
+  setMethod: (value: WantedConsensusTxMethod) => void
+}> = ({ scope, method, setMethod }) => {
+  const { isMobile } = useScreenSize()
   const { t } = useTranslation()
   const { network } = scope
 
   const transactionsQuery = useGetConsensusTransactions(
     network,
-    { limit },
+    {
+      ...getConsensusTransactionMethodFilteringParam(method),
+      limit,
+    },
     {
       query: {
         cacheTime: 0,
@@ -32,11 +47,25 @@ export const LatestConsensusTransactions: FC<{ scope: SearchScope }> = ({ scope
         component="h3"
         title={t('transactions.latest')}
         action={
-          <Link component={RouterLink} to={RouteUtils.getLatestTransactionsRoute(scope)}>
-            {t('common.viewAll')}
-          </Link>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 4,
+              alignItems: 'center',
+            }}
+          >
+            {shouldFilter && !isMobile && (
+              <ConsensusTransactionTypeFilter value={method} setValue={setMethod} />
+            )}
+            <Link component={RouterLink} to={RouteUtils.getLatestTransactionsRoute(scope)}>
+              {t('common.viewAll')}
+            </Link>
+          </Box>
         }
       />
+      {shouldFilter && isMobile && (
+        <ConsensusTransactionTypeFilter value={method} setValue={setMethod} expand />
+      )}
       <CardContent>
         <ConsensusTransactions
           transactions={transactionsQuery.data?.data.transactions}

diff --git a/src/app/pages/ConsensusDashboardPage/index.tsx b/src/app/pages/ConsensusDashboardPage/index.tsx
@@ -17,11 +17,14 @@ import { AccountsCard } from './AccountsCard'
 import { LatestConsensusTransactions } from './LatestConsensusTransactions'
 import { ParaTimesCard } from './ParaTimesCard'
 import { SearchScope } from 'types/searchScope'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
+import { WantedConsensusTxMethod } from '../../components/ConsensusTransactionMethod'
 
 export const ConsensusDashboardPage: FC = () => {
   const { isMobile } = useScreenSize()
   const scope = useRequiredScopeParam()
   const isLocal = isLocalnet(scope.network)
+  const [method, setMethod] = useTypedSearchParam<WantedConsensusTxMethod>('tx_method', 'all')
 
   return (
     <PageLayout>
@@ -39,7 +42,7 @@ export const ConsensusDashboardPage: FC = () => {
       <ValidatorsCard scope={scope} />
       {!isLocal && <ParaTimesCard scope={scope} />}
       <AccountsCard scope={scope} />
-      <LatestConsensusTransactions scope={scope} />
+      <LatestConsensusTransactions scope={scope} method={method} setMethod={setMethod} />
       {!isLocal && (
         <>
           <NetworkProposalsCard scope={scope} />