From e4c9d05f221c9a191282f43dbe19dc03ef075ec1 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Tue, 28 Jan 2025 23:11:15 -0500
Subject: [PATCH 01/18] feat(SimulatorWalletHome/AddressPill): create story

---
 .../WalletHome/__stories__/AddressPill.stories.tsx   | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx b/src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx
new file mode 100644
index 00000000000..766dda85b27
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { AddressPill as AddressPillComponent } from "../AddressPill"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / WalletHome / AddressPill",
+  component: AddressPillComponent,
+} satisfies Meta<typeof AddressPillComponent>
+
+export default meta
+
+export const AddressPill: StoryObj<typeof meta> = {}

From c026ec9a1f5f51ade230500cae5d35cf0f1f8d28 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Tue, 28 Jan 2025 23:36:47 -0500
Subject: [PATCH 02/18] feat(Simulator/WalletHome/AddressPill): migrate to
 Tailwind

---
 .../Simulator/WalletHome/AddressPill.tsx      | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/Simulator/WalletHome/AddressPill.tsx b/src/components/Simulator/WalletHome/AddressPill.tsx
index bd8d77a4051..66bde434cbb 100644
--- a/src/components/Simulator/WalletHome/AddressPill.tsx
+++ b/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>
 )

From 75d421dd6f2729f6a9f3a0684e5feec8e2e74859 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Wed, 29 Jan 2025 01:08:53 -0500
Subject: [PATCH 03/18] feat(Simulator/WalletHome/SendReceiveButtons): create
 story

---
 .../SendReceiveButtons.stories.tsx            | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx b/src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx
