feat(ui): Pending States when Creating a Profile

src/locales/en/en.json

@@ -612,7 +612,15 @@
         "confirm": "Confirm"
       }
     },
-    "clouderror": "We couldn’t locate this profile in the cloud. It might become available again soon, but some information could be lost.\n\nIf you no longer require this profile, tap “Delete profile” to remove it.",
+    "loadprofileerror": {
+      "pending": "Your profile is pending and may still complete. If you no longer require this profile, tap “Delete profile” to remove it.",
+      "missingoncloud": "We couldn’t locate this profile in the cloud. It might become available again soon, but some information could be lost.\n\nIf you no longer require this profile, tap “Delete profile” to remove it.",
+      "nowitness": "There was an issue creating this profile. Please contact your cloud provider for more information. To remove it from your pending list, tap “Delete profile”.",
+      "button": {
+        "delete": "Delete Profile",
+        "retry": "Retry"
+      }
+    },
     "detailsmodal": {
       "you": "You",
       "button": {

src/routes/nextRoute/nextRoute.ts

@@ -1,4 +1,5 @@
 import { AnyAction, ThunkAction } from "@reduxjs/toolkit";
+import { CreationStatus } from "../../core/agent/agent.types";
 import { RootState } from "../../store";
 import {
   clearSeedPhraseCache,
@@ -11,7 +12,6 @@ import {
 } from "../../store/reducers/stateCache";
 import { RoutePath, TabsRoutePath } from "../paths";
 import { DataProps, NextRoute, StoreState } from "./nextRoute.types";
-import { CreationStatus } from "../../core/agent/agent.types";
 
 const getNextRootRoute = (data: DataProps) => {
   const authentication = data.store.stateCache.authentication;
@@ -51,13 +51,18 @@ const getNextRootRoute = (data: DataProps) => {
 
     const profile = currentProfile.identity;
     const isGroupProfile = !!(profile.groupMemberPre || profile.groupMetadata);
+    // We have 2 phrase group profile is pending: after create and after accept to join group
+    // This flag use to check group profile is pending after create
+    const isPendingAfterCreate =
+      profile.creationStatus === CreationStatus.PENDING &&
+      !profile.groupMemberPre;
 
     const isCreatedGroup =
       profile.groupMemberPre &&
       profile.creationStatus === CreationStatus.COMPLETE;
 
     path =
-      isGroupProfile && !isCreatedGroup
+      isGroupProfile && !isCreatedGroup && !isPendingAfterCreate
         ? RoutePath.GROUP_PROFILE_SETUP.replace(
             ":id",
             currentProfile.identity.id
@@ -190,13 +195,7 @@ const getNextCreatePasswordRoute = (data: DataProps) => {
   return { pathname: RoutePath.GENERATE_SEED_PHRASE };
 };
 
-const getNextProfileSetupRoute = (data: DataProps) => {
-  if (data.state?.isGroup) {
-    return {
-      pathname: RoutePath.GROUP_PROFILE_SETUP.replace(":id", data.state?.id),
-    };
-  }
-
+const getNextProfileSetupRoute = () => {
   return { pathname: TabsRoutePath.CREDENTIALS };
 };
 
@@ -276,7 +275,7 @@ const nextRoute: Record<string, NextRoute> = {
     updateRedux: [updateStoreAfterCreatePassword],
   },
   [RoutePath.PROFILE_SETUP]: {
-    nextPath: (data: DataProps) => getNextProfileSetupRoute(data),
+    nextPath: () => getNextProfileSetupRoute(),
     updateRedux: [updateStoreAfterSetupProfile],
   },
   [TabsRoutePath.CREDENTIAL_DETAILS]: {

src/ui/__fixtures__/filteredIdentifierFix.ts

@@ -85,7 +85,6 @@ const filteredIdentifierFix: IdentifierShortDetails[] = [
     createdAtUTC: "2024-03-07T11:54:56.886Z",
     theme: 0,
     creationStatus: CreationStatus.PENDING,
-    groupMemberPre: "123",
   },
   {
     displayName: "GID 1",

src/ui/components/CloudError/CloudError.scss

@@ -1,7 +1,9 @@
 .cloud-error {
   .responsive-page-content {
     .info-card {
-      margin-top: 1.5rem;
+      p {
+        white-space: pre-line;
+      }
     }
 
     .page-footer {

src/ui/components/CredentialDetailModule/CredentialDetailModule.tsx

@@ -3,9 +3,8 @@ import { ellipsisVertical, heart, heartOutline } from "ionicons/icons";
 import { useCallback, useState } from "react";
 import { Agent } from "../../../core/agent/agent";
 import {
-  ConnectionShortDetails,
-  RegularConnectionDetails,
   MiscRecordId,
+  RegularConnectionDetails,
 } from "../../../core/agent/agent.types";
 import { BasicRecord } from "../../../core/agent/records";
 import {

src/ui/components/ProfileDetailsModal/ProfileDetailsModal.test.tsx

@@ -205,6 +205,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -247,6 +248,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -291,6 +293,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -325,6 +328,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -359,6 +363,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -411,6 +416,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -463,6 +469,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -487,6 +494,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -538,6 +546,7 @@ describe("Individual profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -640,6 +649,7 @@ describe("Individual profile details page", () => {
           isOpen
           setIsOpen={jest.fn}
           restrictedOptions={true}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -804,6 +814,7 @@ describe("Group profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -863,6 +874,7 @@ describe("Group profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -910,6 +922,7 @@ describe("Group profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -953,6 +966,7 @@ describe("Group profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -1024,6 +1038,7 @@ describe("Group profile details page", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -1090,6 +1105,7 @@ describe("Checking the profile details page when information is missing from the
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -1099,9 +1115,12 @@ describe("Checking the profile details page when information is missing from the
       ).toBeVisible();
 
       expect(
-        getByText(EN_TRANSLATIONS.profiledetails.clouderror, {
-          normalizer: getDefaultNormalizer({ collapseWhitespace: false }),
-        })
+        getByText(
+          EN_TRANSLATIONS.profiledetails.loadprofileerror.missingoncloud,
+          {
+            normalizer: getDefaultNormalizer({ collapseWhitespace: false }),
+          }
+        )
       ).toBeVisible();
     });
 
@@ -1174,6 +1193,7 @@ describe("Set default profile when delete profile", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -1263,6 +1283,7 @@ describe("Set default profile when delete profile", () => {
           pageId={pageId}
           isOpen
           setIsOpen={jest.fn}
+          showProfiles={jest.fn}
         />
       </Provider>
     );
@@ -1356,6 +1377,7 @@ describe("Set default profile when delete profile", () => {
             pageId={pageId}
             isOpen
             setIsOpen={jest.fn}
+            showProfiles={jest.fn}
           />
         </Provider>
       );

src/ui/components/ProfileDetailsModal/ProfileDetailsModal.tsx

@@ -45,6 +45,7 @@ const ProfileDetailsModule = ({
   pageId,
   hardwareBackButtonConfig,
   restrictedOptions,
+  showProfiles,
 }: ProfileDetailsModalProps) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
@@ -89,6 +90,7 @@ const ProfileDetailsModule = ({
         error instanceof Error &&
         error.message.includes(Agent.MISSING_DATA_ON_KERIA)
       ) {
+        showProfiles?.(false);
         setCloudError(true);
       } else {
         handleDone?.(false);
@@ -170,11 +172,16 @@ const ProfileDetailsModule = ({
             <PageHeader
               title={defaultName}
               additionalButtons={
-                <Avatar id={defaultProfile?.identity.id || ""} />
+                <Avatar
+                  id={defaultProfile?.identity.id || ""}
+                  handleAvatarClick={() => showProfiles?.(true)}
+                />
               }
             />
           }
-          content={`${i18n.t("profiledetails.clouderror")}`}
+          content={`${i18n.t(
+            "profiledetails.loadprofileerror.missingoncloud"
+          )}`}
         >
           <PageFooter
             pageId={pageId}

src/ui/components/ProfileDetailsModal/ProfileDetailsModal.types.ts

@@ -6,6 +6,7 @@ interface ProfileDetailsModalProps {
   onClose?: (animation?: boolean) => void;
   hardwareBackButtonConfig?: HardwareBackButtonConfig;
   restrictedOptions?: boolean;
+  showProfiles?: (value: boolean) => void;
 }
 
 interface IdentifierDetailModalProps

src/ui/components/Spinner/Spinner.scss

@@ -5,11 +5,13 @@
   align-items: center;
   justify-content: center;
   background-color: rgba(var(--ion-color-neutral-700-rgb), 0.2);
+  backdrop-filter: blur(0.25rem);
 
   &.screen {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1000;
+    margin: 0;
   }
 }

src/ui/hooks/useProfile.ts

@@ -144,6 +144,7 @@ export const useProfile = () => {
     defaultName: defaultProfile?.identity?.displayName,
     defaultProfile,
     profileHistories,
+    profiles,
     updateDefaultProfile,
     setRecentProfileAsDefault,
     getRecentDefaultProfile,

src/ui/pages/ConnectionDetails/ConnectionDetails.tsx

@@ -13,14 +13,12 @@ import "./ConnectionDetails.scss";
 
 import { Agent } from "../../../core/agent/agent";
 import {
-  ConnectionDetails as ConnectionData,
   ConnectionHistoryItem,
   ConnectionNoteDetails,
-  RegularConnectionDetails,
   RegularConnectionDetailsFull,
 } from "../../../core/agent/agent.types";
 import { RoutePath } from "../../../routes";
-import { useAppDispatch, useAppSelector } from "../../../store/hooks";
+import { useAppDispatch } from "../../../store/hooks";
 import { removeConnectionCache } from "../../../store/reducers/profileCache";
 import {
   setCurrentOperation,