Skip to content

Commit 0b8e40c

Browse files
csillagcsillag
committed
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.
1 parent 45f6034 commit 0b8e40c

6 files changed

Lines changed: 55 additions & 50 deletions

File tree

‎.changelog/991.internal.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Refactor code for showing events

src/app/components/Transactions/LogEvent.tsx renamed to src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { EvmEventParam, RuntimeEvent, RuntimeEventType } from '../../../oasis-ne
22
import { FC, useEffect, useState } from 'react'
33
import { useTranslation } from 'react-i18next'
44
import { StyledDescriptionList } from '../StyledDescriptionList'
5-
import Divider from '@mui/material/Divider'
65
import { useScreenSize } from '../../hooks/useScreensize'
76
import Table from '@mui/material/Table'
87
import TableHead from '@mui/material/TableHead'
@@ -19,9 +18,9 @@ import { LongDataDisplay } from '../LongDataDisplay'
1918
import { parseEvmEvent } from '../../utils/parseEvmEvent'
2019
import { TokenTransferIcon, TokenTransferLabel } from '../Tokens/TokenTransferIcon'
2120
import Box from '@mui/material/Box'
22-
import { TransferIcon } from './../CustomIcons/Transfer'
23-
import { DepositIcon } from './../CustomIcons/Deposit'
24-
import { WithdrawIcon } from './../CustomIcons/Withdraw'
21+
import { TransferIcon } from '../CustomIcons/Transfer'
22+
import { DepositIcon } from '../CustomIcons/Deposit'
23+
import { WithdrawIcon } from '../CustomIcons/Withdraw'
2524
import { COLORS } from '../../../styles/theme/colors'
2625
import StreamIcon from '@mui/icons-material/Stream'
2726
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
@@ -125,7 +124,7 @@ const EvmLogRow: FC<{
125124
)
126125
}
127126

128-
const LogEvent: FC<{
127+
export const RuntimeEventDetails: FC<{
129128
scope: SearchScope
130129
event: RuntimeEvent
131130
addressSwitchOption: AddressSwitchOption
@@ -276,17 +275,3 @@ const LogEvent: FC<{
276275
)
277276
}
278277
}
279-
280-
export const TransactionLogEvent: FC<{
281-
scope: SearchScope
282-
event: RuntimeEvent
283-
isFirst: boolean
284-
addressSwitchOption: AddressSwitchOption
285-
}> = ({ scope, event, isFirst, addressSwitchOption }) => {
286-
return (
287-
<>
288-
{!isFirst && <Divider variant="card" />}
289-
<LogEvent scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
290-
</>
291-
)
292-
}

