diff --git a/.changelog/991.internal.md b/.changelog/991.internal.md new file mode 100644 index 000000000..f3c454300 --- /dev/null +++ b/.changelog/991.internal.md @@ -0,0 +1 @@ +Refactor code for showing events diff --git a/src/app/components/Transactions/LogEvent.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx similarity index 87% rename from src/app/components/Transactions/LogEvent.tsx rename to src/app/components/RuntimeEvents/RuntimeEventDetails.tsx index 7fe0ee87a..7e72d75d6 100644 --- a/src/app/components/Transactions/LogEvent.tsx +++ b/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,7 +124,7 @@ const EvmLogRow: FC<{ ) } -const LogEvent: FC<{ +export const RuntimeEventDetails: FC<{ scope: SearchScope event: RuntimeEvent addressSwitchOption: AddressSwitchOption @@ -133,13 +132,13 @@ const LogEvent: FC<{ const { isMobile } = useScreenSize() const { t } = useTranslation() const eventTypeNames: Record = { - [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<{
-
{t('transactionEvent.fields.owner')}
+
{t('runtimeEvent.fields.owner')}
)}
-
{t('transactionEvent.fields.amount')}
+
{t('runtimeEvent.fields.amount')}
{t('common.valueInToken', { ...getPreciseNumberFormat(event.body.amount.Amount), @@ -255,7 +254,7 @@ const LogEvent: FC<{ /> {addressSwitchOption === AddressSwitchOption.Oasis && }
-
{t('transactionEvent.fields.amount')}
+
{t('runtimeEvent.fields.amount')}
{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 && } - - - ) -} diff --git a/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx b/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx new file mode 100644 index 000000000..d4e13a079 --- /dev/null +++ b/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 && } + + + ) +} + +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 && } + {isLoading && } + {events && + events.map((event, index) => ( + + ))} + + ) +} diff --git a/src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx b/src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx similarity index 89% rename from src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx rename to src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx index 898a312db..0f4383311 100644 --- a/src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx +++ b/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().container diff --git a/src/app/components/Transactions/Logs.tsx b/src/app/components/Transactions/Logs.tsx deleted file mode 100644 index e9f92798b..000000000 --- a/src/app/components/Transactions/Logs.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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 { AddressSwitchOption } from '../AddressSwitch' -import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState' -import { useTranslation } from 'react-i18next' -import { SearchScope } from '../../../types/searchScope' - -export const TransactionLogs: 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 ( - - ) -} - -export const TransactionLogsView: FC<{ - scope: SearchScope - events: RuntimeEvent[] | undefined - isLoading: boolean - isError: boolean - addressSwitchOption: AddressSwitchOption -}> = ({ scope, events, isLoading, isError, addressSwitchOption }) => { - const { t } = useTranslation() - return ( - <> - {isError && } - {isLoading && } - {events && - events.map((event, index) => ( - - ))} - - ) -} diff --git a/src/app/components/Transactions/TransactionEvents.tsx b/src/app/components/Transactions/TransactionEvents.tsx new file mode 100644 index 000000000..2bee495c9 --- /dev/null +++ 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 ( + + ) +} diff --git a/src/app/pages/TransactionDetailPage/index.tsx b/src/app/pages/TransactionDetailPage/index.tsx index ecf308418..686157bf6 100644 --- 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 = () => { {transaction && ( - + )} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index b83fba3a0..051a958d6 100644 --- a/src/locales/en/translation.json +++ b/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",