chalabi/mobile on desktop

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

@@ -3,10 +3,12 @@
 import { WalletStatus } from 'cosmos-kit';
 import React, { useCallback, Fragment, useState, useMemo, useEffect } from 'react';
 import { Dialog, Transition, Portal } from '@headlessui/react';
-import { Connected, Connecting, Error, NotExist, QRCode, WalletList, Contacts } from './views';
+import { Connected, Connecting, Error, NotExist, QRCodeView, WalletList, Contacts } from './views';
 import { useRouter } from 'next/router';
 import { ToastProvider } from '@/contexts/toastContext';
 import { useDeviceDetect } from '@/hooks';
+import { State, ExpiredError } from '@cosmos-kit/core';
+
 export enum ModalView {
   WalletList,
   QRCode,
@@ -35,11 +37,11 @@
   showMemberManagementModal = false,
   showMessageEditModal = false,
 }) => {
-  const router = useRouter();
-
   const [currentView, setCurrentView] = useState<ModalView>(ModalView.WalletList);
   const [qrWallet, setQRWallet] = useState<ChainWalletBase | undefined>();
   const [selectedWallet, setSelectedWallet] = useState<ChainWalletBase | undefined>();
+  const [qrState, setQRState] = useState<State>(State.Init);
+  const [qrMessage, setQrMessage] = useState<string>('');
 
   const current = walletRepo?.current;
   const currentWalletData = current?.walletInfo;
@@ -58,7 +60,11 @@
             setCurrentView(ModalView.WalletList);
             break;
           case WalletStatus.Connecting:
-            setCurrentView(ModalView.Connecting);
+            if (current?.walletInfo.mode === 'wallet-connect' && !isMobile) {
+              setCurrentView(ModalView.QRCode);
+            } else {
+              setCurrentView(ModalView.Connecting);
+            }
             break;
           case WalletStatus.Connected:
             setCurrentView(ModalView.Connected);
@@ -75,32 +81,129 @@
         }
       }
     }
-  }, [isOpen, walletStatus, currentWalletName, showContacts]);
+  }, [isOpen, walletStatus, currentWalletName, showContacts, current?.walletInfo.mode, isMobile]);
+
+  useEffect(() => {
+    if (currentView === ModalView.QRCode && qrWallet) {
+      (qrWallet.client as any)?.setActions?.({
+        qrUrl: {
+          state: (s: State) => setQRState(s),
+          message: (msg: string) => setQrMessage(msg),
+        },
+        onError: (err: Error) => {
+          if (err.message?.includes('No matching key')) {
+            setQRState(State.Error);
+            setQrMessage(err.message);
+            qrWallet.setMessage?.(err.message);
+          }
+        },
+      });
+    }
+  }, [currentView, qrWallet]);
 
   const onWalletClicked = useCallback(
     (name: string) => {
-      walletRepo?.connect(name);
+      const wallet = walletRepo?.getWallet(name);
 
-      // 1ms timeout prevents _render from determining the view to show first
       setTimeout(() => {
-        const wallet = walletRepo?.getWallet(name);
-
         if (wallet?.isWalletNotExist) {
-          setCurrentView(ModalView.NotExist);
           setSelectedWallet(wallet);
-        }
-        if (wallet?.walletInfo.mode === 'wallet-connect') {
-          setCurrentView(isMobile ? ModalView.Connecting : ModalView.QRCode);
-          setQRWallet(wallet);
+          setCurrentView(ModalView.NotExist);
+          return;
         }
       }, 1);
+
+      if (wallet?.walletInfo.mode === 'wallet-connect') {
+        if (isMobile) {
+          setCurrentView(ModalView.Connecting);
+          walletRepo?.connect(name).catch(error => {
+            console.error('Wallet connection error:', error);
+            setCurrentView(ModalView.Error);
+          });
+          return;
+        }
+
+        setQRWallet(wallet);
+        setCurrentView(ModalView.QRCode);
+
+        const timeoutId = setTimeout(() => {
+          if (wallet?.walletStatus === WalletStatus.Connecting) {
+            wallet.disconnect();
+            setCurrentView(ModalView.Error);
+          }
+        }, 30000);
+
+        walletRepo
+          ?.connect(name)
+          .then(() => {
+            if (wallet?.walletStatus === WalletStatus.Connected) {
+              setCurrentView(ModalView.Connected);
+            }
+          })
+          .catch(error => {
+            console.error('Wallet connection error:', error);
+            setCurrentView(ModalView.QRCode);
+            setQRState(State.Error);
+            setQrMessage(error.message);
+          })
+          .finally(() => {
+            clearTimeout(timeoutId);
+          });
+
+        if (qrState === State.Pending && !wallet?.qrUrl?.data) {
+          setCurrentView(ModalView.Connecting);
+        }
+      } else {
+        setQRWallet(undefined);
+
+        setCurrentView(ModalView.Connecting);
+
+        const timeoutId = setTimeout(() => {
+          if (wallet?.walletStatus === WalletStatus.Connecting) {
+            wallet.disconnect();
+            setCurrentView(ModalView.Error);
+          }
+        }, 30000);
+
+        walletRepo
+          ?.connect(name)
+          .catch(error => {
+            console.error('Wallet connection error:', error);
+            setCurrentView(ModalView.Error);
+          })
+          .finally(() => {
+            clearTimeout(timeoutId);
+          });
+      }
     },
-    [walletRepo]
+    [walletRepo, isMobile, qrState, currentView]
   );
 
