Merge pull request #14806 from TylerAPfledderer/feat/simulator-wallet-home-shadcn

[ShadCN]: Migrate Simulator WalletHome

Author: pettinarip

src/components/Simulator/WalletHome/AddressPill.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { MdContentCopy } from "react-icons/md"
-import { Flex, type FlexProps, Icon, Text } from "@chakra-ui/react"
+
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
 import { FAKE_DEMO_ADDRESS } from "../constants"
 import { NotificationPopover } from "../NotificationPopover"
@@ -13,21 +14,11 @@ export const AddressPill = ({ ...btnProps }: AddressPillProps) => (
     content="Share your address (public identifier) from your own wallet when finished here"
   >
     <Flex
-      gap={2}
-      align="center"
-      borderRadius="full"
-      bg="background.highlight"
-      color="disabled"
-      border="1px"
-      borderColor="border"
-      py={1}
-      px={2}
-      alignSelf="center"
-      fontSize="xs"
+      className="gap-2 self-center rounded-full border border-border bg-background-highlight px-2 py-1 text-center text-xs text-disabled"
       {...btnProps}
     >
-      <Text m={0}>{FAKE_DEMO_ADDRESS}</Text>
-      <Icon as={MdContentCopy} w={4} fontSize="lg" />
+      <p>{FAKE_DEMO_ADDRESS}</p>
+      <MdContentCopy className="w-4 text-lg leading-none" />
     </Flex>
   </NotificationPopover>
 )

src/components/Simulator/WalletHome/CategoryTabs.tsx

@@ -1,7 +1,7 @@
-import React from "react"
-import { Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
-import { Button } from "../../Buttons"
+import { cn } from "@/lib/utils/cn"
 
 type CategoryTabsProps = FlexProps & {
   categories: Array<string>
@@ -12,31 +12,32 @@ export const CategoryTabs = ({
   categories,
   activeIndex = 0,
   setActiveIndex,
+  className,
   ...flexProps
 }: CategoryTabsProps) => (
-  <Flex gap={6} {...flexProps}>
-    {categories.map((category, index) =>
-      setActiveIndex ? (
+  <Flex className={cn("gap-6", className)} {...flexProps}>
+    {categories.map((category, index) => {
+      const isActiveIndex = activeIndex === index
+      const fontWeightClass = isActiveIndex && "font-bold"
+      return setActiveIndex ? (
         <Button
           key={category}
           variant="ghost"
-          fontWeight={activeIndex === index ? "bold" : "normal"}
+          className={cn(
+            fontWeightClass,
+            "p-0 pb-2 text-body",
+            isActiveIndex && "!text-[initial]"
+          )}
+          disabled={isActiveIndex}
           onClick={() => setActiveIndex(index)}
-          p={0}
-          pb={2}
-          color="body.base"
         >
           {category}
         </Button>
       ) : (
-        <Text
-          mb={2}
-          key={category}
-          fontWeight={activeIndex === index ? "bold" : "normal"}
-        >
+        <p className={cn(fontWeightClass, "mb-2")} key={category}>
           {category}
-        </Text>
+        </p>
       )
-    )}
+    })}
   </Flex>
 )

src/components/Simulator/WalletHome/NFTList.tsx

@@ -1,7 +1,7 @@
-import React from "react"
-import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { TwImage as Image } from "@/components/Image"
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
-import { Image } from "@/components/Image"
+import { cn } from "@/lib/utils/cn"
 
 import type { NFT } from "./interfaces"
 
@@ -11,26 +11,21 @@ type NFTListProps = FlexProps & {
   nfts: Array<NFT>
 }
 export const NFTList = ({ nfts, ...flexProps }: NFTListProps) => {
-  const size = useBreakpointValue({ base: 20, md: 24 })
+  const size = useBreakpointValue({
+    base: "max-w-20 max-h-20",
+    md: "max-w-24 max-h-24",
+  })
   return (
-    <Flex w="full" gap={4} h="full" flexWrap="wrap" {...flexProps}>
+    <Flex className="size-full flex-wrap gap-4" {...flexProps}>
       {nfts.length ? (
         nfts.map(({ title, image }) => (
-          <Box key={title} w="fit-content">
-            <Image
-              src={image}
-              alt=""
-              objectFit="contain"
-              maxW={size}
-              maxH={size}
-            />
-            <Text fontSize="xs" m={0}>
-              {title}
-            </Text>
-          </Box>
+          <div key={title} className="w-fit">
+            <Image src={image} alt="" className={cn("object-contain", size)} />
+            <p className="text-xs">{title}</p>
+          </div>
         ))
       ) : (
-        <Text>No NFTs yet!</Text>
+        <p>No NFTs yet!</p>
       )}
     </Flex>
   )

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
       >

src/components/Simulator/WalletHome/TokenBalanceItem.tsx

@@ -1,17 +1,13 @@
-import React from "react"
-import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { Flex } from "@/components/ui/flex"
 
 import { getMaxFractionDigitsUsd } from "../utils"
 
 import { TokenBalance } from "./interfaces"
 
-type TokenBalanceItemProps = FlexProps & {
+type TokenBalanceItemProps = {
   item: TokenBalance
 }
-export const TokenBalanceItem = ({
-  item,
-  ...flexProps
-}: TokenBalanceItemProps) => {
+export const TokenBalanceItem = ({ item }: TokenBalanceItemProps) => {
   const { name, ticker, amount, usdConversion, Icon } = item
   const usdAmount = amount * usdConversion
   const usdValue = Intl.NumberFormat("en-US", {
@@ -24,23 +20,15 @@ export const TokenBalanceItem = ({
     maximumFractionDigits: 5,
   }).format(amount)
   return (
-    <Flex gap={4} {...flexProps}>
+    <Flex className="gap-4">
       <Icon />
-      <Text flex={1} fontWeight="medium">
-        {name}
-      </Text>
-      <Box
-        textAlign="end"
-        fontSize="sm"
-        lineHeight={1.5}
-        fontWeight="bold"
-        sx={{ p: { m: 0 } }}
-      >
-        <Text>{usdValue}</Text>
-        <Text color="body.medium">
+      <p className="flex-1 font-medium">{name}</p>
+      <div className="text-end text-sm font-bold leading-normal [&_p]:m-0">
+        <p>{usdValue}</p>
+        <p className="text-body-medium">
           {tokenAmount} {ticker}
-        </Text>
-      </Box>
+        </p>
+      </div>
     </Flex>
   )
 }

src/components/Simulator/WalletHome/TokenBalanceList.tsx

@@ -1,18 +1,14 @@
-import React from "react"
-import { Flex, type FlexProps } from "@chakra-ui/react"
+import { Flex } from "@/components/ui/flex"
 
 import { type TokenBalance } from "./interfaces"
 import { TokenBalanceItem } from "./TokenBalanceItem"
 
-type TokenBalanceListProps = FlexProps & {
+type TokenBalanceListProps = {
   tokenBalances: Array<TokenBalance>
 }
-export const TokenBalanceList = ({
-  tokenBalances,
-  ...flexProps
-}: TokenBalanceListProps) => {
+export const TokenBalanceList = ({ tokenBalances }: TokenBalanceListProps) => {
   return (
-    <Flex direction="column" w="full" gap={4} {...flexProps}>
+    <Flex className="w-full flex-col gap-4">
       {tokenBalances.map((item) => (
         <TokenBalanceItem key={item.name} item={item} />
       ))}