Merge pull request #1174 from oasisprotocol/csillag/remove-event-filt…

…ering

Remove event filtering

.changelog/1174.breaking.md

@@ -0,0 +1 @@
+Simplify UI: remove event filtering switch

src/app/pages/AccountDetailsPage/AccountEventsCard.tsx

@@ -5,32 +5,19 @@ 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,
-  filterMode,
-  setFilterMode,
-  isError,
-  events,
-}) => {
+export const AccountEventsCard: FC<AccountEventProps> = ({ scope, isLoading, isError, events }) => {
   const { t } = useTranslation()
 
   return (
-    <SubPageCard
-      title={t('common.events')}
-      action={<EventFilterSwitch selected={filterMode} onSelectionChange={setFilterMode} />}
-    >
+    <SubPageCard title={t('common.events')}>
       <RuntimeEventsDetailedList
         scope={scope}
         events={events}

src/app/pages/AccountDetailsPage/hook.ts

@@ -1,6 +1,5 @@
 import {
   Layer,
-  RuntimeEventType,
   useGetRuntimeAccountsAddress,
   useGetRuntimeEvents,
   useGetRuntimeTransactions,
@@ -9,7 +8,6 @@ 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'
 import { useTransformToOasisAddress } from '../../hooks/useTransformToOasisAddress'
 
 export const useAccount = (scope: SearchScope, address: string) => {
@@ -71,7 +69,7 @@ export const useAccountTransactions = (scope: SearchScope, address: string) => {
   }
 }
 
-export const useAccountEvents = (scope: SearchScope, address: string, filterMode: EventFilterMode) => {
+export const useAccountEvents = (scope: SearchScope, address: string) => {
   const { network, layer } = scope
   if (layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
@@ -94,8 +92,6 @@ export const useAccountEvents = (scope: SearchScope, address: string, filterMode
     },
   )
   const { isFetched, isLoading, isError, data } = query
-  const events = data?.data.events.filter(
-    event => filterMode === EventFilterMode.All || event.type !== RuntimeEventType.accountstransfer,
-  )
+  const events = data?.data.events
   return { isFetched, isLoading, isError, events }
 }

src/app/pages/AccountDetailsPage/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHref, useLoaderData, useOutletContext } from 'react-router-dom'
 import { PageLayout } from '../../components/PageLayout'
@@ -17,7 +17,6 @@ import { getTokenTypePluralName } from '../../../types/tokens'
 import { SearchScope } from '../../../types/searchScope'
 import { AccountDetailsCard } from './AccountDetailsCard'
 import { AccountEventsCard } from './AccountEventsCard'
-import { EventFilterMode } from '../../components/RuntimeEvents/EventListFilterSwitch'
 import { DappBanner } from '../../components/DappBanner'
 
 export type AccountDetailsContext = {
@@ -38,13 +37,8 @@ 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, eventFilterMode)
+  const { isLoading: areEventsLoading, isError: isEventsError, events } = useAccountEvents(scope, address)
 
   const tokenTransfersLink = useHref(`token-transfers#${accountTokenTransfersContainerId}`)
   const erc20Link = useHref(`tokens/erc-20#${accountTokenContainerId}`)
@@ -85,14 +79,7 @@ export const AccountDetailsPage: FC = () => {
         ]}
         context={context}
       />
-      <AccountEventsCard
-        scope={scope}
-        filterMode={eventFilterMode}
-        setFilterMode={setEventFilterMode}
-        isLoading={areEventsLoading}
-        isError={isEventsError}
-        events={events}
-      />
+      <AccountEventsCard scope={scope} isLoading={areEventsLoading} isError={isEventsError} events={events} />
     </PageLayout>
   )
 }

src/app/pages/BlockDetailPage/EventsCard.tsx

@@ -1,25 +1,20 @@
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollingCard } from '../../components/PageLayout/ScrollingCard'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
 
-import { Layer, RuntimeEventType, useGetRuntimeEvents } from '../../../oasis-nexus/api'
+import { Layer, useGetRuntimeEvents } from '../../../oasis-nexus/api'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { AppErrors } from '../../../types/errors'
 import { SearchScope } from '../../../types/searchScope'
 import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList'
 import { AddressSwitchOption } from '../../components/AddressSwitch'
-import { EventFilterMode, EventFilterSwitch } from '../../components/RuntimeEvents/EventListFilterSwitch'
 import { EmptyState } from '../../components/EmptyState'
 
 export const eventsContainerId = 'events'
 
-const EventsList: FC<{ scope: SearchScope; blockHeight: number; filterMode: EventFilterMode }> = ({
-  scope,
-  blockHeight,
-  filterMode,
-}) => {
+const EventsList: FC<{ scope: SearchScope; blockHeight: number }> = ({ scope, blockHeight }) => {
   const { t } = useTranslation()
   if (scope.layer === Layer.consensus) {
     // Loading events for consensus blocks is not yet supported.
@@ -34,11 +29,7 @@ const EventsList: FC<{ scope: SearchScope; blockHeight: number; filterMode: Even
 
   const { isLoading, isError, data } = eventsQuery
 
-  const events = data?.data.events.filter(
-    event =>
-      !event.tx_hash && // TODO: remove filtering here if it's implemented using the query parameters
-      (filterMode === EventFilterMode.All || event.type !== RuntimeEventType.accountstransfer),
-  )
+  const events = data?.data.events
 
   if (!events?.length && !isLoading) {
     return (
@@ -62,19 +53,13 @@ const EventsList: FC<{ scope: SearchScope; blockHeight: number; filterMode: Even
 }
 
 export const EventsCard: FC<{ scope: SearchScope; blockHeight: number }> = ({ scope, blockHeight }) => {
-  const [filterMode, setFilterMode] = useState<EventFilterMode>(EventFilterMode.All)
   const { t } = useTranslation()
   return (
     <ScrollingCard id={eventsContainerId}>
-      <CardHeader
-        disableTypography
-        component="h3"
-        title={t('common.events')}
-        action={<EventFilterSwitch selected={filterMode} onSelectionChange={setFilterMode} />}
-      />
+      <CardHeader disableTypography component="h3" title={t('common.events')} />
       <CardContent>
         <ErrorBoundary light={true}>
-          <EventsList scope={scope} blockHeight={blockHeight} filterMode={filterMode} />
+          <EventsList scope={scope} blockHeight={blockHeight} />
         </ErrorBoundary>
       </CardContent>
     </ScrollingCard>