src/app/components/Transactions/Logs.tsx renamed to src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,28 @@
11
import { FC } from 'react'
2-
import { Layer, RuntimeEvent, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-nexus/api'
3-
import { AppErrors } from '../../../types/errors'
4-
import { TransactionLogEvent } from './LogEvent'
5-
import { TextSkeleton } from '../../components/Skeleton'
2+
import { SearchScope } from '../../../types/searchScope'
3+
import { RuntimeEvent } from '../../../oasis-nexus/api'
64
import { AddressSwitchOption } from '../AddressSwitch'
7-
import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
85
import { useTranslation } from 'react-i18next'
9-
import { SearchScope } from '../../../types/searchScope'
6+
import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
7+
import { TextSkeleton } from '../Skeleton'
8+
import { RuntimeEventDetails } from './RuntimeEventDetails'
9+
import Divider from '@mui/material/Divider'
1010

11-
export const TransactionLogs: FC<{
12-
transaction: RuntimeTransaction
11+
const RuntimeEventDetailsWithSeparator: FC<{
12+
scope: SearchScope
13+
event: RuntimeEvent
14+
isFirst: boolean
1315
addressSwitchOption: AddressSwitchOption
14-
}> = ({ transaction, addressSwitchOption }) => {
15-
const { network, layer } = transaction
16-
if (layer === Layer.consensus) {
17-
throw AppErrors.UnsupportedLayer
18-
}
19-
const eventsQuery = useGetRuntimeEvents(network, layer, {
20-
tx_hash: transaction.hash,
21-
limit: 100, // We want to avoid pagination here, if possible
22-
})
23-
const { isLoading, data, isError } = eventsQuery
16+
}> = ({ scope, event, isFirst, addressSwitchOption }) => {
2417
return (
25-
<TransactionLogsView
26-
scope={transaction}
27-
events={data?.data?.events}
28-
isLoading={isLoading}
29-
isError={isError}
30-
addressSwitchOption={addressSwitchOption}
31-
/>
18+
<>
19+
{!isFirst && <Divider variant="card" />}
20+
<RuntimeEventDetails scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
21+
</>
3222
)
3323
}
3424

35-
export const TransactionLogsView: FC<{
25+
export const RuntimeEventsDetailedList: FC<{
3626
scope: SearchScope
3727
events: RuntimeEvent[] | undefined
3828
isLoading: boolean
@@ -46,7 +36,7 @@ export const TransactionLogsView: FC<{
4636
{isLoading && <TextSkeleton numberOfRows={10} />}
4737
{events &&
4838
events.map((event, index) => (
49-
<TransactionLogEvent
39+
<RuntimeEventDetailsWithSeparator
5040
key={`event-${index}`}
5141
scope={scope}
5242
isFirst={!index}

src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx renamed to src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { render } from '@testing-library/react'
2-
import { EventTypeIcon } from './LogEvent'
3-
import { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
2+
import { EventTypeIcon } from '../RuntimeEventDetails'
3+
import { TokenTransferIcon } from '../../Tokens/TokenTransferIcon'
44

55
test('Transfer, burn, and mint icons should match in EventTypeIcon and evm TokenTransferIcon', () => {
66
const transfer = render(<EventTypeIcon eventType="accounts.transfer" eventName="Transfer" />).container

‎src/app/components/Transactions/TransactionEvents.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { FC } from 'react'
2+
import { Layer, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-nexus/api'
3+
import { AppErrors } from '../../../types/errors'
4+
import { AddressSwitchOption } from '../AddressSwitch'
5+
import { RuntimeEventsDetailedList } from '../RuntimeEvents/RuntimeEventsDetailedList'
6+
7+
export const TransactionEvents: FC<{
8+
transaction: RuntimeTransaction
9+
addressSwitchOption: AddressSwitchOption
10+
}> = ({ transaction, addressSwitchOption }) => {
11+
const { network, layer } = transaction
12+
if (layer === Layer.consensus) {
13+
throw AppErrors.UnsupportedLayer
14+
}
15+
const eventsQuery = useGetRuntimeEvents(network, layer, {
16+
tx_hash: transaction.hash,
17+
limit: 100, // We want to avoid pagination here, if possible
18+
})
19+
const { isLoading, data, isError } = eventsQuery
20+
return (
21+
<RuntimeEventsDetailedList
22+
scope={transaction}
23+
events={data?.data?.events}
24+
isLoading={isLoading}
25+
isError={isError}
26+
addressSwitchOption={addressSwitchOption}
27+
/>
28+
)
29+
}

‎src/app/pages/TransactionDetailPage/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { TextSkeleton } from '../../components/Skeleton'
2323
import Box from '@mui/material/Box'
2424
import { BlockLink } from '../../components/Blocks/BlockLink'
2525
import { TransactionLink } from '../../components/Transactions/TransactionLink'
26-
import { TransactionLogs } from '../../components/Transactions/Logs'
26+
import { TransactionEvents } from '../../components/Transactions/TransactionEvents'
2727
import { useRequiredScopeParam } from '../../hooks/useScopeParam'
2828
import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink'
2929
import { getNameForTicker, getTickerForNetwork, Ticker } from '../../../types/ticker'
@@ -130,7 +130,7 @@ export const TransactionDetailPage: FC = () => {
130130
</SubPageCard>
131131
{transaction && (
132132
<SubPageCard title={t('common.events')}>
133-
<TransactionLogs transaction={transaction} addressSwitchOption={addressSwitchOption} />
133+
<TransactionEvents transaction={transaction} addressSwitchOption={addressSwitchOption} />
134134
</SubPageCard>
135135
)}
136136
</PageLayout>

0 commit comments

Comments
 (0)