diff --git a/src/components/Simulator/WalletHome/SendReceiveButton.tsx b/src/components/Simulator/WalletHome/SendReceiveButton.tsx index 947541cdba1..ec5e3fd836f 100644 --- a/src/components/Simulator/WalletHome/SendReceiveButton.tsx +++ b/src/components/Simulator/WalletHome/SendReceiveButton.tsx @@ -41,8 +41,7 @@ export const SendReceiveButton = ({ )} > {!isDisabled && isAnimated && } - {/* TODO: Remove important flags from class utils when simulator icons are migrated to tailwind */} - +

diff --git a/src/components/Simulator/WalletHome/interfaces.ts b/src/components/Simulator/WalletHome/interfaces.ts index a8cf9468618..f6225e905b2 100644 --- a/src/components/Simulator/WalletHome/interfaces.ts +++ b/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 { diff --git a/src/components/Simulator/__stories__/Explanation.stories.tsx b/src/components/Simulator/__stories__/Explanation.stories.tsx index 43debcafbe9..19c1f8405e8 100644 --- a/src/components/Simulator/__stories__/Explanation.stories.tsx +++ b/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 }, }, diff --git a/src/components/Simulator/icons/ConnectWeb3Icon.tsx b/src/components/Simulator/icons/ConnectWeb3Icon.tsx index ac96727a645..ddf3f1bb364 100644 --- a/src/components/Simulator/icons/ConnectWeb3Icon.tsx +++ b/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: [ - , - , - ], + viewBox: "0 0 32 32", + className: "text-[32px]/none fill-current", + children: ( + <> + + + + + ), }) diff --git a/src/components/Simulator/icons/CreateAccountIcon.tsx b/src/components/Simulator/icons/CreateAccountIcon.tsx index 990d8c35972..bb519964384 100644 --- a/src/components/Simulator/icons/CreateAccountIcon.tsx +++ b/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: [ - , - , - , - , - ], +export const CreateAccountIcon = createIconBase({ + displayName: "CreateAccountIcon", + viewBox: "0 0 32 32", + className: "text-[32px]/none fill-current", + children: ( + <> + + + + + + + + + ), }) diff --git a/src/components/Simulator/icons/DaiTokenIcon.tsx b/src/components/Simulator/icons/DaiTokenIcon.tsx index 68038328cfe..24d56ec6974 100644 --- a/src/components/Simulator/icons/DaiTokenIcon.tsx +++ b/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: [ - - - - , - - - - - - - - - , - ], +export const DaiTokenIcon = createIconBase({ + displayName: "DAITokenIcon", + viewBox: "0 0 30 30", + className: "text-3xl/none fill-none", + children: ( + <> + + + + + + + + + + + + + + + + ), }) diff --git a/src/components/Simulator/icons/EthGlyphIcon.tsx b/src/components/Simulator/icons/EthGlyphIcon.tsx index 35415ae9f9a..1dc897a4e04 100644 --- a/src/components/Simulator/icons/EthGlyphIcon.tsx +++ b/src/components/Simulator/icons/EthGlyphIcon.tsx @@ -1,16 +1,12 @@ -import React from "react" -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "@/components/icons/icon-base" -const [w, h] = [17, 26] -export const EthGlyphIcon = createIcon({ +export const EthGlyphIcon = createIconBase({ displayName: "EthGlyphIcon", - viewBox: `0 0 ${w} ${h}`, - defaultProps: { - height: `${h}px`, - width: `${w}px`, - fill: "currentColor", - }, - path: ( - + viewBox: "0 0 17 26", + className: "x-[17px] y-[26px] fill-current", + children: ( + <> + + ), }) diff --git a/src/components/Simulator/icons/EthTokenIcon.tsx b/src/components/Simulator/icons/EthTokenIcon.tsx index 59d7696089a..b225833aa14 100644 --- a/src/components/Simulator/icons/EthTokenIcon.tsx +++ b/src/components/Simulator/icons/EthTokenIcon.tsx @@ -1,45 +1,43 @@ /* eslint-disable react/jsx-key */ import React from "react" -import { createIcon } from "@chakra-ui/react" -export const EthTokenIcon = createIcon({ - displayName: "ETH Token Icon", +import { createIconBase } from "@/components/icons/icon-base" + +export const EthTokenIcon = createIconBase({ + displayName: "ETHTokenIcon", viewBox: "0 0 30 30", - defaultProps: { - width: 30, - height: 30, - fill: "none", - }, - path: [ - , - , - , - ], + className: "text-3xl/none fill-none", + children: ( + <> + + + + + + ), }) -export const EthTokenIconGrayscale = createIcon({ - displayName: "ETH Token Icon Grayscale", +export const EthTokenIconGrayscale = createIconBase({ + displayName: "ETHTokenIconGrayscale", viewBox: "0 0 30 30", - defaultProps: { - width: 30, - height: 30, - fill: "none", - }, - path: [ - , - , - , - ], + className: "text-3xl/none fill-none", + children: ( + <> + + + + + ), }) diff --git a/src/components/Simulator/icons/QrCodeIcon.tsx b/src/components/Simulator/icons/QrCodeIcon.tsx index a755bb81bba..eab15932f30 100644 --- a/src/components/Simulator/icons/QrCodeIcon.tsx +++ b/src/components/Simulator/icons/QrCodeIcon.tsx @@ -1,35 +1,31 @@ -/* eslint-disable react/jsx-key */ -import React from "react" -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "@/components/icons/icon-base" -export const QrCodeIcon = createIcon({ +export const QrCodeIcon = createIconBase({ displayName: "QrCodeIcon", viewBox: "0 0 16 16", - defaultProps: { - width: 16, - height: 16, - fill: "currentColor", - }, - path: [ - , - , - , - , - , - , - , - , - ], + className: "text-md/none fill-current", + children: ( + <> + + + + + + + + + + ), }) diff --git a/src/components/Simulator/icons/SendReceiveIcon.tsx b/src/components/Simulator/icons/SendReceiveIcon.tsx index 7bd3e589103..1a87c9382db 100644 --- a/src/components/Simulator/icons/SendReceiveIcon.tsx +++ b/src/components/Simulator/icons/SendReceiveIcon.tsx @@ -1,36 +1,31 @@ -/* 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 SendReceiveIcon = createIcon({ - displayName: "Send/Receive Icon", - viewBox: `0 0 ${w} ${h}`, - defaultProps: { - width: `${w}px`, - height: `${h}px`, - fill: "currentColor", - }, - path: [ - , - , - , - , - ], +export const SendReceiveIcon = createIconBase({ + displayName: "SendReceiveIcon", + viewBox: "0 0 32 32", + className: "text-[32px]/none fill-current", + children: ( + <> + + + + + + ), }) diff --git a/src/components/Simulator/icons/UniTokenIcon.tsx b/src/components/Simulator/icons/UniTokenIcon.tsx index da5c9a160b1..ab0dd5b0a53 100644 --- a/src/components/Simulator/icons/UniTokenIcon.tsx +++ b/src/components/Simulator/icons/UniTokenIcon.tsx @@ -1,66 +1,62 @@ -/* eslint-disable react/jsx-key */ -import React from "react" -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "@/components/icons/icon-base" -export const UniTokenIcon = createIcon({ - displayName: "UNI Token Icon", +export const UniTokenIcon = createIconBase({ + displayName: "UNITokenIcon", viewBox: "0 0 30 30", - defaultProps: { - width: 30, - height: 30, - fill: "none", - }, - path: [ - - - - - - - - - - - - , - - - - - , - ], + className: "text-3xl/none fill-none", + children: ( + <> + + + + + + + + + + + + + + + + + + + ), }) diff --git a/src/components/Simulator/icons/eth-token-icon-grayscale.svg b/src/components/Simulator/icons/eth-token-icon-grayscale.svg deleted file mode 100644 index 83ef4fe9106..00000000000 --- a/src/components/Simulator/icons/eth-token-icon-grayscale.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/Simulator/icons/qr-code-icon.svg b/src/components/Simulator/icons/qr-code-icon.svg deleted file mode 100644 index bb68a82046a..00000000000 --- a/src/components/Simulator/icons/qr-code-icon.svg +++ /dev/null @@ -1,22 +0,0 @@ - - , - , - , - , - , - , - , - , - \ No newline at end of file diff --git a/src/components/Simulator/interfaces.ts b/src/components/Simulator/interfaces.ts index c5ecd50eba6..aac60abf117 100644 --- a/src/components/Simulator/interfaces.ts +++ b/src/components/Simulator/interfaces.ts @@ -1,14 +1,15 @@ import type { ReactElement } from "react" -import type { Icon } from "@chakra-ui/react" import { PhoneScreenProps } from "@/lib/types" +import type { IconBaseType } from "../icons/icon-base" + import type { PathId } from "./types" export interface SimulatorPathSummary { primaryText: string secondaryText?: string - Icon: typeof Icon + Icon: IconBaseType } export interface SimulatorExplanation { @@ -32,7 +33,7 @@ export interface LabelHref { export interface SimulatorDetails { title: string - Icon: typeof Icon + Icon: IconBaseType Screen: (props: PhoneScreenProps) => JSX.Element explanations: Array ctaLabels: Array diff --git a/src/components/Simulator/screens/CreateAccount/HomeScreen.tsx b/src/components/Simulator/screens/CreateAccount/HomeScreen.tsx index 871647bdd51..84257497350 100644 --- a/src/components/Simulator/screens/CreateAccount/HomeScreen.tsx +++ b/src/components/Simulator/screens/CreateAccount/HomeScreen.tsx @@ -34,8 +34,7 @@ export const HomeScreen = ({ nav, ...props }: HomeScreenProps) => { exit={{ opacity: 0 }} onClick={nav.progressStepper} > - {/* TODO: remove important flag from classes when icons are migrated */} - + ) : ( ( animate={{ opacity: 1 }} transition={{ duration: 0.8 }} > - {/* TODO: remove important flag from classes when icons are migrated */} - +

Welcome to wallet simulator diff --git a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx index 49022ad1a7a..28995539ccf 100644 --- a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx +++ b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx @@ -2,11 +2,10 @@ import { PiMagnifyingGlass } from "react-icons/pi" import type { SimulatorNavProps } from "@/lib/types" -import EthTokenIconGrayscale from "@/components/Simulator/icons/eth-token-icon-grayscale.svg" -import QrCodeIcon from "@/components/Simulator/icons/qr-code-icon.svg" import { Button } from "@/components/ui/buttons/Button" import { Stack } from "@/components/ui/flex" +import { EthTokenIconGrayscale, QrCodeIcon } from "../../icons" import { NotificationPopover } from "../../NotificationPopover" import { CategoryTabs } from "../../WalletHome/CategoryTabs" @@ -37,7 +36,7 @@ export const SendFromContacts = ({ > Address or contacts - +

@@ -55,7 +54,7 @@ export const SendFromContacts = ({ className="group gap-2 disabled:bg-background disabled:text-body hover:[&_path]:fill-primary-hover" onClick={() => handleSelection(name)} > - + {name}