Merge pull request #14862 from TylerAPfledderer/feat/shadcn-migrate-simulator-sendreceive-screen

[ShadCN]: migrate SendReceive Simulator Screen

Author: pettinarip

src/components/Simulator/screens/SendReceive/ReceivedEther.tsx

@@ -90,6 +90,7 @@ export const ReceivedEther = ({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
+            data-testid="received-ether-toast"
           >
             <MdInfo className="text-xl" />
             <p className="m-0 text-xs font-bold">

src/components/Simulator/screens/SendReceive/SendEther.tsx

@@ -1,5 +1,9 @@
 import React from "react"
-import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
+
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex, HStack } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 import { EthTokenIcon } from "../../icons"
 import { NotificationPopover } from "../../NotificationPopover"
@@ -52,101 +56,67 @@ export const SendEther = ({
   }).format(chosenAmount)
 
   return (
-    <Box h="100%">
-      <Box px={6} py={8}>
-        <Text
-          fontSize={{ base: "xl", md: "2xl" }}
-          fontWeight="bold"
-          mb={{ base: 4, md: 6 }}
-        >
-          Send
-        </Text>
-        <Text mb={{ base: 0, md: 6 }}>How much do you want to send?</Text>
-      </Box>
-      <Flex
-        px={6}
-        py={{ base: 4, md: 6 }}
-        borderTop="1px"
-        borderBottom="1px"
-        borderColor="background.highlight"
-        gap={4}
-        color="body.medium"
-        fontSize="xs"
-      >
+    <div className="h-full">
+      <div className="px-6 py-8">
+        <p className="mb-4 text-xl font-bold md:mb-6 md:text-2xl">Send</p>
+        <p className="md:mb-6">How much do you want to send?</p>
+      </div>
+      <Flex className="justify-between gap-4 border-y border-background-highlight px-6 py-4 text-xs text-body-medium md:py-6">
         {/* Left side: Displayed send amount */}
         <NotificationPopover
           title="Example walkthrough"
           content="Choose a value below"
           side="top"
         >
           <Flex
-            alignItems="top"
-            flex={1}
-            fontWeight="bold"
-            color={chosenAmount > 0 ? "body.base" : "disabled"}
+            className={cn(
+              "font-bold",
+              chosenAmount > 0 ? "text-body" : "text-disabled"
+            )}
           >
-            <Text fontSize="6xl" h="full" lineHeight="1em">
+            <p className="h-full text-6xl leading-[1em]">
               {formatChosenAmount}
-            </Text>
+            </p>
           </Flex>
         </NotificationPopover>
         {/* Right side */}
-        <Flex direction="column" alignItems="end">
+        <Flex className="flex-col items-end">
           <NotificationPopover
             side="top"
             title="Example walkthrough"
             content="In this walkthrough you can only send ETH, but in real wallet you can send different tokens as well"
           >
             {/* Token selector pill */}
-            <Flex
-              px={2}
-              py={1}
-              mb={4}
-              borderRadius="full"
-              bg="body.light"
-              alignItems="center"
-            >
-              <Icon as={EthTokenIcon} fontSize="xl" me={1.5} />
-              <Text fontWeight="bold" m={0} color="body.base">
-                ETH
-              </Text>
-            </Flex>
+            <HStack className="mb-4 gap-0 rounded-full bg-body-light px-2 py-1">
+              {/* TODO: remove flags and `size` class when icon is migrated */}
+              <EthTokenIcon className="!me-1.5 !size-[1em] !text-xl" />
+              <p className="m-0 font-bold text-body">ETH</p>
+            </HStack>
           </NotificationPopover>
           {/* Balances */}
-          <Text fontWeight="bold" m={0} lineHeight={1}>
-            Balance: {usdAmount}
-          </Text>
-          <Text m={0}>
+          <p className="font-bold leading-none">Balance: {usdAmount}</p>
+          <p>
             <>{ethAmount} ETH</>
-          </Text>
+          </p>
         </Flex>
       </Flex>
-      <Box bg="background.highlight" h="full">
-        <Flex
-          flexWrap="nowrap"
-          justify="space-between"
-          px={6}
-          py={6}
-          fontWeight="bold"
-          bg="background.highlight"
-          position="relative"
-        >
+      <div className="h-full bg-background-highlight">
+        <Flex className="relative flex-nowrap justify-between bg-background-highlight p-6 font-bold">
           {/* Amount buttons */}
           {AMOUNTS.map((amount, i) => (
             <Button
               key={i}
               onClick={() => handleSelection(amount)}
-              borderRadius="10px"
-              bg={amount === chosenAmount ? "primary.hover" : "primary.base"}
-              fontWeight="bold"
-              textTransform="uppercase"
-              fontSize="sm"
+              className={cn(
+                "rounded-[10px] text-sm font-bold uppercase",
+                amount === chosenAmount ? "bg-primary-hover" : "bg-primary"
+              )}
             >
               {formatButtonLabel(amount)}
             </Button>
           ))}
         </Flex>
-      </Box>
-    </Box>
+      </div>
+    </div>
   )
 }

