fix: add WalletStatus.Connecting logic

regen-network · Feb 8, 2024 · 0cda117 · 0cda117
1 parent 56f794a
commit 0cda117
Showing 1 changed file with 40 additions and 5 deletions.
diff --git a/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx b/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx
@@ -1,4 +1,5 @@
-import { WalletModalProps } from '@cosmos-kit/core';
+import { useEffect, useState } from 'react';
+import { State, WalletModalProps, WalletStatus } from '@cosmos-kit/core';
 import { Box } from '@mui/material';
 import QRCode from 'qrcode.react';
 
@@ -21,16 +22,50 @@ const LoginModalMobile = ({
   const onCloseModal = () => {
     setOpen(false);
   };
-  const wallet = walletRepo?.wallets[0];
-  const qrCodeUri = wallet?.qrUrl?.data;
+  const [qrState, setQRState] = useState<State>(State.Init); // state of QRCode
+  const [qrMsg, setQRMsg] = useState<string>(''); // message of QRCode error
+  const [connecting, setConnecting] = useState<boolean>(false);
+
+  const current = walletRepo?.current;
+
+  (current?.client as any)?.setActions?.({
+    qrUrl: {
+      state: setQRState,
+      message: setQRMsg,
+    },
+  });
+
+  const walletStatus = current?.walletStatus;
+  const message = current?.message;
+
+  useEffect(() => {
+    if (isOpen) {
+      switch (walletStatus) {
+        case WalletStatus.Connecting:
+          if (qrState === State.Init) {
+            setConnecting(true);
+          } else {
+            setConnecting(false);
+          }
+          break;
+      }
+    }
+  }, [qrState, walletStatus, qrMsg, message, isOpen]);
+
+  const qrCodeUri = current?.qrUrl?.data;
+
   return (
     <Modal open={isOpen} onClose={onCloseModal}>
       <Box sx={{ minHeight: 400 }}>
         <Title variant="h5" sx={{ mb: 7.5, textAlign: 'center' }}>
-          {qrCodeUri ? QR_CODE_LABEL : CONNECTING_LABEL}
+          {connecting ? CONNECTING_LABEL : qrCodeUri && QR_CODE_LABEL}
         </Title>
         <Center sx={{ pt: 9, height: 340 }}>
-          {qrCodeUri ? <QRCode size={300} value={qrCodeUri} /> : <Loading />}
+          {connecting ? (
+            <Loading />
+          ) : (
+            qrCodeUri && <QRCode size={300} value={qrCodeUri} />
+          )}
         </Center>
       </Box>
     </Modal>