Replace custom icons with MethodIcon component

.changelog/1383.internal.md

@@ -0,0 +1 @@
+Replace custom icons with MethodIcon component

src/app/components/ConsensusTransactionMethod/index.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { FC, ReactElement, cloneElement } from 'react'
 import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
@@ -18,12 +18,14 @@ import { ConsensusTxMethod } from '../../../oasis-nexus/api'
 import { COLORS } from '../../../styles/theme/colors'
 
 type MethodIconProps = {
-  icon: ReactNode
-  label: string
-  color?: 'blue' | 'green' | 'gray'
+  border?: boolean
+  color?: 'blue' | 'green' | 'gray' | 'orange'
+  icon: ReactElement
+  label?: string
+  size?: number
 }
 
-const colorMap = {
+export const colorMap = {
   blue: {
     primary: COLORS.brandMedium,
     secondary: COLORS.brandLightBlue,
@@ -36,33 +38,44 @@ const colorMap = {
     primary: COLORS.grayMedium,
     secondary: COLORS.grayMediumLight,
   },
+  orange: {
+    primary: COLORS.warningColor,
+    secondary: COLORS.warningLight,
+  },
 }
 
-const MethodIcon: FC<MethodIconProps> = ({ icon, label, color = 'blue' }) => {
+const iconRatio = 0.75
+
+export const MethodIcon: FC<MethodIconProps> = ({
+  border = true,
+  color = 'blue',
+  icon,
+  label,
+  size = 40,
+}) => {
   const theme = colorMap[color]
   if (!theme) {
     throw new Error(`Invalid color: ${color}`)
   }
-
   return (
-    <Box gap={3} sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box gap={3} sx={{ display: 'inline-flex', alignItems: 'center' }}>
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          width: '40px',
-          minWidth: '40px',
-          height: '40px',
-          borderRadius: '40px',
+          width: size,
+          minWidth: size,
+          height: size,
+          borderRadius: size,
           color: theme.primary,
-          border: `solid 2px ${theme.primary}`,
+          border: border ? `solid 2px ${theme.primary}` : 'none',
           backgroundColor: theme.secondary,
         }}
       >
-        {icon}
+        {cloneElement(icon, { sx: { fontSize: Math.ceil(size * iconRatio) } })}
       </Box>
-      <Typography sx={{ textTransform: 'capitalize' }}>{label}</Typography>
+      {label && <Typography sx={{ textTransform: 'capitalize' }}>{label}</Typography>}
     </Box>
   )
 }

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -18,45 +18,58 @@ 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'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
-import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart'
-import { UndelegateFinishIcon } from '../CustomIcons/UndelegateFinish'
-import { DelegateIcon } from '../CustomIcons/Delegate'
 import { MaybeEventErrorLine } from './EventError'
 import { AccountLinkWithAddressSwitch } from '../Account/AccountLinkWithAddressSwitch'
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+import LanIcon from '@mui/icons-material/Lan'
+import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
+import { MethodIcon } from '../ConsensusTransactionMethod'
+
+const eventIconSize = 25
 
 export const EventTypeIcon: FC<{
   eventType: RuntimeEventType
   eventName: string
 }> = ({ eventType, eventName }) => {
   const eventTypeIcons: Record<RuntimeEventType, React.ReactNode> = {
-    [RuntimeEventType.accountstransfer]: <TransferIcon fontSize="inherit" />,
+    [RuntimeEventType.accountstransfer]: (
+      <MethodIcon border={false} color="green" icon={<ArrowForwardIcon />} size={eventIconSize} />
+    ),
     [RuntimeEventType.evmlog]: <></>,
     [RuntimeEventType.coregas_used]: <></>,
-    [RuntimeEventType.consensus_accountswithdraw]: <WithdrawIcon fontSize="inherit" />,
-    [RuntimeEventType.consensus_accountsdeposit]: <DepositIcon fontSize="inherit" />,
-    [RuntimeEventType.consensus_accountsdelegate]: <DelegateIcon fontSize="inherit" />,
-    [RuntimeEventType.consensus_accountsundelegate_start]: <UndelegateStartIcon fontSize="inherit" />,
-    [RuntimeEventType.consensus_accountsundelegate_done]: <UndelegateFinishIcon fontSize="inherit" />,
-    [RuntimeEventType.accountsmint]: <StreamIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />,
+    [RuntimeEventType.consensus_accountswithdraw]: (
+      <MethodIcon color="orange" border={false} icon={<ArrowUpwardIcon />} size={eventIconSize} />
+    ),
+    [RuntimeEventType.consensus_accountsdeposit]: (
+      <MethodIcon border={false} color="green" icon={<ArrowDownwardIcon />} size={eventIconSize} />
+    ),
+    [RuntimeEventType.consensus_accountsdelegate]: (
+      <MethodIcon border={false} icon={<LanIcon />} size={eventIconSize} />
+    ),
+    [RuntimeEventType.consensus_accountsundelegate_start]: (
+      <MethodIcon border={false} icon={<LanOutlinedIcon />} size={eventIconSize} />
+    ),
+    [RuntimeEventType.consensus_accountsundelegate_done]: (
+      <MethodIcon border={false} icon={<LanIcon />} size={eventIconSize} />
+    ),
+    [RuntimeEventType.accountsmint]: (
+      <MethodIcon color="green" border={false} icon={<StreamIcon />} size={eventIconSize} />
+    ),
     [RuntimeEventType.accountsburn]: (
-      <LocalFireDepartmentIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
+      <MethodIcon color="orange" border={false} icon={<LocalFireDepartmentIcon />} size={eventIconSize} />
     ),
   }
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <b>{eventName}</b>
       &nbsp;
-      <Box component="span" sx={{ fontSize: 25, lineHeight: 0 }}>
-        {eventTypeIcons[eventType]}
-      </Box>
+      {eventTypeIcons[eventType]}
     </Box>
   )
 }

src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx

@@ -14,5 +14,6 @@ test('Transfer, burn, and mint icons should match in EventTypeIcon and evm Token
 
   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)
+  // compare using innerHTML as different dynamic css class is applied to svg element
+  expect(burn.querySelector('svg')?.innerHTML).toEqual(evmBurn.querySelector('svg')?.innerHTML)
 })