Merge pull request #14808 from TylerAPfledderer/feat/shadcn-migrate-simulator-create-account-screen

[ShadCN]: Migrate CreateAccount Screen

Author: pettinarip

src/components/Simulator/__stories__/PhoneDecorator.tsx

@@ -0,0 +1,16 @@
+import type { Decorator } from "@storybook/react"
+
+import { Phone } from "../Phone"
+import { Template } from "../Template"
+
+export const PhoneDecorator: Decorator = (Story) => {
+  return (
+    <div className="mx-auto mt-8">
+      <Template>
+        <Phone>
+          <Story />
+        </Phone>
+      </Template>
+    </div>
+  )
+}

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

@@ -1,10 +1,14 @@
 import React, { useEffect, useState } from "react"
 import { motion } from "framer-motion"
 import { PiCheckThin } from "react-icons/pi"
-import { Flex, Grid, Icon, Spinner, Text } from "@chakra-ui/react"
 
 import type { PhoneScreenProps } from "@/lib/types"
 
+import { Flex } from "@/components/ui/flex"
+import { Spinner } from "@/components/ui/spinner"
+
+import { cn } from "@/lib/utils/cn"
+
 import { ProgressCta } from "../../ProgressCta"
 
 import {
@@ -48,16 +52,17 @@ export const GeneratingKeys = ({
   }, [loading])
 
   return (
-    <Grid placeItems="center" h="full" bg="background.highlight">
-      <Flex direction="column" alignItems="center" gap={4}>
+    <div className="grid h-full place-items-center bg-background-highlight">
+      <Flex className="flex-col items-center gap-4">
         {loading ? (
           <motion.div
             key="spinner"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5 }}
+            data-testid="loading-spinner"
           >
-            <Spinner w={SPINNER_SIZE} h={SPINNER_SIZE} />
+            <Spinner className={SPINNER_SIZE} />
           </motion.div>
         ) : (
           <motion.div
@@ -66,36 +71,32 @@ export const GeneratingKeys = ({
             animate={{ scale: 1 }}
             transition={{ type: "spring", delay: 0.25 }}
           >
-            <Icon
-              as={PiCheckThin}
-              w={SPINNER_SIZE}
-              h={SPINNER_SIZE}
-              transform="rotate(-10deg)"
-            />
+            <PiCheckThin className={cn(SPINNER_SIZE, "-rotate-[10deg]")} />
           </motion.div>
         )}
 
-        <Text textAlign="center" px={{ base: 4, md: 8 }}>
+        <p className="px-4 text-center md:px-8">
           {loading
             ? "Generating example recovery phrase"
             : "Example account created"}
-        </Text>
+        </p>
         {complete && (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: BUTTON_FADE_DURATION * 1e-3 }}
-            style={{ position: "absolute", bottom: 0, width: "100%" }}
+            className="absolute bottom-0 w-full"
           >
             <ProgressCta
               className="inset-x-0"
               progressStepper={progressStepper}
+              data-testid="generating-keys-cta"
             >
               {ctaLabel}
             </ProgressCta>
           </motion.div>
         )}
       </Flex>
-    </Grid>
+    </div>
   )
 }

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

@@ -1,88 +1,55 @@
-import React from "react"
+import { type HTMLAttributes } from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import { MdArrowDownward } from "react-icons/md"
-import { Box, Grid, GridProps, Icon, useColorModeValue } from "@chakra-ui/react"
 
 import type { SimulatorNavProps } from "@/lib/types"
 
+import { cn } from "@/lib/utils/cn"
+
 import { EthGlyphIcon } from "../../icons"
 
