From a8bba655592e844b9634f7eac84d25e4ebed7f48 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Fri, 10 Jan 2025 13:00:50 +0100
Subject: [PATCH] Extend transaction method filtering to consensus and
 validators

---
 .changelog/1679.trivial.md                    |  2 +-
 .../ConsensusTransactionMethod/index.tsx      |  8 ++-
 .../ConsensusTransactionTypeFilter.tsx        | 41 ++++++++++++++++
 .../Transactions/ConsensusTransactions.tsx    |  3 ++
 .../ConsensusAccountEventsCard.tsx            |  4 +-
 .../ConsensusAccountTransactionsCard.tsx      | 49 ++++++++++---------
 .../ConsensusAccountDetailsPage/hooks.tsx     |  3 ++
 .../ConsensusAccountDetailsPage/index.tsx     |  7 ++-
 .../ConsensusBlockTransactionsCard.tsx        | 28 +++++++++--
 .../LatestConsensusTransactions.tsx           | 42 +++++++++++++---
 .../pages/ConsensusDashboardPage/index.tsx    |  5 +-
 .../pages/ConsensusTransactionsPage/index.tsx | 23 ++++++++-
 src/app/pages/ValidatorDetailsPage/hooks.ts   |  3 ++
 src/app/pages/ValidatorDetailsPage/index.tsx  |  8 ++-
 src/stories/Transactions.stories.tsx          |  1 +
 15 files changed, 185 insertions(+), 42 deletions(-)
 create mode 100644 src/app/components/Transactions/ConsensusTransactionTypeFilter.tsx

diff --git a/.changelog/1679.trivial.md b/.changelog/1679.trivial.md
index c79d4d9db..04b3a718e 100644
--- a/.changelog/1679.trivial.md
+++ b/.changelog/1679.trivial.md
@@ -1 +1 @@
-Add support for filtering latest TX list for method type
+Add support for filtering transactions by method type
diff --git a/src/app/components/ConsensusTransactionMethod/index.tsx b/src/app/components/ConsensusTransactionMethod/index.tsx
index bdb1adee8..3dddb014a 100644
--- a/src/app/components/ConsensusTransactionMethod/index.tsx
+++ b/src/app/components/ConsensusTransactionMethod/index.tsx
@@ -16,7 +16,7 @@ import PriceChangeIcon from '@mui/icons-material/PriceChange'
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
 import Tooltip from '@mui/material/Tooltip'
 import { tooltipDelay } from '../../../styles/theme'
-import { ConsensusTxMethod } from '../../../oasis-nexus/api'
+import { ConsensusTxMethod, GetConsensusTransactionsParams } from '../../../oasis-nexus/api'
 import { COLORS } from '../../../styles/theme/colors'
 import { SelectOptionBase } from '../Select'
 import { exhaustedTypeWarning } from '../../../types/errors'
@@ -358,3 +358,9 @@ export const ConsensusTransactionMethod: FC<ConsensusTransactionMethodProps> = (
 
   return <>{getConsensusTransactionMethod(t, method, truncate)}</>
 }
+
+export type WantedConsensusTxMethod = ConsensusTxMethod | 'all'
+
+export const getConsensusTransactionMethodFilteringParam = (
+  method: WantedConsensusTxMethod,
+): Partial<GetConsensusTransactionsParams> => (method === 'all' ? {} : { method })
diff --git a/src/app/components/Transactions/ConsensusTransactionTypeFilter.tsx b/src/app/components/Transactions/ConsensusTransactionTypeFilter.tsx
new file mode 100644
index 000000000..22534040f
--- /dev/null
+++ b/src/app/components/Transactions/ConsensusTransactionTypeFilter.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react'
+import { getConsensusTxMethodOptions, WantedConsensusTxMethod } from '../ConsensusTransactionMethod'
+import { useTranslation } from 'react-i18next'
+import { Select } from '../Select'
+import Typography from '@mui/material/Typography'
+
+const FilterLabel: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Typography
+      component={'span'}
+      sx={{
+        fontStyle: 'normal',
+        fontWeight: 700,
+        fontSize: 16,
+        lineHeight: '150%',
+        marginRight: 4,
+      }}
+    >
+      {t('transactions.filterByType')}
+    </Typography>
+  )
+}
+
+export const ConsensusTransactionTypeFilter: FC<{
+  value: WantedConsensusTxMethod
+  setValue: (value: WantedConsensusTxMethod) => void
+  expand?: boolean
+}> = ({ value, setValue, expand }) => {
+  const { t } = useTranslation()
+  return (
+    <Select
+      className={expand ? 'expand' : undefined}
+      light={true}
+      label={<FilterLabel />}
+      options={[{ value: 'all', label: 'All' }, ...getConsensusTxMethodOptions(t)]}
+      defaultValue={value}
+      handleChange={setValue as any}
+    />
+  )
+}
diff --git a/src/app/components/Transactions/ConsensusTransactions.tsx b/src/app/components/Transactions/ConsensusTransactions.tsx
index 8547d784b..e42e26f7c 100644
--- a/src/app/components/Transactions/ConsensusTransactions.tsx
+++ b/src/app/components/Transactions/ConsensusTransactions.tsx
@@ -31,6 +31,7 @@ type ConsensusTransactionsProps = {
   limit: number
   pagination: false | TablePaginationProps
   verbose?: boolean
+  filtered: boolean
 }
 
 export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
