Merge pull request #2383 from oasisprotocol/mz/labels

Migrate runtime events icons to Lucide

Author: buberdds

.changelog/2383.trivial.md

@@ -0,0 +1 @@
+Migrate runtime events icons to Lucide

src/app/components/MuiIcons/DeveloperBoard.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import { Icon, IconNode } from 'lucide-react'
+
+// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/DeveloperBoard.js#L6
+const developerBoardNode: IconNode = [
+  [
+    'path',
+    {
+      d: 'M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9zm-4 10H4V5h14zM6 13h5v4H6zm6-6h4v3h-4zM6 7h5v5H6zm6 4h4v6h-4z',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+]
+
+export const DeveloperBoard: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
+  return <Icon iconNode={developerBoardNode} size={size} className={className} />
+}

src/app/components/MuiIcons/DeveloperBoardOff.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import { Icon, IconNode } from 'lucide-react'
+
+// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/DeveloperBoardOff.js#L6
+const developerBoardOffNode: IconNode = [
+  [
+    'path',
+    {
+      d: 'M7.83 5H18v10.17L19.83 17H22v-2h-2v-2h2v-2h-2V9h2V7h-2V5c0-1.1-.9-2-2-2H5.83zM12 9.17V7h4v3h-3.17zM9.83 7H11v1.17zm4 4H16v2.17zM18 21c.06 0 .11 0 .16-.01l2.32 2.32 1.41-1.41L2.1 2.1.69 3.51l1.32 1.32C2 4.89 2 4.94 2 5v14c0 1.1.9 2 2 2zM4 19V6.83l2 2V12h3.17l1 1H6v4h5v-3.17l1 1V17h2.17l2 2z',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+]
+
+export const DeveloperBoardOff: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
+  return <Icon iconNode={developerBoardOffNode} size={size} className={className} />
+}

src/app/components/MuiIcons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/app/components/MuiIcons/Stream.tsx

@@ -0,0 +1,58 @@
+import { FC } from 'react'
+import { Icon, IconNode } from 'lucide-react'
+
+// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/Stream.js#L5
+const streamNode: IconNode = [
+  [
+    'circle',
+    {
+      cx: '20',
+      cy: '12',
+      r: '2',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+  [
+    'circle',
+    {
+      cx: '4',
+      cy: '12',
+      r: '2',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+  [
+    'circle',
+    {
+      cx: '12',
+      cy: '20',
+      r: '2',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M10.05 8.59 6.03 4.55h-.01l-.31-.32-1.42 1.41 4.02 4.05.01-.01.31.32zm3.893.027 4.405-4.392L19.76 5.64l-4.405 4.393zM10.01 15.36l-1.42-1.41-4.03 4.01-.32.33 1.41 1.41 4.03-4.02zm9.75 2.94-3.99-4.01-.36-.35L14 15.35l3.99 4.01.35.35z',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+  [
+    'circle',
+    {
+      cx: '12',
+      cy: '4',
+      r: '2',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+]
+
+export const Stream: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
+  return <Icon iconNode={streamNode} size={size} className={className} />
+}

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -18,18 +18,12 @@ import { exhaustedTypeWarning } from '../../../types/errors'
 import { LongDataDisplay } from '../LongDataDisplay'
 import { parseEvmEvent } from '../../utils/parseEvmEvent'
 import { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
-import StreamIcon from '@mui/icons-material/Stream'
-import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
+import { ArrowRight, ArrowUp, ArrowDown, Cpu, Flame, Network } from 'lucide-react'
+import { DeveloperBoard } from '../MuiIcons/DeveloperBoard'
+import { DeveloperBoardOff } from '../MuiIcons/DeveloperBoardOff'
+import { Stream } from '../MuiIcons/Stream'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 import { MaybeEventErrorLine } from './EventError'
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
-import { ArrowRight } from 'lucide-react'
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
-import MemoryIcon from '@mui/icons-material/Memory'
-import LanIcon from '@mui/icons-material/Lan'
-import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
-import DeveloperBoard from '@mui/icons-material/DeveloperBoard'
-import DeveloperBoardOffIcon from '@mui/icons-material/DeveloperBoardOff'
 import { MethodIcon } from '../ConsensusTransactionMethod'
 import { TransactionLink } from '../Transactions/TransactionLink'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
@@ -111,32 +105,32 @@ export const EventTypeIcon: FC<{
     [RuntimeEventType.evmlog]: <></>,
     [RuntimeEventType.coregas_used]: <></>,
     [RuntimeEventType.consensus_accountswithdraw]: (
-      <MethodIcon color="orange" icon={<ArrowUpwardIcon />} {...props} />
+      <MethodIcon color="orange" icon={<ArrowUp />} {...props} />
     ),
     [RuntimeEventType.consensus_accountsdeposit]: (
-      <MethodIcon color="green" icon={<ArrowDownwardIcon />} {...props} />
+      <MethodIcon color="green" icon={<ArrowDown />} {...props} />
     ),
-    [RuntimeEventType.consensus_accountsdelegate]: <MethodIcon icon={<LanIcon />} {...props} />,
-    [RuntimeEventType.consensus_accountsundelegate_start]: (
-      <MethodIcon icon={<LanOutlinedIcon />} {...props} />
+    [RuntimeEventType.consensus_accountsdelegate]: (
+      <MethodIcon icon={<Network className="[&_rect]:fill-current" />} {...props} />
     ),
-    [RuntimeEventType.consensus_accountsundelegate_done]: <MethodIcon icon={<LanIcon />} {...props} />,
-    [RuntimeEventType.accountsmint]: <MethodIcon color="green" icon={<StreamIcon />} {...props} />,
-    [RuntimeEventType.accountsburn]: (
-      <MethodIcon color="orange" icon={<LocalFireDepartmentIcon />} {...props} />
+    [RuntimeEventType.consensus_accountsundelegate_start]: <MethodIcon icon={<Network />} {...props} />,
+    [RuntimeEventType.consensus_accountsundelegate_done]: (
+      <MethodIcon icon={<Network className="[&_rect]:fill-current" />} {...props} />
     ),
-    [RuntimeEventType.roflapp_created]: <MethodIcon color="green" icon={<MemoryIcon />} {...props} />,
-    [RuntimeEventType.roflapp_removed]: <MethodIcon color="orange" icon={<MemoryIcon />} {...props} />,
-    [RuntimeEventType.roflapp_updated]: <MethodIcon color="green" icon={<MemoryIcon />} {...props} />,
-    [RuntimeEventType.roflinstance_registered]: <MethodIcon color="green" icon={<MemoryIcon />} {...props} />,
+    [RuntimeEventType.accountsmint]: <MethodIcon color="green" icon={<Stream />} {...props} />,
+    [RuntimeEventType.accountsburn]: <MethodIcon color="orange" icon={<Flame />} {...props} />,
+    [RuntimeEventType.roflapp_created]: <MethodIcon color="green" icon={<Cpu />} {...props} />,
+    [RuntimeEventType.roflapp_removed]: <MethodIcon color="orange" icon={<Cpu />} {...props} />,
+    [RuntimeEventType.roflapp_updated]: <MethodIcon color="green" icon={<Cpu />} {...props} />,
+    [RuntimeEventType.roflinstance_registered]: <MethodIcon color="green" icon={<Cpu />} {...props} />,
     [RuntimeEventType.roflmarketprovider_created]: (
       <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
     ),
     [RuntimeEventType.roflmarketprovider_updated]: (
       <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
     ),
     [RuntimeEventType.roflmarketprovider_removed]: (
-      <MethodIcon color="orange" icon={<DeveloperBoardOffIcon />} {...props} />
+      <MethodIcon color="orange" icon={<DeveloperBoardOff />} {...props} />
     ),
     [RuntimeEventType.roflmarketinstance_created]: (
       <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
@@ -146,10 +140,10 @@ export const EventTypeIcon: FC<{
     ),
     [RuntimeEventType.roflmarketinstance_accepted]: <MethodIcon icon={<DeveloperBoard />} {...props} />,
     [RuntimeEventType.roflmarketinstance_cancelled]: (
-      <MethodIcon color="orange" icon={<DeveloperBoardOffIcon />} {...props} />
+      <MethodIcon color="orange" icon={<DeveloperBoardOff />} {...props} />
     ),
     [RuntimeEventType.roflmarketinstance_removed]: (
-      <MethodIcon color="orange" icon={<DeveloperBoardOffIcon />} {...props} />
+      <MethodIcon color="orange" icon={<DeveloperBoardOff />} {...props} />
     ),
     [RuntimeEventType.roflmarketinstance_command_queued]: <MethodIcon icon={<DeveloperBoard />} {...props} />,
   }

src/app/components/Tokens/TokenTransferIcon.tsx

@@ -1,12 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
-import StreamIcon from '@mui/icons-material/Stream'
-import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
-import ApprovalIcon from '@mui/icons-material/Approval'
-import { ArrowRight } from 'lucide-react'
-import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
+import { ArrowRight, Flame, CircleHelp, Stamp } from 'lucide-react'
 import { MethodIcon } from '../ConsensusTransactionMethod'
+import { Stream } from '../MuiIcons/Stream'
 
 const getTokenTransferLabel = (t: TFunction, name: string | undefined): string => {
   switch (name) {
@@ -42,13 +39,13 @@ const getTokenTransferIcon = (
     case 'Transfer':
       return <MethodIcon color="green" icon={<ArrowRight />} {...props} />
     case 'Approval':
-      return <MethodIcon color="green" icon={<ApprovalIcon />} {...props} />
+      return <MethodIcon color="green" icon={<Stamp />} {...props} />
     case 'Minting':
-      return <MethodIcon color="green" icon={<StreamIcon />} {...props} />
+      return <MethodIcon color="green" icon={<Stream />} {...props} />
     case 'Burning':
-      return <MethodIcon color="orange" icon={<LocalFireDepartmentIcon />} {...props} />
+      return <MethodIcon color="orange" icon={<Flame />} {...props} />
     default:
-      return <MethodIcon color="gray" icon={<QuestionMarkIcon />} {...props} />
+      return <MethodIcon color="gray" icon={<CircleHelp />} {...props} />
   }
 }