feat(Simulator/ProgressCta): migrate to ShadCN

Author: TylerAPfledderer

src/components/Simulator/ProgressCta.tsx

@@ -1,38 +1,38 @@
-import React from "react"
+import React, { type ComponentPropsWithoutRef } from "react"
 import { motion } from "framer-motion"
-import { Button, ButtonProps, Flex, type FlexProps } from "@chakra-ui/react"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Button, type ButtonProps } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
 
 import { ClickAnimation } from "./ClickAnimation"
 import { PulseAnimation } from "./PulseAnimation"
 
 const MotionFlex = motion(Flex)
 
-type ProgressCtaProps = FlexProps &
-  Pick<ButtonProps, "isDisabled"> & {
+type ProgressCtaProps = ComponentPropsWithoutRef<typeof MotionFlex> &
+  Pick<ButtonProps, "disabled"> & {
     isAnimated?: boolean
     progressStepper: () => void
   }
 export const ProgressCta = ({
   isAnimated = false,
   progressStepper,
-  isDisabled,
+  disabled,
   children,
+  className,
   ...flexProps
 }: ProgressCtaProps) => (
   <MotionFlex
-    py={10}
-    px={6}
-    position="absolute"
-    w="full"
-    bottom="0"
+    className={cn("absolute bottom-0 w-full px-6 py-10", className)}
     initial={{ opacity: 1 }}
     {...flexProps}
   >
     <Button
-      w="full"
+      className="relative w-full"
       onClick={progressStepper}
-      isDisabled={isDisabled}
-      position="relative"
+      disabled={disabled}
     >
       <>
         {children}

src/components/Simulator/screens/ConnectWeb3/index.tsx

@@ -207,10 +207,10 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
       )}
       {[0, 1, 2, 3, 4].includes(step) && (
         <ProgressCta
+          className={step === 0 ? "mb-16" : "mb-0"}
           isAnimated={step === 0}
-          isDisabled={ctaDisabled}
+          disabled={ctaDisabled}
           progressStepper={progressStepper}
-          mb={step === 0 ? 16 : 0}
         >
           {ctaLabel}
         </ProgressCta>

src/components/Simulator/screens/CreateAccount/GeneratingKeys.tsx

@@ -87,7 +87,10 @@ export const GeneratingKeys = ({
             transition={{ duration: BUTTON_FADE_DURATION * 1e-3 }}
             style={{ position: "absolute", bottom: 0, width: "100%" }}
           >
-            <ProgressCta progressStepper={progressStepper} insetInline={0}>
+            <ProgressCta
+              className="inset-x-0"
+              progressStepper={progressStepper}
+            >
               {ctaLabel}
             </ProgressCta>
           </motion.div>

src/components/Simulator/screens/CreateAccount/index.tsx

@@ -48,7 +48,9 @@ export const CreateAccount = ({ nav, ctaLabel }: PhoneScreenProps) => {
         <ProgressCta
           isAnimated={step === 0}
           progressStepper={progressStepper}
-          bg={[5].includes(step) ? "background.base" : "background.highlight"}
+          className={
+            [5].includes(step) ? "bg-background" : "bg-background-highlight"
+          }
         >
           {ctaLabel}
         </ProgressCta>

src/components/Simulator/screens/SendReceive/index.tsx

@@ -103,7 +103,7 @@ export const SendReceive = ({ nav, ctaLabel }: PhoneScreenProps) => {
       {[1, 3, 5].includes(step) && (
         <ProgressCta
           isAnimated={step === 0}
-          isDisabled={step === 3 && !chosenAmount}
+          disabled={step === 3 && !chosenAmount}
           progressStepper={progressStepper}
         >
           {ctaLabel}