-type HomeScreenProps = GridProps & SimulatorNavProps
+type HomeScreenProps = HTMLAttributes<HTMLDivElement> & SimulatorNavProps
 
 export const HomeScreen = ({ nav, ...props }: HomeScreenProps) => {
-  const gridShadow = useColorModeValue(
-    "0 0 7px 0 var(--eth-colors-blackAlpha-800)",
-    "0 0 7px 0 var(--eth-colors-whiteAlpha-800)"
-  )
-
   const { step } = nav
   const ICON_COUNT = 8
-  const sharedIconStyles = {
-    w: "full",
-    aspectRatio: 1,
-    borderRadius: "xl",
-    placeItems: "center",
-    transition:
-      "background-color 2000ms ease-in-out, border 200ms ease-in--out",
-    border: "2px solid transparent",
-  } as const
+  const sharedIconClasses =
+    "w-full aspect-square rounded-xl place-items-center duration-200 transition-[border,background-color] border-2 border-transparent"
   return (
-    <Grid
-      px={6}
-      py={8}
-      w="full"
-      gap={5}
-      templateColumns="repeat(4, 1fr)"
-      {...props}
-    >
+    <div className="grid w-full grid-cols-4 gap-5 px-6 py-8" {...props}>
       {Array(ICON_COUNT)
         .fill(0)
         .map((_, i) => (
-          <Box key={i} {...sharedIconStyles} bg="body.light" />
+          <div key={i} className={cn("bg-body-light", sharedIconClasses)} />
         ))}
       <AnimatePresence>
         {step === 1 ? (
-          <Grid
-            as={motion.button}
+          <motion.button
+            className={cn(
+              "hover:outline-primary-hover, grid border-body bg-body shadow-md duration-300 hover:outline hover:outline-2 hover:outline-offset-2",
+              sharedIconClasses
+            )}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            {...sharedIconStyles}
             onClick={nav.progressStepper}
-            transitionDuration="0.3s"
-            bg="body.base"
-            borderColor="body.base"
-            boxShadow={gridShadow}
-            _hover={{
-              outline: "2px solid var(--eth-colors-primary-hover)",
-              outlineOffset: "2px",
-            }}
           >
-            <Icon
-              as={EthGlyphIcon}
-              color="background.base"
-              fontSize={{ base: "2xl", sm: "3xl" }}
-            />
-          </Grid>
+            {/* TODO: remove important flag from classes when icons are migrated */}
+            <EthGlyphIcon className="!size-[1em] !text-2xl !text-background sm:!text-3xl" />
+          </motion.button>
         ) : (
-          <Grid
-            as={motion.div}
+          <motion.div
+            className={cn(
+              sharedIconClasses,
+              "grid border-dashed border-disabled bg-background duration-200"
+            )}
             initial={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transitionDuration="0.2s"
-            {...sharedIconStyles}
-            bg="background.base"
-            borderStyle="dashed"
-            borderColor="disabled"
           >
-            <Icon
-              as={MdArrowDownward}
-              color="disabled"
-              fontSize={{ base: "2xl", sm: "3xl" }}
-            />
-          </Grid>
+            <MdArrowDownward className="!size-[1em] !text-2xl !text-disabled sm:!text-3xl" />
+          </motion.div>
         )}
       </AnimatePresence>
-    </Grid>
+    </div>
   )
 }

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

@@ -1,24 +1,15 @@
-import React from "react"
-import { Box, Text } from "@chakra-ui/react"
-
 import { WordList } from "./WordList"
 
 type InitialWordDisplayProps = {
   words: Array<string>
 }
 export const InitialWordDisplay = ({ words }: InitialWordDisplayProps) => (
-  <Box bg="background.highlight">
-    <Box py={8}>
-      <Text
-        fontSize={{ base: "xl", md: "2xl" }}
-        lineHeight={8}
-        fontWeight="bold"
-        px={{ base: 4, md: 8 }}
-        mb={{ base: 0, md: 6 }}
-      >
+  <div className="bg-background-highlight">
+    <div className="py-8">
+      <p className="px-4 text-xl font-bold leading-8 md:mb-6 md:px-8 md:text-2xl">
         Recovery phrase example
-      </Text>
-    </Box>
+      </p>
+    </div>
     <WordList words={words} />
-  </Box>
+  </div>
 )

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

@@ -1,5 +1,4 @@
-import React, { useState } from "react"
-import { Box, Text } from "@chakra-ui/react"
+import { useState } from "react"
 
 import { PhoneScreenProps } from "@/lib/types"
 
@@ -20,17 +19,10 @@ export const InteractiveWordSelector = ({
   const { progressStepper } = nav
   const [wordsSelected, setWordsSelected] = useState(0)
   return (
-    <Box mt={8}>
-      <Text
-        display={{ base: "none", md: "block" }}
-        fontSize="2xl"
-        lineHeight={8}
-        fontWeight="bold"
-        px={{ base: 4, md: 8 }}
-        mb={4}
-      >
+    <div className="mt-8">
+      <p className="mb-4 px-4 text-2xl font-bold leading-8 max-md:hidden md:px-8">
         Repeat the words
-      </Text>
+      </p>
       <WordList words={words} wordsSelected={wordsSelected} />
       {wordsSelected < words.length ? (
         <WordSelectorButtons
@@ -39,8 +31,13 @@ export const InteractiveWordSelector = ({
           setWordsSelected={setWordsSelected}
         />
       ) : (
-        <ProgressCta progressStepper={progressStepper}>{ctaLabel}</ProgressCta>
+        <ProgressCta
+          data-testid="word-selector-cta"
+          progressStepper={progressStepper}
+        >
+          {ctaLabel}
+        </ProgressCta>
       )}
-    </Box>
+    </div>
   )
 }

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

@@ -1,31 +1,18 @@
-import React from "react"
 import { motion } from "framer-motion"
-import { Box, Text } from "@chakra-ui/react"
-
-const MotionBox = motion(Box)
 
 export const RecoveryPhraseNotice = () => (
-  <MotionBox
+  <motion.div
+    className="h-full bg-background-highlight px-4 py-8 text-sm md:px-8 md:text-md [&_p]:mb-4 [&_p]:md:mb-6"
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.25 }}
-    py={8}
-    px={{ base: 4, md: 8 }}
-    h="full"
-    bg="background.highlight"
-    fontSize={{ base: "sm", md: "md" }}
-    sx={{ p: { mb: { base: 4, md: 6 } } }}
   >
-    <Text fontSize={{ base: "xl", md: "2xl" }} lineHeight={8} fontWeight="bold">
-      Recovery phrase
-    </Text>
-    <Text>
+    <p className="text-xl font-bold leading-8 md:text-2xl">Recovery phrase</p>
+    <p>
       Any person knowing this <strong>secret</strong> recovery phrase can make
       transactions on behalf of your account.
-    </Text>
-    <Text>
-      Wallet app providers do not have access to your account—only you do.
-    </Text>
-    <Text fontWeight="bold">You must back it up safely.</Text>
-  </MotionBox>
+    </p>
+    <p>Wallet app providers do not have access to your account—only you do.</p>
+    <p className="font-bold">You must back it up safely.</p>
+  </motion.div>
 )

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

@@ -1,39 +1,23 @@
-import React from "react"
 import { motion } from "framer-motion"
-import { Flex, Icon, Text } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { EthGlyphIcon } from "../../icons"
 
 const MotionFlex = motion(Flex)
 
 export const WelcomeScreen = () => (
   <MotionFlex
-    direction="column"
-    alignItems="center"
-    pt={16}
-    h="full"
-    bg="background.highlight"
+    className="h-full flex-col items-center bg-background-highlight pt-16"
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.8 }}
   >
-    <Icon
-      as={EthGlyphIcon}
-      color="body.base"
-      height={{ base: "110px", md: "190px" }}
-      w="auto"
-      my={4}
-    />
-    <Text
-      fontSize="2xl"
-      textAlign="center"
-      px={{ base: 4, md: 8 }}
-      lineHeight={8}
-    >
+    {/* TODO: remove important flag from classes when icons are migrated */}
+    <EthGlyphIcon className="!my-4 !h-[110px] !w-auto !text-body md:!h-[190px]" />
+    <p className="px-4 text-center text-2xl leading-8 md:px-8">
       Welcome to
-      <Text as="span" display="block" fontWeight="bold">
-        wallet simulator
-      </Text>
-    </Text>
+      <span className="block font-bold">wallet simulator</span>
+    </p>
   </MotionFlex>
 )