Factor out code for displaying events

Earlier this has been implemented as part of transaction details, but actually it should be independent. Move components to separate files and directories.
oasisprotocol · Oct 31, 2023 · 9da42c3 · 9da42c3
1 parent e08e51d
commit 9da42c3
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 50 deletions.
diff --git a/src/app/components/Transactions/LogEvent.tsx → ...nts/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/Transactions/LogEvent.tsx → ...nts/RuntimeEvents/RuntimeEventDetails.tsx
@@ -2,7 +2,6 @@ import { EvmEventParam, RuntimeEvent, RuntimeEventType } from '../../../oasis-ne
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyledDescriptionList } from '../StyledDescriptionList'
-import Divider from '@mui/material/Divider'
 import { useScreenSize } from '../../hooks/useScreensize'
 import Table from '@mui/material/Table'
 import TableHead from '@mui/material/TableHead'
@@ -19,9 +18,9 @@ import { LongDataDisplay } from '../LongDataDisplay'
 import { parseEvmEvent } from '../../utils/parseEvmEvent'
 import { TokenTransferIcon, TokenTransferLabel } from '../Tokens/TokenTransferIcon'
 import Box from '@mui/material/Box'
-import { TransferIcon } from './../CustomIcons/Transfer'
-import { DepositIcon } from './../CustomIcons/Deposit'
-import { WithdrawIcon } from './../CustomIcons/Withdraw'
+import { TransferIcon } from '../CustomIcons/Transfer'
+import { DepositIcon } from '../CustomIcons/Deposit'
+import { WithdrawIcon } from '../CustomIcons/Withdraw'
 import { COLORS } from '../../../styles/theme/colors'
 import StreamIcon from '@mui/icons-material/Stream'
 import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
@@ -125,7 +124,7 @@ const EvmLogRow: FC<{
   )
 }
 
-const LogEvent: FC<{
+export const RuntimeEventDetails: FC<{
   scope: SearchScope
   event: RuntimeEvent
   addressSwitchOption: AddressSwitchOption
@@ -276,17 +275,3 @@ const LogEvent: FC<{
       )
   }
 }
-
-export const TransactionLogEvent: FC<{
-  scope: SearchScope
-  event: RuntimeEvent
-  isFirst: boolean
-  addressSwitchOption: AddressSwitchOption
-}> = ({ scope, event, isFirst, addressSwitchOption }) => {
-  return (
-    <>
-      {!isFirst && <Divider variant="card" />}
-      <LogEvent scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
-    </>
-  )
-}
diff --git a/src/app/components/Transactions/Logs.tsx → ...ntimeEvents/RuntimeEventsDetailedList.tsx b/src/app/components/Transactions/Logs.tsx → ...ntimeEvents/RuntimeEventsDetailedList.tsx
@@ -1,38 +1,28 @@
 import { FC } from 'react'
