Move events to tabs in runtime account details

.changelog/1488.trivial.md

@@ -0,0 +1 @@
+Move events cards to tabs

src/app/pages/RuntimeAccountDetailsPage/AccountEventsCard.tsx

@@ -1,30 +1,37 @@
 import { FC } from 'react'
-import { RuntimeEvent } from '../../../oasis-nexus/api'
-import { SubPageCard } from 'app/components/SubPageCard'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
 import { useTranslation } from 'react-i18next'
 import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList'
-import { SearchScope } from '../../../types/searchScope'
 import { AddressSwitchOption } from '../../components/AddressSwitch'
+import { ErrorBoundary } from '../../components/ErrorBoundary'
+import { LinkableDiv } from '../../components/PageLayout/LinkableDiv'
+import { useAccountEvents } from './hook'
+import { RuntimeAccountDetailsContext } from '.'
 
-type AccountEventProps = {
-  scope: SearchScope
-  isLoading: boolean
-  isError: boolean
-  events: RuntimeEvent[] | undefined
-}
+export const eventsContainerId = 'events'
 
-export const AccountEventsCard: FC<AccountEventProps> = ({ scope, isLoading, isError, events }) => {
+export const AccountEventsCard: FC<RuntimeAccountDetailsContext> = ({ scope, address }) => {
   const { t } = useTranslation()
+  const { isLoading, isError, events } = useAccountEvents(scope, address)
 
   return (
-    <SubPageCard title={t('common.events')}>
-      <RuntimeEventsDetailedList
-        scope={scope}
-        events={events}
-        isLoading={isLoading}
-        isError={isError}
-        addressSwitchOption={AddressSwitchOption.ETH} // TODO
-      />
-    </SubPageCard>
+    <Card>
+      <LinkableDiv id={eventsContainerId}>
+        <CardHeader disableTypography component="h3" title={t('common.events')} />
+      </LinkableDiv>
+      <CardContent>
+        <ErrorBoundary light={true}>
+          <RuntimeEventsDetailedList
+            scope={scope}
+            events={events}
+            isLoading={isLoading}
+            isError={isError}
+            addressSwitchOption={AddressSwitchOption.ETH} // TODO
+          />
+        </ErrorBoundary>
+      </CardContent>
+    </Card>
   )
 }

src/app/pages/RuntimeAccountDetailsPage/index.tsx

@@ -4,18 +4,17 @@ import { useHref, useLoaderData, useOutletContext } from 'react-router-dom'
 import { PageLayout } from '../../components/PageLayout'
 import { RouterTabs } from '../../components/RouterTabs'
 import { useAllTokenPrices } from '../../../coin-gecko/api'
-
 import { EvmTokenType, RuntimeAccount } from '../../../oasis-nexus/api'
 import { accountTokenContainerId } from './AccountTokensCard'
-import { useAccount, useAccountEvents } from './hook'
+import { useAccount } from './hook'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { contractCodeContainerId } from './ContractCodeCard'
 import { useTokenInfo } from '../TokenDashboardPage/hook'
 import { accountTokenTransfersContainerId } from './AccountTokenTransfersCard'
 import { getTokenTypePluralName } from '../../../types/tokens'
 import { SearchScope } from '../../../types/searchScope'
 import { RuntimeAccountDetailsCard } from './RuntimeAccountDetailsCard'
-import { AccountEventsCard } from './AccountEventsCard'
+import { eventsContainerId } from './AccountEventsCard'
 import { DappBanner } from '../../components/DappBanner'
 import { AddressLoaderData } from '../../utils/route-utils'
 import { getFiatCurrencyForScope } from '../../../config'
@@ -39,8 +38,7 @@ export const RuntimeAccountDetailsPage: FC = () => {
 
   const tokenPrices = useAllTokenPrices(getFiatCurrencyForScope(scope))
 
-  const { isLoading: areEventsLoading, isError: isEventsError, events } = useAccountEvents(scope, address)
-
+  const eventsLink = useHref(`events#${eventsContainerId}`)
   const tokenTransfersLink = useHref(`token-transfers#${accountTokenTransfersContainerId}`)
   const erc20Link = useHref(`tokens/erc-20#${accountTokenContainerId}`)
   const erc721Link = useHref(`tokens/erc-721#${accountTokenContainerId}`)
@@ -68,6 +66,7 @@ export const RuntimeAccountDetailsPage: FC = () => {
       <RouterTabs
         tabs={[
           { label: t('common.transactions'), to: txLink },
+          { label: t('common.events'), to: eventsLink },
           { label: t('common.transfers'), to: tokenTransfersLink },
           {
             label: getTokenTypePluralName(t, EvmTokenType.ERC20),
@@ -81,7 +80,6 @@ export const RuntimeAccountDetailsPage: FC = () => {
         ]}
         context={context}
       />
-      <AccountEventsCard scope={scope} isLoading={areEventsLoading} isError={isEventsError} events={events} />
     </PageLayout>
   )
 }

src/routes.tsx

@@ -30,6 +30,7 @@ import { RoutingErrorPage } from './app/pages/RoutingErrorPage'
 import { ThemeByNetwork, withDefaultTheme } from './app/components/ThemeByNetwork'
 import { useRequiredScopeParam } from './app/hooks/useScopeParam'
 import { TokensPage } from './app/pages/TokensOverviewPage'
+import { AccountEventsCard } from 'app/pages/RuntimeAccountDetailsPage/AccountEventsCard'
 import { ContractCodeCard } from './app/pages/RuntimeAccountDetailsPage/ContractCodeCard'
 import { TokenDashboardPage, useTokenDashboardProps } from './app/pages/TokenDashboardPage'
 import { AccountTokenTransfersCard } from './app/pages/RuntimeAccountDetailsPage/AccountTokenTransfersCard'
@@ -238,6 +239,10 @@ export const routes: RouteObject[] = [
                 path: '',
                 Component: () => <AccountTransactionsCard {...useRuntimeAccountDetailsProps()} />,
               },
+              {
+                path: 'events',
+                Component: () => <AccountEventsCard {...useRuntimeAccountDetailsProps()} />,
+              },
               {
                 path: 'token-transfers',
                 Component: () => <AccountTokenTransfersCard {...useRuntimeAccountDetailsProps()} />,