Skip to content

Commit e7cff93

Browse files
buberddsbuberdds
authored
Merge pull request #2388 from oasisprotocol/mz/icons-3
Migrate consensus tx icons to Lucide
2 parents d4e80a5 + 3056283 commit e7cff93

File tree

6 files changed

+90
-40
lines changed

6 files changed

+90
-40
lines changed

‎.changelog/2388.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Migrate consensus transactions icons to Lucide

‎src/app/components/ConsensusTransactionMethod/index.tsx‎

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
import { FC, ReactElement, Ref, cloneElement, useCallback, useLayoutEffect, useRef, useState } from 'react'
1+
import { FC, ReactElement, Ref, useCallback, useLayoutEffect, useRef, useState } from 'react'
22
import { TFunction } from 'i18next'
33
import { useTranslation } from 'react-i18next'
44
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
5-
import AccountBalanceIcon from '@mui/icons-material/AccountBalance'
6-
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
7-
import { ArrowRight } from 'lucide-react'
8-
import DnsIcon from '@mui/icons-material/Dns'
9-
import ExitToAppIcon from '@mui/icons-material/ExitToApp'
10-
import HowToVoteIcon from '@mui/icons-material/HowToVote'
11-
import LibraryAddCheckIcon from '@mui/icons-material/LibraryAddCheck'
12-
import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices'
13-
import PersonIcon from '@mui/icons-material/Person'
14-
import PriceChangeIcon from '@mui/icons-material/PriceChange'
15-
import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
5+
import {
6+
ArrowRight,
7+
ArrowDown,
8+
CircleHelp,
9+
UserRound,
10+
Banknote,
11+
CopyCheck,
12+
LogOut,
13+
Landmark,
14+
} from 'lucide-react'
1615
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
1716
import { ConsensusTxMethod, GetConsensusTransactionsParams } from '../../../oasis-nexus/api'
1817
import { COLORS } from '../../../styles/theme/colors'
1918
import { exhaustedTypeWarning } from '../../../types/errors'
2019
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
20+
import { Dns } from '../MuiIcons/Dns'
21+
import { MiscellaneousServices } from '../MuiIcons/MiscellaneousServices'
22+
import { CastVote } from '../MuiIcons/CastVote'
2123

2224
type MethodIconProps = {
2325
border?: boolean
@@ -48,8 +50,6 @@ const colorMap = {
4850
},
4951
}
5052

