diff --git a/src/wallet/components/Wallet.tsx b/src/wallet/components/Wallet.tsx
index c760b59d9f..d5ec88bf2e 100644
--- a/src/wallet/components/Wallet.tsx
+++ b/src/wallet/components/Wallet.tsx
@@ -6,33 +6,38 @@ import { WalletProvider, useWalletContext } from './WalletProvider';
 
 const WalletContent = ({ children }: WalletReact) => {
   const { isOpen, setIsOpen } = useWalletContext();
-  const containerRef = useRef<HTMLDivElement>(null);
+  // Create a ref for the wallet container to detect outside clicks
+  const walletContainerRef = useRef<HTMLDivElement>(null);
 
   const { connect, dropdown } = useMemo(() => {
     const childrenArray = Children.toArray(children);
     return {
+      // @ts-ignore
       connect: childrenArray.filter(({ type }) => type === ConnectWallet),
+      // @ts-ignore
       dropdown: childrenArray.filter(({ type }) => type === WalletDropdown),
     };
   }, [children]);
 
+  // Effect to handle clicking outside the wallet to close it
   useEffect(() => {
+    // Check if click is outside the wallet container and wallet is open
     const handleClickOutside = (event: MouseEvent) => {
       if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node) &&
+        walletContainerRef.current &&
+        !walletContainerRef.current.contains(event.target as Node) &&
         isOpen
       ) {
         setIsOpen(false);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
   }, [isOpen, setIsOpen]);
 
   return (
-    <div ref={containerRef} className="relative w-fit shrink-0">
+    <div ref={walletContainerRef} className="relative w-fit shrink-0">
       {connect}
       {isOpen && dropdown}
     </div>