Fix wallet modal ability to close by lowering function call level.

dredshep · Apr 9, 2024 · eacaff4 · eacaff4
1 parent 3c87457
commit eacaff4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/components/app/organisms/UserWallet/WalletModal.tsx b/components/app/organisms/UserWallet/WalletModal.tsx
@@ -11,7 +11,7 @@ import { useTokenStore } from "@/store/tokenStore";
 import { useModalStore } from "@/store/modalStore";
 
 const WalletModal: React.FC = () => {
-  const { closeWalletModal } = useModalStore();
+  const { isWalletModalOpen, closeWalletModal } = useModalStore();
   const { address } = useWalletStore();
   const { listAllTokens } = useTokenStore();
   const tokens = listAllTokens();
@@ -30,10 +30,6 @@ const WalletModal: React.FC = () => {
     console.log("Open settings modal");
   };
 
-  const hideWalletModal = () => {
-    closeWalletModal();
-  };
-
   return (
     <div className="bg-adamant-box-veryDark rounded-lg shadow-md p-6 absolute top-2 right-2 w-[312px] h-[calc(100vh-16px)] z-10">
       <div className="flex items-center justify-between mb-4">
@@ -42,7 +38,7 @@ const WalletModal: React.FC = () => {
           size={48}
         />
         <div className="flex-grow mx-3">
-          <p className="font-bold">{address}</p>
+          <p className="font-bold">{address || "secret1 no address"}</p>
         </div>
         <RiFileCopyLine
           className="text-gray-600 cursor-pointer"
@@ -54,7 +50,7 @@ const WalletModal: React.FC = () => {
         />
         <RiArrowUpSLine
           className="text-gray-600 cursor-pointer ml-2"
-          onClick={hideWalletModal}
+          onClick={closeWalletModal}
         />
       </div>
       <div className="text-center my-8">

diff --git a/components/app/organisms/UserWallet/index.tsx b/components/app/organisms/UserWallet/index.tsx
@@ -26,7 +26,7 @@ const UserWallet: React.FC<UserWalletProps> = (
   }
 ) => {
   const { connectionRefused } = useStore();
-  const { openWalletModal, isWalletModalOpen } = useModalStore();
+  const { isWalletModalOpen, openWalletModal } = useModalStore();
   const {
     wallet: { address: userAddress, ADMTBalance, SCRTBalance },
   } = useStore();
@@ -42,30 +42,32 @@ const UserWallet: React.FC<UserWalletProps> = (
   }, [connectionRefused]);
 
   return (
-    <div className="flex items-center gap-4 select-none cursor-pointer">
+    <div className="flex items-center gap-4 select-none">
       {isConnected ? (
-        <div
-          className="flex gap-4 hover:bg-white hover:bg-opacity-5 px-6 py-3 rounded-lg transition-all duration-100"
-          onClick={() => isConnected && openWalletModal()}
-        >
-          <div className="relative" onClick={() => keplrDisconnect()}>
-            <PlaceholderImageFromSeed seed={userAddress} size={48} />
-          </div>
-          <div>
-            <div className="hidden md:flex font-medium items-center gap-2">
-              {truncatedAddress}
-              <RxCaretDown className="text-white h-5 w-5" />
+        <>
+          <div
+            className="flex gap-4 hover:bg-white hover:bg-opacity-5 px-6 py-3 rounded-lg transition-all duration-100"
+            onClick={() => isConnected && openWalletModal()}
+          >
+            <div className="relative" onClick={() => keplrDisconnect()}>
+              <PlaceholderImageFromSeed seed={userAddress} size={48} />
             </div>
-            <div className="hidden md:block font-normal opacity-50">
-              {SCRTBalance} SCRT / {ADMTBalance} ADMT
+            <div>
+              <div className="hidden md:flex font-medium items-center gap-2">
+                {truncatedAddress}
+                <RxCaretDown className="text-white h-5 w-5" />
+              </div>
+              <div className="hidden md:block font-normal opacity-50">
+                {SCRTBalance} SCRT / {ADMTBalance} ADMT
+              </div>
             </div>
           </div>
-          <WalletModal />
-        </div>
+          {isWalletModalOpen && <WalletModal />}
+        </>
       ) : (
         <button
           onClick={() => keplrConnect()}
-          className="text-black bg-white px-8 pt-2 pb-2 rounded-lg font-bold leading-6 fle hover:bg-adamant-accentBg transition-all ease-in-out"
+          className="cursor-pointer text-black bg-white px-8 pt-2 pb-2 rounded-lg font-bold leading-6 fle hover:bg-adamant-accentBg transition-all ease-in-out"
         >
           CONNECT
         </button>

diff --git a/store/modalStore.ts b/store/modalStore.ts
@@ -6,8 +6,8 @@ interface ModalStoreState {
   closeWalletModal: () => void;
 }
 
-export const useModalStore = create<ModalStoreState>((set) => ({
+export const useModalStore = create<ModalStoreState>((set, get) => ({
   isWalletModalOpen: false,
-  openWalletModal: () => set({ isWalletModalOpen: true }),
-  closeWalletModal: () => set({ isWalletModalOpen: false }),
+  openWalletModal: () => set(() => ({ isWalletModalOpen: true })),
+  closeWalletModal: () => set(() => ({ isWalletModalOpen: false })),
 }));