feat: add mobile options on desktop wallet list

components/bank/forms/sendForm.tsx

@@ -136,7 +136,6 @@ export default function SendForm({
             amount: [{ denom: values.selectedToken.coreDenom, amount: amountInBaseUnits }],
           });
 
-      console.log('Estimating fee for address:', address);
       const fee = await estimateFee(address, [msg]);
 
       await tx([msg], {

components/groups/modals/memberManagementModal.tsx

@@ -128,8 +128,6 @@ export function MemberManagementModal({
         weight: member.markedForDeletion ? '0' : member.weight || '1',
       }));
 
-    console.log('Member updates:', memberUpdates);
-
     const msg = updateGroupMembers({
       admin: groupAdmin,
       groupId: BigInt(groupId),

components/react/modal.tsx

@@ -76,15 +76,29 @@ export const TailwindModal: React.FC<
     }
   }, [isOpen, walletStatus, currentWalletName, showContacts]);
 
+  useEffect(() => {
+    if (!isOpen && current?.walletStatus === WalletStatus.Connecting) {
+      current.disconnect();
+    }
+  }, [isOpen, current]);
+
   const onWalletClicked = useCallback(
     (name: string) => {
+      const timeoutId = setTimeout(() => {
+        const wallet = walletRepo?.getWallet(name);
+        if (wallet?.walletStatus === WalletStatus.Connecting) {
+          wallet.disconnect();
+          setCurrentView(ModalView.Error);
+        }
+      }, 30000);
+
       walletRepo?.connect(name);
 
-      // 1ms timeout prevents _render from determining the view to show first
       setTimeout(() => {
         const wallet = walletRepo?.getWallet(name);
 
         if (wallet?.isWalletNotExist) {
+          clearTimeout(timeoutId);
           setCurrentView(ModalView.NotExist);
           setSelectedWallet(wallet);
         }
@@ -93,13 +107,18 @@ export const TailwindModal: React.FC<
           setQRWallet(wallet);
         }
       }, 1);
+
+      return () => clearTimeout(timeoutId);
     },
     [walletRepo]
   );
 
   const onCloseModal = useCallback(() => {
+    if (current?.walletStatus === WalletStatus.Connecting) {
+      current.disconnect();
+    }
     setOpen(false);
-  }, [setOpen]);
+  }, [setOpen, current]);
 
   const _render = useMemo(() => {
     switch (currentView) {
@@ -125,11 +144,11 @@ export const TailwindModal: React.FC<
         );
       case ModalView.Connecting:
         let subtitle: string;
-        if (currentWalletData!.mode === 'wallet-connect') {
-          subtitle = `Approve ${currentWalletData!.prettyName} connection request on your mobile.`;
+        if (currentWalletData!?.mode === 'wallet-connect') {
+          subtitle = `Approve ${currentWalletData!.prettyName} connection request on your mobile device.`;
         } else {
           subtitle = `Open the ${
-            currentWalletData!.prettyName
+            currentWalletData!?.prettyName
           } browser extension to connect your wallet.`;
         }
 

components/react/views/WalletList.tsx

@@ -25,12 +25,19 @@ export const WalletList = ({
       wallet.walletInfo.prettyName
     )
   );
-  console.log(wallets);
+
   const mobile = wallets.filter(wallet =>
-    ['Wallet Connect', 'Keplr Mobile', 'Cosmostation Mobile', 'Leap Mobile'].includes(
-      wallet.walletInfo.prettyName
-    )
+    ['Keplr Mobile', 'Cosmostation Mobile', 'Leap Mobile'].includes(wallet.walletInfo.prettyName)
   );
+
+  const hasMobileVersion = (prettyName: string) => {
+    return mobile.some(w => w.walletInfo.prettyName.startsWith(prettyName));
+  };
+
+  const getMobileWalletName = (browserName: string) => {
+    return mobile.find(w => w.walletInfo.prettyName.startsWith(browserName))?.walletInfo.name;
+  };
+
   return (
     <div className="p-1 relative max-w-sm mx-auto">
       <h1 className="text-sm font-semibold text-center mb-6">Connect Wallet</h1>
@@ -46,24 +53,37 @@ export const WalletList = ({
       <div className="hidden md:block">
         <div className="space-y-2 mb-4">
           {browser.map(({ walletInfo: { name, prettyName, logo } }) => (
-            <button
-              key={name}
-              onClick={() => onWalletClicked(name)}
-              className="flex items-center w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] transition"
-            >
-              <img
-                src={
-                  prettyName === 'Cosmos MetaMask Extension'
-                    ? '/metamask.svg'
-                    : getRealLogo(logo?.toString() ?? '')
-                }
-                alt={prettyName}
-                className="w-10 h-10 rounded-xl mr-3"
-              />
-              <span className="text-md">
-                {prettyName === 'Cosmos MetaMask Extension' ? 'MetaMask' : prettyName}
-              </span>
-            </button>
+            <div key={name} className="w-full">
+              <button
+                onClick={() => onWalletClicked(name)}
+                className="flex items-center w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] transition"
+              >
+                <img
+                  src={
+                    prettyName === 'Cosmos MetaMask Extension'
+                      ? '/metamask.svg'
+                      : getRealLogo(logo?.toString() ?? '')
+                  }
+                  alt={prettyName}
+                  className="w-10 h-10 rounded-xl mr-3"
+                />
+                <span className="text-md flex-1 text-left">
+                  {prettyName === 'Cosmos MetaMask Extension' ? 'MetaMask' : prettyName}
+                </span>
+                {hasMobileVersion(prettyName) && (
+                  <div
+                    onClick={e => {
+                      e.stopPropagation();
+                      onWalletClicked(getMobileWalletName(prettyName) || '');
+                    }}
+                    className="p-1.5 rounded-lg dark:hover:bg-[#ffffff1a] hover:bg-[#0000000d] dark:bg-[#ffffff37] bg-[#d5d5e4]  transition cursor-pointer"
+                    title={`Connect with ${prettyName} Mobile`}
+                  >
+                    <img src={getRealLogo('/sms')} alt="mobile" className="w-5 h-5" />
+                  </div>
+                )}
+              </button>
+            </div>
           ))}
         </div>
 

components/wallet.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useEffect, useMemo, useState } from 'react';
+import React, { MouseEventHandler, useEffect, useMemo, useState, useRef } from 'react';
 
 import { ArrowDownTrayIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { ArrowUpIcon, CopyIcon } from './icons';
@@ -36,20 +36,32 @@ interface WalletSectionProps {
 export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
   const { connect, openView, status, username, address } = useChain(chainName);
   const [localStatus, setLocalStatus] = useState(status);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
-    let timeoutId: ReturnType<typeof setTimeout>;
-
     if (status === WalletStatus.Connecting) {
-      timeoutId = setTimeout(() => {
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Set new timeout
+      timeoutRef.current = setTimeout(() => {
         setLocalStatus(WalletStatus.Error);
-      }, 10000); // 10 seconds timeout
+      }, 30000); // 30 seconds timeout
     } else {
       setLocalStatus(status);
+      // Clear timeout when status changes
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     }
 
+    // Cleanup on unmount
     return () => {
-      if (timeoutId) clearTimeout(timeoutId);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, [status]);
 
@@ -202,7 +214,11 @@ export const IconWallet: React.FC<WalletSectionProps> = ({ chainName }) => {
     }
 
     let onClick;
-    if (status === WalletStatus.Disconnected || status === WalletStatus.Rejected)
+    if (
+      status === WalletStatus.Disconnected ||
+      status === WalletStatus.Rejected ||
+      status === WalletStatus.Error
+    )
       onClick = onClickConnect;
     else onClick = openView;
 
@@ -211,12 +227,10 @@ export const IconWallet: React.FC<WalletSectionProps> = ({ chainName }) => {
     return (
       <div className="relative group">
         <button
-          onClick={
-            status === WalletStatus.Disconnected || status === WalletStatus.Rejected
-              ? onClick
-              : () => {}
-          }
-          className={`flex justify-center items-center w-8 h-8 hover:text-primary  duration-200 ease-in-out  ${status === WalletStatus.Disconnected || status === WalletStatus.Rejected ? 'cursor-pointer' : 'cursor-default'}`}
+          onClick={onClick}
+          className={`flex justify-center items-center w-8 h-8 hover:text-primary duration-200 ease-in-out ${
+            status === WalletStatus.Connected ? 'cursor-default' : 'cursor-pointer'
+          }`}
         >
           <buttonData.icon className="w-8 h-8" />
         </button>

pages/groups/create.tsx

@@ -26,7 +26,7 @@ export default function CreateGroup() {
   const [currentStep, setCurrentStep] = useState(1);
   const [formData, dispatch] = useReducer(formDataReducer, initialFormData);
   const { address } = useChain(chainName);
-  console.log(formData);
+
   const nextStep = () => {
     if (currentStep < 5) {
       setCurrentStep(currentStep + 1);