Improve displaying events

.changelog/651.feature.md

@@ -0,0 +1 @@
+Improve displaying events

src/app/components/StyledDescriptionList/index.tsx

@@ -42,7 +42,7 @@ export const StyledDescriptionList = styled(InlineDescriptionList, {
 })<StyledDescriptionListProps>(({ theme, standalone, highlight }) => ({
   'dt, dd': {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'start',
     boxShadow: `0px 1px 0px ${COLORS.grayLight}`,
     ':last-of-type': {
       boxShadow: 'none',

src/app/components/Transactions/LogEvent.tsx

@@ -15,6 +15,7 @@ import { SearchScope } from '../../../types/searchScope'
 import { AddressSwitchOption } from '../AddressSwitch'
 import { getOasisAddress } from '../../utils/helpers'
 import { exhaustedTypeWarning } from '../../../types/errors'
+import { LongDataDisplay } from '../LongDataDisplay'
 
 const EvmEventParamData: FC<{
   scope: SearchScope
@@ -108,12 +109,28 @@ const DecodedLogEvent: FC<{
     case RuntimeEventType.coregas_used:
       return (
         <span>
-          {t('common.gasUsed')}: {event.body.amount.toLocaleString()}
+          {eventName}: {event.body.amount.toLocaleString()}
         </span>
       )
     case RuntimeEventType.evmlog:
+      if (!event.evm_log_name && !event.evm_log_params && event.body.data) {
+        return (
+          <div>
+            <div>{eventName}</div>
+            <br />
+            <LongDataDisplay
+              data={`0x${Buffer.from(event.body.data, 'base64').toString('hex')}`}
+              threshold={300}
+              fontWeight={400}
+            />
+          </div>
+        )
+      }
       return (
-        <>
+        <div>
+          <div>{eventName}</div>
+          <br />
+
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
             <dt>{t('common.type')}</dt>
             <dd>
@@ -147,25 +164,74 @@ const DecodedLogEvent: FC<{
               </>
             )}
           </StyledDescriptionList>
-        </>
+        </div>
       )
 
     case RuntimeEventType.accountsburn:
     case RuntimeEventType.accountsmint:
+      return (
+        <div>
+          <div>{eventName}</div>
+          <br />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('transactionEvent.fields.owner')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.owner}
+                scope={scope}
+                plain={addressSwitchOption === AddressSwitchOption.ETH}
+              />
+            </dd>
+            <dt>{t('transactionEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                value: event.body.amount.Amount,
+                ticker: event.body.amount.Denomination,
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
     case RuntimeEventType.accountstransfer:
     case RuntimeEventType.consensus_accountsdeposit:
     case RuntimeEventType.consensus_accountswithdraw:
       return (
         <div>
           <div>{eventName}</div>
-          <pre>{JSON.stringify(event, null, ' ')}</pre>
+          <br />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption === AddressSwitchOption.ETH}
+              />
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption === AddressSwitchOption.ETH}
+              />
+            </dd>
+            <dt>{t('transactionEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                value: event.body.amount.Amount,
+                ticker: event.body.amount.Denomination,
+              })}
+            </dd>
+          </StyledDescriptionList>
         </div>
       )
     default:
       exhaustedTypeWarning('Unexpected event type', event.type)
       return (
         <div>
           <div>{eventName}</div>
+          <br />
           <pre>{JSON.stringify(event, null, ' ')}</pre>
         </div>
       )

src/app/components/Transactions/Logs.tsx

@@ -6,6 +6,7 @@ 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
@@ -32,7 +33,7 @@ export const TransactionLogs: FC<{
 }
 
 export const TransactionLogsView: FC<{
-  scope: RuntimeTransaction
+  scope: SearchScope
   events: RuntimeEvent[] | undefined
   isLoading: boolean
   isError: boolean

src/locales/en/translation.json

@@ -280,7 +280,11 @@
     "consensusWithdrawal": "Withdrawal to consensus",
     "decoded": "Decoded",
     "evmLog": "EVM log message",
-    "gasUsed": "Gas used"
+    "gasUsed": "Gas used",
+    "fields": {
+      "amount": "Amount",
+      "owner": "Owner"
+    }
   },
   "transactionStats": {
     "header": "Transactions Per Day",

src/oasis-nexus/api.ts

@@ -524,6 +524,34 @@ export const useGetRuntimeEvents: typeof generated.useGetRuntimeEvents = (
           return {
             ...data,
             events: data.events.map(event => {
+              if (
+                event.type === 'accounts.transfer' ||
+                event.type === 'accounts.mint' ||
+                event.type === 'accounts.burn' ||
+                event.type === 'consensus_accounts.deposit' ||
+                event.type === 'consensus_accounts.withdraw'
+              ) {
+                return {
+                  ...event,
+                  body: {
+                    ...event.body,
+                    amount:
+                      // If there's no denomination then use runtime's native. Otherwise unknown (would have to get by token name?).
+                      event.body.amount.Denomination === ''
+                        ? {
+                            ...event.body.amount,
+                            Amount: fromBaseUnits(
+                              event.body.amount.Amount,
+                              paraTimesConfig[runtime].decimals,
+                            ),
+                            Denomination: getTickerForNetwork(network),
+                          }
+                        : event.body.amount,
+                  },
+                  layer: runtime,
+                  network,
+                }
+              }
               return {
                 ...event,
                 layer: runtime,