Skip to content

Commit a45bb78

Browse files
pettinarippettinarip
authored
Merge pull request #14873 from TylerAPfledderer/feat/simulator-icons-migrate
feat(Simulator/icons): migrate to react-icons
2 parents 3867361 + 30d43a7 commit a45bb78

18 files changed

+256
-313
lines changed

‎src/components/Simulator/WalletHome/SendReceiveButton.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@ export const SendReceiveButton = ({
4141
)}
4242
>
4343
{!isDisabled && isAnimated && <PulseAnimation type="circle" />}
44-
{/* TODO: Remove important flags from class utils when simulator icons are migrated to tailwind */}
45-
<Icon className="!size-4 !text-background md:!size-6" />
44+
<Icon className="size-4 text-background md:size-6" />
4645
</div>
4746
<div className="relative">
4847
<p

‎src/components/Simulator/WalletHome/SendReceiveButtons.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export const SendReceiveButtons = ({
4040
onClick={nav?.progressStepper}
4141
isDisabled={disableReceive}
4242
isHighlighted={highlightReceive}
43-
// @ts-expect-error icon component needs to be migrated to use react-icons base
4443
icon={QrCodeIcon}
4544
isAnimated
4645
>

‎src/components/Simulator/WalletHome/interfaces.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { StaticImageData } from "next/image"
2-
import type { Icon } from "@chakra-ui/react"
2+
3+
import type { IconBaseType } from "@/components/icons/icon-base"
34

45
export interface TokenBalance {
56
name: string
67
ticker: string
78
amount: number
89
usdConversion: number
9-
Icon: typeof Icon
10+
Icon: IconBaseType
1011
}
1112

1213
export interface Contact {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { fn } from "@storybook/test"
44

55
import { viewportModes } from "../../../../.storybook/modes"
66
import { Explanation as ExplanationComponent } from "../Explanation"
7+
import { SendReceiveIcon } from "../icons"
78

89
const meta = {
910
title: "Molecules / Display Content / Simulator / Explanation",
@@ -39,7 +40,7 @@ const meta = {
3940
totalSteps: 3,
4041
openPath: fn(),
4142
},
42-
nextPathSummary: { Icon: fn(), primaryText: "" },
43+
nextPathSummary: { Icon: SendReceiveIcon, primaryText: "" },
4344
nextPathId: "send-receive",
4445
finalCtaLink: { href: "#", label: "Next Step", isPrimary: true },
4546
},

‎src/components/Simulator/icons/ConnectWeb3Icon.tsx

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
1-
/* eslint-disable react/jsx-key */
2-
import React from "react"
3-
import { createIcon } from "@chakra-ui/react"
1+
import { createIconBase } from "@/components/icons/icon-base"
42

5-
const [w, h] = [32, 32]
6-
export const ConnectWeb3Icon = createIcon({
3+
export const ConnectWeb3Icon = createIconBase({
74
displayName: "Connect Web3 Icon",
8-
viewBox: `0 0 ${w} ${h}`,
9-
defaultProps: {
10-
width: `${w}px`,
11-
height: `${h}px`,
12-
fill: "currentColor",
13-
},
14-
path: [
15-
<path
16-
fillRule="evenodd"
17-
clipRule="evenodd"
18-
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"
19-
/>,
20-
<path
21-
fillRule="evenodd"
22-
clipRule="evenodd"
23-
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"
24-
/>,
25-
],
5+
viewBox: "0 0 32 32",
6+
className: "text-[32px]/none fill-current",
7+
children: (
8+
<>
9+
<path
10+
fillRule="evenodd"
11+
clipRule="evenodd"
12+
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"
13+
/>
14+
15+
<path
16+
fillRule="evenodd"
17+
clipRule="evenodd"
18+
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"
19+
/>
20+
</>
21+
),
2622
})

‎src/components/Simulator/icons/CreateAccountIcon.tsx

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
1-
/* eslint-disable react/jsx-key */
2-
import React from "react"
3-
import { createIcon } from "@chakra-ui/react"
1+
import { createIconBase } from "@/components/icons/icon-base"
42

5-
const [w, h] = [32, 32]
6-
export const CreateAccountIcon = createIcon({
7-
displayName: "Create Account Icon",
8-
viewBox: `0 0 ${w} ${h}`,
9-
defaultProps: {
10-
width: `${w}px`,
11-
height: `${h}px`,
12-
fill: "currentColor",
13-
},
14-
path: [
15-
<path
16-
fillRule="evenodd"
17-
clipRule="evenodd"
18-
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"
19-
/>,
20-
<path
21-
fillRule="evenodd"
22-
clipRule="evenodd"
23-
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"
24-
/>,
25-
<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" />,
26-
<path
27-
fillRule="evenodd"
28-
clipRule="evenodd"
29-
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"
30-
/>,
31-
],
3+
export const CreateAccountIcon = createIconBase({
4+
displayName: "CreateAccountIcon",
5+
viewBox: "0 0 32 32",
6+
className: "text-[32px]/none fill-current",
7+
children: (
8+
<>
9+
<path
10+
fillRule="evenodd"
11+
clipRule="evenodd"
12+
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"
13+
/>
14+
15+
<path
16+
fillRule="evenodd"
17+
clipRule="evenodd"
18+
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"
19+
/>
20+
21+
<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" />
22+
23+
<path
24+
fillRule="evenodd"
25+
clipRule="evenodd"
26+
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"
27+
/>
28+
</>
29+
),
3230
})

‎src/components/Simulator/icons/DaiTokenIcon.tsx

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,38 @@
1-
/* eslint-disable react/jsx-key */
2-
import React from "react"
3-
import { createIcon } from "@chakra-ui/react"
1+
import { createIconBase } from "@/components/icons/icon-base"
42

5-
export const DaiTokenIcon = createIcon({
6-
displayName: "DAI Token Icon",
7-
viewBox: "0 0 30 30 ",
8-
defaultProps: {
9-
width: 30,
10-
height: 30,
11-
fill: "none",
12-
},
13-
path: [
14-
<g clipPath="url(#clip0_5847_4625)">
15-
<path
16-
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"
17-
fill="url(#paint0_linear_5847_4625)"
18-
/>
19-
<path
20-
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"
21-
fill="white"
22-
/>
23-
</g>,
24-
<defs>
25-
<linearGradient
26-
id="paint0_linear_5847_4625"
27-
x1="15"
28-
y1="-4.25"
29-
x2="15"
30-
y2="33.15"
31-
gradientUnits="userSpaceOnUse"
32-
>
33-
<stop stopColor="#F9A606" />
34-
<stop offset="1" stopColor="#FBCC5F" />
35-
</linearGradient>
36-
<clipPath id="clip0_5847_4625">
37-
<rect width="30" height="30" fill="white" />
38-
</clipPath>
39-
</defs>,
40-
],
3+
export const DaiTokenIcon = createIconBase({
4+
displayName: "DAITokenIcon",
5+
viewBox: "0 0 30 30",
6+
className: "text-3xl/none fill-none",
7+
children: (
8+
<>
9+
<g clipPath="url(#clip0_5847_4625)">
10+
<path
11+
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"
12+
fill="url(#paint0_linear_5847_4625)"
13+
/>
14+
<path
15+
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"
16+
fill="white"
17+
/>
18+
</g>
19+
20+
<defs>
21+
<linearGradient
22+
id="paint0_linear_5847_4625"
23+
x1="15"
24+
y1="-4.25"
25+
x2="15"
26+
y2="33.15"
27+
gradientUnits="userSpaceOnUse"
28+
>
29+
<stop stopColor="#F9A606" />
30+
<stop offset="1" stopColor="#FBCC5F" />
31+
</linearGradient>
32+
<clipPath id="clip0_5847_4625">
33+
<rect width="30" height="30" fill="white" />
34+
</clipPath>
35+
</defs>
36+
</>
37+
),
4138
})

0 commit comments

Comments
 (0)