Merge pull request #720 from oasisprotocol/lw/logs-icons

Add icons to event names in event logs
oasisprotocol · Jul 11, 2023 · 9fa1c70 · 9fa1c70
2 parents 226b3da + 7e1bd07
commit 9fa1c70
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 28 deletions.
diff --git a/.changelog/720.feature.md b/.changelog/720.feature.md
@@ -0,0 +1 @@
+Add icons to event names in event logs
diff --git a/src/app/components/Tokens/TokenTransferIcon.tsx b/src/app/components/Tokens/TokenTransferIcon.tsx
@@ -6,15 +6,19 @@ import { tooltipDelay } from '../../../styles/theme'
 import { UnknownIcon } from './../CustomIcons/Unknown'
 import { TransferIcon } from './../CustomIcons/Transfer'
 import { COLORS } from '../../../styles/theme/colors'
-import Stream from '@mui/icons-material/Stream'
-import LocalFireDepartment from '@mui/icons-material/LocalFireDepartment'
+import StreamIcon from '@mui/icons-material/Stream'
+import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
+import ApprovalIcon from '@mui/icons-material/Approval'
+import Box from '@mui/material/Box'
 
 const getTokenTransferLabel = (t: TFunction, name: string | undefined): string => {
   switch (name) {
     case undefined:
       return t('tokens.transferEventType.unavailable')
     case 'Transfer':
       return t('tokens.transferEventType.transfer')
+    case 'Approval':
+      return t('tokens.transferEventType.approval')
     case 'Minting':
       return t('tokens.transferEventType.minting')
     case 'Burning':
@@ -24,24 +28,25 @@ const getTokenTransferLabel = (t: TFunction, name: string | undefined): string =
   }
 }
 
-const iconStyles = { fontSize: '40px' }
 const getTokenTransferIcon = (name: string | undefined) => {
   switch (name) {
     case undefined:
       // Method may be undefined if the transaction was malformed.
-      return <UnknownIcon sx={iconStyles} />
+      return <UnknownIcon fontSize="inherit" />
     case 'Transfer':
-      return <TransferIcon sx={iconStyles} />
+      return <TransferIcon fontSize="inherit" />
+    case 'Approval':
+      return <ApprovalIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
     case 'Minting':
-      return <Stream sx={iconStyles} htmlColor={COLORS.eucalyptus} />
+      return <StreamIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
     case 'Burning':
-      return <LocalFireDepartment sx={iconStyles} htmlColor={COLORS.eucalyptus} />
+      return <LocalFireDepartmentIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
     default:
-      return <UnknownIcon sx={iconStyles} />
+      return <UnknownIcon fontSize="inherit" />
   }
 }
 
