Shadcn migration - PageHero

src/components/Logo/Logo.stories.tsx

@@ -13,7 +13,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Logo: Story = {
-    render: () => (
-        <LogoComponent />
-    ),
-}
+  render: () => <LogoComponent />,
+}

src/components/PageHero.tsx

@@ -1,16 +1,17 @@
 import type { ReactNode } from "react"
-import { Box, Center, Flex, Heading, Wrap, WrapItem } from "@chakra-ui/react"
+
+import { type ImageProps, TwImage } from "@/components/Image"
+
+import { cn } from "@/lib/utils/cn"
+import { type MatomoEventOptions } from "@/lib/utils/matomo"
 
 import {
   Button,
   ButtonLink,
-  type ButtonLinkProps,
-  type ButtonProps,
-} from "@/components/Buttons"
-import { Image, type ImageProps } from "@/components/Image"
-import Text from "@/components/OldText"
-
-import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+  ButtonLinkProps,
+  ButtonProps,
+} from "./ui/buttons/Button"
+import { Center, Flex } from "./ui/flex"
 
 type ButtonLinkType = Omit<ButtonLinkProps, "content"> & {
   content: ReactNode
@@ -48,113 +49,89 @@ const PageHero = ({
   children,
   className,
 }: PageHeroProps) => (
-  <Box py={4} px={8} width="full">
+  <div className="w-full px-8 py-4">
     <Flex
-      justifyContent="space-between"
-      mt={8}
-      px={{ base: 0, lg: 16 }}
-      direction={{ base: isReverse ? "column" : "column-reverse", lg: "row" }}
-      className={className}
+      className={cn(
+        "mt-8 justify-between px-0 lg:px-16",
+        isReverse ? "flex-col" : "flex-col-reverse",
+        "lg:flex-row",
+        className
+      )}
     >
-      <Box
-        maxW={{ base: "full", lg: "container.sm" }}
-        pt={{ base: isReverse ? 0 : 8, lg: 16 }}
-        pb={{ base: isReverse ? 8 : 0, lg: 32 }}
-        ps={{ base: 0, lg: 8 }}
-        me={{ base: 0, lg: 4 }}
+      <div
+        className={cn(
+          "max-w-full lg:max-w-[640px]",
+          isReverse ? "pb-8 pt-0" : "pb-0 pt-8",
+          "lg:pb-32 lg:pt-16",
+          "ps-0 lg:ps-8",
+          "me-0 lg:me-4"
+        )}
       >
-        <Heading
-          as="h1"
-          textTransform="uppercase"
-          fontSize="md"
-          fontWeight="normal"
-          mt={{ base: 0, lg: 8 }}
-          mb={4}
-          color="text300"
-          lineHeight={1.4}
-        >
+        <h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-xs lg:mt-8">
           {title}
-        </Heading>
-        <Heading
-          as="h2"
-          fontWeight="bold"
-          fontSize={{ base: "2.5rem", lg: "5xl" }}
-          maxW="full"
-          mb={0}
-          mt={{ base: 8, lg: 12 }}
-          color="text00"
-          lineHeight={1.4}
-        >
+        </h1>
+
+        <h2 className="mb-0 mt-8 max-w-full text-[2.5rem] font-bold !leading-xs lg:mt-12 lg:text-5xl">
           {header}
-        </Heading>
-        <Text
-          fontSize={{ base: "xl", lg: "2xl" }}
-          lineHeight={1.4}
-          color="text200"
-          mt={4}
-          mb={8}
-        >
-          {subtitle}
-        </Text>
+        </h2>
+        <p className="mb-8 mt-4 text-xl !leading-xs lg:text-2xl">{subtitle}</p>
+
         {buttons && (
-          <Wrap spacing={2} overflow="visible" sx={{ ul: { m: 0 } }}>
+          <Flex className="gap-2 overflow-visible [&_ul]:m-0">
             {buttons.map((button, idx) => {
               const isSecondary = idx !== 0
               if (isButtonLink(button)) {
                 return (
-                  <WrapItem key={idx}>
+                  <div key={idx}>
                     <ButtonLink
                       variant={button.variant}
                       href={button.href}
-                      onClick={() =>
-                        trackCustomEvent({
-                          eventCategory: button.matomo.eventCategory,
-                          eventAction: button.matomo.eventAction,
-                          eventName: button.matomo.eventName,
-                        })
-                      }
+                      customEventOptions={{
+                        eventCategory: button.matomo.eventCategory,
+                        eventAction: button.matomo.eventAction,
+                        eventName: button.matomo.eventName,
+                      }}
                       isSecondary={isSecondary}
                     >
                       {button.content}
                     </ButtonLink>
-                  </WrapItem>
+                  </div>
                 )
               }
 
               if (button.toId) {
                 return (
-                  <WrapItem key={idx}>
+                  <div key={idx}>
                     <Button
                       variant={button.variant}
                       toId={button.toId}
-                      onClick={() =>
-                        trackCustomEvent({
-                          eventCategory: button.matomo.eventCategory,
-                          eventAction: button.matomo.eventAction,
-                          eventName: button.matomo.eventName,
-                        })
-                      }
+                      customEventOptions={{
+                        eventCategory: button.matomo.eventCategory,
+                        eventAction: button.matomo.eventAction,
+                        eventName: button.matomo.eventName,
+                      }}
                       isSecondary={isSecondary}
                     >
                       {button.content}
                     </Button>
-                  </WrapItem>
+                  </div>
                 )
               }
             })}
-          </Wrap>
+          </Flex>
         )}
         {children}
-      </Box>
+      </div>
       <Center
-        flex="1 1 50%"
-        maxWidth={{ base: "560px", lg: "624px" }}
-        mt={{ base: 0, lg: 12 }}
-        ms={{ base: 0, lg: 12 }}
-        w="full"
-        alignSelf="center"
+        className={cn(
+          "flex-[1_1_50%]",
+          "max-w-[560px] lg:max-w-[624px]",
+          "mt-0 lg:mt-12",
+          "ms-0 lg:ms-12",
+          "w-full self-center"
+        )}
       >
-        <Image
+        <TwImage
           src={image}
           // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
           sizes="(max-width: 992px) 100vw, 624px"
@@ -168,7 +145,7 @@ const PageHero = ({
         />
       </Center>
     </Flex>
-  </Box>
+  </div>
 )
 
 export default PageHero

src/data/wallets/wallet-data.ts

@@ -572,7 +572,8 @@ export const walletsData: WalletData[] = [
     withdraw_crypto: false,
     multisig: false,
     social_recovery: false,
-    onboard_documentation: "https://support.token.im/hc/categories/360000925393",
+    onboard_documentation:
+      "https://support.token.im/hc/categories/360000925393",
     documentation: "https://support.token.im/hc/en-us",
   },
   {
@@ -1259,7 +1260,19 @@ export const walletsData: WalletData[] = [
     brand_color: "#FFFFFF",
     url: "https://rabby.io",
     active_development_team: true,
-    languages_supported: ["en", "de", "es", "fr", "ja", "pt", "ru", "tr", "ua", "zh", "zh-hk"],
+    languages_supported: [
+      "en",
+      "de",
+      "es",
+      "fr",
+      "ja",
+      "pt",
+      "ru",
+      "tr",
+      "ua",
+      "zh",
+      "zh-hk",
+    ],
     twitter: "https://twitter.com/Rabby_io",
     discord: "https://discord.com/invite/seFBCWmUre",
     reddit: "",
@@ -1278,7 +1291,7 @@ export const walletsData: WalletData[] = [
     security_audit: [
       "https://github.com/RabbyHub/Rabby/blob/develop/docs/SlowMist%20Audit%20Report%20-%20Rabby%20Wallet-2023.07.20.pdf",
       "https://github.com/RabbyHub/Rabby/blob/develop/docs/SlowMist%20Audit%20Report%20-%20Rabby%20browser%20extension%20wallet-2022.03.18.pdf",
-      "https://github.com/RabbyHub/Rabby/blob/develop/docs/Rabby%20chrome%20extension%20Penetration%20Testing%20Report.pdf"
+      "https://github.com/RabbyHub/Rabby/blob/develop/docs/Rabby%20chrome%20extension%20Penetration%20Testing%20Report.pdf",
     ],
     scam_protection: true,
     hardware_support: true,

src/pages/dapps.tsx

@@ -1343,7 +1343,7 @@ const DappsPage = () => {
       {
         content: t("page-dapps-what-are-dapps"),
         href: "#what-are-dapps",
-        variant: "outline",
+        variant: "outline" as const,
         matomo: {
           eventCategory: "dapp hero buttons",
           eventAction: "click",

src/pages/stablecoins.tsx

@@ -394,7 +394,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       {
         content: t("page-stablecoins-how-they-work-button"),
         toId: "how",
-        variant: "outline",
+        variant: "outline" as const,
         matomo: {
           eventCategory: "stablecoins hero buttons",
           eventAction: "click",

src/pages/wallets/index.tsx

@@ -183,7 +183,7 @@ const WalletsPage = () => {
                 eventAction: "click",
                 eventName: "How_to_use_wallet",
               },
-              variant: "outline",
+              variant: "outline" as const,
             },
           ]
         : [

src/styles/global.css

@@ -204,7 +204,7 @@
   }
 
   a {
-    @apply underline-offset-3 text-primary underline hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
+    @apply text-primary underline underline-offset-3 hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
   }
 
   h1,

tailwind.config.ts

@@ -102,7 +102,6 @@ const config = {
           800: "var(--orange-800)",
           900: "var(--orange-900)",
         },
-
         primary: {
           DEFAULT: "var(--primary)",
           "high-contrast": "var(--primary-high-contrast)",