From 254a952716de71a08fe5d49d13af88ed7d2620e0 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 7 Feb 2025 13:23:49 -0500
Subject: [PATCH 1/6] feat(Simulator/screens/SendReceive): create stories

---
 .../screens/SendReceive/ReceivedEther.tsx     |   1 +
 .../Simulator/screens/SendReceive/Success.tsx |   2 +-
 .../__stories__/SendReceive.stories.tsx       | 114 ++++++++++++++++++
 3 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx

diff --git a/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx b/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx
index c56d2f29a6a..1f6fecabf52 100644
--- a/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx
+++ b/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">
diff --git a/src/components/Simulator/screens/SendReceive/Success.tsx b/src/components/Simulator/screens/SendReceive/Success.tsx
index cdd3b8a1021..b266f99a711 100644
--- a/src/components/Simulator/screens/SendReceive/Success.tsx
+++ b/src/components/Simulator/screens/SendReceive/Success.tsx
@@ -111,7 +111,7 @@ export const Success = ({
               {txPending ? (
                 "Sending transaction"
               ) : (
-                <Text as="span">
+                <Text as="span" data-testid="success-message">
                   You sent{" "}
                   <strong>
                     <>{sentEthValue} ETH</>
diff --git a/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx b/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx
new file mode 100644
index 00000000000..bdacb83444f
--- /dev/null
+++ b/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx
@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { expect, fn, waitFor, within } from "@storybook/test"
+
+import { Phone } from "@/components/Simulator/Phone"
+import { Template } from "@/components/Simulator/Template"
+
+import { SendReceive } from ".."
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / SendReceive Screen",
+  component: SendReceive,
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {
+    nav: {
+      progressStepper: fn(),
+      step: 0,
+      openPath: fn(),
+      regressStepper: fn(),
+      totalSteps: 6,
+    },
+    ctaLabel: "",
+  },
+  decorators: [
+    (Story) => (
+      <div className="mx-auto mt-8">
+        <Template>
+          <Phone>
+            <Story />
+          </Phone>
+        </Template>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SendReceive>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const ReceiveEther: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 1,
+    },
+    ctaLabel: "Share address",
+  },
+}
+
+export const ReceivedEther: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 2,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitFor(
+      async () => {
+        expect(canvas.getByTestId("received-ether-toast")).toBeInTheDocument()
+      },
+      { timeout: 1500 }
+    )
+  },
+}
+
+export const SendEther: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 3,
+    },
+    ctaLabel: "Select recipient",
+  },
+}
+
+export const SendFromContacts: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 4,
+    },
+  },
+}
+
+export const SendSummary: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 5,
+    },
+    ctaLabel: "Send now",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 6,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitFor(async () => {
+      expect(canvas.getByTestId("success-message")).toBeInTheDocument()
+    })
+  },
+}

From 9a12c5de7e70603176281d07fd852b21afd7fdd6 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 7 Feb 2025 14:13:04 -0500
Subject: [PATCH 2/6] feat(Simulator/screens/SendEther): migrate to Tailwind

---
 .../screens/SendReceive/SendEther.tsx         | 98 +++++++------------
 1 file changed, 34 insertions(+), 64 deletions(-)

diff --git a/src/components/Simulator/screens/SendReceive/SendEther.tsx b/src/components/Simulator/screens/SendReceive/SendEther.tsx
index 9b1acd513e2..3c8d5c8f8bd 100644
--- a/src/components/Simulator/screens/SendReceive/SendEther.tsx
+++ b/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,27 +56,12 @@ 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="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"
@@ -80,73 +69,54 @@ export const SendEther = ({
           side="top"
         >
           <Flex
-            alignItems="top"
-            flex={1}
-            fontWeight="bold"
-            color={chosenAmount > 0 ? "body.base" : "disabled"}
+            className={cn(
+              "flex-1 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>
   )
 }

From dbd2f152ae67d2672521edf545553ff136883400 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 8 Feb 2025 10:50:28 -0500
Subject: [PATCH 3/6] feat(Simulator/screens/Success): migrate to Tailwind

---
 .../Simulator/screens/SendReceive/Success.tsx | 94 +++++++++----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/src/components/Simulator/screens/SendReceive/Success.tsx b/src/components/Simulator/screens/SendReceive/Success.tsx
index b266f99a711..3dd3dace824 100644
--- a/src/components/Simulator/screens/SendReceive/Success.tsx
+++ b/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 = "size-4.5rem"
 
 type SuccessProps = {
   tokenBalances: Array<TokenBalance>
@@ -72,55 +76,49 @@ 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" data-testid="success-message">
-                  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 }}
+                >
+                  <PiCheckThin className={cn(ICON_SIZE, "-rotate-[10deg]")} />
+                </motion.div>
               )}
