feat(Simulator/icons): migrate to react-icons

src/components/Simulator/WalletHome/SendReceiveButton.tsx

@@ -41,8 +41,7 @@ export const SendReceiveButton = ({
       )}
     >
       {!isDisabled && isAnimated && <PulseAnimation type="circle" />}
-      {/* TODO: Remove important flags from class utils when simulator icons are migrated to tailwind */}
-      <Icon className="!size-4 !text-background md:!size-6" />
+      <Icon className="size-4 text-background md:size-6" />
     </div>
     <div className="relative">
       <p

src/components/Simulator/WalletHome/SendReceiveButtons.tsx

@@ -40,7 +40,6 @@ export const SendReceiveButtons = ({
         onClick={nav?.progressStepper}
         isDisabled={disableReceive}
         isHighlighted={highlightReceive}
-        // @ts-expect-error icon component needs to be migrated to use react-icons base
         icon={QrCodeIcon}
         isAnimated
       >

src/components/Simulator/WalletHome/interfaces.ts

@@ -1,12 +1,13 @@
 import { StaticImageData } from "next/image"
-import type { Icon } from "@chakra-ui/react"
+
+import type { IconBaseType } from "@/components/icons/icon-base"
 
 export interface TokenBalance {
   name: string
   ticker: string
   amount: number
   usdConversion: number
-  Icon: typeof Icon
+  Icon: IconBaseType
 }
 
 export interface Contact {

src/components/Simulator/__stories__/Explanation.stories.tsx

@@ -4,6 +4,7 @@ import { fn } from "@storybook/test"
 
 import { viewportModes } from "../../../../.storybook/modes"
 import { Explanation as ExplanationComponent } from "../Explanation"
+import { SendReceiveIcon } from "../icons"
 
 const meta = {
   title: "Molecules / Display Content / Simulator / Explanation",
@@ -39,7 +40,7 @@ const meta = {
       totalSteps: 3,
       openPath: fn(),
     },
-    nextPathSummary: { Icon: fn(), primaryText: "" },
+    nextPathSummary: { Icon: SendReceiveIcon, primaryText: "" },
     nextPathId: "send-receive",
     finalCtaLink: { href: "#", label: "Next Step", isPrimary: true },
   },

src/components/Simulator/icons/ConnectWeb3Icon.tsx

@@ -1,26 +1,22 @@
-/* eslint-disable react/jsx-key */
-import React from "react"
-import { createIcon } from "@chakra-ui/react"
+import { createIconBase } from "@/components/icons/icon-base"
 
-const [w, h] = [32, 32]
-export const ConnectWeb3Icon = createIcon({
+export const ConnectWeb3Icon = createIconBase({
   displayName: "Connect Web3 Icon",
-  viewBox: `0 0 ${w} ${h}`,
-  defaultProps: {
-    width: `${w}px`,
-    height: `${h}px`,
-    fill: "currentColor",
-  },
-  path: [
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M28.0412 5.375L3.95881 5.375C3.2222 5.375 2.625 5.97214 2.625 6.70875L2.625 25.4162C2.625 26.1528 3.22214 26.75 3.95875 26.75H28.0412C28.7778 26.75 29.375 26.1529 29.375 25.4162V6.70881C29.375 5.9722 28.7778 5.375 28.0412 5.375ZM28.0411 10.4588L3.95887 10.4587L3.95887 25.4161H28.0411V10.4588ZM6.5 8C6.5 8.41421 6.16421 8.75 5.75 8.75C5.33579 8.75 5 8.41421 5 8C5 7.58579 5.33579 7.25 5.75 7.25C6.16421 7.25 6.5 7.58579 6.5 8ZM8.125 8.75C8.53921 8.75 8.875 8.41421 8.875 8C8.875 7.58579 8.53921 7.25 8.125 7.25C7.71079 7.25 7.375 7.58579 7.375 8C7.375 8.41421 7.71079 8.75 8.125 8.75Z"
-    />,
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16 23.5C19.1066 23.5 21.625 20.9816 21.625 17.875C21.625 14.7684 19.1066 12.25 16 12.25C12.8934 12.25 10.375 14.7684 10.375 17.875C10.375 20.9816 12.8934 23.5 16 23.5ZM15.9389 13.7528L18.5143 17.6111L15.9389 19.1488L13.3635 17.6111L15.9389 13.7528ZM16 21.9972L18.6367 18.1954L16 19.8267L13.3633 18.1954L16 21.9972Z"
-    />,
-  ],
+  viewBox: "0 0 32 32",
+  className: "text-[32px]/none fill-current",
+  children: (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.0412 5.375L3.95881 5.375C3.2222 5.375 2.625 5.97214 2.625 6.70875L2.625 25.4162C2.625 26.1528 3.22214 26.75 3.95875 26.75H28.0412C28.7778 26.75 29.375 26.1529 29.375 25.4162V6.70881C29.375 5.9722 28.7778 5.375 28.0412 5.375ZM28.0411 10.4588L3.95887 10.4587L3.95887 25.4161H28.0411V10.4588ZM6.5 8C6.5 8.41421 6.16421 8.75 5.75 8.75C5.33579 8.75 5 8.41421 5 8C5 7.58579 5.33579 7.25 5.75 7.25C6.16421 7.25 6.5 7.58579 6.5 8ZM8.125 8.75C8.53921 8.75 8.875 8.41421 8.875 8C8.875 7.58579 8.53921 7.25 8.125 7.25C7.71079 7.25 7.375 7.58579 7.375 8C7.375 8.41421 7.71079 8.75 8.125 8.75Z"
+      />
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 23.5C19.1066 23.5 21.625 20.9816 21.625 17.875C21.625 14.7684 19.1066 12.25 16 12.25C12.8934 12.25 10.375 14.7684 10.375 17.875C10.375 20.9816 12.8934 23.5 16 23.5ZM15.9389 13.7528L18.5143 17.6111L15.9389 19.1488L13.3635 17.6111L15.9389 13.7528ZM16 21.9972L18.6367 18.1954L16 19.8267L13.3633 18.1954L16 21.9972Z"
+      />
+    </>
+  ),
 })

src/components/Simulator/icons/CreateAccountIcon.tsx

@@ -1,32 +1,30 @@
-/* eslint-disable react/jsx-key */
-import React from "react"
-import { createIcon } from "@chakra-ui/react"
+import { createIconBase } from "@/components/icons/icon-base"
 
-const [w, h] = [32, 32]
-export const CreateAccountIcon = createIcon({
-  displayName: "Create Account Icon",
-  viewBox: `0 0 ${w} ${h}`,
-  defaultProps: {
-    width: `${w}px`,
-    height: `${h}px`,
-    fill: "currentColor",
-  },
-  path: [
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M24.0411 3.95887L7.95888 3.95887L7.95888 28.0411L24.0411 28.0411L24.0411 3.95887ZM25.375 3.95875C25.375 3.22214 24.7779 2.625 24.0413 2.625L7.95876 2.625C7.22215 2.625 6.62501 3.22214 6.62501 3.95875L6.62501 28.0412C6.62501 28.7779 7.22215 29.375 7.95876 29.375L24.0412 29.375C24.7779 29.375 25.375 28.7779 25.375 28.0412L25.375 3.95875Z"
-    />,
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M13.0831 26C13.0831 25.6317 13.3817 25.3331 13.75 25.3331H18C18.3683 25.3331 18.6669 25.6317 18.6669 26C18.6669 26.3683 18.3683 26.6669 18 26.6669H13.75C13.3817 26.6669 13.0831 26.3683 13.0831 26Z"
-    />,
-    <path d="M17 6.375C17 6.92728 16.5523 7.375 16 7.375C15.4477 7.375 15 6.92728 15 6.375C15 5.82272 15.4477 5.375 16 5.375C16.5523 5.375 17 5.82272 17 6.375Z" />,
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16 21.625C19.1066 21.625 21.625 19.1066 21.625 16C21.625 12.8934 19.1066 10.375 16 10.375C12.8934 10.375 10.375 12.8934 10.375 16C10.375 19.1066 12.8934 21.625 16 21.625ZM15.9389 11.8778L18.5143 15.7361L15.9389 17.2738L13.3635 15.7361L15.9389 11.8778ZM16 20.1222L18.6367 16.3204L16 17.9517L13.3633 16.3204L16 20.1222Z"
-    />,
-  ],
+export const CreateAccountIcon = createIconBase({
+  displayName: "CreateAccountIcon",
+  viewBox: "0 0 32 32",
+  className: "text-[32px]/none fill-current",
+  children: (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24.0411 3.95887L7.95888 3.95887L7.95888 28.0411L24.0411 28.0411L24.0411 3.95887ZM25.375 3.95875C25.375 3.22214 24.7779 2.625 24.0413 2.625L7.95876 2.625C7.22215 2.625 6.62501 3.22214 6.62501 3.95875L6.62501 28.0412C6.62501 28.7779 7.22215 29.375 7.95876 29.375L24.0412 29.375C24.7779 29.375 25.375 28.7779 25.375 28.0412L25.375 3.95875Z"
+      />
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.0831 26C13.0831 25.6317 13.3817 25.3331 13.75 25.3331H18C18.3683 25.3331 18.6669 25.6317 18.6669 26C18.6669 26.3683 18.3683 26.6669 18 26.6669H13.75C13.3817 26.6669 13.0831 26.3683 13.0831 26Z"
+      />
+
+      <path d="M17 6.375C17 6.92728 16.5523 7.375 16 7.375C15.4477 7.375 15 6.92728 15 6.375C15 5.82272 15.4477 5.375 16 5.375C16.5523 5.375 17 5.82272 17 6.375Z" />
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 21.625C19.1066 21.625 21.625 19.1066 21.625 16C21.625 12.8934 19.1066 10.375 16 10.375C12.8934 10.375 10.375 12.8934 10.375 16C10.375 19.1066 12.8934 21.625 16 21.625ZM15.9389 11.8778L18.5143 15.7361L15.9389 17.2738L13.3635 15.7361L15.9389 11.8778ZM16 20.1222L18.6367 16.3204L16 17.9517L13.3633 16.3204L16 20.1222Z"
+      />
+    </>
+  ),
 })

src/components/Simulator/icons/DaiTokenIcon.tsx

@@ -1,41 +1,38 @@
-/* eslint-disable react/jsx-key */
-import React from "react"
-import { createIcon } from "@chakra-ui/react"
+import { createIconBase } from "@/components/icons/icon-base"
 
-export const DaiTokenIcon = createIcon({
-  displayName: "DAI Token Icon",
-  viewBox: "0 0 30 30 ",
-  defaultProps: {
-    width: 30,
-    height: 30,
-    fill: "none",
-  },
-  path: [
-    <g clipPath="url(#clip0_5847_4625)">
-      <path
-        d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z"
-        fill="url(#paint0_linear_5847_4625)"
-      />
-      <path
-        d="M23.8952 12.5249H22.1152C21.1352 9.80494 18.5002 7.93994 15.0252 7.93994H9.3102V12.5249H7.3252V14.1699H9.3102V15.8949H7.3252V17.5399H9.3102V22.0699H15.0252C18.4602 22.0699 21.0752 20.2199 22.0802 17.5399H23.8952V15.8949H22.4802C22.5152 15.6049 22.5352 15.3049 22.5352 15.0049V14.9649C22.5352 14.6949 22.5202 14.4299 22.4952 14.1699H23.9002V12.5249H23.8952ZM10.9102 9.40494H15.0252C17.5752 9.40494 19.4702 10.6599 20.3452 12.5199H10.9102V9.40494ZM15.0252 20.5899H10.9102V17.5349H20.3352C19.4552 19.3649 17.5652 20.5899 15.0252 20.5899ZM20.8802 15.0399C20.8802 15.3299 20.8602 15.6149 20.8202 15.8899H10.9102V14.1649H20.8252C20.8602 14.4349 20.8802 14.7149 20.8802 14.9999V15.0399Z"
-        fill="white"
-      />
-    </g>,
-    <defs>
-      <linearGradient
-        id="paint0_linear_5847_4625"
-        x1="15"
-        y1="-4.25"
-        x2="15"
-        y2="33.15"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#F9A606" />
-        <stop offset="1" stopColor="#FBCC5F" />
-      </linearGradient>
-      <clipPath id="clip0_5847_4625">
-        <rect width="30" height="30" fill="white" />
-      </clipPath>
-    </defs>,
-  ],
+export const DaiTokenIcon = createIconBase({
+  displayName: "DAITokenIcon",
+  viewBox: "0 0 30 30",
+  className: "text-3xl/none fill-none",
+  children: (
+    <>
+      <g clipPath="url(#clip0_5847_4625)">
+        <path
+          d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z"
+          fill="url(#paint0_linear_5847_4625)"
+        />
+        <path
+          d="M23.8952 12.5249H22.1152C21.1352 9.80494 18.5002 7.93994 15.0252 7.93994H9.3102V12.5249H7.3252V14.1699H9.3102V15.8949H7.3252V17.5399H9.3102V22.0699H15.0252C18.4602 22.0699 21.0752 20.2199 22.0802 17.5399H23.8952V15.8949H22.4802C22.5152 15.6049 22.5352 15.3049 22.5352 15.0049V14.9649C22.5352 14.6949 22.5202 14.4299 22.4952 14.1699H23.9002V12.5249H23.8952ZM10.9102 9.40494H15.0252C17.5752 9.40494 19.4702 10.6599 20.3452 12.5199H10.9102V9.40494ZM15.0252 20.5899H10.9102V17.5349H20.3352C19.4552 19.3649 17.5652 20.5899 15.0252 20.5899ZM20.8802 15.0399C20.8802 15.3299 20.8602 15.6149 20.8202 15.8899H10.9102V14.1649H20.8252C20.8602 14.4349 20.8802 14.7149 20.8802 14.9999V15.0399Z"
+          fill="white"
+        />
+      </g>
+
+      <defs>
+        <linearGradient
+          id="paint0_linear_5847_4625"
+          x1="15"
+          y1="-4.25"
+          x2="15"
+          y2="33.15"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F9A606" />
+          <stop offset="1" stopColor="#FBCC5F" />
+        </linearGradient>
+        <clipPath id="clip0_5847_4625">
+          <rect width="30" height="30" fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
 })