feat(Simulator/WalletHome/SendReceiveButtons): migrate to Tailwind

Author: TylerAPfledderer

src/components/Simulator/WalletHome/SendReceiveButton.tsx

@@ -1,80 +1,63 @@
-import React from "react"
-import {
-  type As,
-  Box,
-  Grid,
-  Icon,
-  Text,
-  type TextProps,
-} from "@chakra-ui/react"
+import { type ReactNode } from "react"
+import type { IconType } from "react-icons/lib"
+
+import { Button } from "@/components/ui/buttons/Button"
+
+import { cn } from "@/lib/utils/cn"
 
-import { Button } from "../../Buttons"
 import { ClickAnimation } from "../ClickAnimation"
 import { PulseAnimation } from "../PulseAnimation"
 
-type SendReceiveButtonProps = Pick<TextProps, "children"> & {
-  icon: As
+type SendReceiveButtonProps = {
+  icon: IconType
   isHighlighted: boolean
   isDisabled: boolean
   onClick?: () => void
   isAnimated?: boolean
+  children: ReactNode
 }
 
 export const SendReceiveButton = ({
   children,
-  icon,
+  icon: Icon,
   isHighlighted,
   isDisabled,
   onClick,
   isAnimated,
 }: SendReceiveButtonProps) => (
   <Button
     variant="ghost"
-    display="flex"
-    flexDirection="column"
-    alignItems="center"
+    className="group flex-col items-center gap-4"
     data-group
-    isDisabled={isDisabled}
+    disabled={isDisabled}
     onClick={onClick}
-    gap={4}
   >
-    <Grid
-      bg="primary.base"
-      borderRadius="full"
-      placeItems="center"
-      w={{ base: 10, md: 16 }}
-      aspectRatio={1}
-      _groupHover={{ bg: "primary.hover" }}
-      _groupDisabled={{
-        background: isHighlighted ? "primary.base" : "body.light",
-      }}
-      position="relative"
+    <div
+      className={cn(
+        "relative grid aspect-square w-10 place-items-center rounded-full bg-primary group-hover:bg-primary-hover md:w-16",
+        isHighlighted
+          ? "group-disabled:bg-primary"
+          : "group-disabled:bg-body-light"
+      )}
     >
       {!isDisabled && isAnimated && <PulseAnimation type="circle" />}
-      <Icon
-        as={icon}
-        w={{ base: 4, md: 6 }}
-        h={{ base: 4, md: 6 }}
-        color="background.base"
-      />
-    </Grid>
-    <Box position="relative">
-      <Text
-        fontWeight="bold"
-        color="primary.base"
-        textAlign="center"
-        m={0}
-        _groupHover={{ color: "primary.hover" }}
-        _groupDisabled={{
-          color: isHighlighted ? "primary.base" : "body.medium",
-        }}
-        position="relative"
+      {/* TODO: Remove important flags from class utils when simulator icons are migrated to tailwind */}
+      <Icon className="!size-4 !text-background md:!size-6" />
+    </div>
+    <div className="relative">
+      <p
+        className={cn(
+          "relative text-center font-bold text-primary group-hover:text-primary-hover",
+          isHighlighted
+            ? "group-disabled:text-primary"
+            : "group-disabled:text-body-medium"
+        )}
       >
         {children}
-      </Text>
+      </p>
       {!isDisabled && isAnimated && (
         <ClickAnimation below>click!</ClickAnimation>
       )}
-    </Box>
+    </div>
   </Button>
 )

src/components/Simulator/WalletHome/SendReceiveButtons.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { PiPaperPlaneRightFill } from "react-icons/pi"
-import { Flex } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { QrCodeIcon } from "../icons"
 import type { SimulatorNav } from "../interfaces"
@@ -26,7 +27,7 @@ export const SendReceiveButtons = ({
   const highlightSend = !nav || !disableSend
   const highlightReceive = !nav || !disableReceive
   return (
-    <Flex justify="space-around" w="full" gap={4}>
+    <Flex className="w-full justify-around gap-4">
       <SendReceiveButton
         onClick={nav?.progressStepper}
         isDisabled={disableSend}
@@ -39,6 +40,7 @@ export const SendReceiveButtons = ({
         onClick={nav?.progressStepper}
         isDisabled={disableReceive}
         isHighlighted={highlightReceive}
+        // @ts-expect-error icon component needs to be migrated to use react-icons base
         icon={QrCodeIcon}
         isAnimated
       >