Merge pull request #14861 from TylerAPfledderer/feat/shadcn-connectweb3-simulator-screen

[ShadCN]: migrate ConnectWeb3 Simulator Screen

Author: pettinarip

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

@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from "react"
+import React, { type HTMLAttributes, useEffect, useState } from "react"
 import { motion } from "framer-motion"
 import { BsTriangle } from "react-icons/bs"
 import { IoEllipsisHorizontalSharp } from "react-icons/io5"
 import { PiMagnifyingGlass } from "react-icons/pi"
 import { TbWorldWww } from "react-icons/tb"
-import { Box, Flex, type FlexProps, Icon, Text } from "@chakra-ui/react"
+
+import { Flex, HStack } from "@/components/ui/flex"
 
 import { BASE_ANIMATION_DELAY_SEC } from "../../constants"
 import { NotificationPopover } from "../../NotificationPopover"
 
 import { EXAMPLE_APP_URL } from "./constants"
 
-type BrowserProps = FlexProps
+type BrowserProps = HTMLAttributes<HTMLDivElement>
 
 export const Browser = ({ ...props }: BrowserProps) => {
   const [typing, setTyping] = useState(false)
@@ -35,67 +36,45 @@ export const Browser = ({ ...props }: BrowserProps) => {
   }
 
   return (
-    <Flex direction="column" h="full" bg="body.light" {...props}>
-      <Box bg="background.highlight" w="full" px={3} pt={9} pb={3}>
+    <Flex className="h-full flex-col bg-body-light" {...props}>
+      <div className="w-full bg-background-highlight px-3 pb-3 pt-9">
         <NotificationPopover
           title="Example walkthrough"
           content="Try logging into a real app with your wallet when finished here"
         >
-          <Flex
-            bg="background.base"
-            borderRadius="base"
-            px={3}
-            py={2}
-            align="center"
-            color="disabled"
-            cursor="default"
-          >
-            <Box
-              borderInlineEnd="1px"
-              borderColor="background.highlight"
-              flex={1}
-            >
+          <HStack className="cursor-default gap-0 rounded bg-background px-3 py-2 text-disabled">
+            <div className="flex-1 border-e border-background-highlight">
               {typing ? (
-                <Text
-                  as={motion.p}
+                <motion.p
+                  className="text-body-medium"
                   variants={sentence}
                   initial="hidden"
                   animate="visible"
-                  color="body.medium"
                 >
                   {EXAMPLE_APP_URL.split("").map((char, index) => (
                     <motion.span key={char + "-" + index} variants={letter}>
                       {char}
                     </motion.span>
                   ))}
-                </Text>
+                </motion.p>
               ) : (
-                <Text>Search or enter website</Text>
+                <p>Search or enter website</p>
               )}
-            </Box>
-            <Icon as={TbWorldWww} ms={3} />
-          </Flex>
+            </div>
+            <TbWorldWww className="ms-3" />
+          </HStack>
         </NotificationPopover>
-      </Box>
+      </div>
 
-      <Flex flex={1} justify="center" pt={{ base: 20, md: 24 }}>
-        <Icon as={TbWorldWww} fontSize="8xl" strokeWidth="1" color="disabled" />
+      <Flex className="flex-1 justify-center pt-20 md:pt-24">
+        <TbWorldWww className="stroke-1 text-8xl text-disabled" />
       </Flex>
 
-      <Flex
-        bg="background.highlight"
-        w="full"
-        px={3}
-        pb={9}
-        pt={4}
-        justify="space-around"
-        fontSize="xl"
-        color="disabled"
-      >
-        <Icon as={BsTriangle} transform="rotate(-90deg)" />
-        <Icon as={BsTriangle} transform="rotate(90deg)" />
-        <Icon as={PiMagnifyingGlass} />
-        <Icon as={IoEllipsisHorizontalSharp} />
+      <Flex className="w-full justify-around bg-background-highlight px-3 pb-9 pt-4 text-xl text-disabled">
+        <BsTriangle className="-rotate-90" />
+        <BsTriangle className="rotate-90" />
+        <PiMagnifyingGlass />
+        <IoEllipsisHorizontalSharp />
       </Flex>
     </Flex>
   )

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

@@ -1,111 +1,75 @@
-import React from "react"
+import { type ReactNode } from "react"
 import { motion } from "framer-motion"
 import { PiCheckThin } from "react-icons/pi"
-import { Box, Flex, Grid, Icon, Text, TextProps } from "@chakra-ui/react"
+
+import { HStack, VStack } from "@/components/ui/flex"
 
 import { EthGlyphIcon } from "../../icons"
 
-type SliderProps = Pick<TextProps, "children"> & {
+type SliderProps = {
   isConnected: boolean
   displayUrl: string
+  children: ReactNode
 }
 export const Slider = ({ isConnected, displayUrl, children }: SliderProps) => {
-  const ICON_SIZE = "4.5rem" as const
   return (
     <>
-      <Box
+      <motion.div
         key="backdrop"
-        as={motion.div}
-        position="absolute"
-        inset={0}
-        bg="blackAlpha.300"
-        backdropFilter="blur(2px)"
+        className="absolute inset-0 bg-black/15 backdrop-blur-[2px]"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
       />
       <motion.div
         key="slider"
-        style={{ position: "absolute", height: "360px", width: "100%" }}
+        className="absolute h-[360px] w-full"
         initial={{ bottom: "-100%" }}
         animate={{ bottom: 0 }}
         exit={{ bottom: "-100%" }}
         transition={{ duration: 0.75, ease: "easeOut" }}
+        data-testid="slider-box"
       >
-        <Flex
-          direction="column"
-          alignItems="center"
-          px={6}
-          py={8}
-          h="full"
-          w="full"
-          bg="background.base"
-          borderTopRadius="2xl"
-        >
+        <VStack className="size-full gap-0 rounded-t-2xl bg-background px-6 py-8">
           {isConnected ? (
-            <Flex direction="column" alignItems="center" pt={8} gap={4}>
+            <VStack className="gap-4 pt-8">
               <motion.div
                 key="checkmark"
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
                 transition={{ type: "spring", delay: 0.25 }}
               >
-                <Icon
-                  as={PiCheckThin}
-                  w={ICON_SIZE}
-                  h={ICON_SIZE}
-                  transform="rotate(-10deg)"
-                />
+                <PiCheckThin className="-rotate-[10deg] text-[4.5rem]" />
               </motion.div>
               <motion.div
                 key="text"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.15 }}
               >
-                <Text textAlign="center" px={{ base: 4, md: 8 }}>
+                <p className="px-4 text-center md:px-8">
                   You&apos;re logged in!
-                </Text>
+                </p>
               </motion.div>
-            </Flex>
+            </VStack>
           ) : (
             <>
-              <Text textAlign="center" fontWeight="bold" fontSize="lg" mb={4}>
+              <p className="mb-4 text-center text-lg font-bold">
                 Connect account?
-              </Text>
+              </p>
               {/* URL Pill */}
-              <Flex
-                bg="blackAlpha.200"
-                px={2}
-                py={1}
-                borderRadius="full"
-                fontSize="xs"
-                alignItems="center"
-                gap={2}
-                mb={6}
-              >
-                <Grid
-                  borderRadius="full"
-                  bg="body.base"
-                  w={5}
-                  h={5}
-                  placeItems="center"
-                >
-                  <Icon
-                    as={EthGlyphIcon}
-                    color="background.base"
-                    fontSize="sm"
-                  />
-                </Grid>
-                <Text mb={0} me={0.5}>
-                  {displayUrl}
-                </Text>
-              </Flex>
+              <HStack className="mb-6 rounded-full bg-black/5 px-2 py-1 text-xs">
+                <div className="grid size-5 place-items-center rounded-full bg-body">
+                  {/* TODO: Remove important flags and `size` class when icon is migrated */}
+                  <EthGlyphIcon className="!size-[1em] !text-sm !text-background" />
+                </div>
+                <p className="me-0.5">{displayUrl}</p>
+              </HStack>
               {/* Information */}
-              <Text>{children}</Text>
+              <p>{children}</p>
             </>
           )}
-        </Flex>
+        </VStack>
       </motion.div>
     </>
   )

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

@@ -1,57 +1,52 @@
-import React from "react"
+import React, { type HTMLAttributes } from "react"
 import { GrMenu } from "react-icons/gr"
-import {
-  Box,
-  type BoxProps,
-  Flex,
-  Icon,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react"
+
+import { HStack } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { EthGlyphIcon } from "../../icons"
 import { NotificationPopover } from "../../NotificationPopover"
 
-type Web3AppProps = BoxProps & {
+type Web3AppProps = HTMLAttributes<HTMLDivElement> & {
   displayUrl: string
   appName?: string
 }
 export const Web3App = ({
   displayUrl,
   appName,
   children,
-  ...boxProps
+  className,
+  ...rest
 }: Web3AppProps) => {
-  const bg = useColorModeValue("#e8e8e8", "#171717")
-
   return (
-    <Box h="full" w="full" bg="background.highlight" {...boxProps}>
-      <Box p={1} bg={bg}>
-        <Text textAlign="center" fontSize="xs" m={0}>
-          {displayUrl}
-        </Text>
-      </Box>
+    <div
+      className={cn("size-full bg-background-highlight", className)}
+      {...rest}
+    >
+      <div className="bg-[#e8e8e8] p-1 dark:bg-[#171717]">
+        <p className="text-center text-xs">{displayUrl}</p>
+      </div>
       <NotificationPopover
         title="Example walkthrough"
         content="Try out a real Ethereum application when finished here"
       >
-        <Flex p={6} fontSize="4xl" gap={3} alignItems="center">
-          <Icon as={EthGlyphIcon} />
-          <Box flex={1} cursor="default">
+        <HStack className="gap-3 p-6 text-4xl">
+          {/* TODO: Remove 'size' class when icon is migrated */}
+          <EthGlyphIcon className="!size-[1em]" />
+          <div className="flex-1 cursor-default">
             {appName && (
               <>
-                <Text fontSize="md" fontWeight="bold">
-                  {appName}
-                </Text>
-                <Text fontSize="sm">{FAKE_DEMO_ADDRESS}</Text>
+                <p className="text-md font-bold">{appName}</p>
+                <p className="text-sm">{FAKE_DEMO_ADDRESS}</p>
               </>
             )}
-          </Box>
-          <Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
-        </Flex>
+          </div>
+          <GrMenu className="[&>path]:stroke-body" />
+        </HStack>
       </NotificationPopover>
       {children}
-    </Box>
+    </div>
   )
 }