Update token icons

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -16,7 +16,7 @@ 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 { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
 import Box from '@mui/material/Box'
 import { TransferIcon } from '../CustomIcons/Transfer'
 import { DepositIcon } from '../CustomIcons/Deposit'
@@ -177,10 +177,6 @@ export const RuntimeEventDetails: FC<{
         <div>
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             {eventName}: &nbsp;
-            <b>
-              <TokenTransferLabel name={parsedEvmLogName} />
-            </b>
-            &nbsp;
             <TokenTransferIcon name={parsedEvmLogName} size={25} />
           </Box>
           <br />

src/app/components/Tokens/TokenTransferIcon.tsx

@@ -1,82 +1,69 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
-import { UnknownIcon } from './../CustomIcons/Unknown'
-import { TransferIcon } from './../CustomIcons/Transfer'
-import { COLORS } from '../../../styles/theme/colors'
 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'
+import { MethodIcon } from '../ConsensusTransactionMethod'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
 
-const getTokenTransferLabel = (t: TFunction, name: string | undefined): string => {
+const getTokenTransferIcon = (t: TFunction, name: string | undefined) => {
   switch (name) {
-    case undefined:
-      return t('tokens.transferEventType.unavailable')
     case 'Transfer':
-      return t('tokens.transferEventType.transfer')
+      return (
+        <MethodIcon
+          border={false}
+          color="green"
+          icon={<ArrowForwardIcon />}
+          label={t('tokens.transferEventType.transfer')}
+        />
+      )
     case 'Approval':
-      return t('tokens.transferEventType.approval')
+      return (
+        <MethodIcon
+          color="green"
+          border={false}
+          icon={<ApprovalIcon />}
+          label={t('tokens.transferEventType.approval')}
+        />
+      )
     case 'Minting':
-      return t('tokens.transferEventType.minting')
+      return (
+        <MethodIcon
+          color="green"
+          border={false}
+          icon={<StreamIcon />}
+          label={t('tokens.transferEventType.minting')}
+        />
+      )
     case 'Burning':
-      return t('tokens.transferEventType.burning')
+      return (
+        <MethodIcon
+          color="orange"
+          border={false}
+          icon={<LocalFireDepartmentIcon />}
+          label={t('tokens.transferEventType.burning')}
+        />
+      )
     default:
-      return t('tokens.transferEventType.unknown', { name })
+      return (
+        <MethodIcon
+          border={false}
+          color="gray"
+          icon={<QuestionMarkIcon />}
+          label={name || t('common.unknown')}
+        />
+      )
   }
 }
 
-const getTokenTransferIcon = (name: string | undefined) => {
-  switch (name) {
-    case undefined:
-      // Method may be undefined if the transaction was malformed.
-      return <UnknownIcon fontSize="inherit" />
-    case 'Transfer':
-      return <TransferIcon fontSize="inherit" />
-    case 'Approval':
-      return <ApprovalIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
-    case 'Minting':
-      return <StreamIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
-    case 'Burning':
-      return <LocalFireDepartmentIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
-    default:
-      return <UnknownIcon fontSize="inherit" />
-  }
-}
-
-interface TokenTransferLabelProps {
-  /**
-   * The event name
-   */
+interface TokenTransferIconProps {
   name: string | undefined
 }
 
-export const TokenTransferLabel: FC<TokenTransferLabelProps> = ({ name }) => {
-  const { t } = useTranslation()
-
-  return <>{getTokenTransferLabel(t, name)}</>
-}
-
-interface TokenTransferIconProps extends TokenTransferLabelProps {
-  size: number
-}
-
-export const TokenTransferIcon: FC<TokenTransferIconProps> = ({ name, size }) => {
+export const TokenTransferIcon: FC<TokenTransferIconProps> = ({ name }) => {
   const { t } = useTranslation()
 
-  return (
-    <Tooltip
-      arrow
-      placement="top"
-      title={getTokenTransferLabel(t, name)}
-      enterDelay={tooltipDelay}
-      enterNextDelay={tooltipDelay}
-    >
-      <Box component="span" sx={{ fontSize: size, lineHeight: 0 }}>
-        {getTokenTransferIcon(name)}
-      </Box>
-    </Tooltip>
-  )
+  return <>{getTokenTransferIcon(t, name)}</>
 }