Extend transaction method filtering to consensus and validators

.changelog/1679.trivial.md

@@ -1 +1 @@
-Add support for filtering latest TX list for method type
+Add support for filtering transactions by method type

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

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

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')}
     />
   )
 }

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

src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx

@@ -3,57 +3,58 @@ 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
   const transactionsQuery = useGetConsensusTransactions(network, {
     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'}
+    />
   )
 }

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>()

src/app/pages/ConsensusAccountDetailsPage/index.tsx

@@ -13,19 +13,24 @@ 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()
   const { isMobile } = useScreenSize()
   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>

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

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,18 +47,33 @@ 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}
           isLoading={transactionsQuery.isLoading}
           limit={limit}
           pagination={false}
           verbose={false}
+          filtered={false}
         />
       </CardContent>
     </Card>

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} />