diff --git a/src/app/components/Transactions/LogEvent.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx similarity index 94% rename from src/app/components/Transactions/LogEvent.tsx rename to src/app/components/RuntimeEvents/RuntimeEventDetails.tsx index 7fe0ee87a2..54cdcd0b31 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 @@ -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/Transactions/Logs.tsx b/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx similarity index 50% rename from src/app/components/Transactions/Logs.tsx rename to src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx index e9f92798be..c017ca42ab 100644 --- a/src/app/components/Transactions/Logs.tsx +++ b/src/app/components/RuntimeEvents/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 ( - + <> + {!isFirst && } + + ) } -export const TransactionLogsView: FC<{ +export const RuntimeEventsDetailedList: FC<{ scope: SearchScope events: RuntimeEvent[] | undefined isLoading: boolean @@ -46,7 +36,7 @@ export const TransactionLogsView: FC<{ {isLoading && } {events && events.map((event, index) => ( - { const transfer = render().container diff --git a/src/app/components/Transactions/TransactionEvents.tsx b/src/app/components/Transactions/TransactionEvents.tsx new file mode 100644 index 0000000000..2bee495c96 --- /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 eee267123a..3638912975 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 && ( - + )}