From 407cba880a7d1707633823a9d28e6d3c9c7fcab1 Mon Sep 17 00:00:00 2001
From: Hamid Roohi <hamidroohi71@gmail.com>
Date: Mon, 12 Aug 2024 03:07:18 +0330
Subject: [PATCH] fix(wallet connect): fix wallet connect UI

---
 src/components/walletButton.tsx         | 20 +++++-
 src/components/walletSelectionModal.tsx | 85 ++++++++++++++++++++++++-
 2 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/src/components/walletButton.tsx b/src/components/walletButton.tsx
index abdd142..f39523e 100644
--- a/src/components/walletButton.tsx
+++ b/src/components/walletButton.tsx
@@ -1,11 +1,27 @@
+import { useCallback, useState } from "react";
+import WalletSelectionModal from "./walletSelectionModal";
+
 export default function WalletButton() {
+  const [visible, setVisible] = useState(false);
+
+  const handleClose = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  console.log(visible);
+
   return (
     <>
-      <div className="flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg">
+      <div
+        onClick={() => {
+          setVisible(true);
+        }}
+        className="flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg"
+      >
         <span className="block h-[19px] w-[19px] bg-[url('/images/icons/wallet-icon.svg')] bg-contain bg-center bg-no-repeat" />
         <p className="text-[14px] leading-[24px]">Connect Wallet</p>
       </div>
-      {/* <WalletSelectionModal /> */}
+      <WalletSelectionModal visible={visible} onClose={handleClose} />
     </>
   );
 }
diff --git a/src/components/walletSelectionModal.tsx b/src/components/walletSelectionModal.tsx
index ab33ea7..6d8b146 100644
--- a/src/components/walletSelectionModal.tsx
+++ b/src/components/walletSelectionModal.tsx
@@ -1,10 +1,89 @@
+import { useTalisman, useTransfer } from "@/hooks";
+import { WalletID } from "@/types";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+import { useMemo } from "react";
+
 export default function WalletSelectionModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
+  const { talismanAccounts, connectTalisman } = useTalisman();
+  const { openConnectModal } = useConnectModal();
+
+  const {
+    sender,
+    sourceChain,
+    targetChain,
+    activeSenderWallet,
+    activeRecipientWallet,
+    setSender,
+    setActiveSenderAccount,
+    setActiveRecipientAccount,
+    setActiveSenderWallet,
+    setActiveRecipientWallet,
+  } = useTransfer();
+  const [supported, activeWallet, clearValue, setActiveAccount, setActiveWallet] = [
+    sourceChain.wallets,
+    activeSenderWallet,
+    setSender,
+    setActiveSenderAccount,
+    setActiveSenderWallet,
+  ];
+
+  const [supportedWalletEvm, supportedWalletTalisman] = useMemo(() => {
+    return [supported.some((id) => id === WalletID.EVM), supported.some((id) => id === WalletID.TALISMAN)];
+  }, [supported]);
   return (
     <>
       {visible && (
-        <div className="fixed left-0 top-0 h-[100vw] w-[100vw]">
-          <div className="flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.1)]">
-            <div className="flex h-[300px] w-[400px] rounded-[20px] bg-white p-[20px]"></div>
+        <div className="fixed left-0 top-0 z-50 h-[100vh] w-[100vw]">
+          <div className="flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]" onClick={onClose}>
+            <div className="flex h-[300px] w-[500px] flex-col items-center justify-between gap-middle rounded-[20px] bg-white p-[20px]">
+              <h2 className="text-[20px] font-bold">Select a wallet Type</h2>
+              <div className="flex w-full flex-col gap-middle">
+                <button
+                  className="border-radius flex w-full items-center gap-middle bg-[#F2F3F5] p-middle transition-colors duration-300 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
+                  disabled={!supportedWalletTalisman}
+                  onClick={() => {
+                    setActiveWallet(WalletID.TALISMAN);
+                    connectTalisman();
+                    onClose();
+                  }}
+                >
+                  <Image
+                    width={20}
+                    height={20}
+                    alt="Wallet icon"
+                    src={`/images/wallet/talisman-red.svg`}
+                    className="rounded-full"
+                  />
+                  <span>Talisman</span>
+                </button>
+                <button
+                  className="border-radius flex w-full items-center gap-middle bg-[#F2F3F5] p-middle transition-colors duration-300 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
+                  disabled={!supportedWalletEvm}
+                  onClick={() => {
+                    setActiveWallet(WalletID.EVM);
+                    openConnectModal?.();
+                    onClose();
+                  }}
+                >
+                  <Image
+                    width={20}
+                    height={20}
+                    alt="Wallet icon"
+                    src={`/images/wallet/evm.png`}
+                    className="rounded-full"
+                  />
+                  <span>EVM wallets</span>
+                </button>
+              </div>
+
+              <button
+                onClick={onClose}
+                className="w-full  flex-shrink-0 rounded-[10px] bg-[#FF0083] p-middle text-[14px] leading-[24px] text-white"
+              >
+                Cancel
+              </button>
+            </div>
           </div>
         </div>
       )}