fix: blank screen when scanning

cardano-foundation · Apr 30, 2024 · 2927d3b · 2927d3b
1 parent 44bef1c
commit 2927d3b
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 117 deletions.
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -54,7 +54,11 @@ const App = () => {
   }, [isPreviewMode]);
 
   useEffect(() => {
-    setShowScan(currentOperation === OperationType.SCAN_CONNECTION);
+    setShowScan(
+      currentOperation === OperationType.SCAN_CONNECTION ||
+        currentOperation === OperationType.MULTI_SIG_INITIATOR_SCAN ||
+        currentOperation === OperationType.MULTI_SIG_RECEIVER_SCAN
+    );
     setShowToast(toastMsg !== undefined);
   }, [currentOperation, toastMsg]);
 

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.types.ts b/src/ui/components/CreateIdentifier/CreateIdentifier.types.ts
@@ -56,7 +56,7 @@ interface IdentifierStage1BodyProps {
     groupInitiator: boolean;
     groupCreated: boolean;
   };
-  handleScanButton: () => void;
+  handleScanButton: (value: number) => void;
 }
 
 export type {

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx
@@ -65,8 +65,18 @@ const IdentifierStage1 = ({
     }
   };
 
+  const handleScanButton = (scannedConections: number) => {
+    scannedConections >= 1 ? handleInitiateScan() : setAlertIsOpen(true);
+  };
+
   const handleInitiateScan = () => {
-    dispatch(setCurrentOperation(OperationType.SCAN_CONNECTION));
+    dispatch(
+      setCurrentOperation(
+        groupMetadata?.groupInitiator
+          ? OperationType.MULTI_SIG_INITIATOR_SCAN
+          : OperationType.MULTI_SIG_RECEIVER_SCAN
+      )
+    );
     setInitiated(true);
   };
 
@@ -86,15 +96,15 @@ const IdentifierStage1 = ({
           handleInitiateMultiSig={handleInitiateMultiSig}
           oobi={oobi}
           groupMetadata={groupMetadata}
-          handleScanButton={() => setAlertIsOpen(true)}
+          handleScanButton={handleScanButton}
         />
       ) : (
         <IdentifierStage1BodyInit
           componentId={componentId}
           handleDone={handleDone}
           oobi={oobi}
           groupMetadata={groupMetadata}
-          handleScanButton={() => setAlertIsOpen(true)}
+          handleScanButton={handleScanButton}
         />
       )}
       <Alert

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1BodyResume.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1BodyResume.tsx
@@ -10,6 +10,8 @@ import { ConnectionShortDetails } from "../../../../core/agent/agent.types";
 import KeriLogo from "../../../assets/images/KeriGeneric.jpg";
 import { PageFooter } from "../../PageFooter";
 import { Agent } from "../../../../core/agent/agent";
+import { useAppSelector } from "../../../../store/hooks";
+import { getCurrentOperation } from "../../../../store/reducers/stateCache";
 
 const IdentifierStage1BodyResume = ({
   componentId,
@@ -19,6 +21,7 @@ const IdentifierStage1BodyResume = ({
   groupMetadata,
   handleScanButton,
 }: IdentifierStage1BodyProps) => {
+  const currentOperation = useAppSelector(getCurrentOperation);
   const [scannedConections, setScannedConnections] = useState<
     ConnectionShortDetails[]
   >([]);
@@ -42,7 +45,7 @@ const IdentifierStage1BodyResume = ({
 
       updateConnections();
     }
-  }, [groupMetadata]);
+  }, [groupMetadata, currentOperation]);
 
   return (
     <>
@@ -104,7 +107,7 @@ const IdentifierStage1BodyResume = ({
             expand="block"
             fill="outline"
             className="secondary-button"
-            onClick={handleScanButton}
+            onClick={() => handleScanButton(scannedConections.length)}
           >
             {i18n.t("createidentifier.share.scanbutton")}
           </IonButton>

diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -21,124 +21,135 @@ import { ScannerProps } from "./Scanner.types";
 import { KeriConnectionType } from "../../../core/agent/agent.types";
 import { CreateIdentifier } from "../CreateIdentifier";
 
-const Scanner = forwardRef(({ setIsValueCaptured }: ScannerProps, ref) => {
-  const dispatch = useAppDispatch();
-  const currentOperation = useAppSelector(getCurrentOperation);
-  const currentToastMsg = useAppSelector(getToastMsg);
-  const currentRoute = useAppSelector(getCurrentRoute);
-  const [createIdentifierModalIsOpen, setCreateIdentifierModalIsOpen] =
-    useState(false);
-  const [groupId, setGroupId] = useState("");
+const Scanner = forwardRef(
+  ({ setIsValueCaptured, handleReset }: ScannerProps, ref) => {
+    const dispatch = useAppDispatch();
+    const currentOperation = useAppSelector(getCurrentOperation);
+    const currentToastMsg = useAppSelector(getToastMsg);
+    const currentRoute = useAppSelector(getCurrentRoute);
+    const [createIdentifierModalIsOpen, setCreateIdentifierModalIsOpen] =
+      useState(false);
+    const [groupId, setGroupId] = useState("");
 
-  const checkPermission = async () => {
-    const status = await BarcodeScanner.checkPermission({ force: true });
-    if (status.granted) {
-      return true;
-    }
-    if (status.neverAsked) {
-      const allow = confirm(`${i18n.t("scan.alert.title")}`);
-      if (allow) {
+    const checkPermission = async () => {
+      const status = await BarcodeScanner.checkPermission({ force: true });
+      if (status.granted) {
         return true;
       }
-    }
-    return false;
-  };
+      if (status.neverAsked) {
+        const allow = confirm(`${i18n.t("scan.alert.title")}`);
+        if (allow) {
+          return true;
+        }
+      }
+      return false;
+    };
 
-  const startScan = async () => {
-    await BarcodeScanner.hideBackground();
-    document?.querySelector("body")?.classList.add("scanner-active");
-    document
-      ?.querySelector("body.scanner-active > div:last-child")
-      ?.classList.remove("hide");
-    const result = await BarcodeScanner.startScan({
-      targetedFormats: [SupportedFormat.QR_CODE],
-    });
-    return result;
-  };
+    const startScan = async () => {
+      await BarcodeScanner.hideBackground();
+      document?.querySelector("body")?.classList.add("scanner-active");
+      document
+        ?.querySelector("body.scanner-active > div:last-child")
+        ?.classList.remove("hide");
+      const result = await BarcodeScanner.startScan({
+        targetedFormats: [SupportedFormat.QR_CODE],
+      });
+      return result;
+    };
 
-  const stopScan = async () => {
-    await BarcodeScanner.stopScan();
-    await BarcodeScanner.showBackground();
-    document?.querySelector("body")?.classList.remove("scanner-active");
-  };
+    const stopScan = async () => {
+      await BarcodeScanner.stopScan();
+      await BarcodeScanner.showBackground();
+      document?.querySelector("body")?.classList.remove("scanner-active");
+    };
 
-  useImperativeHandle(ref, () => ({
-    stopScan,
-  }));
+    useImperativeHandle(ref, () => ({
+      stopScan,
+    }));
 
-  const initScan = async () => {
-    if (isPlatform("ios") || isPlatform("android")) {
-      const allowed = await checkPermission();
-      if (allowed) {
-        document?.querySelector("body")?.classList.add("scanner-active");
-        BarcodeScanner.hideBackground();
-        const result = await startScan();
-        if (result.hasContent) {
-          stopScan();
-          // @TODO - foconnor: instead of setting the optype to idle we should
-          // have a loading screen with "waiting for server..." etc,
-          // and it can update to an error if the QR is invalid with a re-scan btn
-          dispatch(setCurrentOperation(OperationType.IDLE));
-          // @TODO - foconnor: when above loading screen in place, handle invalid QR code
-          const invitation =
-            await Agent.agent.connections.receiveInvitationFromUrl(
-              result.content
-            );
-          if (invitation.type === KeriConnectionType.NORMAL) {
-            setIsValueCaptured && setIsValueCaptured(true);
-          } else if (
-            invitation.type === KeriConnectionType.MULTI_SIG_INITIATOR
-          ) {
-            setGroupId(invitation.groupId);
-            setCreateIdentifierModalIsOpen(true);
+    const initScan = async () => {
+      if (isPlatform("ios") || isPlatform("android")) {
+        const allowed = await checkPermission();
+        if (allowed) {
+          document?.querySelector("body")?.classList.add("scanner-active");
+          BarcodeScanner.hideBackground();
+          const result = await startScan();
+          if (result.hasContent) {
+            stopScan();
+            // @TODO - foconnor: instead of setting the optype to idle we should
+            // have a loading screen with "waiting for server..." etc,
+            // and it can update to an error if the QR is invalid with a re-scan btn
+            if (
+              currentOperation === OperationType.MULTI_SIG_INITIATOR_SCAN ||
+              currentOperation === OperationType.MULTI_SIG_RECEIVER_SCAN
+            ) {
+              //
+            }
+            dispatch(setCurrentOperation(OperationType.IDLE));
+            // @TODO - foconnor: when above loading screen in place, handle invalid QR code
+            const invitation =
+              await Agent.agent.connections.receiveInvitationFromUrl(
+                result.content
+              );
+            if (invitation.type === KeriConnectionType.NORMAL) {
+              handleReset && handleReset();
+              setIsValueCaptured && setIsValueCaptured(true);
+            } else if (
+              invitation.type === KeriConnectionType.MULTI_SIG_INITIATOR
+            ) {
+              setGroupId(invitation.groupId);
+              setCreateIdentifierModalIsOpen(true);
+            }
           }
         }
       }
-    }
-  };
+    };
 
-  useEffect(() => {
-    if (
-      (currentRoute?.path === TabsRoutePath.SCAN ||
-        currentOperation === OperationType.SCAN_CONNECTION) &&
-      currentToastMsg !== ToastMsgType.CONNECTION_REQUEST_PENDING &&
-      currentToastMsg !== ToastMsgType.CREDENTIAL_REQUEST_PENDING
-    ) {
-      initScan();
-    } else {
-      stopScan();
-    }
-  }, [currentOperation, currentRoute]);
+    useEffect(() => {
+      if (
+        ((currentRoute?.path === TabsRoutePath.SCAN ||
+          currentOperation === OperationType.SCAN_CONNECTION) &&
+          currentToastMsg !== ToastMsgType.CONNECTION_REQUEST_PENDING &&
+          currentToastMsg !== ToastMsgType.CREDENTIAL_REQUEST_PENDING) ||
+        currentOperation === OperationType.MULTI_SIG_INITIATOR_SCAN ||
+        currentOperation === OperationType.MULTI_SIG_RECEIVER_SCAN
+      ) {
+        initScan();
+      } else {
+        stopScan();
+      }
+    }, [currentOperation, currentRoute]);
 
-  return (
-    <>
-      <IonGrid
-        className="qr-code-scanner"
-        data-testid="qr-code-scanner"
-      >
-        <IonRow>
-          <IonCol size="12">
-            <span className="qr-code-scanner-text">
-              {i18n.t("scan.tab.title")}
-            </span>
-          </IonCol>
-        </IonRow>
-        <IonRow>
-          <IonIcon
-            icon={scanOutline}
-            color="light"
-            className="qr-code-scanner-icon"
-          />
-        </IonRow>
-      </IonGrid>
-      <CreateIdentifier
-        modalIsOpen={createIdentifierModalIsOpen}
-        setModalIsOpen={setCreateIdentifierModalIsOpen}
-        groupId={groupId}
-        setGroupId={setGroupId}
-      />
-    </>
-  );
-});
+    return (
+      <>
+        <IonGrid
+          className="qr-code-scanner"
+          data-testid="qr-code-scanner"
+        >
+          <IonRow>
+            <IonCol size="12">
+              <span className="qr-code-scanner-text">
+                {i18n.t("scan.tab.title")}
+              </span>
+            </IonCol>
+          </IonRow>
+          <IonRow>
+            <IonIcon
+              icon={scanOutline}
+              color="light"
+              className="qr-code-scanner-icon"
+            />
+          </IonRow>
+        </IonGrid>
+        <CreateIdentifier
+          modalIsOpen={createIdentifierModalIsOpen}
+          setModalIsOpen={setCreateIdentifierModalIsOpen}
+          groupId={groupId}
+          setGroupId={setGroupId}
+        />
+      </>
+    );
+  }
+);
 
 export { Scanner };
diff --git a/src/ui/components/Scanner/Scanner.types.ts b/src/ui/components/Scanner/Scanner.types.ts
@@ -1,4 +1,5 @@
 interface ScannerProps {
   setIsValueCaptured?: (value: boolean) => void;
+  handleReset?: () => void;
 }
 export type { ScannerProps };
diff --git a/src/ui/globals/types.ts b/src/ui/globals/types.ts
@@ -23,6 +23,8 @@ enum OperationType {
   ADD_CREDENTIAL = "addCredential",
   RECEIVE_CONNECTION = "receiveConnection",
   SHOW_SETTINGS = "showSettings",
+  MULTI_SIG_INITIATOR_SCAN = "multiSigInitiatorScan",
+  MULTI_SIG_RECEIVER_SCAN = "multiSigReceiverScan",
 }
 
 enum ToastMsgType {

diff --git a/src/ui/pages/FullPageScanner/FullPageScanner.tsx b/src/ui/pages/FullPageScanner/FullPageScanner.tsx
@@ -26,7 +26,7 @@ const FullPageScanner = ({ setShowScan }: FullPageScannerProps) => {
     document?.querySelector("body")?.classList.add("full-page-scanner");
   }, []);
 
-  const handleBackButton = () => {
+  const handleReset = () => {
     setShowScan(false);
     dispatch(setCurrentOperation(OperationType.IDLE));
     scannerRef.current?.stopScan();
@@ -46,7 +46,7 @@ const FullPageScanner = ({ setShowScan }: FullPageScannerProps) => {
             <IonButton
               slot="icon-only"
               fill="clear"
-              onClick={() => handleBackButton()}
+              onClick={() => handleReset()}
               className="back-button"
               data-testid="back-button"
             >
@@ -58,7 +58,10 @@ const FullPageScanner = ({ setShowScan }: FullPageScannerProps) => {
           </IonButtons>
         </IonToolbar>
       </IonHeader>
-      <Scanner ref={scannerRef} />
+      <Scanner
+        ref={scannerRef}
+        handleReset={handleReset}
+      />
     </IonPage>
   );
 };