51-
const iconRatio = 0.75
52-
5353
export const MethodIcon: FC<MethodIconProps> = props => {
5454
const { label, reverseLabel, truncate } = props
5555
const enableTruncate = truncate && label && !reverseLabel
@@ -67,7 +67,6 @@ type MethodIconContentProps = MethodIconProps & {
6767
}
6868

6969
const MethodIconContent: FC<MethodIconContentProps> = ({
70-
border = true,
7170
color = 'blue',
7271
icon,
7372
label,
@@ -86,15 +85,10 @@ const MethodIconContent: FC<MethodIconContentProps> = ({
8685
<div
8786
className="flex items-center justify-center"
8887
style={{
89-
width: size,
90-
minWidth: size,
91-
height: size,
92-
borderRadius: size,
9388
color: theme.primary,
94-
border: border ? `2px solid ${theme.primary}` : 'none',
9589
}}
9690
>
97-
{cloneElement(icon, { style: { fontSize: Math.ceil(size * iconRatio) } })}
91+
{icon}
9892
</div>
9993
{label && (
10094
<Typography
@@ -293,35 +287,35 @@ const getConsensusTransactionMethod = (
293287
case ConsensusTxMethod.stakingTransfer:
294288
return <MethodIcon color="green" icon={<ArrowRight />} label={label} {...props} />
295289
case ConsensusTxMethod.stakingAddEscrow:
296-
return <MethodIcon color="green" icon={<ExitToAppIcon />} label={label} {...props} />
290+
return <MethodIcon color="green" icon={<LogOut />} label={label} {...props} />
297291
case ConsensusTxMethod.stakingReclaimEscrow:
298-
return <MethodIcon icon={<ExitToAppIcon />} label={label} {...props} />
292+
return <MethodIcon icon={<LogOut />} label={label} {...props} />
299293
case ConsensusTxMethod.stakingAmendCommissionSchedule:
300-
return <MethodIcon icon={<PriceChangeIcon />} label={label} {...props} />
294+
return <MethodIcon icon={<Banknote />} label={label} {...props} />
301295
case ConsensusTxMethod.stakingAllow:
302-
return <MethodIcon icon={<LibraryAddCheckIcon />} label={label} {...props} />
296+
return <MethodIcon icon={<CopyCheck />} label={label} {...props} />
303297
case ConsensusTxMethod.stakingWithdraw:
304-
return <MethodIcon color="green" icon={<ArrowDownwardIcon />} label={label} {...props} />
298+
return <MethodIcon color="green" icon={<ArrowDown />} label={label} {...props} />
305299
case ConsensusTxMethod.roothashExecutorCommit:
306-
return <MethodIcon icon={<MiscellaneousServicesIcon />} label={label} {...props} />
300+
return <MethodIcon icon={<MiscellaneousServices />} label={label} {...props} />
307301
case ConsensusTxMethod.roothashExecutorProposerTimeout:
308-
return <MethodIcon icon={<MiscellaneousServicesIcon />} label={label} {...props} />
302+
return <MethodIcon icon={<MiscellaneousServices />} label={label} {...props} />
309303
case ConsensusTxMethod.registryRegisterEntity:
310-
return <MethodIcon icon={<PersonIcon />} label={label} {...props} />
304+
return <MethodIcon icon={<UserRound />} label={label} {...props} />
311305
case ConsensusTxMethod.registryRegisterNode:
312-
return <MethodIcon icon={<DnsIcon />} label={label} {...props} />
306+
return <MethodIcon icon={<Dns />} label={label} {...props} />
313307
case ConsensusTxMethod.registryRegisterRuntime:
314-
return <MethodIcon icon={<MiscellaneousServicesIcon />} label={label} {...props} />
308+
return <MethodIcon icon={<MiscellaneousServices />} label={label} {...props} />
315309
case ConsensusTxMethod.governanceCastVote:
316-
return <MethodIcon icon={<HowToVoteIcon />} label={label} {...props} />
310+
return <MethodIcon icon={<CastVote />} label={label} {...props} />
317311
case ConsensusTxMethod.governanceSubmitProposal:
318-
return <MethodIcon icon={<AccountBalanceIcon />} label={label} {...props} />
312+
return <MethodIcon icon={<Landmark />} label={label} {...props} />
319313
case ConsensusTxMethod.beaconPVSSCommit:
320-
return <MethodIcon icon={<MiscellaneousServicesIcon />} label={label} {...props} />
314+
return <MethodIcon icon={<MiscellaneousServices />} label={label} {...props} />
321315
case ConsensusTxMethod.beaconPVSSReveal:
322-
return <MethodIcon icon={<MiscellaneousServicesIcon />} label={label} {...props} />
316+
return <MethodIcon icon={<MiscellaneousServices />} label={label} {...props} />
323317
case ConsensusTxMethod.beaconVRFProve:
324-
return <MethodIcon icon={<MiscellaneousServicesIcon />} label={label} {...props} />
318+
return <MethodIcon icon={<MiscellaneousServices />} label={label} {...props} />
325319
case ConsensusTxMethod['keymanager/churpApply']: // TODO: provide dedicated icon
326320
case ConsensusTxMethod['keymanager/churpConfirm']: // TODO: provide dedicated icon
327321
case ConsensusTxMethod['keymanager/churpCreate']: // TODO: provide dedicated icon
@@ -340,10 +334,10 @@ const getConsensusTransactionMethod = (
340334
case ConsensusTxMethod.consensusMeta: // TODO: provide dedicated icon
341335
case ConsensusTxMethod.stakingBurn: // TODO: provide dedicated icon
342336
case undefined:
343-
return <MethodIcon color="gray" icon={<QuestionMarkIcon />} label={label} {...props} />
337+
return <MethodIcon color="gray" icon={<CircleHelp />} label={label} {...props} />
344338
default:
345339
exhaustedTypeWarning('Unexpected consensus transaction method', method)
346-
return <MethodIcon color="gray" icon={<QuestionMarkIcon />} label={label} {...props} />
340+
return <MethodIcon color="gray" icon={<CircleHelp />} label={label} {...props} />
347341
}
348342
}
349343

‎src/app/components/MuiIcons/CastVote.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { FC } from 'react'
2+
import { Icon, IconNode } from 'lucide-react'
3+
4+
// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/HowToVote.js#L6
5+
const castVoteNode: IconNode = [
6+
[
7+
'path',
8+
{
9+
d: 'M18 13h-.68l-2 2h1.91L19 17H5l1.78-2h2.05l-2-2H6l-3 3v4c0 1.1.89 2 1.99 2H19c1.1 0 2-.89 2-2v-4zm-1-5.05-4.95 4.95-3.54-3.54 4.95-4.95zm-4.24-5.66L6.39 8.66c-.39.39-.39 1.02 0 1.41l4.95 4.95c.39.39 1.02.39 1.41 0l6.36-6.36c.39-.39.39-1.02 0-1.41L14.16 2.3c-.38-.4-1.01-.4-1.4-.01',
10+
fill: 'currentColor',
11+
stroke: 'none',
12+
},
13+
],
14+
]
15+
16+
export const CastVote: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
17+
return <Icon iconNode={castVoteNode} size={size} className={className} />
18+
}

‎src/app/components/MuiIcons/Dns.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { FC } from 'react'
2+
import { Icon, IconNode } from 'lucide-react'
3+
4+
// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/Dns.js#L6
5+
const dnsNode: IconNode = [
6+
[
7+
'path',
8+
{
9+
d: 'M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1M7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1M7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2',
10+
fill: 'currentColor',
11+
stroke: 'none',
12+
},
13+
],
14+
]
15+
16+
export const Dns: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
17+
return <Icon iconNode={dnsNode} size={size} className={className} />
18+
}

‎src/app/components/MuiIcons/MiscellaneousServices.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { FC } from 'react'
2+
import { Icon, IconNode } from 'lucide-react'
3+
4+
// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/MiscellaneousServices.js#L6
5+
const miscellaneousServicesNode: IconNode = [
6+
[
7+
'path',
8+
{
9+
d: 'm14.17 13.71 1.4-2.42c.09-.15.05-.34-.08-.45l-1.48-1.16c.03-.22.05-.45.05-.68s-.02-.46-.05-.69l1.48-1.16c.13-.11.17-.3.08-.45l-1.4-2.42c-.09-.15-.27-.21-.43-.15l-1.74.7c-.36-.28-.75-.51-1.18-.69l-.26-1.85c-.03-.16-.18-.29-.35-.29h-2.8c-.17 0-.32.13-.35.3L6.8 4.15c-.42.18-.82.41-1.18.69l-1.74-.7c-.16-.06-.34 0-.43.15l-1.4 2.42c-.09.15-.05.34.08.45l1.48 1.16c-.03.22-.05.45-.05.68s.02.46.05.69l-1.48 1.16c-.13.11-.17.3-.08.45l1.4 2.42c.09.15.27.21.43.15l1.74-.7c.36.28.75.51 1.18.69l.26 1.85c.03.16.18.29.35.29h2.8c.17 0 .32-.13.35-.3l.26-1.85c.42-.18.82-.41 1.18-.69l1.74.7c.16.06.34 0 .43-.15M8.81 11c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m13.11 7.67-.96-.74c.02-.14.04-.29.04-.44 0-.15-.01-.3-.04-.44l.95-.74c.08-.07.11-.19.05-.29l-.9-1.55c-.05-.1-.17-.13-.28-.1l-1.11.45c-.23-.18-.48-.33-.76-.44l-.17-1.18c-.01-.12-.11-.2-.21-.2h-1.79c-.11 0-.21.08-.22.19l-.17 1.18c-.27.12-.53.26-.76.44l-1.11-.45c-.1-.04-.22 0-.28.1l-.9 1.55c-.05.1-.04.22.05.29l.95.74c-.02.14-.03.29-.03.44 0 .15.01.3.03.44l-.95.74c-.08.07-.11.19-.05.29l.9 1.55c.05.1.17.13.28.1l1.11-.45c.23.18.48.33.76.44l.17 1.18c.02.11.11.19.22.19h1.79c.11 0 .21-.08.22-.19l.17-1.18c.27-.12.53-.26.75-.44l1.12.45c.1.04.22 0 .28-.1l.9-1.55c.06-.09.03-.21-.05-.28m-4.29.16c-.74 0-1.35-.6-1.35-1.35s.6-1.35 1.35-1.35 1.35.6 1.35 1.35-.61 1.35-1.35 1.35',
10+
fill: 'currentColor',
11+
stroke: 'none',
12+
},
13+
],
14+
]
15+
16+
export const MiscellaneousServices: FC<{ className?: string; size?: number }> = ({
17+
className,
18+
size = 24,
19+
}) => {
20+
return <Icon iconNode={miscellaneousServicesNode} size={size} className={className} />
21+
}

‎src/styles/theme/colors.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,8 @@ export const COLORS = {
1111
grayLight: '#E4E4E7',
1212
grayLight50A: '#f4f5f780',
1313
grayMedium: '#565b61',
14-
grayMedium2: '#d5d6d7',
1514
grayMediumLight: '#e3e8ed',
1615
honeydew: '#e8faf3',
17-
linen: '#fae8e8',
1816
errorIndicatorBackground: '#d44c4c',
1917
warningColor: '#ed6c02',
2018
warningLight: '#fff0e4',

0 commit comments

Comments
 (0)