feat: WalletLinkHelperModal migration

src/v2/components/Account/components/AccountModal/AccountModal.tsx

@@ -111,11 +111,7 @@ const AccountModal = () => {
                       )}
                     </Button>
                   ) : (
-                    <img
-                      src="/walletLogos/fuel.svg"
-                      alt={CHAIN_CONFIG[Chains[chainId]].name}
-                      className="size-4"
-                    />
+                    <img src="/walletLogos/fuel.svg" alt="Fuel" className="size-4" />
                   )}
                 </div>
                 <NetworkModal

src/v2/components/Account/components/AccountModal/components/AccountConnections.tsx

@@ -62,7 +62,7 @@ const AccountConnections = () => {
         title="Linked addresses"
         className="gap-3 pt-4"
         titleRightElement={
-          addresses.length > 1 ? (
+          addresses?.length > 1 ? (
             <div className="flex w-full items-center justify-between">
               <TooltipProvider>
                 <Tooltip>
@@ -83,7 +83,7 @@ const AccountConnections = () => {
       <AccountSection>
         {isLoading ? (
           <LinkedAddressSkeleton />
-        ) : !(addresses.length > 1) ? (
+        ) : !(addresses?.length > 1) ? (
           <div
             className={cn("flex flex-col gap-2", {
               "flex-row items-center justify-between": !vaults?.length,

src/v2/components/Web3ConnectionManager/WalletLinkHelperModal.tsx

@@ -1,49 +1,53 @@
-import {
-  Box,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-} from "@chakra-ui/react"
-import { SignOut } from "@phosphor-icons/react"
-import LogicDivider from "components/[guild]/LogicDivider"
-import Button from "components/common/Button"
-import { Modal } from "components/common/Modal"
+import { SignOut } from "@phosphor-icons/react/dist/ssr"
 import { useAtom } from "jotai"
 import { walletLinkHelperModalAtom } from "../Providers/atoms"
+import { Button } from "../ui/Button"
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/Dialog"
 
 const WalletLinkHelperModal = () => {
   const [isWalletLinkHelperModalOpen, setIsWalletLinkModalOpen] = useAtom(
     walletLinkHelperModalAtom
   )
 
-  const onClose = () => setIsWalletLinkModalOpen(false)
-
   return (
-    <Modal isOpen={isWalletLinkHelperModalOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalCloseButton />
-        <ModalHeader>Link address</ModalHeader>
-        <ModalBody>
-          <Text mt="-3">
-            Please switch to the account you want to link and connect with it in your
-            wallet!
-          </Text>
-          <Box borderRadius={"lg"} overflow="hidden" mt="4" minH="448px">
-            <video src="/videos/metamask-switch-account.webm" muted autoPlay loop>
-              Your browser does not support the HTML5 video tag.
-            </video>
-          </Box>
-          <LogicDivider logic="OR" my="1" />
-          <Button onClick={onClose} w="full" rightIcon={<SignOut />}>
-            Connect another wallet
-          </Button>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+    <Dialog
+      open={isWalletLinkHelperModalOpen}
+      onOpenChange={setIsWalletLinkModalOpen}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Link address</DialogTitle>
+        </DialogHeader>
+
+        <p>
+          Please switch to the account you want to link and connect with it in your
+          wallet!
+        </p>
+        <div className="mt-4 min-h-96 overflow-hidden rounded-lg">
+          <video src="/videos/metamask-switch-account.webm" muted autoPlay loop>
+            Your browser does not support the HTML5 video tag.
+          </video>
+        </div>
+
+        <div className="flex w-full items-center gap-4 py-4">
+          <hr className="w-full border-border" />
+          <span className="text-xs font-bold text-muted-foreground">OR</span>
+          <hr className="w-full border-border" />
+        </div>
+
+        <Button onClick={() => setIsWalletLinkModalOpen(false)} className="w-full">
+          Connect another wallet
+          <SignOut className="ml-1.5" />
+        </Button>
+        <DialogCloseButton />
+      </DialogContent>
+    </Dialog>
   )
 }
 export default WalletLinkHelperModal

src/v2/components/Web3ConnectionManager/Web3ConnectionManager.tsx

@@ -2,6 +2,7 @@ import useAutoReconnect from "@/hooks/useAutoReconnect"
 import { useAtom } from "jotai"
 import { walletSelectorModalAtom } from "../Providers/atoms"
 import { useTriggerWalletSelectorModal } from "./hooks/useTriggerWalletSelectorModal"
+import WalletLinkHelperModal from "./WalletLinkHelperModal"
 import WalletSelectorModal from "./WalletSelectorModal"
 
 export function Web3ConnectionManagerBase() {
@@ -21,8 +22,8 @@ export function Web3ConnectionManagerBase() {
         onOpen={() => setIsWalletSelectorModalOpen(true)}
         onClose={() => setIsWalletSelectorModalOpen(false)}
       />
-      {/*
       <WalletLinkHelperModal />
+      {/*
       <PlatformMergeErrorAlert /> */}
     </>
   )