diff --git a/.changelog/1383.internal.md b/.changelog/1383.internal.md new file mode 100644 index 000000000..614e38203 --- /dev/null +++ b/.changelog/1383.internal.md @@ -0,0 +1 @@ +Replace custom icons with MethodIcon component diff --git a/src/app/components/ConsensusTransactionMethod/index.tsx b/src/app/components/ConsensusTransactionMethod/index.tsx index 6ff0e65ba..22d1d7983 100644 --- a/src/app/components/ConsensusTransactionMethod/index.tsx +++ b/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 = ({ icon, label, color = 'blue' }) => { +const iconRatio = 0.75 + +export const MethodIcon: FC = ({ + border = true, + color = 'blue', + icon, + label, + size = 40, +}) => { const theme = colorMap[color] if (!theme) { throw new Error(`Invalid color: ${color}`) } - return ( - + - {icon} + {cloneElement(icon, { sx: { fontSize: Math.ceil(size * iconRatio) } })} - {label} + {label && {label}} ) } diff --git a/src/app/components/CustomIcons/ContractCall.tsx b/src/app/components/CustomIcons/ContractCall.tsx deleted file mode 100644 index 44d4fbcbf..000000000 --- a/src/app/components/CustomIcons/ContractCall.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const ContractCallIcon: FC = props => { - return ( - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/ContractCreation.tsx b/src/app/components/CustomIcons/ContractCreation.tsx deleted file mode 100644 index 61f3642e2..000000000 --- a/src/app/components/CustomIcons/ContractCreation.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const ContractCreationIcon: FC = props => { - return ( - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/Delegate.tsx b/src/app/components/CustomIcons/Delegate.tsx deleted file mode 100644 index 3645ca379..000000000 --- a/src/app/components/CustomIcons/Delegate.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const DelegateIcon: FC = props => { - return ( - - - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/Deposit.tsx b/src/app/components/CustomIcons/Deposit.tsx deleted file mode 100644 index d21e05498..000000000 --- a/src/app/components/CustomIcons/Deposit.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const DepositIcon: FC = props => { - return ( - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/Transfer.tsx b/src/app/components/CustomIcons/Transfer.tsx deleted file mode 100644 index a25070ca2..000000000 --- a/src/app/components/CustomIcons/Transfer.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const TransferIcon: FC = props => { - return ( - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/UndelegateFinish.tsx b/src/app/components/CustomIcons/UndelegateFinish.tsx deleted file mode 100644 index 2d0826309..000000000 --- a/src/app/components/CustomIcons/UndelegateFinish.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const UndelegateFinishIcon: FC = props => { - return ( - - - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/UndelegateStart.tsx b/src/app/components/CustomIcons/UndelegateStart.tsx deleted file mode 100644 index 9957bb5ad..000000000 --- a/src/app/components/CustomIcons/UndelegateStart.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const UndelegateStartIcon: FC = props => { - return ( - - - - - - - - - - - - - - - ) -} diff --git a/src/app/components/CustomIcons/Unknown.tsx b/src/app/components/CustomIcons/Unknown.tsx deleted file mode 100644 index 2301918eb..000000000 --- a/src/app/components/CustomIcons/Unknown.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const UnknownIcon: FC = props => { - return ( - - - - - ) -} diff --git a/src/app/components/CustomIcons/Withdraw.tsx b/src/app/components/CustomIcons/Withdraw.tsx deleted file mode 100644 index 36ab15a48..000000000 --- a/src/app/components/CustomIcons/Withdraw.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC } from 'react' -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon' - -export const WithdrawIcon: FC = props => { - return ( - - - - - - - - - - - - ) -} diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx index 6ef733bb8..1f20b6736 100644 --- a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx +++ b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx @@ -18,35 +18,50 @@ 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.accountstransfer]: , + [RuntimeEventType.accountstransfer]: ( + } size={eventIconSize} /> + ), [RuntimeEventType.evmlog]: <>, [RuntimeEventType.coregas_used]: <>, - [RuntimeEventType.consensus_accountswithdraw]: , - [RuntimeEventType.consensus_accountsdeposit]: , - [RuntimeEventType.consensus_accountsdelegate]: , - [RuntimeEventType.consensus_accountsundelegate_start]: , - [RuntimeEventType.consensus_accountsundelegate_done]: , - [RuntimeEventType.accountsmint]: , + [RuntimeEventType.consensus_accountswithdraw]: ( + } size={eventIconSize} /> + ), + [RuntimeEventType.consensus_accountsdeposit]: ( + } size={eventIconSize} /> + ), + [RuntimeEventType.consensus_accountsdelegate]: ( + } size={eventIconSize} /> + ), + [RuntimeEventType.consensus_accountsundelegate_start]: ( + } size={eventIconSize} /> + ), + [RuntimeEventType.consensus_accountsundelegate_done]: ( + } size={eventIconSize} /> + ), + [RuntimeEventType.accountsmint]: ( + } size={eventIconSize} /> + ), [RuntimeEventType.accountsburn]: ( - + } size={eventIconSize} /> ), } @@ -54,9 +69,7 @@ export const EventTypeIcon: FC<{ {eventName}   - - {eventTypeIcons[eventType]} - + {eventTypeIcons[eventType]} ) } diff --git a/src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx b/src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx index 0f4383311..21d08e127 100644 --- a/src/app/components/RuntimeEvents/__tests__/matchEventAndTokenTransfersIcons.test.tsx +++ b/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().container const evmBurn = render().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) }) diff --git a/src/app/components/RuntimeTransactionLabel/index.tsx b/src/app/components/RuntimeTransactionMethod/index.tsx similarity index 65% rename from src/app/components/RuntimeTransactionLabel/index.tsx rename to src/app/components/RuntimeTransactionMethod/index.tsx index a53a66460..bfddb9041 100644 --- a/src/app/components/RuntimeTransactionLabel/index.tsx +++ b/src/app/components/RuntimeTransactionMethod/index.tsx @@ -3,14 +3,15 @@ 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 { ContractCreationIcon } from './../CustomIcons/ContractCreation' -import { ContractCallIcon } from './../CustomIcons/ContractCall' -import { DepositIcon } from './../CustomIcons/Deposit' -import { WithdrawIcon } from './../CustomIcons/Withdraw' -import { TransferIcon } from './../CustomIcons/Transfer' -import { DelegateIcon } from '../CustomIcons/Delegate' -import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart' +import TextSnippetIcon from '@mui/icons-material/TextSnippet' +import FileCopyIcon from '@mui/icons-material/FileCopy' +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import QuestionMarkIcon from '@mui/icons-material/QuestionMark' +import LanIcon from '@mui/icons-material/Lan' +import LanOutlinedIcon from '@mui/icons-material/LanOutlined' +import { MethodIcon } from '../ConsensusTransactionMethod' const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => { switch (method) { @@ -36,28 +37,24 @@ const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => } } -const iconStyles = { fontSize: '40px' } const getRuntimeTransactionIcon = (method: string | undefined) => { switch (method) { - case undefined: - // Method may be undefined if the transaction was malformed. - return case 'evm.Call': - return + return } /> case 'evm.Create': - return + return } /> case 'consensus.Deposit': - return + return } /> case 'consensus.Withdraw': - return + return } /> case 'consensus.Delegate': - return + return } /> case 'consensus.Undelegate': - return + return } /> case 'accounts.Transfer': - return + return } /> default: - return + return } /> } } @@ -86,7 +83,7 @@ export const RuntimeTransactionLabel: FC = ({ meth return <>{getRuntimeTransactionLabel(t, method)} } -export const RuntimeTransactionIcon: FC = ({ method }) => { +export const RuntimeTransactionMethod: FC = ({ method }) => { const { t } = useTranslation() return ( diff --git a/src/app/components/Tokens/TokenTransferIcon.tsx b/src/app/components/Tokens/TokenTransferIcon.tsx index 3ef57350c..072a31406 100644 --- a/src/app/components/Tokens/TokenTransferIcon.tsx +++ b/src/app/components/Tokens/TokenTransferIcon.tsx @@ -3,13 +3,12 @@ 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 ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import QuestionMarkIcon from '@mui/icons-material/QuestionMark' +import { MethodIcon } from '../ConsensusTransactionMethod' const getTokenTransferLabel = (t: TFunction, name: string | undefined): string => { switch (name) { @@ -28,21 +27,18 @@ const getTokenTransferLabel = (t: TFunction, name: string | undefined): string = } } -const getTokenTransferIcon = (name: string | undefined) => { +const getTokenTransferIcon = (name: string | undefined, size?: number) => { switch (name) { - case undefined: - // Method may be undefined if the transaction was malformed. - return case 'Transfer': - return + return } size={size} /> case 'Approval': - return + return } size={size} /> case 'Minting': - return + return } size={size} /> case 'Burning': - return + return } /> default: - return + return } size={size} /> } } @@ -60,7 +56,7 @@ export const TokenTransferLabel: FC = ({ name }) => { } interface TokenTransferIconProps extends TokenTransferLabelProps { - size: number + size?: number } export const TokenTransferIcon: FC = ({ name, size }) => { @@ -74,9 +70,7 @@ export const TokenTransferIcon: FC = ({ name, size }) => enterDelay={tooltipDelay} enterNextDelay={tooltipDelay} > - - {getTokenTransferIcon(name)} - + {getTokenTransferIcon(name, size)} ) } diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx index fdf69be27..e82805cb3 100644 --- a/src/app/components/Tokens/TokenTransfers.tsx +++ b/src/app/components/Tokens/TokenTransfers.tsx @@ -157,7 +157,7 @@ export const TokenTransfers: FC = ({ { key: 'type', align: TableCellAlign.Center, - content: , + content: , }, { diff --git a/src/app/components/Transactions/ConsensusTransactions.tsx b/src/app/components/Transactions/ConsensusTransactions.tsx index 928ee697e..ee532e1d4 100644 --- a/src/app/components/Transactions/ConsensusTransactions.tsx +++ b/src/app/components/Transactions/ConsensusTransactions.tsx @@ -80,7 +80,6 @@ export const ConsensusTransactions: FC = ({ ...(verbose ? [ { - align: TableCellAlign.Center, content: , key: 'method', }, diff --git a/src/app/components/Transactions/RuntimeTransactions.tsx b/src/app/components/Transactions/RuntimeTransactions.tsx index 0734a689d..352b0a0d1 100644 --- a/src/app/components/Transactions/RuntimeTransactions.tsx +++ b/src/app/components/Transactions/RuntimeTransactions.tsx @@ -6,7 +6,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import LockIcon from '@mui/icons-material/Lock' import { Table, TableCellAlign, TableColProps } from '../../components/Table' import { StatusIcon } from '../StatusIcon' -import { RuntimeTransactionIcon } from '../../components/RuntimeTransactionLabel' +import { RuntimeTransactionMethod } from '../../components/RuntimeTransactionMethod' import { RoundedBalance } from '../../components/RoundedBalance' import { RuntimeTransaction } from '../../../oasis-nexus/api' import { COLORS } from '../../../styles/theme/colors' @@ -125,7 +125,7 @@ export const RuntimeTransactions: FC = ({ ? [ { align: TableCellAlign.Center, - content: , + content: , key: 'type', }, { diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx index 7d49cddd9..26f9698b9 100644 --- a/src/app/pages/RuntimeTransactionDetailPage/index.tsx +++ b/src/app/pages/RuntimeTransactionDetailPage/index.tsx @@ -11,7 +11,7 @@ import { StyledDescriptionList } from '../../components/StyledDescriptionList' import { PageLayout } from '../../components/PageLayout' import { SubPageCard } from '../../components/SubPageCard' import { StatusIcon } from '../../components/StatusIcon' -import { RuntimeTransactionLabel } from '../../components/RuntimeTransactionLabel' +import { RuntimeTransactionMethod } from '../../components/RuntimeTransactionMethod' import { useFormattedTimestampStringWithDistance } from '../../hooks/useFormattedTimestamp' import { styled } from '@mui/material/styles' import { useScreenSize } from '../../hooks/useScreensize' @@ -247,7 +247,7 @@ export const RuntimeTransactionDetailView: FC<{
{t('common.type')}
- +
{t('transactions.encryption.format')}
diff --git a/src/stories/Icons.stories.tsx b/src/stories/Icons.stories.tsx index 167d74b97..54778e787 100644 --- a/src/stories/Icons.stories.tsx +++ b/src/stories/Icons.stories.tsx @@ -2,7 +2,10 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react' import Box from '@mui/material/Box' import Typography from '@mui/material/Typography' import { ConsensusTransactionMethod } from '../app/components/ConsensusTransactionMethod' -import { ConsensusTxMethod } from '../oasis-nexus/api' +import { RuntimeTransactionMethod } from '../app/components/RuntimeTransactionMethod' +import { TokenTransferIcon } from '../app/components/Tokens/TokenTransferIcon' +import { EventTypeIcon } from '../app/components/RuntimeEvents/RuntimeEventDetails' +import { ConsensusTxMethod, RuntimeEventType } from '../oasis-nexus/api' import { COLORS } from '../styles/theme/colors' export default { @@ -30,3 +33,81 @@ export const ConsensusTransactionIcons: StoryObj = { render: Template, args: {}, } + +const storyRuntimeMethods = [ + 'accounts.Transfer', + 'consensus.Deposit', + 'consensus.Withdraw', + 'consensus.Delegate', + 'consensus.Undelegate', + 'evm.Create', + 'evm.Call', +] + +const RuntimeTemplate: StoryFn = () => { + return ( + + {storyRuntimeMethods.map(method => ( + + + ({method}) + + ))} + + ) +} + +export const RuntimeTransactionIcons: StoryObj = { + render: RuntimeTemplate, + args: {}, +} + +const storyTokensMethods = ['Transfer', 'Approval', 'Minting', 'Burning'] + +const TokensTemplate: StoryFn = () => { + return ( + + {storyTokensMethods.map(name => ( + + + ({name}) + + ))} + + ) +} + +export const TokenTransactionIcons: StoryObj = { + render: TokensTemplate, + args: {}, +} + +const EventsTemplate: StoryFn = () => { + return ( + + {Object.values(RuntimeEventType).map(method => ( + + + ({method}) + + ))} + + ) +} + +export const EventIcons: StoryObj = { + render: EventsTemplate, + args: {}, +} diff --git a/src/styles/theme/colors.ts b/src/styles/theme/colors.ts index e2f41b5f4..ba2596745 100644 --- a/src/styles/theme/colors.ts +++ b/src/styles/theme/colors.ts @@ -49,6 +49,7 @@ export const COLORS = { black: '#000000', warningColor: '#ed6c02', warningBackground: '#faf5e8', + warningLight: '#fff0e4', iconBackground: '#d4d3f2', graphLabel: '#191932', graphLine: '#01F1E3',