new file mode 100644
index 00000000000..6ebad7735db
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+import { fn } from "@storybook/test"
+
+import { SendReceiveButtons as Component } from "../SendReceiveButtons"
+
+const meta = {
+  title:
+    "Molecules / Display Content / Simulator / WalletHome / SendReceiveButtons",
+  component: Component,
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const SendReceiveButtons: StoryObj<typeof meta> = {
+  args: {
+    isEnabled: [false, true],
+    nav: {
+      progressStepper: fn(),
+      openPath: fn(),
+      step: 0,
+      regressStepper: fn(),
+      totalSteps: 1,
+    },
+  },
+}

From c029ea52dfb42ba5c4762e58a83008f029a711d2 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Wed, 29 Jan 2025 01:41:23 -0500
Subject: [PATCH 04/18] feat(Simulator/WalletHome/SendReceiveButtons): migrate
 to Tailwind

---
 .../WalletHome/SendReceiveButton.tsx          | 81 ++++++++-----------
 .../WalletHome/SendReceiveButtons.tsx         |  6 +-
 2 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/src/components/Simulator/WalletHome/SendReceiveButton.tsx b/src/components/Simulator/WalletHome/SendReceiveButton.tsx
index fdef8d9be05..947541cdba1 100644
--- a/src/components/Simulator/WalletHome/SendReceiveButton.tsx
+++ b/src/components/Simulator/WalletHome/SendReceiveButton.tsx
@@ -1,28 +1,25 @@
-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,
@@ -30,51 +27,37 @@ export const SendReceiveButton = ({
 }: 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>
 )
diff --git a/src/components/Simulator/WalletHome/SendReceiveButtons.tsx b/src/components/Simulator/WalletHome/SendReceiveButtons.tsx
index 210cbf74ae5..85421baef7b 100644
--- a/src/components/Simulator/WalletHome/SendReceiveButtons.tsx
+++ b/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
       >

From d3c0b6c3e9d08182baedcdc8d175620073e437b1 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Wed, 29 Jan 2025 19:40:51 -0500
Subject: [PATCH 05/18] feat(Simulator/WalletHome/NFTList): create story

---
 .../__stories__/NFTList.stories.tsx           | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
new file mode 100644
index 00000000000..4f55931c9ce
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { NFTList as Component } from "../NFTList"
+
+import NFTImage from "@/public/images/deep-panic.png"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / WalletHome / NFTList",
+  component: Component,
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const NFTList: StoryObj = {
+  args: {
+    nfts: Array.from({ length: 5 }, () => ({
+      title: "Cool art",
+      image: NFTImage,
+    })),
+  },
+}

From a620045ed8125c7f88914c52f1748e0822493762 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Thu, 30 Jan 2025 14:24:06 -0500
Subject: [PATCH 06/18] refactor(Simulator/NFTList.stories): set two chromatic
 modes

---
 .../Simulator/WalletHome/__stories__/NFTList.stories.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
index 4f55931c9ce..09fbd2c4771 100644
--- a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
+++ b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
@@ -1,5 +1,7 @@
+import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react/*"
 
+import { viewportModes } from "../../../../../.storybook/modes"
 import { NFTList as Component } from "../NFTList"
 
 import NFTImage from "@/public/images/deep-panic.png"
@@ -14,6 +16,13 @@ const meta = {
       </div>
     ),
   ],
+  parameters: {
+    chromatic: {
+      modes: pickBy(viewportModes, (args) =>
+        ["base", "md"].includes(args.viewport)
+      ),
+    },
+  },
 } satisfies Meta<typeof Component>
 
 export default meta

From 85e0fd6bf5b61835fb82e19aa8c61960f6db8ba6 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Thu, 30 Jan 2025 14:26:58 -0500
Subject: [PATCH 07/18] refactor(Simulator/NFTList): show stories with and
 without list

---
 .../Simulator/WalletHome/__stories__/NFTList.stories.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
index 09fbd2c4771..9ba7183c591 100644
--- a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
+++ b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
@@ -27,7 +27,7 @@ const meta = {
 
 export default meta
 
-export const NFTList: StoryObj = {
+export const HasList: StoryObj = {
   args: {
     nfts: Array.from({ length: 5 }, () => ({
       title: "Cool art",
@@ -35,3 +35,9 @@ export const NFTList: StoryObj = {
     })),
   },
 }
+
+export const NoNFTs: StoryObj = {
+  args: {
+    nfts: [],
+  },
+}

From 13f8b52220842f9cb031d58d383b78b1672f110f Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Thu, 30 Jan 2025 14:36:12 -0500
Subject: [PATCH 08/18] feat(Simulator/WalletHome/NFTList): migrate to Tailwind

---
 .../Simulator/WalletHome/NFTList.tsx          | 31 ++++++++-----------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/Simulator/WalletHome/NFTList.tsx b/src/components/Simulator/WalletHome/NFTList.tsx
index 29c072b4f4d..e9eff523ecc 100644
--- a/src/components/Simulator/WalletHome/NFTList.tsx
+++ b/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>
   )

From 97594f2bcc6369a37b8b26d19895f7dabb903b24 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 31 Jan 2025 00:05:26 -0500
Subject: [PATCH 09/18] feat(Simulator/WalletHome/CategoryTabs): create stories

---
 .../__stories__/CategoryTabs.stories.tsx      | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx b/src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx
new file mode 100644
index 00000000000..6eed351dfa2
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx
@@ -0,0 +1,34 @@
+import { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { CategoryTabs } from "../CategoryTabs"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / WalletHome / CategoryTabs",
+  component: CategoryTabs,
+  args: {
+    categories: ["My contacts", "Recent"],
+  },
+} satisfies Meta<typeof CategoryTabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+const ActiveTab: Story["render"] = (args) => {
+  const [activeTabIndex, setActiveTabIndex] = useState(1)
+
+  return (
+    <CategoryTabs
+      {...args}
+      activeIndex={activeTabIndex}
+      setActiveIndex={setActiveTabIndex}
+    />
+  )
+}
+
+export const SelectActiveTab: Story = {
+  render: (args) => <ActiveTab {...args} />,
+}

From 2b7ecead1456f93fe97e75875335772dfb43b76c Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 31 Jan 2025 00:34:07 -0500
Subject: [PATCH 10/18] feat(Simulator/WalletHome/CategoryTabs): migrate to
 Tailwind

---
 .../Simulator/WalletHome/CategoryTabs.tsx     | 35 ++++++++++---------
 .../screens/SendReceive/SendFromContacts.tsx  |  2 +-
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/Simulator/WalletHome/CategoryTabs.tsx b/src/components/Simulator/WalletHome/CategoryTabs.tsx
index 496134aef12..8b5634d1fa6 100644
--- a/src/components/Simulator/WalletHome/CategoryTabs.tsx
+++ b/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>
 )
diff --git a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx
index c1e3fc91f5f..49022ad1a7a 100644
--- a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx
+++ b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx
@@ -45,7 +45,7 @@ export const SendFromContacts = ({
         <CategoryTabs
           categories={["My contacts", "Recent"]}
           activeIndex={1}
-          mb={4}
+          className="mb-4"
         />
         <Stack className="gap-4">
           {CONTACTS.map(({ name, lastAction }, i) => (

From 06540a5390d44383f14e4713e3df83140fda290f Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 31 Jan 2025 01:03:38 -0500
Subject: [PATCH 11/18] feat(Simulator/WalletHome/WalletBalance): create story

---
 .../WalletHome/__stories__/AddressPill.stories.tsx   | 12 ------------
 .../WalletHome/__stories__/WalletBalance.stories.tsx | 12 ++++++++++++
 2 files changed, 12 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx
 create mode 100644 src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx b/src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx
deleted file mode 100644
index 766dda85b27..00000000000
--- a/src/components/Simulator/WalletHome/__stories__/AddressPill.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { AddressPill as AddressPillComponent } from "../AddressPill"
-
-const meta = {
-  title: "Molecules / Display Content / Simulator / WalletHome / AddressPill",
-  component: AddressPillComponent,
-} satisfies Meta<typeof AddressPillComponent>
-
-export default meta
-
-export const AddressPill: StoryObj<typeof meta> = {}
diff --git a/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx b/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
new file mode 100644
index 00000000000..a2f3ae456f7
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { WalletBalance as Component } from "../WalletBalance"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / WalletHome / WalletBalance",
+  component: Component,
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const WalletBalance: StoryObj<typeof meta> = {}

From c0a9e20fad27028598f310ce920375563c689c1c Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 31 Jan 2025 01:21:44 -0500
Subject: [PATCH 12/18] refactor(WalletBalance.stories): create two viewport
 snapshots

---
 .../WalletHome/__stories__/WalletBalance.stories.tsx     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx b/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
index a2f3ae456f7..a026cd5dc52 100644
--- a/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
+++ b/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
@@ -1,10 +1,19 @@
+import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react"
 
+import { viewportModes } from "../../../../../.storybook/modes"
 import { WalletBalance as Component } from "../WalletBalance"
 
 const meta = {
   title: "Molecules / Display Content / Simulator / WalletHome / WalletBalance",
   component: Component,
+  parameters: {
+    chromatic: {
+      modes: pickBy(viewportModes, ({ viewport }) =>
+        ["base", "md"].includes(viewport)
+      ),
+    },
+  },
 } satisfies Meta<typeof Component>
 
 export default meta

From 3bdb0eba4979ed01a7e43feb7908e8a6c929d280 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 31 Jan 2025 07:24:50 -0500
Subject: [PATCH 13/18] feat(Simulator/WalletHome/WalletBalance): migrate to
 Tailwind

---
 .../Simulator/WalletHome/WalletBalance.tsx    | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/Simulator/WalletHome/WalletBalance.tsx b/src/components/Simulator/WalletHome/WalletBalance.tsx
index 511ceec0cab..b5031c88136 100644
--- a/src/components/Simulator/WalletHome/WalletBalance.tsx
+++ b/src/components/Simulator/WalletHome/WalletBalance.tsx
@@ -1,36 +1,28 @@
 import React from "react"
-import { Box, type BoxProps, Flex, Text } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { getMaxFractionDigitsUsd } from "../utils"
 
 import { AddressPill } from "./AddressPill"
 
-type WalletBalanceProps = BoxProps & {
+type WalletBalanceProps = {
   usdAmount?: number
 }
 
-export const WalletBalance = ({
-  usdAmount = 0,
-  ...boxProps
-}: WalletBalanceProps) => (
-  <Box zIndex={1} {...boxProps}>
-    <Text textAlign="center" color="body.medium" mb={{ base: 2, md: 4 }}>
-      Your total
-    </Text>
-    <Text
-      textAlign="center"
-      fontSize={{ base: "3xl", md: "5xl" }}
-      fontWeight="bold"
-    >
+export const WalletBalance = ({ usdAmount = 0 }: WalletBalanceProps) => (
+  <div className="z-[1]">
+    <p className="mb-2 text-center text-body-medium md:mb-4">Your total</p>
+    <p className="text-center text-3xl font-bold !leading-base md:text-5xl">
       {Intl.NumberFormat("en-US", {
         style: "currency",
         currency: "USD",
         notation: "compact",
         maximumFractionDigits: getMaxFractionDigitsUsd(usdAmount),
       }).format(usdAmount)}
-    </Text>
-    <Flex justify="center" mb={4}>
+    </p>
+    <Flex className="mb-4 justify-center">
       <AddressPill />
     </Flex>
-  </Box>
+  </div>
 )

From cdcc6edb0cbe695ee73b4e923c5328d534c05ab9 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 1 Feb 2025 00:04:55 -0500
Subject: [PATCH 14/18] feat(Simulator/WalletHome/TokenBalanceList): create
 story

---
 .../__stories__/TokenBalanceList.stories.tsx   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx b/src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx
new file mode 100644
index 00000000000..54ba1098e9a
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { defaultTokenBalances } from "../../constants"
+import { TokenBalanceList as Component } from "../TokenBalanceList"
+
+const meta = {
+  title:
+    "Molecules / Display Content / Simulator / WalletHome / TokenBalanceList",
+  component: Component,
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const TokenBalanceList: StoryObj<typeof meta> = {
+  args: {
+    tokenBalances: defaultTokenBalances,
+  },
+}

From 142b3bf359b1700dd1344a4d6b3bdbb5e38944cb Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 1 Feb 2025 00:21:58 -0500
Subject: [PATCH 15/18] feat(Simulator/WalletHome/TokenBalanceItem): migrate to
 Tailwind

---
 .../Simulator/WalletHome/TokenBalanceItem.tsx | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/components/Simulator/WalletHome/TokenBalanceItem.tsx b/src/components/Simulator/WalletHome/TokenBalanceItem.tsx
index 9b0ed1a945f..b95a3924c3f 100644
--- a/src/components/Simulator/WalletHome/TokenBalanceItem.tsx
+++ b/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>
   )
 }

From d424beb56ffc2998b537c8cde0f0c4106031e211 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 1 Feb 2025 00:38:39 -0500
Subject: [PATCH 16/18] feat(Simulator/WalletHome/TokenbalanceList): migrate to
 Tailwind

---
 .../Simulator/WalletHome/TokenBalanceList.tsx        | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/Simulator/WalletHome/TokenBalanceList.tsx b/src/components/Simulator/WalletHome/TokenBalanceList.tsx
index c8c095cbc3e..e473ccbebc9 100644
--- a/src/components/Simulator/WalletHome/TokenBalanceList.tsx
+++ b/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} />
       ))}

From 07d0d56f359c28511f680e2cf8f7b5c5ce1da5a8 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 1 Feb 2025 12:04:42 -0500
Subject: [PATCH 17/18] feat(Simulator/WalletHome/index): migrate to Tailwind

---
 src/components/Simulator/WalletHome/index.tsx | 33 ++++---------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/components/Simulator/WalletHome/index.tsx b/src/components/Simulator/WalletHome/index.tsx
index 2a81c72873e..1cd446c4b21 100644
--- a/src/components/Simulator/WalletHome/index.tsx
+++ b/src/components/Simulator/WalletHome/index.tsx
@@ -1,5 +1,6 @@
-import React, { type Dispatch, type SetStateAction } from "react"
-import { Flex } from "@chakra-ui/react"
+import { type Dispatch, type SetStateAction } from "react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { defaultTokenBalances } from "../constants"
 import type { SimulatorNav } from "../interfaces"
@@ -35,34 +36,12 @@ export const WalletHome = ({
     0
   )
   return (
-    <Flex
-      direction="column"
-      alignItems="center"
-      bg="background.base"
-      position="absolute"
-      inset={0}
-    >
-      <Flex
-        direction="column"
-        flex={1}
-        pt={8}
-        pb={4}
-        px={6}
-        justify="space-between"
-        w="full"
-      >
+    <Flex className="absolute inset-0 flex-col items-center bg-background">
+      <Flex className="w-full flex-1 flex-col justify-between px-6 pb-4 pt-8">
         <WalletBalance usdAmount={totalAmounts} />
         <SendReceiveButtons nav={nav} isEnabled={isEnabled} />
       </Flex>
-      <Flex
-        direction="column"
-        flex={1}
-        p={6}
-        gap={6}
-        justify="space-between"
-        w="full"
-        bg="background.highlight"
-      >
+      <Flex className="w-full flex-1 flex-col justify-between gap-6 bg-background-highlight p-6">
         <CategoryTabs
           categories={["Crypto", "NFTs"]}
           activeIndex={activeTabIndex}

From 782215b5b2b9f8c5b7ad9b34f640a4f5ed4f295e Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 7 Feb 2025 08:48:19 -0500
Subject: [PATCH 18/18] feat(Simulator/WalletHome): create stories for main
 component

---
 .../__stories__/CategoryTabs.stories.tsx      | 34 ----------
 .../__stories__/NFTList.stories.tsx           | 43 ------------
 .../SendReceiveButtons.stories.tsx            | 25 -------
 .../__stories__/TokenBalanceList.stories.tsx  | 18 -----
 .../__stories__/WalletBalance.stories.tsx     | 21 ------
 .../__stories__/WalletHome.stories.tsx        | 67 +++++++++++++++++++
 .../Simulator/__stories__/Phone.stories.tsx   | 35 ----------
 7 files changed, 67 insertions(+), 176 deletions(-)
 delete mode 100644 src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx
 delete mode 100644 src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
 delete mode 100644 src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx
 delete mode 100644 src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx
 delete mode 100644 src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
 create mode 100644 src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx
 delete mode 100644 src/components/Simulator/__stories__/Phone.stories.tsx

diff --git a/src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx b/src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx
deleted file mode 100644
index 6eed351dfa2..00000000000
--- a/src/components/Simulator/WalletHome/__stories__/CategoryTabs.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useState } from "react"
-import { Meta, StoryObj } from "@storybook/react"
-
-import { CategoryTabs } from "../CategoryTabs"
-
-const meta = {
-  title: "Molecules / Display Content / Simulator / WalletHome / CategoryTabs",
-  component: CategoryTabs,
-  args: {
-    categories: ["My contacts", "Recent"],
-  },
-} satisfies Meta<typeof CategoryTabs>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-const ActiveTab: Story["render"] = (args) => {
-  const [activeTabIndex, setActiveTabIndex] = useState(1)
-
-  return (
-    <CategoryTabs
-      {...args}
-      activeIndex={activeTabIndex}
-      setActiveIndex={setActiveTabIndex}
-    />
-  )
-}
-
-export const SelectActiveTab: Story = {
-  render: (args) => <ActiveTab {...args} />,
-}
diff --git a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx b/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
deleted file mode 100644
index 9ba7183c591..00000000000
--- a/src/components/Simulator/WalletHome/__stories__/NFTList.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import pickBy from "lodash/pickBy"
-import type { Meta, StoryObj } from "@storybook/react/*"
-
-import { viewportModes } from "../../../../../.storybook/modes"
-import { NFTList as Component } from "../NFTList"
-
-import NFTImage from "@/public/images/deep-panic.png"
-
-const meta = {
-  title: "Molecules / Display Content / Simulator / WalletHome / NFTList",
-  component: Component,
-  decorators: [
-    (Story) => (
-      <div className="w-full max-w-[300px]">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    chromatic: {
-      modes: pickBy(viewportModes, (args) =>
-        ["base", "md"].includes(args.viewport)
-      ),
-    },
-  },
-} satisfies Meta<typeof Component>
-
-export default meta
-
-export const HasList: StoryObj = {
-  args: {
-    nfts: Array.from({ length: 5 }, () => ({
-      title: "Cool art",
-      image: NFTImage,
-    })),
-  },
-}
-
-export const NoNFTs: StoryObj = {
-  args: {
-    nfts: [],
-  },
-}
diff --git a/src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx b/src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx
deleted file mode 100644
index 6ebad7735db..00000000000
--- a/src/components/Simulator/WalletHome/__stories__/SendReceiveButtons.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react/*"
-import { fn } from "@storybook/test"
-
-import { SendReceiveButtons as Component } from "../SendReceiveButtons"
-
-const meta = {
-  title:
-    "Molecules / Display Content / Simulator / WalletHome / SendReceiveButtons",
-  component: Component,
-} satisfies Meta<typeof Component>
-
-export default meta
-
-export const SendReceiveButtons: StoryObj<typeof meta> = {
-  args: {
-    isEnabled: [false, true],
-    nav: {
-      progressStepper: fn(),
-      openPath: fn(),
-      step: 0,
-      regressStepper: fn(),
-      totalSteps: 1,
-    },
-  },
-}
diff --git a/src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx b/src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx
deleted file mode 100644
index 54ba1098e9a..00000000000
--- a/src/components/Simulator/WalletHome/__stories__/TokenBalanceList.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { defaultTokenBalances } from "../../constants"
-import { TokenBalanceList as Component } from "../TokenBalanceList"
-
-const meta = {
-  title:
-    "Molecules / Display Content / Simulator / WalletHome / TokenBalanceList",
-  component: Component,
-} satisfies Meta<typeof Component>
-
-export default meta
-
-export const TokenBalanceList: StoryObj<typeof meta> = {
-  args: {
-    tokenBalances: defaultTokenBalances,
-  },
-}
diff --git a/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx b/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
deleted file mode 100644
index a026cd5dc52..00000000000
--- a/src/components/Simulator/WalletHome/__stories__/WalletBalance.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import pickBy from "lodash/pickBy"
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { viewportModes } from "../../../../../.storybook/modes"
-import { WalletBalance as Component } from "../WalletBalance"
-
-const meta = {
-  title: "Molecules / Display Content / Simulator / WalletHome / WalletBalance",
-  component: Component,
-  parameters: {
-    chromatic: {
-      modes: pickBy(viewportModes, ({ viewport }) =>
-        ["base", "md"].includes(viewport)
-      ),
-    },
-  },
-} satisfies Meta<typeof Component>
-
-export default meta
-
-export const WalletBalance: StoryObj<typeof meta> = {}
diff --git a/src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx b/src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx
new file mode 100644
index 00000000000..ac4924e837b
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+
+import { defaultTokenBalances } from "../../constants"
+import { Phone } from "../../Phone"
+import { Template } from "../../Template"
+import { WalletHome as Component } from ".."
+
+import NFTImage from "@/public/images/deep-panic.png"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / WalletHome",
+  component: Component,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="mt-8">
+        <Template>
+          <Phone>
+            <Story />
+          </Phone>
+        </Template>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Component>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ActiveButton: Story = {
+  args: {
+    isEnabled: [false, true],
+    nav: {
+      openPath: fn(),
+      progressStepper: fn(),
+      regressStepper: fn(),
+      step: 0,
+      totalSteps: 2,
+    },
+  },
+}
+
+export const NFTTab: Story = {
+  args: {
+    tokenBalances: defaultTokenBalances,
+    activeTabIndex: 1,
+    setActiveTabIndex: fn(),
+    nfts: [
+      {
+        title: "Cool art",
+        image: NFTImage,
+      },
+    ],
+  },
+}
+export const NFTTabEmpty: Story = {
+  args: {
+    ...NFTTab.args,
+    nfts: [],
+  },
+}
diff --git a/src/components/Simulator/__stories__/Phone.stories.tsx b/src/components/Simulator/__stories__/Phone.stories.tsx
deleted file mode 100644
index eac022eb69b..00000000000
--- a/src/components/Simulator/__stories__/Phone.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react/*"
-
-import { Center } from "@/components/ui/flex"
-
-import { Phone as PhoneComponent } from "../Phone"
-import { Template } from "../Template"
-
-const meta = {
-  title: "Molecules / Display Content / Simulator / Phone",
-  component: PhoneComponent,
-  parameters: {
-    layout: "fullscreen",
-  },
-  decorators: [
-    (Story) => (
-      <div className="mt-8">
-        <Template>
-          <Story />
-        </Template>
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof PhoneComponent>
-
-export default meta
-
-export const Phone: StoryObj<typeof meta> = {
-  render: () => (
-    <PhoneComponent>
-      <div className="grid size-full items-center">
-        <Center className="h-1/2 bg-gray-200">Centered Child Content</Center>
-      </div>
-    </PhoneComponent>
-  ),
-}