feat(ui): implement cred request

src/ui/pages/NotificationDetails/NotificationDetails.test.tsx

@@ -3,9 +3,10 @@ import { mockIonicReact } from "@ionic/react-test-utils";
 import { render, waitFor } from "@testing-library/react";
 import { createMemoryHistory } from "history";
 import { Provider } from "react-redux";
+import { Route } from "react-router-dom";
 import configureStore from "redux-mock-store";
 import EN_TRANSLATIONS from "../../../locales/en/en.json";
-import { RoutePath, TabsRoutePath } from "../../../routes/paths";
+import { TabsRoutePath } from "../../../routes/paths";
 import { connectionsFix } from "../../__fixtures__/connectionsFix";
 import { filteredIdentifierFix } from "../../__fixtures__/filteredIdentifierFix";
 import { notificationsFix } from "../../__fixtures__/notificationsFix";
@@ -63,12 +64,19 @@ describe("Notification Detail", () => {
     };
 
     const history = createMemoryHistory();
-    history.push(RoutePath.CONNECTION_DETAILS, notificationsFix[0]);
+    const path = `${TabsRoutePath.NOTIFICATIONS}/${notificationsFix[0].id}`;
+    history.push(path, notificationsFix[0]);
 
     const { getByText } = render(
-      <IonReactMemoryRouter history={history}>
+      <IonReactMemoryRouter
+        initialEntries={[path]}
+        history={history}
+      >
         <Provider store={storeMocked}>
-          <NotificationDetails />
+          <Route
+            path={TabsRoutePath.NOTIFICATION_DETAILS}
+            component={NotificationDetails}
+          />
         </Provider>
       </IonReactMemoryRouter>
     );
@@ -87,12 +95,19 @@ describe("Notification Detail", () => {
     };
 
     const history = createMemoryHistory();
-    history.push(RoutePath.CONNECTION_DETAILS, notificationsFix[3]);
+    const path = `${TabsRoutePath.NOTIFICATIONS}/${notificationsFix[3].id}`;
+    history.push(path, notificationsFix[3]);
 
     const { getByText } = render(
-      <IonReactMemoryRouter history={history}>
+      <IonReactMemoryRouter
+        initialEntries={[path]}
+        history={history}
+      >
         <Provider store={storeMocked}>
-          <NotificationDetails />
+          <Route
+            path={TabsRoutePath.NOTIFICATION_DETAILS}
+            component={NotificationDetails}
+          />
         </Provider>
       </IonReactMemoryRouter>
     );

src/ui/pages/NotificationDetails/NotificationDetails.tsx

@@ -1,37 +1,26 @@
-import { useHistory } from "react-router-dom";
-import { RoutePath } from "../../../routes";
-import { DataProps } from "../../../routes/nextRoute/nextRoute.types";
-import { useAppDispatch, useAppSelector } from "../../../store/hooks";
-import { getStateCache } from "../../../store/reducers/stateCache";
-import { updateReduxState } from "../../../store/utils";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { NotificationRoute } from "../../../core/agent/agent.types";
+import { useAppSelector } from "../../../store/hooks";
+import { getNotificationsCache } from "../../../store/reducers/notificationsCache";
 import { useAppIonRouter } from "../../hooks";
-import { getBackRoute } from "../../../routes/backRoute";
-import {
-  KeriaNotification,
-  NotificationRoute,
-} from "../../../core/agent/agent.types";
+import { CredentialRequest } from "./components/CredentialRequest";
 import { MultiSigRequest } from "./components/MultiSigRequest";
 import { ReceiveCredential } from "./components/ReceiveCredential";
+import { TabsRoutePath } from "../../../routes/paths";
 
 const NotificationDetails = () => {
   const pageId = "notification-details";
   const ionicRouter = useAppIonRouter();
-  const history = useHistory();
-  const dispatch = useAppDispatch();
-  const stateCache = useAppSelector(getStateCache);
-  const notificationDetails = history?.location?.state as KeriaNotification;
+  const notificationCache = useAppSelector(getNotificationsCache);
+  const { id } = useParams<{ id: string }>();
 
-  const handleBack = () => {
-    const data: DataProps = {
-      store: { stateCache },
-    };
-    const { backPath, updateRedux } = getBackRoute(
-      RoutePath.NOTIFICATION_DETAILS,
-      data
-    );
+  const notificationDetails = useMemo(() => {
+    return notificationCache.find((notification) => notification.id === id);
+  }, [id, notificationCache]);
 
-    updateReduxState(backPath.pathname, data, dispatch, updateRedux);
-    ionicRouter.goBack();
+  const handleBack = () => {
+    ionicRouter.push(TabsRoutePath.NOTIFICATIONS, "back", "pop");
   };
 
   switch (notificationDetails?.a?.r) {
@@ -53,6 +42,15 @@ const NotificationDetails = () => {
         handleBack={handleBack}
       />
     );
+  case NotificationRoute.ExnIpexApply:
+    return (
+      <CredentialRequest
+        pageId={pageId}
+        activeStatus={!!notificationDetails}
+        notificationDetails={notificationDetails}
+        handleBack={handleBack}
+      />
+    );
   default:
     return null;
   }

src/ui/pages/NotificationDetails/NotificationDetails.types.ts

@@ -1,10 +1,17 @@
 import { KeriaNotification } from "../../../core/agent/agent.types";
 
+interface NotificationDetailState {
+  notification: KeriaNotification;
+  step?: number;
+  openCredId?: string;
+  selected?: boolean;
+}
+
 interface NotificationDetailsProps {
   pageId: string;
   activeStatus: boolean;
   notificationDetails: KeriaNotification;
   handleBack: () => void;
 }
 
-export type { NotificationDetailsProps };
+export type { NotificationDetailsProps, NotificationDetailState };

src/ui/pages/NotificationDetails/components/CredentialRequest/ChooseCredential.scss

@@ -0,0 +1,53 @@
+.notification-details-credential-choose {
+  & .page-header {
+    ion-toolbar {
+      --background: transparent;
+    }
+  }
+
+  .title {
+    font-size: 1rem;
+    line-height: 1.115rem;
+    margin-top: 0.75rem;
+    margin-bottom: 1.75rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .info-icon {
+    color: var(--ion-color-secondary);
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+  }
+
+  .checkbox {
+    width: fit-content;
+    --checkbox-background-checked: var(--ion-color-primary-gradient);
+    --checkmark-color: var(--ion-color-primary);
+    --border-width: 0.115rem;
+
+    &.checkbox-checked {
+      --border-width: 0;
+    }
+  }
+
+  .card-item {
+    --background-activated: transparent;
+  }
+
+  .credential-request-footer {
+    padding: 1rem 0;
+  }
+
+  @media screen and (min-width: 250px) and (max-width: 370px) {
+    .title {
+      font-size: 0.85rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .checkbox {
+      --size: 1.25rem;
+    }
+  }
+}