Merge pull request #14597 from ashiskumar-1999/migrate-StakingComparison.tsx-to-Shadcn/Tailwind

feat: Migrate StakingComparison to Shadcn/Tailwind.

Author: pettinarip

src/components/Staking/StakingComparison.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from "next-i18next"
-import { Box, Heading, 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,9 +40,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventAction: `Clicked`,
       eventName: "clicked solo staking",
     },
-    color: stakingGold,
+    colorClassName: "text-staking-gold",
     glyph: (
-      <StakingGlyphCPUIcon className="h-[50px] w-[50px]" color="stakingGold" />
+      <StakingGlyphCPUIcon className="h-[50px] w-[50px] text-staking-gold" />
     ),
   }
   const saas: DataType = {
@@ -59,12 +54,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventAction: `Clicked`,
       eventName: "clicked staking as a service",
     },
-    color: stakingGreen,
+    colorClassName: "text-staking-green",
     glyph: (
-      <StakingGlyphCloudIcon
-        className="h-[28px] w-[50px]"
-        color="stakingGreen"
-      />
+      <StakingGlyphCloudIcon className="h-[28px] w-[50px] text-staking-green" />
     ),
   }
   const pools: DataType = {
@@ -76,12 +68,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventAction: `Clicked`,
       eventName: "clicked pooled staking",
     },
-    color: stakingBlue,
+    colorClassName: "text-staking-blue",
     glyph: (
-      <StakingGlyphTokenWalletIcon
-        className="h-[39px] w-[50px]"
-        color="stakingBlue"
-      />
+      <StakingGlyphTokenWalletIcon className="h-[39px] w-[50px] text-staking-blue" />
     ),
   }
   const data: {
@@ -131,22 +120,25 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
         className
       )}
     >
-      <OldHeading fontSize="2rem">
+      <h2 className="mb-4 text-3xl">
         {t("page-staking-comparison-with-other-options")}
-      </OldHeading>
+      </h2>
       {selectedData.map(
-        ({ title, linkText, href, color, content, glyph, matomo }, idx) => (
+        (
+          { title, linkText, href, colorClassName, content, glyph, matomo },
+          idx
+        ) => (
           <Flex className="flex-col gap-6 md:flex-row" key={idx}>
             {!!glyph && (
               <Flex className="max-h-12 w-12 flex-col items-center justify-start">
                 {glyph}
               </Flex>
             )}
-            <Box>
-              <Heading as="h3" fontSize="2xl" color={color} mb={2}>
+            <div>
+              <h3 className={cn("mb-2 text-2xl", colorClassName)}>
                 {t(title)}
-              </Heading>
-              <Text>{t(content)}</Text>
+              </h3>
+              <p>{t(content)}</p>
               <InlineLink
                 onClick={() => {
                   trackCustomEvent(matomo)
@@ -155,7 +147,7 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
               >
                 {t(linkText)}
               </InlineLink>
-            </Box>
+            </div>
           </Flex>
         )
       )}

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 }) => (
-  <Center gridArea="ether" zIndex={2} maxW={20} width="full" mx="auto">
-    <StakingGlyphEtherCircleIcon
-      boxSize={size}
-      color={$colorVar.reference}
-      sx={{
-        "#transparentBackground": {
-          fill: $fillColorVar.reference,
-        },
-      }}
-    />
-  </Center>
-)
+const StyledEtherSvg = ({ className = "size-full" }: { className: string }) => {
+  return (
+    <Center gridArea="ether" zIndex={2} maxW={20} width="full" mx="auto">
+      <StakingGlyphEtherCircleIcon className={className} />
+    </Center>
+  )
+}
 
 const Line = () => {
   // TODO: Remove after completion of the Chakra migration
@@ -211,7 +206,7 @@ const Pills = ({ children }: ChildOnlyProp) => (
   </Flex>
 )
 
-type GlyphProps = { glyphIcon: typeof Icon }
+type GlyphProps = { glyphIcon: typeof IconBase }
 const Glyph = ({ glyphIcon }: GlyphProps) => (
   <Center gridArea={{ base: "content", md: "glyph" }}>
     <Icon
@@ -262,7 +257,7 @@ const StakingHierarchy = () => {
       }}
     >
       <SectionGrid number={1}>
-        <StyledEtherSvg size="100%" />
+        <StyledEtherSvg className="size-[100%] text-staking-gold" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-hierarchy-solo-h2")}</HeadingEl>
@@ -300,7 +295,7 @@ const StakingHierarchy = () => {
         </Content>
       </SectionGrid>
       <SectionGrid number={2}>
-        <StyledEtherSvg size="90%" />
+        <StyledEtherSvg className="size-[90%] text-staking-green" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-dropdown-saas")}</HeadingEl>
@@ -333,7 +328,7 @@ const StakingHierarchy = () => {
         </Content>
       </SectionGrid>
       <SectionGrid number={3}>
-        <StyledEtherSvg size="80%" />
+        <StyledEtherSvg className="size-[80%] text-staking-blue" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-dropdown-pools")}</HeadingEl>
@@ -378,7 +373,7 @@ const StakingHierarchy = () => {
         </Content>
       </SectionGrid>
       <SectionGrid number={4}>
-        <StyledEtherSvg size="70%" />
+        <StyledEtherSvg className="size-[70%] text-staking-red" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-hierarchy-cex-h2")}</HeadingEl>

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: (
+    <path 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" />
+  ),
 })

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: (
+    <path 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" />
+  ),
 })

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: (
+    <path 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" />
+  ),
 })