-type TokenTransferLabelProps = {
+interface TokenTransferLabelProps {
   /**
    * The event name
    */
@@ -54,7 +59,11 @@ export const TokenTransferLabel: FC<TokenTransferLabelProps> = ({ name }) => {
   return <>{getTokenTransferLabel(t, name)}</>
 }
 
-export const TokenTransferIcon: FC<TokenTransferLabelProps> = ({ name }) => {
+interface TokenTransferIconProps extends TokenTransferLabelProps {
+  size: number
+}
+
+export const TokenTransferIcon: FC<TokenTransferIconProps> = ({ name, size }) => {
   const { t } = useTranslation()
 
   return (
@@ -65,7 +74,9 @@ export const TokenTransferIcon: FC<TokenTransferLabelProps> = ({ name }) => {
       enterDelay={tooltipDelay}
       enterNextDelay={tooltipDelay}
     >
-      <span>{getTokenTransferIcon(name)}</span>
+      <Box component="span" sx={{ fontSize: size, lineHeight: 0 }}>
+        {getTokenTransferIcon(name)}
+      </Box>
     </Tooltip>
   )
 }
diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx
@@ -174,7 +174,7 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
         {
           key: 'type',
           align: TableCellAlign.Center,
-          content: <TokenTransferIcon name={parsedEvmLogName} />,
+          content: <TokenTransferIcon name={parsedEvmLogName} size={40} />,
         },
 
         {

diff --git a/src/app/components/Transactions/LogEvent.tsx b/src/app/components/Transactions/LogEvent.tsx
@@ -16,6 +16,42 @@ import { AddressSwitchOption } from '../AddressSwitch'
 import { getOasisAddress } from '../../utils/helpers'
 import { exhaustedTypeWarning } from '../../../types/errors'
 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 { COLORS } from '../../../styles/theme/colors'
+import StreamIcon from '@mui/icons-material/Stream'
+import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
+
+export const EventTypeIcon: FC<{
+  eventType: RuntimeEventType
+  eventName: string
+}> = ({ eventType, eventName }) => {
+  const eventTypeIcons: Record<RuntimeEventType, React.ReactNode> = {
+    [RuntimeEventType.accountstransfer]: <TransferIcon fontSize="inherit" />,
+    [RuntimeEventType.evmlog]: <></>,
+    [RuntimeEventType.coregas_used]: <></>,
+    [RuntimeEventType.consensus_accountswithdraw]: <WithdrawIcon fontSize="inherit" />,
+    [RuntimeEventType.consensus_accountsdeposit]: <DepositIcon fontSize="inherit" />,
+    [RuntimeEventType.accountsmint]: <StreamIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />,
+    [RuntimeEventType.accountsburn]: (
+      <LocalFireDepartmentIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
+    ),
+  }
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <b>{eventName}</b>
+      &nbsp;
+      <Box component="span" sx={{ fontSize: 25, lineHeight: 0 }}>
+        {eventTypeIcons[eventType]}
+      </Box>
+    </Box>
+  )
+}
 
 const EvmEventParamData: FC<{
   scope: SearchScope
@@ -112,11 +148,12 @@ const LogEvent: FC<{
           {eventName}: {event.body.amount.toLocaleString()}
         </span>
       )
-    case RuntimeEventType.evmlog:
+    case RuntimeEventType.evmlog: {
+      const { parsedEvmLogName } = parseEvmEvent(event)
       if (!event.evm_log_name && !event.evm_log_params && event.body.data) {
         return (
           <div>
-            <div>{eventName}</div>
+            <b>{eventName}</b>
             <br />
             <LongDataDisplay
               data={`0x${Buffer.from(event.body.data, 'base64').toString('hex')}`}
@@ -128,16 +165,15 @@ const LogEvent: FC<{
       }
       return (
         <div>
-          <div>{eventName}</div>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            {eventName}: &nbsp;
+            <b>
+              <TokenTransferLabel name={parsedEvmLogName} />
+            </b>
+            &nbsp;
+            <TokenTransferIcon name={parsedEvmLogName} size={25} />
+          </Box>
           <br />
-
-          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
-            <dt>{t('common.type')}</dt>
-            <dd>
-              <b>{event.evm_log_name}</b>
-            </dd>
-          </StyledDescriptionList>
-
           {event.evm_log_params && event.evm_log_params.length > 0 && (
             <Table sx={{ border: '1px solid lightgray' }}>
               <TableHead>
@@ -162,13 +198,13 @@ const LogEvent: FC<{
           )}
         </div>
       )
+    }
 
     case RuntimeEventType.accountsburn:
     case RuntimeEventType.accountsmint:
       return (
         <div>
-          <div>{eventName}</div>
-          <br />
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
             <dt>{t('transactionEvent.fields.owner')}</dt>
             <dd>
@@ -196,8 +232,7 @@ const LogEvent: FC<{
     case RuntimeEventType.consensus_accountswithdraw:
       return (
         <div>
-          <div>{eventName}</div>
-          <br />
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
             <dt>{t('common.from')}</dt>
             <dd>
@@ -233,7 +268,7 @@ const LogEvent: FC<{
       exhaustedTypeWarning('Unexpected event type', event.type)
       return (
         <div>
-          <div>{eventName}</div>
+          <b>{event.type}</b>
           <br />
           <pre>{JSON.stringify(event, null, ' ')}</pre>
         </div>

diff --git a/src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx b/src/app/components/Transactions/matchEventAndTokenTransfersIcons.test.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react'
+import { EventTypeIcon } from './LogEvent'
+import { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
+
+test('Transfer, burn, and mint icons should match in EventTypeIcon and evm TokenTransferIcon', () => {
+  const transfer = render(<EventTypeIcon eventType="accounts.transfer" eventName="Transfer" />).container
+  const evmTransfer = render(<TokenTransferIcon name="Transfer" size={25} />).container
+  expect(transfer.querySelector('svg')?.outerHTML.length).toBeGreaterThan(100)
+  expect(transfer.querySelector('svg')?.outerHTML).toEqual(evmTransfer.querySelector('svg')?.outerHTML)
+
+  const mint = render(<EventTypeIcon eventType="accounts.mint" eventName="Tokens minted" />).container
+  const evmMint = render(<TokenTransferIcon name="Minting" size={25} />).container
+  expect(mint.querySelector('svg')?.outerHTML).toEqual(evmMint.querySelector('svg')?.outerHTML)
+
+  const burn = render(<EventTypeIcon eventType="accounts.burn" eventName="Tokens burnt" />).container
+  const evmBurn = render(<TokenTransferIcon name="Burning" size={25} />).container
+  expect(burn.querySelector('svg')?.outerHTML).toEqual(evmBurn.querySelector('svg')?.outerHTML)
+})
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -220,6 +220,7 @@
     "transfers": "Token Transfers",
     "transferEventType": {
       "transfer": "Transfer",
+      "approval": "Approval",
       "minting": "Minting",
       "burning": "Burning",
       "unavailable": "Unknown token transfer event",