-import { Layer, RuntimeEvent, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-nexus/api'
-import { AppErrors } from '../../../types/errors'
-import { TransactionLogEvent } from './LogEvent'
-import { TextSkeleton } from '../../components/Skeleton'
+import { SearchScope } from '../../../types/searchScope'
+import { RuntimeEvent } from '../../../oasis-nexus/api'
 import { AddressSwitchOption } from '../AddressSwitch'
-import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
 import { useTranslation } from 'react-i18next'
-import { SearchScope } from '../../../types/searchScope'
+import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
+import { TextSkeleton } from '../Skeleton'
+import { RuntimeEventDetails } from './RuntimeEventDetails'
+import Divider from '@mui/material/Divider'
 
-export const TransactionLogs: FC<{
-  transaction: RuntimeTransaction
+const RuntimeEventDetailsWithSeparator: FC<{
+  scope: SearchScope
+  event: RuntimeEvent
+  isFirst: boolean
   addressSwitchOption: AddressSwitchOption
-}> = ({ transaction, addressSwitchOption }) => {
-  const { network, layer } = transaction
-  if (layer === Layer.consensus) {
-    throw AppErrors.UnsupportedLayer
-  }
-  const eventsQuery = useGetRuntimeEvents(network, layer, {
-    tx_hash: transaction.hash,
-    limit: 100, // We want to avoid pagination here, if possible
-  })
-  const { isLoading, data, isError } = eventsQuery
+}> = ({ scope, event, isFirst, addressSwitchOption }) => {
   return (
-    <TransactionLogsView
-      scope={transaction}
-      events={data?.data?.events}
-      isLoading={isLoading}
-      isError={isError}
-      addressSwitchOption={addressSwitchOption}
-    />
+    <>
+      {!isFirst && <Divider variant="card" />}
+      <RuntimeEventDetails scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
+    </>
   )
 }
 
-export const TransactionLogsView: FC<{
+export const RuntimeEventsDetailedList: FC<{
   scope: SearchScope
   events: RuntimeEvent[] | undefined
   isLoading: boolean
@@ -46,7 +36,7 @@ export const TransactionLogsView: FC<{
       {isLoading && <TextSkeleton numberOfRows={10} />}
       {events &&
         events.map((event, index) => (
-          <TransactionLogEvent
+          <RuntimeEventDetailsWithSeparator
             key={`event-${index}`}
             scope={scope}
             isFirst={!index}

diff --git a/...matchEventAndTokenTransfersIcons.test.tsx → ...matchEventAndTokenTransfersIcons.test.tsx b/...matchEventAndTokenTransfersIcons.test.tsx → ...matchEventAndTokenTransfersIcons.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
-import { EventTypeIcon } from './LogEvent'
-import { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
+import { EventTypeIcon } from '../RuntimeEventDetails'
+import { TokenTransferIcon } from '../../Tokens/TokenTransferIcon'
 
 test('Transfer, burn, and mint icons should match in EventTypeIcon and evm TokenTransferIcon', () => {
   const transfer = render(<EventTypeIcon eventType="accounts.transfer" eventName="Transfer" />).container

diff --git a/src/app/components/Transactions/TransactionEvents.tsx b/src/app/components/Transactions/TransactionEvents.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import { Layer, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-nexus/api'
+import { AppErrors } from '../../../types/errors'
+import { AddressSwitchOption } from '../AddressSwitch'
+import { RuntimeEventsDetailedList } from '../RuntimeEvents/RuntimeEventsDetailedList'
+
+export const TransactionEvents: FC<{
+  transaction: RuntimeTransaction
+  addressSwitchOption: AddressSwitchOption
+}> = ({ transaction, addressSwitchOption }) => {
+  const { network, layer } = transaction
+  if (layer === Layer.consensus) {
+    throw AppErrors.UnsupportedLayer
+  }
+  const eventsQuery = useGetRuntimeEvents(network, layer, {
+    tx_hash: transaction.hash,
+    limit: 100, // We want to avoid pagination here, if possible
+  })
+  const { isLoading, data, isError } = eventsQuery
+  return (
+    <RuntimeEventsDetailedList
+      scope={transaction}
+      events={data?.data?.events}
+      isLoading={isLoading}
+      isError={isError}
+      addressSwitchOption={addressSwitchOption}
+    />
+  )
+}
diff --git a/src/app/pages/TransactionDetailPage/index.tsx b/src/app/pages/TransactionDetailPage/index.tsx
@@ -23,7 +23,7 @@ import { TextSkeleton } from '../../components/Skeleton'
 import Box from '@mui/material/Box'
 import { BlockLink } from '../../components/Blocks/BlockLink'
 import { TransactionLink } from '../../components/Transactions/TransactionLink'
-import { TransactionLogs } from '../../components/Transactions/Logs'
+import { TransactionEvents } from '../../components/Transactions/TransactionEvents'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink'
 import { getNameForTicker, getTickerForNetwork, Ticker } from '../../../types/ticker'
@@ -130,7 +130,7 @@ export const TransactionDetailPage: FC = () => {
       </SubPageCard>
       {transaction && (
         <SubPageCard title={t('common.events')}>
-          <TransactionLogs transaction={transaction} addressSwitchOption={addressSwitchOption} />
+          <TransactionEvents transaction={transaction} addressSwitchOption={addressSwitchOption} />
         </SubPageCard>
       )}
     </PageLayout>