src/components/Simulator/screens/SendReceive/SendSummary.tsx

@@ -1,5 +1,8 @@
 import React from "react"
-import { Box, Flex, Text } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 import { ETH_TRANSFER_FEE } from "../../constants"
 import { getMaxFractionDigitsUsd } from "../../utils"
@@ -29,77 +32,52 @@ export const SendSummary = ({
   return (
     <>
       {/* Top section */}
-      <Box py={{ base: 6, md: 8 }} px={6}>
-        <Text
-          fontSize={{ base: "xl", md: "2xl" }}
-          fontWeight="bold"
-          mb={{ base: 4, md: 8 }}
-        >
+      <div className="px-6 py-6 md:py-8">
+        <p className="mb-4 text-xl font-bold md:mb-8 md:text-2xl">
           You are sending
-        </Text>
+        </p>
         <Flex
-          alignItems="top"
-          flex={1}
-          fontWeight="bold"
-          color={chosenAmount > 0 ? "body.base" : "inherit"}
-          mb={{ base: 0, md: 2 }}
+          className={cn(
+            "flex-1 font-bold md:mb-2",
+            chosenAmount > 0 ? "text-body" : "text-inherit"
+          )}
         >
-          <Text
-            fontSize={{ base: "5xl", md: "6xl" }}
-            h="full"
-            lineHeight="1em"
-            m={0}
-          >
+          <p className="h-full text-5xl leading-[1em] md:text-6xl">
             {formatChosenAmount}
-          </Text>
+          </p>
         </Flex>
-        <Text fontSize="xs" color="body.medium" m={0}>
+        <p className="text-xs text-body-medium">
           {formatEth(chosenAmount / ethPrice)} ETH
-        </Text>
-      </Box>
+        </p>
+      </div>
       {/* Bottom section */}
-      <Flex
-        py={{ base: 4, md: 8 }}
-        px={6}
-        bg="background.highlight"
-        h="full"
-        gap={{ base: 3, md: 6 }}
-        direction="column"
-        sx={{ p: { m: 0 } }}
-        fontSize={{ base: "sm", md: "md" }}
-      >
-        <Box>
-          <Text>To</Text>
-          <Text fontWeight="bold">{recipient}</Text>
-        </Box>
-        <Box>
-          <Text>Arrival time</Text>
-          <Text fontWeight="bold">est. about 12 seconds</Text>
-        </Box>
-        <Box>
-          <Text>Network fees</Text>
-          <Text m={0} fontWeight="bold">
+      <Flex className="h-full flex-col gap-3 bg-background-highlight px-6 py-4 text-sm md:gap-6 md:py-8 md:text-md">
+        <div>
+          <p>To</p>
+          <p className="font-bold">{recipient}</p>
+        </div>
+        <div>
+          <p>Arrival time</p>
+          <p className="font-bold">est. about 12 seconds</p>
+        </div>
+        <div>
+          <p>Network fees</p>
+          <p className="font-bold">
             {Intl.NumberFormat("en", {
               maximumFractionDigits: getMaxFractionDigitsUsd(usdFee),
               style: "currency",
               currency: "USD",
               notation: "compact",
             }).format(usdFee)}
-            <Text
-              as="span"
-              color="body.medium"
-              fontSize="xs"
-              fontWeight="normal"
-              ms={2}
-            >
+            <span className="ms-2 text-xs font-normal text-body-medium">
               (
               {Intl.NumberFormat("en", {
                 maximumFractionDigits: 6,
               }).format(ETH_TRANSFER_FEE)}{" "}
               ETH)
-            </Text>
-          </Text>
-        </Box>
+            </span>
+          </p>
+        </div>
       </Flex>
     </>
   )

src/components/Simulator/screens/SendReceive/Success.tsx

@@ -1,13 +1,17 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import { PiCheckThin } from "react-icons/pi"
-import { Flex, Icon, Spinner, Text } from "@chakra-ui/react"
+
+import { Flex, VStack } from "@/components/ui/flex"
+import { Spinner } from "@/components/ui/spinner"
+
+import { cn } from "@/lib/utils/cn"
 
 import { getMaxFractionDigitsUsd } from "../../utils"
 import { WalletHome } from "../../WalletHome"
 import type { TokenBalance } from "../../WalletHome/interfaces"
 
-const ICON_SIZE = "4.5rem" as const
+const ICON_SIZE = "text-[4.5rem]"
 
 type SuccessProps = {
   tokenBalances: Array<TokenBalance>
@@ -72,55 +76,50 @@ export const Success = ({
         </motion.div>
       ) : (
         <Flex
-          animate={{ opacity: [0, 1] }}
-          exit={{ opacity: 0 }}
-          key="success-fade-out"
-          as={motion.div}
-          justify="center"
-          h="full"
-          bg="background.highlight"
-          pt={{ base: 24, md: 0 }}
-          alignItems={{ base: "start", md: "center" }}
+          className="h-full justify-center bg-background-highlight max-md:pt-24 md:items-center"
+          asChild
         >
-          <Flex direction="column" alignItems="center" pt={8} gap={4}>
-            {txPending ? (
-              <motion.div
-                key="spinner"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.5 }}
-              >
-                <Spinner w={ICON_SIZE} h={ICON_SIZE} />
-              </motion.div>
-            ) : (
-              <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)"
-                />
-              </motion.div>
-            )}
-            <Text textAlign="center" px={{ base: 4, md: 8 }}>
+          <motion.div
+            animate={{ opacity: [0, 1] }}
+            exit={{ opacity: 0 }}
+            key="success-fade-out"
+          >
+            <VStack className="gap-4 pt-8">
               {txPending ? (
-                "Sending transaction"
+                <motion.div
+                  key="spinner"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.5 }}
+                >
+                  <Spinner className={ICON_SIZE} />
+                </motion.div>
               ) : (
-                <Text as="span">
-                  You sent{" "}
-                  <strong>
-                    <>{sentEthValue} ETH</>
-                  </strong>{" "}
-                  ({usdValue}) to <strong>{recipient}</strong>
-                </Text>
+                <motion.div
+                  key="checkmark"
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ type: "spring", delay: 0.25 }}
+                  data-testid="success-icon"
+                >
+                  <PiCheckThin className={cn(ICON_SIZE, "-rotate-[10deg]")} />
+                </motion.div>
               )}
-            </Text>
-          </Flex>
+              <p className="px-4 text-center md:px-8">
+                {txPending ? (
+                  "Sending transaction"
+                ) : (
+                  <span>
+                    You sent{" "}
+                    <strong>
+                      <>{sentEthValue} ETH</>
+                    </strong>{" "}
+                    ({usdValue}) to <strong>{recipient}</strong>
+                  </span>
+                )}
+              </p>
+            </VStack>
+          </motion.div>
         </Flex>
       )}
     </AnimatePresence>