@@ -40,6 +41,7 @@ export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
   transactions,
   ownAddress,
   verbose = true,
+  filtered,
 }) => {
   const { t } = useTranslation()
 
@@ -142,6 +144,7 @@ export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
       name={t('transactions.latest')}
       isLoading={isLoading}
       pagination={pagination}
+      emptyMessage={filtered ? t('tableSearch.noMatchingResults') : t('account.emptyTransactionList')}
     />
   )
 }
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard.tsx
index b4bd567c5..2e05adb9d 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard.tsx
+++ b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard.tsx
@@ -50,12 +50,12 @@ export const ConsensusAccountEventsList: FC<ConsensusAccountDetailsContext> = ({
   )
 }
 
-export const ConsensusAccountEventsCard: FC<ConsensusAccountDetailsContext> = ({ scope, address }) => {
+export const ConsensusAccountEventsCard: FC<ConsensusAccountDetailsContext> = context => {
   const { t } = useTranslation()
 
   return (
     <LinkableCardLayout containerId={eventsContainerId} title={t('common.events')}>
-      <ConsensusAccountEventsList scope={scope} address={address} />
+      <ConsensusAccountEventsList {...context} />
     </LinkableCardLayout>
   )
 }
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx
index 009a8611f..2aa2d947f 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx
+++ b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx
@@ -3,28 +3,32 @@ import { useTranslation } from 'react-i18next'
 import { useGetConsensusTransactions } from '../../../oasis-nexus/api'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { ConsensusTransactions } from '../../components/Transactions'
-import { CardEmptyState } from '../../components/CardEmptyState'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { ConsensusAccountDetailsContext } from './hooks'
 import { LinkableCardLayout } from 'app/components/LinkableCardLayout'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { ConsensusTransactionTypeFilter } from '../../components/Transactions/ConsensusTransactionTypeFilter'
 
 const consensusAccountTransactionsContainerId = 'transactions'
 
-export const ConsensusAccountTransactionsCard: FC<ConsensusAccountDetailsContext> = ({ scope, address }) => {
+export const ConsensusAccountTransactionsCard: FC<ConsensusAccountDetailsContext> = context => {
   const { t } = useTranslation()
+  const { isMobile } = useScreenSize()
+  const { method, setMethod } = context
 
   return (
     <LinkableCardLayout
       containerId={consensusAccountTransactionsContainerId}
       title={t('common.transactions')}
+      action={isMobile ? undefined : <ConsensusTransactionTypeFilter value={method} setValue={setMethod} />}
     >
-      <ConsensusAccountTransactions scope={scope} address={address} />
+      {isMobile && <ConsensusTransactionTypeFilter value={method} setValue={setMethod} expand />}
+      <ConsensusAccountTransactions {...context} />
     </LinkableCardLayout>
   )
 }
 
-const ConsensusAccountTransactions: FC<ConsensusAccountDetailsContext> = ({ scope, address }) => {
-  const { t } = useTranslation()
+const ConsensusAccountTransactions: FC<ConsensusAccountDetailsContext> = ({ scope, address, method }) => {
   const { network } = scope
   const pagination = useSearchParamsPagination('page')
   const offset = (pagination.selectedPage - 1) * limit
@@ -32,28 +36,25 @@ const ConsensusAccountTransactions: FC<ConsensusAccountDetailsContext> = ({ scop
     limit,
     offset,
     rel: address,
+    method: method === 'all' ? undefined : method,
   })
-  const { isFetched, isLoading, data } = transactionsQuery
+  const { isLoading, data } = transactionsQuery
   const transactions = data?.data.transactions
 
   return (
-    <>
-      {isFetched && !transactions?.length && (
-        <CardEmptyState label={t('account.emptyAccountTransactionList')} />
-      )}
-      <ConsensusTransactions
-        transactions={transactions}
-        ownAddress={address}
-        isLoading={isLoading}
-        limit={limit}
-        pagination={{
-          selectedPage: pagination.selectedPage,
-          linkToPage: pagination.linkToPage,
-          totalCount: data?.data.total_count,
-          isTotalCountClipped: data?.data.is_total_count_clipped,
-          rowsPerPage: limit,
-        }}
-      />
-    </>
+    <ConsensusTransactions
+      transactions={transactions}
+      ownAddress={address}
+      isLoading={isLoading}
+      limit={limit}
+      pagination={{
+        selectedPage: pagination.selectedPage,
+        linkToPage: pagination.linkToPage,
+        totalCount: data?.data.total_count,
+        isTotalCountClipped: data?.data.is_total_count_clipped,
+        rowsPerPage: limit,
+      }}
+      filtered={method !== 'all'}
+    />
   )
 }
diff --git a/src/app/pages/ConsensusAccountDetailsPage/hooks.tsx b/src/app/pages/ConsensusAccountDetailsPage/hooks.tsx
index 51a6e6e63..0bed81498 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/hooks.tsx
+++ b/src/app/pages/ConsensusAccountDetailsPage/hooks.tsx
@@ -1,9 +1,12 @@
 import { useOutletContext } from 'react-router-dom'
 import { SearchScope } from '../../../types/searchScope'
+import { WantedConsensusTxMethod } from '../../components/ConsensusTransactionMethod'
 
 export type ConsensusAccountDetailsContext = {
   scope: SearchScope
   address: string
+  method: WantedConsensusTxMethod
+  setMethod: (value: WantedConsensusTxMethod) => void
 }
 
 export const useConsensusAccountDetailsProps = () => useOutletContext<ConsensusAccountDetailsContext>()
diff --git a/src/app/pages/ConsensusAccountDetailsPage/index.tsx b/src/app/pages/ConsensusAccountDetailsPage/index.tsx
index 20a920592..fa71809b9 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/index.tsx
+++ b/src/app/pages/ConsensusAccountDetailsPage/index.tsx
@@ -13,6 +13,8 @@ import { BalanceDistribution } from './BalanceDistribution'
 import { Staking } from './Staking'
 import { ConsensusAccountDetailsContext } from './hooks'
 import { eventsContainerId } from './ConsensusAccountEventsCard'
+import { WantedConsensusTxMethod } from '../../components/ConsensusTransactionMethod'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
 
 export const ConsensusAccountDetailsPage: FC = () => {
   const { t } = useTranslation()
@@ -20,12 +22,15 @@ export const ConsensusAccountDetailsPage: FC = () => {
   const scope = useRequiredScopeParam()
   const { network } = scope
   const { address, searchTerm } = useLoaderData() as AddressLoaderData
+  const [method, setMethod] = useTypedSearchParam<WantedConsensusTxMethod>('method', 'all', {
+    deleteParams: ['page'],
+  })
   const accountQuery = useGetConsensusAccountsAddress(network, address)
   const { isError, isLoading, data } = accountQuery
   const account = data?.data
   const transactionsLink = useHref('')
   const eventsLink = useHref(`events#${eventsContainerId}`)
-  const context: ConsensusAccountDetailsContext = { scope, address }
+  const context: ConsensusAccountDetailsContext = { scope, address, method, setMethod }
 
   return (
     <PageLayout>
diff --git a/src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx b/src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx
index a9c3aa592..53bc60ec9 100644
--- a/src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx
+++ b/src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx
@@ -8,16 +8,28 @@ import { AppErrors } from '../../../types/errors'
 import { SearchScope } from '../../../types/searchScope'
 import { ConsensusBlockDetailsContext } from '.'
 import { LinkableCardLayout } from 'app/components/LinkableCardLayout'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
+import { ConsensusTransactionTypeFilter } from '../../components/Transactions/ConsensusTransactionTypeFilter'
+import { useScreenSize } from '../../hooks/useScreensize'
+import {
+  getConsensusTransactionMethodFilteringParam,
+  WantedConsensusTxMethod,
+} from '../../components/ConsensusTransactionMethod'
 
 export const transactionsContainerId = 'transactions'
 
-const TransactionList: FC<{ scope: SearchScope; blockHeight: number }> = ({ scope, blockHeight }) => {
+const TransactionList: FC<{ scope: SearchScope; blockHeight: number; method: WantedConsensusTxMethod }> = ({
+  scope,
+  blockHeight,
+  method,
+}) => {
   const txsPagination = useSearchParamsPagination('page')
   const txsOffset = (txsPagination.selectedPage - 1) * NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
   const transactionsQuery = useGetConsensusTransactions(scope.network, {
     block: blockHeight,
     limit: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
     offset: txsOffset,
+    ...getConsensusTransactionMethodFilteringParam(method),
   })
   const { isLoading, isFetched, data } = transactionsQuery
   const transactions = data?.data.transactions
@@ -38,20 +50,30 @@ const TransactionList: FC<{ scope: SearchScope; blockHeight: number }> = ({ scop
         isTotalCountClipped: data?.data.is_total_count_clipped,
         rowsPerPage: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
       }}
+      filtered={method !== 'all'}
     />
   )
 }
 
 export const ConsensusBlockTransactionsCard: FC<ConsensusBlockDetailsContext> = ({ scope, blockHeight }) => {
   const { t } = useTranslation()
+  const [method, setMethod] = useTypedSearchParam<WantedConsensusTxMethod>('method', 'all', {
+    deleteParams: ['page'],
+  })
+  const { isMobile } = useScreenSize()
 
   if (!blockHeight) {
     return null
   }
 
   return (
-    <LinkableCardLayout containerId={transactionsContainerId} title={t('common.transactions')}>
-      <TransactionList scope={scope} blockHeight={blockHeight} />
+    <LinkableCardLayout
+      containerId={transactionsContainerId}
+      title={t('common.transactions')}
+      action={isMobile ? undefined : <ConsensusTransactionTypeFilter value={method} setValue={setMethod} />}
+    >
+      {isMobile && <ConsensusTransactionTypeFilter value={method} setValue={setMethod} expand />}
+      <TransactionList scope={scope} blockHeight={blockHeight} method={method} />
     </LinkableCardLayout>
   )
 }
diff --git a/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx b/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx
index f9bbf5bcc..11d80e482 100644
--- 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}
@@ -44,6 +73,7 @@ export const LatestConsensusTransactions: FC<{ scope: SearchScope }> = ({ scope
           limit={limit}
           pagination={false}
           verbose={false}
+          filtered={false}
         />
       </CardContent>
     </Card>
diff --git a/src/app/pages/ConsensusDashboardPage/index.tsx b/src/app/pages/ConsensusDashboardPage/index.tsx
index 745932ed5..a463e4751 100644
--- 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} />
diff --git a/src/app/pages/ConsensusTransactionsPage/index.tsx b/src/app/pages/ConsensusTransactionsPage/index.tsx
index fe8925724..8fe930d03 100644
--- a/src/app/pages/ConsensusTransactionsPage/index.tsx
+++ b/src/app/pages/ConsensusTransactionsPage/index.tsx
@@ -16,12 +16,18 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { VerticalList } from '../../components/VerticalList'
 import { ConsensusTransactionDetailView } from '../ConsensusTransactionDetailPage'
 import { useConsensusListBeforeDate } from '../../hooks/useListBeforeDate'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
+import { ConsensusTransactionTypeFilter } from '../../components/Transactions/ConsensusTransactionTypeFilter'
+import { WantedConsensusTxMethod } from '../../components/ConsensusTransactionMethod'
 
 export const ConsensusTransactionsPage: FC = () => {
   const [tableView, setTableView] = useState<TableLayout>(TableLayout.Horizontal)
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const pagination = useSearchParamsPagination('page')
+  const [method, setMethod] = useTypedSearchParam<WantedConsensusTxMethod>('method', 'all', {
+    deleteParams: ['date'],
+  })
   const offset = (pagination.selectedPage - 1) * limit
   const scope = useRequiredScopeParam()
   const enablePolling = offset === 0
@@ -39,6 +45,7 @@ export const ConsensusTransactionsPage: FC = () => {
       limit: tableView === TableLayout.Vertical ? offset + limit : limit,
       offset: tableView === TableLayout.Vertical ? 0 : offset,
       before: enablePolling ? undefined : beforeDate,
+      method: method === 'all' ? undefined : method,
     },
     {
       query: {
@@ -69,7 +76,9 @@ export const ConsensusTransactionsPage: FC = () => {
   const { isLoading, isFetched, data } = transactionsQuery
 
   const transactions = data?.data.transactions
-  setBeforeDateFromCollection(data?.data.transactions[0].timestamp)
+  if (transactions?.length) {
+    setBeforeDateFromCollection(data?.data.transactions[0].timestamp)
+  }
 
   if (isFetched && pagination.selectedPage > 1 && !transactions?.length) {
     throw AppErrors.PageDoesNotExist
@@ -84,7 +93,16 @@ export const ConsensusTransactionsPage: FC = () => {
       {!isMobile && <Divider variant="layout" />}
       <SubPageCard
         title={t('transactions.latest')}
-        action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
+        title2={
+          isMobile ? <ConsensusTransactionTypeFilter value={method} setValue={setMethod} expand /> : undefined
+        }
+        action={
+          isMobile ? (
+            <TableLayoutButton tableView={tableView} setTableView={setTableView} />
+          ) : (
+            <ConsensusTransactionTypeFilter value={method} setValue={setMethod} />
+          )
+        }
         noPadding={tableView === TableLayout.Vertical}
         mainTitle
       >
@@ -101,6 +119,7 @@ export const ConsensusTransactionsPage: FC = () => {
               rowsPerPage: limit,
             }}
             verbose={false}
+            filtered={method !== 'all'}
           />
         )}
 
diff --git a/src/app/pages/ValidatorDetailsPage/hooks.ts b/src/app/pages/ValidatorDetailsPage/hooks.ts
index d877c33a4..d6885daae 100644
--- a/src/app/pages/ValidatorDetailsPage/hooks.ts
+++ b/src/app/pages/ValidatorDetailsPage/hooks.ts
@@ -1,9 +1,12 @@
 import { useOutletContext } from 'react-router-dom'
 import { SearchScope } from '../../../types/searchScope'
+import { WantedConsensusTxMethod } from '../../components/ConsensusTransactionMethod'
 
 export type ValidatorDetailsContext = {
   scope: SearchScope
   address: string
+  method: WantedConsensusTxMethod
+  setMethod: (method: WantedConsensusTxMethod) => void
 }
 
 export const useValidatorDetailsProps = () => useOutletContext<ValidatorDetailsContext>()
diff --git a/src/app/pages/ValidatorDetailsPage/index.tsx b/src/app/pages/ValidatorDetailsPage/index.tsx
index 1ca1795e7..4f49b761e 100644
--- a/src/app/pages/ValidatorDetailsPage/index.tsx
+++ b/src/app/pages/ValidatorDetailsPage/index.tsx
@@ -32,6 +32,8 @@ import { eventsContainerId } from './../../pages/ConsensusAccountDetailsPage/Con
 import { PercentageValue } from '../../components/PercentageValue'
 import { BalancesDiff } from '../../components/BalancesDiff'
 import { RoundedBalance } from '../../components/RoundedBalance'
+import { WantedConsensusTxMethod } from '../../components/ConsensusTransactionMethod'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
 
 export const StyledGrid = styled(Grid)(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {
@@ -43,6 +45,10 @@ export const ValidatorDetailsPage: FC = () => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const scope = useRequiredScopeParam()
+  const [method, setMethod] = useTypedSearchParam<WantedConsensusTxMethod>('method', 'all', {
+    deleteParams: ['page'],
+  })
+
   const { address } = useLoaderData() as AddressLoaderData
   const validatorQuery = useGetConsensusValidatorsAddress(scope.network, address)
   const { isLoading, isFetched, data } = validatorQuery
@@ -52,7 +58,7 @@ export const ValidatorDetailsPage: FC = () => {
   const eventsLink = useHref(`events#${eventsContainerId}`)
   const delegatorsLink = useHref(`delegators#${delegatorsContainerId}`)
   const debondingDelegationsLink = useHref(`debonding-delegations#${debondingContainerId}`)
-  const context: ValidatorDetailsContext = { scope, address }
+  const context: ValidatorDetailsContext = { scope, address, method, setMethod }
 
   return (
     <PageLayout>
diff --git a/src/stories/Transactions.stories.tsx b/src/stories/Transactions.stories.tsx
index b5b793120..089c130c4 100644
--- a/src/stories/Transactions.stories.tsx
+++ b/src/stories/Transactions.stories.tsx
@@ -19,6 +19,7 @@ const ConsensusListStory: StoryFn = () => {
         limit={100}
         pagination={false}
         transactions={mockedTransactions}
+        filtered={false}
       />
     </Box>
   )