+  useEffect(() => {
+    if (!isOpen) {
+      if (qrWallet?.walletStatus === WalletStatus.Connecting) {
+        qrWallet.disconnect();
+        setQRWallet(undefined);
+      }
+      setQRState(State.Init);
+      setQrMessage('');
+    }
+  }, [isOpen, qrWallet]);
+
   const onCloseModal = useCallback(() => {
+    if (qrWallet?.walletStatus === WalletStatus.Connecting) {
+      qrWallet.disconnect();
+    }
     setOpen(false);
-  }, [setOpen]);
+  }, [setOpen, qrWallet]);
+
+  const onReturnToWalletList = useCallback(() => {
+    if (qrWallet?.walletStatus === WalletStatus.Connecting) {
+      qrWallet.disconnect();
+      setQRWallet(undefined);
+    }
+    setCurrentView(ModalView.WalletList);
+  }, [qrWallet]);
 
   const _render = useMemo(() => {
     switch (currentView) {
@@ -126,11 +229,11 @@
         );
       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.`;
         }
 
@@ -146,12 +249,7 @@
         );
       case ModalView.QRCode:
         return (
-          <QRCode
-            onClose={onCloseModal}
-            onReturn={() => setCurrentView(ModalView.WalletList)}
-            qrUri={qrWallet?.qrUrl.data}
-            name={qrWallet?.walletInfo.prettyName}
-          />
+          <QRCodeView onClose={onCloseModal} onReturn={onReturnToWalletList} wallet={qrWallet!} />
         );
       case ModalView.Error:
         return (
@@ -187,23 +285,32 @@
             showMessageEditModal={showMessageEditModal}
           />
         );
+
+      default:
+        return (
+          <div className="flex flex-col items-center justify-center p-6 gap-3">
+            <p className="text-sm text-gray-600 dark:text-gray-400">Reconnecting your wallet...</p>
+            <div className="loading loading-ring w-8 h-8 text-primary" />
+          </div>
+        );
     }
   }, [
     currentView,
     onCloseModal,
     onWalletClicked,
     walletRepo,
-    walletRepo?.wallets,
     currentWalletData,
     current,
-    qrWallet?.qrUrl.data,
-    qrWallet?.walletInfo.prettyName,
-    router,
     onSelect,
     currentAddress,
-    showMemberManagementModal,
     showMessageEditModal,
     selectedWallet,
+    qrState,
+    qrMessage,
+    qrWallet,
+    onReturnToWalletList,
+
+    currentWalletName,
   ]);
 
   return (

components/react/qrCode.tsx

@@ -0,0 +1,120 @@
+import Image from 'next/image';
+import QRCodeUtil from 'qrcode';
+import React, { FunctionComponent, ReactElement, useMemo } from 'react';
+
+const generateMatrix = (
+  value: string,
+  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel
+) => {
+  const arr = Array.prototype.slice.call(
+    QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,
+    0
+  );
+  const sqrt = Math.sqrt(arr.length);
+  return arr.reduce(
+    (rows, key, index) =>
+      (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+};
+
+export const QRCode: FunctionComponent<{
+  errorCorrectionLevel?: QRCodeUtil.QRCodeErrorCorrectionLevel;
+  logoUrl?: string;
+  logoSize?: number;
+  size?: number;
+  value: string;
+}> = ({ errorCorrectionLevel = 'M', logoSize = 50, logoUrl, size = 280, value }) => {
+  const dots = useMemo(() => {
+    const dots: ReactElement[] = [];
+    const matrix = generateMatrix(value, errorCorrectionLevel);
+    const cellSize = size / matrix.length;
+    let qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 },
+    ];
+
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - 7) * cellSize * x;
+      const y1 = (matrix.length - 7) * cellSize * y;
+      for (let i = 0; i < 3; i++) {
+        dots.push(
+          <rect
+            fill={i % 2 !== 0 ? 'white' : 'black'}
+            height={cellSize * (7 - i * 2)}
+            key={`${i}-${x}-${y}`}
+            rx={(i - 2) * -5 + (i === 0 ? 2 : 0)} // calculated border radius for corner squares
+            ry={(i - 2) * -5 + (i === 0 ? 2 : 0)} // calculated border radius for corner squares
+            width={cellSize * (7 - i * 2)}
+            x={x1 + cellSize * i}
+            y={y1 + cellSize * i}
+          />
+        );
+      }
+    });
+
+    const clearArenaSize = Math.floor(logoSize / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+
+    matrix.forEach((row: QRCodeUtil.QRCode[], i: number) => {
+      row.forEach((_: any, j: number) => {
+        if (matrix[i][j]) {
+          if (
+            !(
+              (i < 7 && j < 7) ||
+              (i > matrix.length - 8 && j < 7) ||
+              (i < 7 && j > matrix.length - 8)
+            )
+          ) {
+            if (
+              !(
+                i > matrixMiddleStart &&
+                i < matrixMiddleEnd &&
+                j > matrixMiddleStart &&
+                j < matrixMiddleEnd
+              )
+            ) {
+              dots.push(
+                <circle
+                  cx={i * cellSize + cellSize / 2}
+                  cy={j * cellSize + cellSize / 2}
+                  fill="black"
+                  key={`circle-${i}-${j}`}
+                  r={cellSize / 3} // calculate size of single dots
+                />
+              );
+            }
+          }
+        }
+      });
+    });
+
+    return dots;
+  }, [errorCorrectionLevel, logoSize, size, value]);
+
+  const logoPosition = size / 2 - logoSize / 2;
+
+  return (
+    <div className="relative flex items-center justify-center rounded-xl bg-white p-4">
+      <div className="relative" style={{ height: size, width: size }}>
+        {logoUrl && (
+          <div
+            className="absolute flex rounded-lg justify-center"
+            style={{
+              top: logoPosition,
+              width: size,
+            }}
+          >
+            <Image height={logoSize} src={logoUrl} width={logoSize} alt="Wallet logo" />
+          </div>
+        )}
+        <svg height={size} width={size}>
+          <rect fill="transparent" height={size} width={size} />
+          {dots}
+        </svg>
+      </div>
+    </div>
+  );
+};

components/react/views/Connected.tsx

@@ -59,7 +59,7 @@
           <Image
             height={0}
             width={0}
-            src={getRealLogo(logo, theme === 'dark')}
+            src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}
             alt={name}
             className="w-8 h-8 rounded-full mr-2"
           />