Also apply filtering to account events

oasisprotocol · Nov 7, 2023 · b8c35b0 · b8c35b0
1 parent 7fe64d2
commit b8c35b0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/src/app/pages/AccountDetailsPage/AccountEventsCard.tsx b/src/app/pages/AccountDetailsPage/AccountEventsCard.tsx
@@ -5,19 +5,32 @@ import { useTranslation } from 'react-i18next'
 import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList'
 import { SearchScope } from '../../../types/searchScope'
 import { AddressSwitchOption } from '../../components/AddressSwitch'
+import { EventFilterMode, EventFilterSwitch } from '../../components/RuntimeEvents/EventListFilterSwitch'
 
 type AccountEventProps = {
   scope: SearchScope
   isLoading: boolean
+  filterMode: EventFilterMode
+  setFilterMode: (mode: EventFilterMode) => void
   isError: boolean
   events: RuntimeEvent[] | undefined
 }
 
-export const AccountEventsCard: FC<AccountEventProps> = ({ scope, isLoading, isError, events }) => {
+export const AccountEventsCard: FC<AccountEventProps> = ({
+  scope,
+  isLoading,
+  filterMode,
+  setFilterMode,
+  isError,
+  events,
+}) => {
   const { t } = useTranslation()
 
   return (
-    <SubPageCard title={t('common.events')}>
+    <SubPageCard
+      title={t('common.events')}
+      action={<EventFilterSwitch selected={filterMode} onSelectionChange={setFilterMode} />}
+    >
       <RuntimeEventsDetailedList
         scope={scope}
         events={events}

diff --git a/src/app/pages/AccountDetailsPage/hook.ts b/src/app/pages/AccountDetailsPage/hook.ts
@@ -1,5 +1,6 @@
 import {
   Layer,
+  RuntimeEventType,
   useGetRuntimeAccountsAddress,
   useGetRuntimeEvents,
   useGetRuntimeTransactions,
@@ -8,6 +9,7 @@ import { AppErrors } from '../../../types/errors'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { SearchScope } from '../../../types/searchScope'
+import { EventFilterMode } from '../../components/RuntimeEvents/EventListFilterSwitch'
 
 export const useAccount = (scope: SearchScope, oasisAddress: string) => {
   const { network, layer } = scope
@@ -60,7 +62,7 @@ export const useAccountTransactions = (scope: SearchScope, address: string) => {
   }
 }
 
-export const useAccountEvents = (scope: SearchScope, address: string) => {
+export const useAccountEvents = (scope: SearchScope, address: string, filterMode: EventFilterMode) => {
   const { network, layer } = scope
   if (layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
@@ -72,6 +74,8 @@ export const useAccountEvents = (scope: SearchScope, address: string) => {
     // TODO: implement filtering for non-transactional events
   })
   const { isFetched, isLoading, isError, data } = query
-  const events = data?.data.events
+  const events = data?.data.events.filter(
+    event => filterMode === EventFilterMode.All || event.type !== RuntimeEventType.accountstransfer,
+  )
   return { isFetched, isLoading, isError, events }
 }
diff --git a/src/app/pages/AccountDetailsPage/index.tsx b/src/app/pages/AccountDetailsPage/index.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHref, useLoaderData, useOutletContext } from 'react-router-dom'
 import { PageLayout } from '../../components/PageLayout'
@@ -17,6 +17,7 @@ import { getTokenTypePluralName } from '../../../types/tokens'
 import { SearchScope } from '../../../types/searchScope'
 import { AccountDetailsCard } from './AccountDetailsCard'
 import { AccountEventsCard } from './AccountEventsCard'
+import { EventFilterMode } from '../../components/RuntimeEvents/EventListFilterSwitch'
 
 export type AccountDetailsContext = {
   scope: SearchScope
@@ -35,8 +36,13 @@ export const AccountDetailsPage: FC = () => {
   const { token, isLoading: isTokenLoading } = useTokenInfo(scope, address, isContract)
 
   const tokenPriceInfo = useTokenPrice(account?.ticker || Ticker.ROSE)
+  const [eventFilterMode, setEventFilterMode] = useState<EventFilterMode>(EventFilterMode.All)
 
-  const { isLoading: areEventsLoading, isError: isEventsError, events } = useAccountEvents(scope, address)
+  const {
+    isLoading: areEventsLoading,
+    isError: isEventsError,
+    events,
+  } = useAccountEvents(scope, address, eventFilterMode)
 
   const tokenTransfersLink = useHref(`token-transfers#${accountTokenTransfersContainerId}`)
   const erc20Link = useHref(`tokens/erc-20#${accountTokenContainerId}`)
@@ -76,7 +82,14 @@ export const AccountDetailsPage: FC = () => {
         ]}
         context={context}
       />
-      <AccountEventsCard scope={scope} isLoading={areEventsLoading} isError={isEventsError} events={events} />
+      <AccountEventsCard
+        scope={scope}
+        filterMode={eventFilterMode}
+        setFilterMode={setEventFilterMode}
+        isLoading={areEventsLoading}
+        isError={isEventsError}
+        events={events}
+      />
     </PageLayout>
   )
 }