feat(ui): Enable Sharing OOBI When Direct Scanning is Not Possible (#451

) * wip: handle state for multi sig groups * fix: change MultiSigGroup cache to use a single cache instead of array * fix: displayNameValue - search bar - i18n and style * fix: empty Redux when done * fix: adding comment * wip: add buttons to scanner and fix groupId bug * wip: add buttons - refactor and unify scan and style * wip: add modal and handler to manual input * fix: add spinner to blank page in Scanner * wip: Initiate Multi Sig from FullPageScanner button * fix: Initiate Multi Sig from FullPageScanner button * fix: add OptionModal component and hide otherIdentifierContacts when empty * fix: add spinner to App.tsx for FullpageScanner and hide otherConnections * fix: cleanup
cardano-foundation · May 8, 2024 · cf41ff9 · cf41ff9
1 parent 5c96255
commit cf41ff9
Show file tree

Hide file tree

Showing 17 changed files with 443 additions and 242 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -1045,6 +1045,14 @@
         "middle": "Remember to scan everyone else’s QR code too!"
       }
     },
+    "scan": {
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "pasteoobi": "Paste OOBI",
+      "initiate": "Initiate multi-sig",
+      "scanqrcode": "Scan QR code",
+      "pastecontents": "Paste contents"
+    },
     "connections": {
       "title": "Connections",
       "subtitle": "These are the members you scanned. Please review before proceeding.",

diff --git a/src/ui/App.scss b/src/ui/App.scss
@@ -21,13 +21,34 @@ body {
   }
 
   &.full-page-scanner {
-    #root ion-app > *:not(.qr-code-scanner-full-page) {
+    #root
+      ion-app
+      > *:not(.qr-code-scanner-full-page):not(.scanner-input-modal):not(
+        .scanner-spinner-container
+      ) {
       display: none;
     }
+
+    .app-spinner-container {
+      z-index: 1000;
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      height: 100%;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+      background: rgba(3, 3, 33, 0.2);
+    }
+  }
+
+  &:not(.full-page-scanner) .app-spinner-container {
+    display: none;
   }
 
   &.scanner-active {
-    background-color: transparent;
+    background-color: var(--ion-color-secondary);
 
     > div:last-child {
       display: block;

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -102,7 +102,19 @@ const App = () => {
     return (
       <>
         {isPreviewMode ? <MobileHeaderPreview /> : null}
-        {showScan && <FullPageScanner setShowScan={setShowScan} />}
+        {showScan ? (
+          <FullPageScanner
+            showScan={showScan}
+            setShowScan={setShowScan}
+          />
+        ) : (
+          <div
+            className="app-spinner-container"
+            data-testid="app-spinner-container"
+          >
+            <IonSpinner name="circular" />
+          </div>
+        )}
         <Routes />
       </>
     );

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.tsx b/src/ui/components/CreateIdentifier/CreateIdentifier.tsx
@@ -85,6 +85,7 @@ const CreateIdentifier = ({
     setModalIsOpen(false);
     setState(initialState);
     setResumeMultiSig && setResumeMultiSig(null);
+    setMultiSigGroup && setMultiSigGroup(undefined);
     dispatch(setMultiSigGroupCache(undefined));
   };
 

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx
@@ -72,6 +72,9 @@ const IdentifierStage1 = ({
       };
       updateConnections();
     }
+
+    currentOperation === OperationType.MULTI_SIG_INITIATOR_INIT &&
+      handleInitiateMultiSig();
   }, [groupMetadata, currentOperation, groupId, multiSigGroupCache]);
 
   const handleDone = () => {
@@ -99,6 +102,7 @@ const IdentifierStage1 = ({
   };
 
   const handleInitiateMultiSig = () => {
+    dispatch(setCurrentOperation(OperationType.IDLE));
     setState((prevState: IdentifierStageProps) => ({
       ...prevState,
       scannedConections,

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage2.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage2.tsx
@@ -21,7 +21,7 @@ const IdentifierStage2 = ({
 }: IdentifierStageProps) => {
   const [selectedConnections, setSelectedConnections] = useState<
     ConnectionShortDetails[]
-  >([]);
+  >(state.scannedConections);
 
   const handleSelectConnection = (connection: ConnectionShortDetails) => {
     let data = selectedConnections;
@@ -86,7 +86,7 @@ const IdentifierStage2 = ({
                     checked={selectedConnections.includes(connection)}
                     data-testid={`connection-checkbox-${index}`}
                     onIonChange={() => handleSelectConnection(connection)}
-                    aria-label=""
+                    aria-label={`connection-checkbox-${index}`}
                   />
                 </IonLabel>
               </IonItem>

diff --git a/src/ui/components/PageFooter/PageFooter.scss b/src/ui/components/PageFooter/PageFooter.scss
@@ -6,7 +6,7 @@
   --padding-end: 0px;
 
   ion-button {
-    margin: 0 auto 1rem;
+    margin-bottom: 1rem;
 
     &:last-of-type {
       margin-bottom: 0;
@@ -20,7 +20,7 @@
 
   @media screen and (min-width: 250px) and (max-width: 370px) {
     ion-button {
-      margin: 0 auto 0.8rem;
+      margin-bottom: 0.8rem;
     }
   }
 }
diff --git a/src/ui/components/PageFooter/PageFooter.tsx b/src/ui/components/PageFooter/PageFooter.tsx
@@ -29,106 +29,108 @@ const PageFooter = ({
     <IonToolbar
       className={`page-footer${customClass ? " " + customClass : ""}`}
     >
-      {primaryButtonText && primaryButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          className="primary-button"
-          data-testid={`primary-button${pageId ? `-${pageId}` : ""}`}
-          onClick={primaryButtonAction}
-          disabled={primaryButtonDisabled}
-        >
-          {primaryButtonIcon && (
+      <div className="page-footer-content">
+        {primaryButtonText && primaryButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            className="primary-button"
+            data-testid={`primary-button${pageId ? `-${pageId}` : ""}`}
+            onClick={primaryButtonAction}
+            disabled={primaryButtonDisabled}
+          >
+            {primaryButtonIcon && (
+              <IonIcon
+                slot="icon-only"
+                size="small"
+                icon={primaryButtonIcon}
+                color="primary"
+              />
+            )}
+            {primaryButtonText}
+          </IonButton>
+        )}
+        {secondaryButtonText && secondaryButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="outline"
+            className="secondary-button"
+            data-testid={`secondary-button${pageId ? `-${pageId}` : ""}`}
+            onClick={secondaryButtonAction}
+            disabled={secondaryButtonDisabled}
+          >
+            {secondaryButtonIcon && (
+              <IonIcon
+                slot="icon-only"
+                size="small"
+                icon={secondaryButtonIcon}
+                color="primary"
+              />
+            )}
+            {secondaryButtonText}
+          </IonButton>
+        )}
+        {tertiaryButtonText && tertiaryButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="clear"
+            className="tertiary-button"
+            data-testid={`tertiary-button${pageId ? `-${pageId}` : ""}`}
+            onClick={tertiaryButtonAction}
+            disabled={tertiaryButtonDisabled}
+          >
+            {tertiaryButtonIcon && (
+              <IonIcon
+                slot="icon-only"
+                size="small"
+                icon={tertiaryButtonIcon}
+                color="primary"
+              />
+            )}
+            {tertiaryButtonText}
+          </IonButton>
+        )}
+        {archiveButtonText && archiveButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="clear"
+            className="archive-button"
+            data-testid={`archive-button${pageId ? `-${pageId}` : ""}`}
+            onClick={archiveButtonAction}
+            disabled={archiveButtonDisabled}
+          >
             <IonIcon
               slot="icon-only"
               size="small"
-              icon={primaryButtonIcon}
+              icon={archiveOutline}
               color="primary"
             />
-          )}
-          {primaryButtonText}
-        </IonButton>
-      )}
-      {secondaryButtonText && secondaryButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="outline"
-          className="secondary-button"
-          data-testid={`secondary-button${pageId ? `-${pageId}` : ""}`}
-          onClick={secondaryButtonAction}
-          disabled={secondaryButtonDisabled}
-        >
-          {secondaryButtonIcon && (
+            {archiveButtonText}
+          </IonButton>
+        )}
+        {deleteButtonText && deleteButtonAction && (
+          <IonButton
+            shape="round"
+            expand="block"
+            fill="clear"
+            className="delete-button"
+            data-testid={`delete-button${pageId ? `-${pageId}` : ""}`}
+            onClick={deleteButtonAction}
+            disabled={deleteButtonDisabled}
+          >
             <IonIcon
               slot="icon-only"
               size="small"
-              icon={secondaryButtonIcon}
+              icon={trashOutline}
               color="primary"
             />
-          )}
-          {secondaryButtonText}
-        </IonButton>
-      )}
-      {tertiaryButtonText && tertiaryButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="clear"
-          className="tertiary-button"
-          data-testid={`tertiary-button${pageId ? `-${pageId}` : ""}`}
-          onClick={tertiaryButtonAction}
-          disabled={tertiaryButtonDisabled}
-        >
-          {tertiaryButtonIcon && (
-            <IonIcon
-              slot="icon-only"
-              size="small"
-              icon={tertiaryButtonIcon}
-              color="primary"
-            />
-          )}
-          {tertiaryButtonText}
-        </IonButton>
-      )}
-      {archiveButtonText && archiveButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="clear"
-          className="archive-button"
-          data-testid={`archive-button${pageId ? `-${pageId}` : ""}`}
-          onClick={archiveButtonAction}
-          disabled={archiveButtonDisabled}
-        >
-          <IonIcon
-            slot="icon-only"
-            size="small"
-            icon={archiveOutline}
-            color="primary"
-          />
-          {archiveButtonText}
-        </IonButton>
-      )}
-      {deleteButtonText && deleteButtonAction && (
-        <IonButton
-          shape="round"
-          expand="block"
-          fill="clear"
-          className="delete-button"
-          data-testid={`delete-button${pageId ? `-${pageId}` : ""}`}
-          onClick={deleteButtonAction}
-          disabled={deleteButtonDisabled}
-        >
-          <IonIcon
-            slot="icon-only"
-            size="small"
-            icon={trashOutline}
-            color="primary"
-          />
-          {deleteButtonText}
-        </IonButton>
-      )}
+            {deleteButtonText}
+          </IonButton>
+        )}
+      </div>
     </IonToolbar>
   );
 };

diff --git a/src/ui/components/PageHeader/PageHeader.tsx b/src/ui/components/PageHeader/PageHeader.tsx
@@ -67,7 +67,6 @@ const PageHeader = ({
 
   return (
     <IonHeader
-      translucent={true}
       className={`ion-no-border page-header ${
         hasContent ? "show-header" : "hide-header"
       }`}

diff --git a/src/ui/components/Scanner/Scanner.scss b/src/ui/components/Scanner/Scanner.scss
@@ -1,27 +1,10 @@
-.qr-code-scanner-full-page {
-  ion-header ion-toolbar {
-    margin-top: 0.625rem;
-
-    .back-button {
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 1.5rem;
-      background: var(--ion-color-light-grey);
-      margin-left: 1.25rem;
-    }
-
-    ion-icon {
-      font-size: 1.85em !important;
-    }
-  }
-}
-
-.qr-code-scanner {
+ion-grid.qr-code-scanner {
   --scale-scan: 1;
   height: calc(var(--scale-h) * 100);
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-around;
+  padding-inline: 1.25rem;
 
   ion-row {
     display: flex;
@@ -44,7 +27,26 @@
     }
   }
 
+  .scanner-spinner-container {
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background: rgba(3, 3, 33, 0.2);
+  }
+
+  .page-footer .secondary-button {
+    opacity: 0.5;
+    backdrop-filter: blur(0.33rem);
+  }
+
   @media screen and (min-width: 250px) and (max-width: 370px) {
     --scale-scan: 0.7;
+    padding-inline: 0.9rem;
   }
 }