refactor: ReceiveEther.tsx to tailwind

migrate qr-code pngs

Author: wackerow

public/images/qr-code-ethereum-org-dark.png

@@ -1,105 +1,60 @@
-import React from "react"
 import { motion } from "framer-motion"
-import { Button } from "@chakra-ui/react"
-import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react"
 
-import { Image } from "@/components/Image"
+import EthGlyph from "@/components/icons/eth-glyph-solid.svg"
+import { TwImage } from "@/components/Image"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex } from "@/components/ui/flex"
 
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { NotificationPopover } from "../../NotificationPopover"
 
-import QRDark from "@/public/images/qr-code-ethereum-org-dark.png"
-import QRLight from "@/public/images/qr-code-ethereum-org-light.png"
+import QrImage from "@/public/images/qr-code-ethereum-org.png"
 
-const MotionBox = motion(Box)
-
-export const ReceiveEther = () => {
-  const qrImage = useColorModeValue(QRLight, QRDark)
-
-  const SPACING = { base: 3, md: 5 }
-  const QR_SIZE = { base: "80px", md: "120px" }
-  return (
-    <MotionBox
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      transition={{ duration: 0.25 }}
-      py={{ base: 6, md: 8 }}
-      px={{ base: 4, md: 6 }}
-      h="full"
-      bg="background.highlight"
-      fontSize={{ base: "sm", md: "md" }}
+export const ReceiveEther = () => (
+  <motion.div
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    exit={{ opacity: 0 }}
+    transition={{ duration: 0.25 }}
+    className="h-full bg-background-highlight px-4 py-6 text-sm md:px-6 md:py-8 md:text-md"
+  >
+    <p className="mb-3 text-xl font-bold md:mb-6 md:text-2xl">Receive assets</p>
+    <p className="mb-3 md:mb-5">
+      Show this QR code containing your account address to the sender
+    </p>
+    {/* QR Code */}
+    <NotificationPopover
+      title="Example walkthrough"
+      content="Share QR containing your address (public identifier) from your own wallet when finished here"
+      placement="top"
     >
-      <Text
-        fontSize={{ base: "xl", md: "2xl" }}
-        fontWeight="bold"
-        mb={{ base: 3, md: 6 }}
-      >
-        Receive assets
-      </Text>
-      <Text mb={SPACING}>
-        Show this QR code containing your account address to the sender
-      </Text>
-      {/* QR Code */}
+      <div className="relative mx-auto mb-3 w-fit bg-background p-3 md:mb-5">
+        <TwImage
+          alt=""
+          src={QrImage}
+          className="size-[6rem] rounded p-1 md:size-[7.5rem] dark:invert"
+        />
+        <div className="absolute left-1/2 top-1/2 size-10 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-primary-action" />
+        <EthGlyph className="absolute left-1/2 top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 transform text-white" />
+      </div>
+    </NotificationPopover>
+    <Flex className="relative mb-3 w-full items-center justify-between gap-2 rounded border px-3 py-2 md:mb-5">
+      <div>
+        <p className="m-0 text-xs text-body-medium">Your Ethereum address</p>
+        <p className="m-0 text-sm">{FAKE_DEMO_ADDRESS}</p>
+      </div>
       <NotificationPopover
         title="Example walkthrough"
-        content="Share QR containing your address (public identifier) from your own wallet when finished here"
-        placement="top"
+        content="Share your address (public identifier) from your own wallet when finished here"
+        placement="top-start"
       >
-        <Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
-          <Image
-            alt=""
-            src={qrImage}
-            maxW={QR_SIZE}
-            maxH={QR_SIZE}
-            p={3}
-            borderRadius="base"
-          />
-        </Box>
+        <Button className="h-fit rounded-lg bg-body-light px-2 py-1.5 text-xs font-bold text-body">
+          Copy
+        </Button>
       </NotificationPopover>
-      <Flex
-        borderRadius="base"
-        border="1px"
-        borderColor="body.light"
-        px={3}
-        py={2}
-        gap={2}
-        position="relative"
-        w="100%"
-        justify="space-between"
-        alignItems="center"
-        mb={SPACING}
-      >
-        <Box>
-          <Text color="body.medium" m={0} fontSize="xs">
-            Your Ethereum address
-          </Text>
-          <Text m={0} fontSize="sm">
-            {FAKE_DEMO_ADDRESS}
-          </Text>
-        </Box>
-        <NotificationPopover
-          title="Example walkthrough"
-          content="Share your address (public identifier) from your own wallet when finished here"
-          placement="top-start"
-        >
-          <Button
-            fontSize="xs"
-            fontWeight="bold"
-            color="body.base"
-            bg="body.light"
-            borderRadius="10px"
-            h="fit-content"
-            py={1.5}
-            px={2}
-          >
-            Copy
-          </Button>
-        </NotificationPopover>
-      </Flex>
-      <Text m={0} fontSize="xs" lineHeight={1.7}>
-        Use this address for receiving tokens and NFTs on the Ethereum network.
-      </Text>
-    </MotionBox>
-  )
-}
+    </Flex>
+    <p className="m-0 text-xs">
+      Use this address for receiving tokens and NFTs on the Ethereum network.
+    </p>
+  </motion.div>
+)