fix: oobi in QR code & cleanup

cardano-foundation · Apr 16, 2024 · c2788bd · c2788bd
1 parent 248e2ce
commit c2788bd
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 43 deletions.
diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.scss b/src/ui/components/CreateIdentifier/CreateIdentifier.scss
@@ -28,16 +28,6 @@ ion-modal.create-identifier-modal {
   .responsive-page-content {
     justify-content: space-evenly;
 
-    #react-qrcode-logo {
-      width: 70vw !important;
-      height: 70vw !important;
-      padding: 1.5rem;
-      margin: 1rem auto;
-      background-color: white;
-      box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2);
-      border-radius: 16px;
-    }
-
     .share-identifier-scan-button {
       text-align: center;
 
@@ -77,6 +67,57 @@ ion-modal.create-identifier-modal {
     }
   }
 
+  .multisig-share-qr-code {
+    text-align: center;
+
+    #react-qrcode-logo {
+      background-color: white;
+      box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2);
+    }
+
+    .multisig-share-qr-code-blur-overlay-container {
+      position: absolute;
+      left: calc(50% - 35vw);
+      box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2);
+
+      .multisig-share-qr-code-blur-overlay-inner {
+        display: none;
+      }
+    }
+
+    #react-qrcode-logo,
+    .multisig-share-qr-code-blur-overlay-container {
+      width: 70vw !important;
+      height: 70vw !important;
+      padding: 1.5rem;
+      margin: 1rem auto;
+      border-radius: 1rem;
+    }
+
+    &.blur {
+      #react-qrcode-logo {
+        filter: blur(0.5rem);
+        opacity: 0.3;
+      }
+
+      .multisig-share-qr-code-blur-overlay-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+
+        ion-icon {
+          width: 5rem;
+          height: 5rem;
+          opacity: 1;
+          text-align: center;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
   ion-toolbar {
     --background: var(--ion-color-light);
 

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx
@@ -97,6 +97,13 @@ const IdentifierStage0 = ({
         newIdentifier.groupMetadata = groupMetadata;
       }
       dispatch(setIdentifiersCache([...identifiersData, newIdentifier]));
+      if (state.selectedAidType !== 0) {
+        setState((prevState: IdentifierStageProps) => ({
+          ...prevState,
+          identifierCreationStage: 1,
+          newIdentifier,
+        }));
+      }
     }
   };
 
@@ -105,10 +112,6 @@ const IdentifierStage0 = ({
     setTimeout(async () => {
       await handleCreateIdentifier();
       if (state.selectedAidType !== 0) {
-        setState((prevState: IdentifierStageProps) => ({
-          ...prevState,
-          identifierCreationStage: 1,
-        }));
         setBlur && setBlur(false);
       } else {
         dispatch(setToastMsg(ToastMsgType.IDENTIFIER_CREATED));

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx
@@ -1,57 +1,52 @@
 import { useEffect, useState } from "react";
 import { QRCode } from "react-qrcode-logo";
 import { IonButton, IonIcon } from "@ionic/react";
-import { scanOutline } from "ionicons/icons";
+import { scanOutline, qrCodeOutline } from "ionicons/icons";
 import { i18n } from "../../../../i18n";
 import { PageHeader } from "../../PageHeader";
-import { ScrollablePageLayout } from "../../layout/ScrollablePageLayout";
 import { IdentifierStageProps } from "../CreateIdentifier.types";
-import { ConnectionShortDetails } from "../../../pages/Connections/Connections.types";
 import { useAppSelector } from "../../../../store/hooks";
-import { getConnectionsCache } from "../../../../store/reducers/connectionsCache";
 import { ResponsivePageLayout } from "../../layout/ResponsivePageLayout";
 import { getStateCache } from "../../../../store/reducers/stateCache";
 import { Agent } from "../../../../core/agent/agent";
 
 const IdentifierStage1 = ({
   state,
-  setState,
   componentId,
   resetModal,
   resumeMultiSig,
 }: IdentifierStageProps) => {
   const stateCache = useAppSelector(getStateCache);
   const userName = stateCache.authentication.userName;
   const [oobi, setOobi] = useState("");
-  const identifierId = resumeMultiSig?.id || state.newIdentifier.id;
-  const groupIdFromIdentifier =
+  const signifyName =
+    resumeMultiSig?.signifyName || state.newIdentifier.signifyName;
+  const groupId =
     resumeMultiSig?.groupMetadata?.groupId ||
     state.newIdentifier.groupMetadata?.groupId;
 
   useEffect(() => {
     const fetchOobi = async () => {
       const oobiValue = await Agent.agent.connections.getKeriOobi(
-        identifierId,
+        signifyName,
         userName,
-        groupIdFromIdentifier
+        groupId
       );
       if (oobiValue) {
         setOobi(oobiValue);
       }
     };
     fetchOobi();
-  }, [userName]);
+  }, [groupId, signifyName, userName]);
 
   const handleDone = () => {
-    // setState((prevState: IdentifierStageProps) => ({
-    //   ...prevState,
-    //   identifierCreationStage: 2,
-    //   selectedConnections: selectedConnections,
-    // }));
-    // TODO: Save the identifier to the state cache and reset the modal
     resetModal && resetModal();
   };
 
+  const handleScanButton = () => {
+    // TODO: scan button functionality
+  };
+
   return (
     <>
       <ResponsivePageLayout
@@ -68,26 +63,41 @@ const IdentifierStage1 = ({
         <p className="multisig-subtitle">
           {i18n.t("createidentifier.share.subtitle")}
         </p>
-        <QRCode
-          value={oobi}
-          size={250}
-          fgColor={"black"}
-          bgColor={"white"}
-          qrStyle={"squares"}
-          logoImage={""} // Optional - leaving as a reminder for possible future customisation
-          logoWidth={60}
-          logoHeight={60}
-          logoOpacity={1}
-          quietZone={10}
-        />
+        <div
+          className={`multisig-share-qr-code${
+            oobi.length ? " reveal" : " blur"
+          }`}
+          data-testid="multisig-share-qr-code"
+        >
+          <QRCode
+            value={oobi}
+            size={250}
+            fgColor={"black"}
+            bgColor={"white"}
+            qrStyle={"squares"}
+            logoImage={""}
+            logoWidth={60}
+            logoHeight={60}
+            logoOpacity={1}
+            quietZone={10}
+          />
+          <span className="multisig-share-qr-code-blur-overlay-container">
+            <span className="multisig-share-qr-code-blur-overlay-inner">
+              <IonIcon
+                slot="icon-only"
+                icon={qrCodeOutline}
+              />
+            </span>
+          </span>
+        </div>
         <p className="multisig-subtitle">
           {i18n.t("createidentifier.share.footnote")}
         </p>
         <div className="share-identifier-scan-button">
           <IonButton
             shape="round"
             color={"primary-gradient"}
-            onClick={() => console.log("Scan button clicked")}
+            onClick={handleScanButton}
           >
             <IonIcon
               slot="icon-only"