From a1a6b834f465da4db601795d5e3f0169b05cc25a Mon Sep 17 00:00:00 2001 From: Ashis Kumar Date: Fri, 3 Jan 2025 16:35:31 +0530 Subject: [PATCH 1/4] Migrated the all the Chakra imports to Shadcn/Tailwind. --- src/components/Staking/StakingComparison.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Staking/StakingComparison.tsx b/src/components/Staking/StakingComparison.tsx index 8cad6c9dd90..5372a8c3ec6 100644 --- a/src/components/Staking/StakingComparison.tsx +++ b/src/components/Staking/StakingComparison.tsx @@ -1,5 +1,5 @@ import { useTranslation } from "next-i18next" -import { Box, Heading, useTheme } from "@chakra-ui/react" +import {useTheme } from "@chakra-ui/react" import type { StakingPage, TranslationKey } from "@/lib/types" @@ -142,10 +142,10 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { {glyph} )} - - +
+

{t(title)} - +

{t(content)} { @@ -155,7 +155,7 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { > {t(linkText)} - +
) )} From f6fc45bc7c543414d6b616ed2a77724fd57f5af2 Mon Sep 17 00:00:00 2001 From: Pablo Date: Tue, 7 Jan 2025 10:43:24 +0100 Subject: [PATCH 2/4] migrate old components and colors --- src/components/Staking/StakingComparison.tsx | 42 ++++++++------------ 1 file changed, 16 insertions(+), 26 deletions(-) diff --git a/src/components/Staking/StakingComparison.tsx b/src/components/Staking/StakingComparison.tsx index 5372a8c3ec6..57ff70e69ea 100644 --- a/src/components/Staking/StakingComparison.tsx +++ b/src/components/Staking/StakingComparison.tsx @@ -1,5 +1,4 @@ import { useTranslation } from "next-i18next" -import {useTheme } from "@chakra-ui/react" import type { StakingPage, TranslationKey } from "@/lib/types" @@ -8,21 +7,19 @@ import { StakingGlyphCPUIcon, StakingGlyphTokenWalletIcon, } from "@/components/icons/staking" -import InlineLink from "@/components/Link" -import OldHeading from "@/components/OldHeading" -import Text from "@/components/OldText" import { cn } from "@/lib/utils/cn" import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo" import { Flex } from "../ui/flex" +import InlineLink from "../ui/Link" interface DataType { title: TranslationKey linkText: TranslationKey href: string matomo: MatomoEventOptions - color: string + colorClassName: string glyph: JSX.Element } @@ -32,8 +29,6 @@ export type StakingComparisonProps = { } const StakingComparison = ({ page, className }: StakingComparisonProps) => { - const theme = useTheme() - const { stakingGold, stakingGreen, stakingBlue } = theme.colors const { t } = useTranslation("page-staking") const solo: DataType = { @@ -45,10 +40,8 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { eventAction: `Clicked`, eventName: "clicked solo staking", }, - color: stakingGold, - glyph: ( - - ), + colorClassName: "text-[#be8d10]", + glyph: , } const saas: DataType = { title: "page-staking-saas-with-abbrev", @@ -59,12 +52,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { eventAction: `Clicked`, eventName: "clicked staking as a service", }, - color: stakingGreen, + colorClassName: "text-[#129e5b]", glyph: ( - + ), } const pools: DataType = { @@ -76,12 +66,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { eventAction: `Clicked`, eventName: "clicked pooled staking", }, - color: stakingBlue, + colorClassName: "text-[#0b83dc]", glyph: ( - + ), } const data: { @@ -131,11 +118,14 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { className )} > - +

{t("page-staking-comparison-with-other-options")} - +

{selectedData.map( - ({ title, linkText, href, color, content, glyph, matomo }, idx) => ( + ( + { title, linkText, href, colorClassName, content, glyph, matomo }, + idx + ) => ( {!!glyph && ( @@ -143,10 +133,10 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { )}
-

+

{t(title)}

- {t(content)} +

{t(content)}

{ trackCustomEvent(matomo) From 8ef62e39fb56773f094d7fdd4c9b697da4fd1cf7 Mon Sep 17 00:00:00 2001 From: Pablo Date: Tue, 7 Jan 2025 10:54:54 +0100 Subject: [PATCH 3/4] migrate staking icons --- src/components/Staking/StakingComparison.tsx | 4 +- .../icons/staking/StakingGlyphCPUIcon.tsx | 16 ++++---- .../staking/StakingGlyphCentralizedIcon.tsx | 16 ++++---- .../icons/staking/StakingGlyphCloudIcon.tsx | 16 ++++---- .../staking/StakingGlyphEtherCircleIcon.tsx | 40 +++++++++---------- .../staking/StakingGlyphTokenWalletIcon.tsx | 30 ++++++-------- 6 files changed, 53 insertions(+), 69 deletions(-) diff --git a/src/components/Staking/StakingComparison.tsx b/src/components/Staking/StakingComparison.tsx index 57ff70e69ea..4519d54625d 100644 --- a/src/components/Staking/StakingComparison.tsx +++ b/src/components/Staking/StakingComparison.tsx @@ -118,7 +118,7 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { className )} > -

+

{t("page-staking-comparison-with-other-options")}

{selectedData.map( @@ -133,7 +133,7 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { )}
-

+

{t(title)}

{t(content)}

diff --git a/src/components/icons/staking/StakingGlyphCPUIcon.tsx b/src/components/icons/staking/StakingGlyphCPUIcon.tsx index a7ec3c0ce08..c29a1440897 100644 --- a/src/components/icons/staking/StakingGlyphCPUIcon.tsx +++ b/src/components/icons/staking/StakingGlyphCPUIcon.tsx @@ -1,13 +1,11 @@ -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "../icon-base" +import { commonIconDefaultAttrs } from "../utils" -// TODO: migrate with StakingHierarchy - -export const StakingGlyphCPUIcon = createIcon({ +export const StakingGlyphCPUIcon = createIconBase({ displayName: "StakingGlyphCPUIcon", viewBox: "0 0 50 50", - defaultProps: { - width: "50px", - height: "50px", - }, - d: "M34.1319 2.24247C34.0429 2.04376 33.9934 1.82343 33.9934 1.59151C33.9934 0.712544 34.7041 0 35.5807 0C36.4573 0 37.168 0.712544 37.168 1.59151C37.168 2.47048 36.4573 3.18302 35.5807 3.18302C35.3247 3.18302 35.0829 3.12227 34.8688 3.01437L30.6001 7.29453V12.2789H35.4906C36.6691 12.2789 37.6244 13.2342 37.6244 14.4127V19.113H42.5711L46.9627 14.7095C46.8737 14.5108 46.8242 14.2904 46.8242 14.0584C46.8242 13.1794 47.5349 12.4668 48.4115 12.4668C49.2881 12.4668 49.9987 13.1794 49.9987 14.0584C49.9987 14.9373 49.2881 15.6499 48.4115 15.6499C48.1556 15.6499 47.9139 15.5892 47.6998 15.4813L43.0138 20.1799H37.6244V24.283H45.1915C45.4058 23.6584 45.997 23.2095 46.6927 23.2095C47.5694 23.2095 48.28 23.9221 48.28 24.8011C48.28 25.68 47.5694 26.3926 46.6927 26.3926C46.0085 26.3926 45.4254 25.9584 45.2024 25.3499H37.6244V29.453H43.0653L47.7138 34.1139C47.9244 34.0104 48.1611 33.9523 48.4115 33.9523C49.2881 33.9523 49.9987 34.6648 49.9987 35.5438C49.9987 36.4228 49.2881 37.1353 48.4115 37.1353C47.5349 37.1353 46.8242 36.4228 46.8242 35.5438C46.8242 35.3062 46.8762 35.0807 46.9693 34.8782L42.6226 30.5199H37.6244V35.4621C37.6244 36.6406 36.6691 37.5959 35.4906 37.5959H30.6001V42.6871L34.8811 46.9795C35.0921 46.8754 35.3296 46.817 35.5807 46.817C36.4573 46.817 37.168 47.5295 37.168 48.4085C37.168 49.2875 36.4573 50 35.5807 50C34.7041 50 33.9934 49.2875 33.9934 48.4085C33.9934 48.1716 34.045 47.9469 34.1376 47.7449L29.5332 43.1281V37.5959H25.4514V45.6026C26.0382 45.8362 26.4531 46.4107 26.4531 47.0823C26.4531 47.9613 25.7425 48.6738 24.8659 48.6738C23.9892 48.6738 23.2786 47.9613 23.2786 47.0823C23.2786 46.3716 23.7432 45.7697 24.3845 45.5653V37.5959H20.291V43.1804L15.7307 47.753C15.8209 47.9529 15.8711 48.1748 15.8711 48.4085C15.8711 49.2875 15.1605 50 14.2838 50C13.4072 50 12.6966 49.2875 12.6966 48.4085C12.6966 47.5295 13.4072 46.817 14.2838 46.817C14.5381 46.817 14.7783 46.8769 14.9914 46.9835L19.2241 42.7394V37.5959H14.5088C13.3303 37.5959 12.375 36.6406 12.375 35.4621V30.5199H7.32738L3.01377 34.8451C3.11673 35.056 3.17453 35.2931 3.17453 35.5438C3.17453 36.4228 2.46389 37.1353 1.58726 37.1353C0.710643 37.1353 0 36.4228 0 35.5438C0 34.6648 0.710643 33.9523 1.58726 33.9523C1.82459 33.9523 2.04974 34.0045 2.25193 34.0981L6.88462 29.453H12.375V25.3499H4.40184C4.17886 25.9584 3.59573 26.3926 2.91148 26.3926C2.03486 26.3926 1.32422 25.68 1.32422 24.8011C1.32422 23.9221 2.03486 23.2095 2.91148 23.2095C3.60722 23.2095 4.19841 23.6584 4.41276 24.283H12.375V20.1799H6.83309L2.28589 15.6205C2.07508 15.7243 1.83796 15.7826 1.58726 15.7826C0.710643 15.7826 0 15.07 0 14.191C0 13.3121 0.710643 12.5995 1.58726 12.5995C2.46389 12.5995 3.17453 13.3121 3.17453 14.191C3.17453 14.4283 3.12275 14.6534 3.02991 14.8557L7.27585 19.113H12.375V14.4127C12.375 13.2342 13.3303 12.2789 14.5088 12.2789H19.2241V7.34683L14.933 3.04424C14.7349 3.13342 14.5151 3.18302 14.2838 3.18302C13.4072 3.18302 12.6966 2.47048 12.6966 1.59151C12.6966 0.712544 13.4072 0 14.2838 0C15.1605 0 15.8711 0.712544 15.8711 1.59151C15.8711 1.84817 15.8105 2.09063 15.7029 2.30531L20.291 6.90575V12.2789H24.3845V4.43488C23.7432 4.23048 23.2786 3.62858 23.2786 2.91786C23.2786 2.03889 23.9892 1.32634 24.8659 1.32634C25.7425 1.32634 26.4531 2.03889 26.4531 2.91786C26.4531 3.58947 26.0382 4.16391 25.4514 4.39757V12.2789H29.5332V6.85345L34.1319 2.24247Z", + ...commonIconDefaultAttrs, + children: ( + + ), }) diff --git a/src/components/icons/staking/StakingGlyphCentralizedIcon.tsx b/src/components/icons/staking/StakingGlyphCentralizedIcon.tsx index 6f4a048ea6a..0f0a81832af 100644 --- a/src/components/icons/staking/StakingGlyphCentralizedIcon.tsx +++ b/src/components/icons/staking/StakingGlyphCentralizedIcon.tsx @@ -1,13 +1,11 @@ -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "../icon-base" +import { commonIconDefaultAttrs } from "../utils" -// TODO: migrate with StakingHierarchy - -export const StakingGlyphCentralizedIcon = createIcon({ +export const StakingGlyphCentralizedIcon = createIconBase({ displayName: "StakingGlyphCentralizedIcon", viewBox: "0 0 51 51", - defaultProps: { - width: "51px", - height: "51px", - }, - d: "M23.2492 2.5526C23.2492 1.36237 24.2139 0.397491 25.4043 0.397491C26.5947 0.397491 27.5594 1.36237 27.5594 2.5526C27.5594 3.59631 26.8164 4.46673 25.8322 4.66519V19.8095C27.0537 19.9018 28.1663 20.3868 29.0455 21.1386L39.7473 10.4348C39.191 9.5978 39.2843 8.45753 40.0196 7.71947C40.8637 6.87786 42.2292 6.87786 43.0694 7.71947C43.9097 8.56108 43.9097 9.92561 43.0694 10.7672C42.3342 11.5035 41.1983 11.5956 40.358 11.0436L29.6523 21.7463C30.407 22.6248 30.8972 23.7399 30.9905 24.9652H46.1388C46.3372 23.9816 47.2086 23.2414 48.2511 23.2414C49.4415 23.2414 50.4062 24.2062 50.4062 25.3964C50.4062 26.5866 49.4415 27.5515 48.2511 27.5515C47.2086 27.5515 46.3372 26.811 46.1388 25.8272H30.9905C30.8972 27.0527 30.407 28.168 29.6523 29.0467L40.358 39.7495C41.1983 39.1974 42.3342 39.2895 43.0694 40.0259C43.9097 40.8675 43.9097 42.232 43.0694 43.0736C42.2292 43.9152 40.8637 43.9152 40.0196 43.0736C39.2843 42.3355 39.191 41.1953 39.7473 40.3583L29.0455 29.6544C28.1663 30.4063 27.0537 30.8913 25.8322 30.9836V46.1282C26.8164 46.3267 27.5594 47.197 27.5594 48.2408C27.5594 49.431 26.5947 50.3959 25.4043 50.3959C24.2139 50.3959 23.2492 49.431 23.2492 48.2408C23.2492 47.1984 23.9883 46.329 24.9725 46.129V30.9834C23.7471 30.8901 22.6306 30.4024 21.7515 29.6471L11.0419 40.3594C11.5982 41.1963 11.5048 42.3355 10.7657 43.0731C9.92543 43.9147 8.55999 43.9147 7.71972 43.0731C6.87945 42.2315 6.87945 40.867 7.71972 40.0254C8.45495 39.2886 9.59477 39.1968 10.4311 39.75L21.1407 29.0363C20.3899 28.1593 19.9075 27.0479 19.8142 25.8272H4.67374C4.47534 26.811 3.60395 27.5514 2.56139 27.5514C1.37101 27.5514 0.40625 26.5865 0.40625 25.3963C0.40625 24.2061 1.37101 23.2412 2.56139 23.2412C3.60395 23.2412 4.47534 23.9816 4.67374 24.9652H19.8142C19.9075 23.7447 20.3899 22.6336 21.1407 21.7567L10.4311 11.0431C9.59477 11.5963 8.45495 11.5045 7.71972 10.7678C6.87945 9.92615 6.87945 8.56165 7.71972 7.72002C8.55999 6.87841 9.92543 6.87841 10.7657 7.72002C11.5048 8.45762 11.5982 9.5968 11.0419 10.4337L21.7515 21.1458C22.6306 20.3905 23.7471 19.903 24.9725 19.8097V4.66443C23.9883 4.46445 23.2492 3.59495 23.2492 2.5526Z", + ...commonIconDefaultAttrs, + children: ( + + ), }) diff --git a/src/components/icons/staking/StakingGlyphCloudIcon.tsx b/src/components/icons/staking/StakingGlyphCloudIcon.tsx index 289cac3da21..8d7e35f0935 100644 --- a/src/components/icons/staking/StakingGlyphCloudIcon.tsx +++ b/src/components/icons/staking/StakingGlyphCloudIcon.tsx @@ -1,13 +1,11 @@ -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "../icon-base" +import { commonIconDefaultAttrs } from "../utils" -// TODO: migrate with StakingHierarchy - -export const StakingGlyphCloudIcon = createIcon({ +export const StakingGlyphCloudIcon = createIconBase({ displayName: "StakingGlyphCloudIcon", viewBox: "0 0 50 28", - defaultProps: { - width: "50px", - height: "28px", - }, - d: "M41.9655 12.2876C41.6352 5.44298 36.2483 0 29.6514 0C24.479 0 20.0505 3.34612 18.2199 8.09041C17.2547 7.68167 16.2003 7.45668 15.0959 7.45668C11.6055 7.45668 8.61465 9.70388 7.36264 12.8963C7.27461 12.8929 7.18617 12.8912 7.09734 12.8912C3.17759 12.8912 0 16.2297 0 20.3478C0 24.3385 2.98385 27.597 6.73542 27.7949V27.8045H43.3048V27.7699C47.061 27.3979 50 24.0755 50 20.0319C50 15.7392 46.6878 12.2593 42.6019 12.2593C42.3875 12.2593 42.1753 12.2688 41.9655 12.2876Z", + ...commonIconDefaultAttrs, + children: ( + + ), }) diff --git a/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx b/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx index 5d793931812..a7c6c052057 100644 --- a/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx +++ b/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx @@ -1,26 +1,22 @@ -/* eslint-disable react/jsx-key */ -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "../icon-base" +import { commonIconDefaultAttrs } from "../utils" -// TODO: migrate with StakingHierarchy - -export const StakingGlyphEtherCircleIcon = createIcon({ +export const StakingGlyphEtherCircleIcon = createIconBase({ displayName: "StakingGlyphEtherCircleIcon", viewBox: "0 0 32 32", - defaultProps: { - width: "32px", - height: "32px", - clipRule: "evenodd", - }, - path: [ - , - , - ], + ...commonIconDefaultAttrs, + children: ( + <> + + + + ), }) diff --git a/src/components/icons/staking/StakingGlyphTokenWalletIcon.tsx b/src/components/icons/staking/StakingGlyphTokenWalletIcon.tsx index 1e715f606f3..f6580401fb3 100644 --- a/src/components/icons/staking/StakingGlyphTokenWalletIcon.tsx +++ b/src/components/icons/staking/StakingGlyphTokenWalletIcon.tsx @@ -1,22 +1,16 @@ -/* eslint-disable react/jsx-key */ -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "../icon-base" +import { commonIconDefaultAttrs } from "../utils" -import { commonIconDefaultProps } from "@/components/icons/utils" - -// TODO: migrate with StakingHierarchy - -export const StakingGlyphTokenWalletIcon = createIcon({ +export const StakingGlyphTokenWalletIcon = createIconBase({ displayName: "StakingGlyphTokenWalletIcon", viewBox: "0 0 50 39", - defaultProps: { - width: "50px", - height: "39px", - ...commonIconDefaultProps, - }, - path: [ - , - , - , - , - ], + ...commonIconDefaultAttrs, + children: ( + <> + + + + + + ), }) From 4b3027ed660c3f2c66f01636b37889d13e43f20d Mon Sep 17 00:00:00 2001 From: Pablo Date: Tue, 7 Jan 2025 15:23:11 +0100 Subject: [PATCH 4/4] add staking colors to tw theme --- src/components/Staking/StakingComparison.tsx | 14 +++++---- src/components/Staking/StakingHierarchy.tsx | 31 ++++++++----------- .../staking/StakingGlyphEtherCircleIcon.tsx | 1 + src/styles/semantic-tokens.css | 20 ++++++++++++ tailwind.config.ts | 11 +++++++ 5 files changed, 53 insertions(+), 24 deletions(-) diff --git a/src/components/Staking/StakingComparison.tsx b/src/components/Staking/StakingComparison.tsx index 4519d54625d..77d205ad290 100644 --- a/src/components/Staking/StakingComparison.tsx +++ b/src/components/Staking/StakingComparison.tsx @@ -40,8 +40,10 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { eventAction: `Clicked`, eventName: "clicked solo staking", }, - colorClassName: "text-[#be8d10]", - glyph: , + colorClassName: "text-staking-gold", + glyph: ( + + ), } const saas: DataType = { title: "page-staking-saas-with-abbrev", @@ -52,9 +54,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { eventAction: `Clicked`, eventName: "clicked staking as a service", }, - colorClassName: "text-[#129e5b]", + colorClassName: "text-staking-green", glyph: ( - + ), } const pools: DataType = { @@ -66,9 +68,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => { eventAction: `Clicked`, eventName: "clicked pooled staking", }, - colorClassName: "text-[#0b83dc]", + colorClassName: "text-staking-blue", glyph: ( - + ), } const data: { diff --git a/src/components/Staking/StakingHierarchy.tsx b/src/components/Staking/StakingHierarchy.tsx index 0a60718f47d..94d9bba450e 100644 --- a/src/components/Staking/StakingHierarchy.tsx +++ b/src/components/Staking/StakingHierarchy.tsx @@ -1,5 +1,6 @@ import React from "react" import { useTranslation } from "next-i18next" +import { IconBase } from "react-icons" import { Box, calc, @@ -117,19 +118,13 @@ const SectionGrid = ({ number, children }: SectionGridProps) => { ) } -const StyledEtherSvg = ({ size }: { size: string }) => ( -
- -
-) +const StyledEtherSvg = ({ className = "size-full" }: { className: string }) => { + return ( +
+ +
+ ) +} const Line = () => { // TODO: Remove after completion of the Chakra migration @@ -211,7 +206,7 @@ const Pills = ({ children }: ChildOnlyProp) => ( ) -type GlyphProps = { glyphIcon: typeof Icon } +type GlyphProps = { glyphIcon: typeof IconBase } const Glyph = ({ glyphIcon }: GlyphProps) => (
{ }} > - +
{t("page-staking-hierarchy-solo-h2")} @@ -300,7 +295,7 @@ const StakingHierarchy = () => { - +
{t("page-staking-dropdown-saas")} @@ -333,7 +328,7 @@ const StakingHierarchy = () => { - +
{t("page-staking-dropdown-pools")} @@ -378,7 +373,7 @@ const StakingHierarchy = () => { - +
{t("page-staking-hierarchy-cex-h2")} diff --git a/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx b/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx index a7c6c052057..ac3752cf4e6 100644 --- a/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx +++ b/src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx @@ -10,6 +10,7 @@ export const StakingGlyphEtherCircleIcon = createIconBase({