Factor out code for displaying events

.changelog/991.internal.md

@@ -0,0 +1 @@
+Refactor code for showing events

src/app/components/Transactions/LogEvent.tsx → src/app/components/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,21 +124,21 @@ const EvmLogRow: FC<{
   )
 }
 
-const LogEvent: FC<{
+export const RuntimeEventDetails: FC<{
   scope: SearchScope
   event: RuntimeEvent
   addressSwitchOption: AddressSwitchOption
 }> = ({ scope, event, addressSwitchOption }) => {
   const { isMobile } = useScreenSize()
   const { t } = useTranslation()
   const eventTypeNames: Record<RuntimeEventType, string> = {
-    [RuntimeEventType.accountstransfer]: t('transactionEvent.accountstransfer'),
-    [RuntimeEventType.evmlog]: t('transactionEvent.evmLog'),
-    [RuntimeEventType.coregas_used]: t('transactionEvent.gasUsed'),
-    [RuntimeEventType.consensus_accountswithdraw]: t('transactionEvent.consensusWithdrawal'),
-    [RuntimeEventType.consensus_accountsdeposit]: t('transactionEvent.consensusDeposit'),
-    [RuntimeEventType.accountsmint]: t('transactionEvent.accountsmint'),
-    [RuntimeEventType.accountsburn]: t('transactionEvent.accountsburn'),
+    [RuntimeEventType.accountstransfer]: t('runtimeEvent.accountstransfer'),
+    [RuntimeEventType.evmlog]: t('runtimeEvent.evmLog'),
+    [RuntimeEventType.coregas_used]: t('runtimeEvent.gasUsed'),
+    [RuntimeEventType.consensus_accountswithdraw]: t('runtimeEvent.consensusWithdrawal'),
+    [RuntimeEventType.consensus_accountsdeposit]: t('runtimeEvent.consensusDeposit'),
+    [RuntimeEventType.accountsmint]: t('runtimeEvent.accountsmint'),
+    [RuntimeEventType.accountsburn]: t('runtimeEvent.accountsburn'),
   }
   const eventName = eventTypeNames[event.type]
   switch (event.type) {
@@ -207,7 +206,7 @@ const LogEvent: FC<{
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
-            <dt>{t('transactionEvent.fields.owner')}</dt>
+            <dt>{t('runtimeEvent.fields.owner')}</dt>
             <dd>
               <AccountLink
                 address={event.body.owner}
@@ -218,7 +217,7 @@ const LogEvent: FC<{
                 <CopyToClipboard value={event.body.owner} />
               )}
             </dd>
-            <dt>{t('transactionEvent.fields.amount')}</dt>
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
             <dd>
               {t('common.valueInToken', {
                 ...getPreciseNumberFormat(event.body.amount.Amount),
@@ -255,7 +254,7 @@ const LogEvent: FC<{
               />
               {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
             </dd>
-            <dt>{t('transactionEvent.fields.amount')}</dt>
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
             <dd>
               {t('common.valueInToken', {
                 ...getPreciseNumberFormat(event.body.amount.Amount),
@@ -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} />
-    </>
-  )
-}

src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react'
+import { SearchScope } from '../../../types/searchScope'
+import { RuntimeEvent } from '../../../oasis-nexus/api'
+import { AddressSwitchOption } from '../AddressSwitch'
+import { useTranslation } from 'react-i18next'
+import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
+import { TextSkeleton } from '../Skeleton'
+import { RuntimeEventDetails } from './RuntimeEventDetails'
+import Divider from '@mui/material/Divider'
+
+const RuntimeEventDetailsWithSeparator: FC<{
+  scope: SearchScope
+  event: RuntimeEvent
+  isFirst: boolean
+  addressSwitchOption: AddressSwitchOption
+}> = ({ scope, event, isFirst, addressSwitchOption }) => {
+  return (
+    <>
+      {!isFirst && <Divider variant="card" />}
+      <RuntimeEventDetails scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
+    </>
+  )
+}
+
+export const RuntimeEventsDetailedList: FC<{
+  scope: SearchScope
+  events: RuntimeEvent[] | undefined
+  isLoading: boolean
+  isError: boolean
+  addressSwitchOption: AddressSwitchOption
+}> = ({ scope, events, isLoading, isError, addressSwitchOption }) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      {isError && <CardEmptyState label={t('runtimeEvent.cantLoadEvents')} />}
+      {isLoading && <TextSkeleton numberOfRows={10} />}
+      {events &&
+        events.map((event, index) => (
+          <RuntimeEventDetailsWithSeparator
+            key={`event-${index}`}
+            scope={scope}
+            isFirst={!index}
+            event={event}
+            addressSwitchOption={addressSwitchOption}
+          />
+        ))}
+    </>
+  )
+}

src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx → src/app/components/RuntimeEvents/__tests__/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

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

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>

src/locales/en/translation.json

@@ -284,7 +284,7 @@
       "recipientTooltipUnavailable": "Recipient not available in selected address format"
     }
   },
-  "transactionEvent": {
+  "runtimeEvent": {
     "cantLoadEvents": "Unfortunately we couldn't load the list of events. Please try again later.",
     "accountsburn": "Tokens burnt",
     "accountsmint": "Tokens minted",