-            </Text>
-          </Flex>
+              <p className="px-4 text-center md:px-8">
+                {txPending ? (
+                  "Sending transaction"
+                ) : (
+                  <span data-testid="success-message">
+                    You sent{" "}
+                    <strong>
+                      <>{sentEthValue} ETH</>
+                    </strong>{" "}
+                    ({usdValue}) to <strong>{recipient}</strong>
+                  </span>
+                )}
+              </p>
+            </VStack>
+          </motion.div>
         </Flex>
       )}
     </AnimatePresence>

From 14b600460cee81ca772faddb1624f68633973a93 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 8 Feb 2025 12:14:18 -0500
Subject: [PATCH 4/6] fix(Simulator/screens/Success): set font size for icons

---
 .../Simulator/screens/SendReceive/Success.tsx    |  5 +++--
 .../__stories__/SendReceive.stories.tsx          | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Simulator/screens/SendReceive/Success.tsx b/src/components/Simulator/screens/SendReceive/Success.tsx
index 3dd3dace824..f4477ec79f1 100644
--- a/src/components/Simulator/screens/SendReceive/Success.tsx
+++ b/src/components/Simulator/screens/SendReceive/Success.tsx
@@ -11,7 +11,7 @@ import { getMaxFractionDigitsUsd } from "../../utils"
 import { WalletHome } from "../../WalletHome"
 import type { TokenBalance } from "../../WalletHome/interfaces"
 
-const ICON_SIZE = "size-4.5rem"
+const ICON_SIZE = "text-[4.5rem]"
 
 type SuccessProps = {
   tokenBalances: Array<TokenBalance>
@@ -100,6 +100,7 @@ export const Success = ({
                   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>
@@ -108,7 +109,7 @@ export const Success = ({
                 {txPending ? (
                   "Sending transaction"
                 ) : (
-                  <span data-testid="success-message">
+                  <span>
                     You sent{" "}
                     <strong>
                       <>{sentEthValue} ETH</>
diff --git a/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx b/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx
index bdacb83444f..c3fef1fbaa7 100644
--- a/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx
+++ b/src/components/Simulator/screens/SendReceive/__stories__/SendReceive.stories.tsx
@@ -107,8 +107,18 @@ export const Success: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
 
-    await waitFor(async () => {
-      expect(canvas.getByTestId("success-message")).toBeInTheDocument()
-    })
+    await waitFor(
+      async () => {
+        const successIcon = canvas.getByTestId("success-icon")
+        console.log("🚀 ~ successIcon:", successIcon)
+        await expect(successIcon).toBeInTheDocument()
+        await expect(successIcon).toHaveStyle({
+          transform: "none",
+        })
+      },
+      {
+        timeout: 10000,
+      }
+    )
   },
 }

From 824cb60450ba53ba6711925b8b48182555b05db8 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 8 Feb 2025 14:39:12 -0500
Subject: [PATCH 5/6] feat(Simulator/screens/SendSummary): migrate to Tailwind

---
 .../screens/SendReceive/SendSummary.tsx       | 86 +++++++------------
 1 file changed, 32 insertions(+), 54 deletions(-)

diff --git a/src/components/Simulator/screens/SendReceive/SendSummary.tsx b/src/components/Simulator/screens/SendReceive/SendSummary.tsx
index e00a87532cf..1874aea4a5c 100644
--- a/src/components/Simulator/screens/SendReceive/SendSummary.tsx
+++ b/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>
     </>
   )

From dc76cb7b7fb385f9f9c11d6789fd86cd5b806712 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Tue, 11 Feb 2025 10:36:16 +0100
Subject: [PATCH 6/6] set space-between in send ether screen

---
 src/components/Simulator/screens/SendReceive/SendEther.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Simulator/screens/SendReceive/SendEther.tsx b/src/components/Simulator/screens/SendReceive/SendEther.tsx
index 3c8d5c8f8bd..0f53c24516b 100644
--- a/src/components/Simulator/screens/SendReceive/SendEther.tsx
+++ b/src/components/Simulator/screens/SendReceive/SendEther.tsx
@@ -61,7 +61,7 @@ export const SendEther = ({
         <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="gap-4 border-y border-background-highlight px-6 py-4 text-xs text-body-medium md:py-6">
+      <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"
@@ -70,7 +70,7 @@ export const SendEther = ({
         >
           <Flex
             className={cn(
-              "flex-1 font-bold",
+              "font-bold",
               chosenAmount > 0 ? "text-body" : "text-disabled"
             )}
           >