feat(ui): Receiver inception flow (#434)

* wip: add Alert * wip: trigger and layout * fix: finalize flow * fix: refactor and simplify code * wip: pass groupMetadata to Identifer stages and add i18n * fix: i18n + groupMetadata + toast + connections list * fix: filtering connections before sorting them
cardano-foundation · Apr 25, 2024 · 1e5435a · 1e5435a
1 parent 83bce1c
commit 1e5435a
Show file tree

Hide file tree

Showing 16 changed files with 278 additions and 100 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -985,10 +985,13 @@
     "more": "More share options"
   },
   "createidentifier": {
-    "title": "Add an identifier",
     "cancel": "Cancel",
     "back": "Back",
     "done": "Done",
+    "add": {
+      "title": "Add an identifier",
+      "confirmbutton": "Create identifier"
+    },
     "share": {
       "title": "Share identifier",
       "subtitle": "You've scanned",
@@ -998,7 +1001,20 @@
         "bottom": "To continue with the initiation of the mult-sig you must have scanned at least one other QR code."
       },
       "scanbutton": "Scan QR codes",
-      "initiatebutton": "Initiate multi-sig"
+      "initiatebutton": "Initiate multi-sig",
+      "scanalert": {
+        "text": "Have all the individuals you want to include as members scanned your QR code?",
+        "confirm": "Confirm and scan",
+        "cancel": "Cancel"
+      }
+    },
+    "receive": {
+      "title": "Setup identifier",
+      "confirmbutton": "Add identifier",
+      "notes": {
+        "top": "Before proceeding, please make sure everyone included as a member scans this QR code.",
+        "middle": "Remember to scan everyone else’s QR code too!"
+      }
     },
     "connections": {
       "title": "Connections",
@@ -1053,7 +1069,6 @@
     "theme": {
       "title": "Choose a theme"
     },
-    "confirmbutton": "Create identifier",
     "error": {
       "maxlength": "Must be less than 32 characters long"
     }

diff --git a/src/store/reducers/stateCache/stateCache.types.ts b/src/store/reducers/stateCache/stateCache.types.ts
@@ -22,6 +22,7 @@ interface AuthenticationCacheProps {
 enum IncomingRequestType {
   CREDENTIAL_OFFER_RECEIVED = "credential-offer-received",
   MULTI_SIG_REQUEST_INCOMING = "multi-sig-request-incoming",
+  MULTI_SIG_RECEIVE_INVITATION = "multi-sig-receive-invitation",
 }
 
 interface IncomingRequestProps {

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.scss b/src/ui/components/CreateIdentifier/CreateIdentifier.scss
@@ -139,6 +139,12 @@ ion-modal.create-identifier-modal {
   }
 
   .create-identifier-modal-content {
+    padding-top: 0;
+
+    .page-header {
+      margin-top: 0.625rem;
+    }
+
     ion-grid {
       padding: 0 0.063rem;
     }

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.test.tsx b/src/ui/components/CreateIdentifier/CreateIdentifier.test.tsx
@@ -50,7 +50,7 @@ describe("CreateIdentifier modal", () => {
       </Provider>
     );
     expect(
-      getByText(EN_TRANSLATIONS.createidentifier.title)
+      getByText(EN_TRANSLATIONS.createidentifier.add.title)
     ).toBeInTheDocument();
     fireEvent.click(getByTestId("close-button"));
     expect(getByTestId("create-identifier-modal-content-page")).toHaveClass(

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.tsx b/src/ui/components/CreateIdentifier/CreateIdentifier.tsx
@@ -21,6 +21,8 @@ const CreateIdentifier = ({
   setModalIsOpen,
   resumeMultiSig,
   setResumeMultiSig,
+  invitationReceived,
+  setInvitationReceived,
 }: CreateIdentifierProps) => {
   const componentId = "create-identifier-modal";
   const initialState = {
@@ -56,6 +58,7 @@ const CreateIdentifier = ({
     setModalIsOpen(false);
     setState(initialState);
     setResumeMultiSig && setResumeMultiSig(null);
+    setInvitationReceived && setInvitationReceived(false);
   };
 
   const CurrentStage =
@@ -85,6 +88,7 @@ const CreateIdentifier = ({
           resetModal={resetModal}
           setBlur={setBlur}
           resumeMultiSig={resumeMultiSig}
+          invitationReceived={invitationReceived}
         />
       )}
     </IonModal>

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.types.ts b/src/ui/components/CreateIdentifier/CreateIdentifier.types.ts
@@ -6,6 +6,8 @@ interface CreateIdentifierProps {
   setModalIsOpen: (value: boolean) => void;
   resumeMultiSig?: IdentifierShortDetails | null;
   setResumeMultiSig?: (value: IdentifierShortDetails | null) => void;
+  invitationReceived?: boolean;
+  setInvitationReceived?: (value: boolean) => void;
 }
 
 interface TypeItemProps {
@@ -40,12 +42,18 @@ interface IdentifierStageProps {
   setBlur?: (value: boolean) => void;
   resetModal: () => void;
   resumeMultiSig?: IdentifierShortDetails | null;
+  invitationReceived?: boolean;
 }
 
 interface IdentifierStage1BodyProps {
   componentId: string;
   handleDone: () => void;
   oobi: string;
+  groupMetadata?: {
+    groupId: string;
+    groupInitiator: boolean;
+    groupCreated: boolean;
+  };
   handleScanButton: () => void;
 }