feat(Simulator/screens/Web3App): migrate to Tailwind

Author: TylerAPfledderer

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

@@ -1,57 +1,46 @@
-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 { 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
+  ...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="size-full bg-background-highlight" {...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>
   )
 }