Skip to content

Commit 47ee186

Browse files
csillagcsillag
authored
Merge pull request #991 from oasisprotocol/csillag/refactor-events-display
Factor out code for displaying events
2 parents 45f6034 + 4d3bbda commit 47ee186

File tree

8 files changed

+98
-93
lines changed

8 files changed

+98
-93
lines changed

‎.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: 14 additions & 29 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,21 +124,21 @@ const EvmLogRow: FC<{
125124
)
126125
}
127126

128-
const LogEvent: FC<{
127+
export const RuntimeEventDetails: FC<{
129128
scope: SearchScope
130129
event: RuntimeEvent
131130
addressSwitchOption: AddressSwitchOption
132131
}> = ({ scope, event, addressSwitchOption }) => {
133132
const { isMobile } = useScreenSize()
134133
const { t } = useTranslation()
135134
const eventTypeNames: Record<RuntimeEventType, string> = {
136-
[RuntimeEventType.accountstransfer]: t('transactionEvent.accountstransfer'),
137-
[RuntimeEventType.evmlog]: t('transactionEvent.evmLog'),
138-
[RuntimeEventType.coregas_used]: t('transactionEvent.gasUsed'),
139-
[RuntimeEventType.consensus_accountswithdraw]: t('transactionEvent.consensusWithdrawal'),
140-
[RuntimeEventType.consensus_accountsdeposit]: t('transactionEvent.consensusDeposit'),
141-
[RuntimeEventType.accountsmint]: t('transactionEvent.accountsmint'),
142-
[RuntimeEventType.accountsburn]: t('transactionEvent.accountsburn'),
135+
[RuntimeEventType.accountstransfer]: t('runtimeEvent.accountstransfer'),
136+
[RuntimeEventType.evmlog]: t('runtimeEvent.evmLog'),
137+
[RuntimeEventType.coregas_used]: t('runtimeEvent.gasUsed'),
138+
[RuntimeEventType.consensus_accountswithdraw]: t('runtimeEvent.consensusWithdrawal'),
139+
[RuntimeEventType.consensus_accountsdeposit]: t('runtimeEvent.consensusDeposit'),
140+
[RuntimeEventType.accountsmint]: t('runtimeEvent.accountsmint'),
141+
[RuntimeEventType.accountsburn]: t('runtimeEvent.accountsburn'),
143142
}
144143
const eventName = eventTypeNames[event.type]
145144
switch (event.type) {
@@ -207,7 +206,7 @@ const LogEvent: FC<{
207206
<div>
208207
<EventTypeIcon eventType={event.type} eventName={eventName} />
209208
<StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
210-
<dt>{t('transactionEvent.fields.owner')}</dt>
209+
<dt>{t('runtimeEvent.fields.owner')}</dt>
211210
<dd>
212211
<AccountLink
213212
address={event.body.owner}
@@ -218,7 +217,7 @@ const LogEvent: FC<{
218217
<CopyToClipboard value={event.body.owner} />
219218
)}
220219
</dd>
221-
<dt>{t('transactionEvent.fields.amount')}</dt>
220+
<dt>{t('runtimeEvent.fields.amount')}</dt>
222221
<dd>
223222
{t('common.valueInToken', {
224223
...getPreciseNumberFormat(event.body.amount.Amount),
@@ -255,7 +254,7 @@ const LogEvent: FC<{
255254
/>
256255
{addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
257256
</dd>
258-
<dt>{t('transactionEvent.fields.amount')}</dt>
257+
<dt>{t('runtimeEvent.fields.amount')}</dt>
259258
<dd>
260259
{t('common.valueInToken', {
261260
...getPreciseNumberFormat(event.body.amount.Amount),
@@ -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/RuntimeEvents/RuntimeEventsDetailedList.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { FC } from 'react'
2+
import { SearchScope } from '../../../types/searchScope'
3+
import { RuntimeEvent } from '../../../oasis-nexus/api'
4+
import { AddressSwitchOption } from '../AddressSwitch'
5+
import { useTranslation } from 'react-i18next'
6+
import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
7+
import { TextSkeleton } from '../Skeleton'
8+
import { RuntimeEventDetails } from './RuntimeEventDetails'
9+
import Divider from '@mui/material/Divider'
10+
11+
const RuntimeEventDetailsWithSeparator: FC<{
12+
scope: SearchScope
13+
event: RuntimeEvent
14+
isFirst: boolean
15+
addressSwitchOption: AddressSwitchOption
16+
}> = ({ scope, event, isFirst, addressSwitchOption }) => {
17+
return (
18+
<>
19+
{!isFirst && <Divider variant="card" />}
20+
<RuntimeEventDetails scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
21+
</>
22+
)
23+
}
24+
25+
export const RuntimeEventsDetailedList: FC<{
26+
scope: SearchScope
27+
events: RuntimeEvent[] | undefined
28+
isLoading: boolean
29+
isError: boolean
30+
addressSwitchOption: AddressSwitchOption
31+
}> = ({ scope, events, isLoading, isError, addressSwitchOption }) => {
32+
const { t } = useTranslation()
33+
return (
34+
<>
35+
{isError && <CardEmptyState label={t('runtimeEvent.cantLoadEvents')} />}
36+
{isLoading && <TextSkeleton numberOfRows={10} />}
37+
{events &&
38+
events.map((event, index) => (
39+
<RuntimeEventDetailsWithSeparator
40+
key={`event-${index}`}
41+
scope={scope}
42+
isFirst={!index}
43+
event={event}
44+
addressSwitchOption={addressSwitchOption}
45+
/>
46+
))}
47+
</>
48+
)
49+
}

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/Logs.tsx‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎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>

‎src/locales/en/translation.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@
284284
"recipientTooltipUnavailable": "Recipient not available in selected address format"
285285
}
286286
},
287-
"transactionEvent": {
287+
"runtimeEvent": {
288288
"cantLoadEvents": "Unfortunately we couldn't load the list of events. Please try again later.",
289289
"accountsburn": "Tokens burnt",
290290
"accountsmint": "Tokens minted",

0 commit comments

Comments
 (0)