feat(ui): [CSO certificate] Sign CSO certificate on chain: Frontend (#…

…944) * feat(ui): sign undp transaction * feat(ui): update notification type and move mock object * feat(ui): update data structure * feat(ui): remove undp * feat(ui): rename component --------- Co-authored-by: Vu Van Duc <vuvanduc@Vus-MacBook-Pro.local>
cardano-foundation · Feb 11, 2025 · d8e6943 · d8e6943
1 parent e256048
commit d8e6943
Show file tree

Hide file tree

Showing 15 changed files with 513 additions and 14 deletions.
diff --git a/src/core/agent/agent.types.ts b/src/core/agent/agent.types.ts
@@ -181,6 +181,7 @@ enum NotificationRoute {
   ExnIpexOffer = "/exn/ipex/offer",
   // Notifications from our wallet to give further feedback to the user
   LocalAcdcRevoked = "/local/acdc/revoked",
+  LocalSign = "/local/signrequest/",
 }
 
 enum ExchangeRoute {

diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -1191,7 +1191,8 @@
           "multisigicp": "<strong>{{connection}}</strong> is requesting to create a group identifier with you",
           "exnipexapply": "<strong>{{connection}}</strong> has requested a credential from you",
           "exnipexgrantrevoke": "Your <strong>{{credential}}</strong> credential has been revoked",
-          "exnipexapplyproposed": "<strong>{{initiator}}</strong>  has proposed a credential for the <strong>{{connection}}’s</strong> request"
+          "exnipexapplyproposed": "<strong>{{initiator}}</strong>  has proposed a credential for the <strong>{{connection}}’s</strong> request",
+          "sign": "<strong>Sign CSO Certificate</strong> for <strong>{{connection}}</strong>"
         }
       },
       "details": {
@@ -1292,6 +1293,18 @@
             },
             "continuesetup": "Continue setup"
           }
+        },
+        "sign": {
+          "title": "Sign CSO Certificate",
+          "identifier": "Identifier",
+          "info": "Signature information",
+          "transaction": {
+            "data": "Signature data"
+          },
+          "button": {
+            "sign": "Sign",
+            "dontallow": "Don't allow"
+          }
         }
       }
     },

diff --git a/src/ui/__fixtures__/notificationsFix.ts b/src/ui/__fixtures__/notificationsFix.ts
@@ -91,6 +91,31 @@ const notificationsFix: KeriaNotification[] = [
     read: false,
     groupReplied: false,
   },
+  {
+    id: "AL3XmFY8BM9F604qmV-l9b0YMZNvshHG7X6CveMWKMm2",
+    createdAt: new Date(now.getTime() + 120 * -60000).toISOString(),
+    a: {
+      r: "/local/signrequest/",
+      d: "EMT02ZHUhpnr4gFFk104B-pLwb2bJC8aip2VYmbPztnk",
+      m: "",
+      payload: {
+        identifier: "EN5dwY0N7RKn6OcVrK7ksIniSgPcItCuBRax2JFUpuRc",
+        payload: JSON.stringify({
+          action: "Sign CSO Certificate",
+          actionText: "Sign CSO Certificate",
+          id: "2658fb7d-cd12-48c3-bc95-23e73616b79f",
+          address:
+            "stake_test1uzpq2pktpnj54e64kfgjkm8nrptdwfj7s7fvhp40e98qsusd9z7ek",
+          event: "Sign CSO Certificate",
+          network: "PREPROD",
+          slot: "40262407",
+        }),
+      },
+    },
+    connectionId: "EMrT7qX0FIMenQoe5pJLahxz_rheks1uIviGW8ch8pfB",
+    read: false,
+    groupReplied: false,
+  }
 ];
 
 export { notificationsFix };
diff --git a/src/ui/__fixtures__/signTransactionFix.ts b/src/ui/__fixtures__/signTransactionFix.ts
@@ -39,4 +39,5 @@ const signObjectFix: PeerConnectSigningEvent = {
   },
 };
 
-export { signTransactionFix, signObjectFix };
+export { signObjectFix, signTransactionFix };
+
diff --git a/src/ui/assets/images/sign-logo.png b/src/ui/assets/images/sign-logo.png
diff --git a/src/ui/components/CardDetails/CardDetailsAttributes/CardDetailsAttributes.tsx b/src/ui/components/CardDetails/CardDetailsAttributes/CardDetailsAttributes.tsx
@@ -9,14 +9,14 @@ const CardDetailsAttributes = ({
   customType,
   itemProps,
 }: CardDetailsAttributesProps) => {
-  const { className, ...restItemProps } = itemProps || {};
   const attributes = Object.entries(data);
 
-  const itemClass = combineClassNames("card-details-attribute-item", className);
-
   return (
     <>
       {attributes.map((item, index) => {
+        const { className, ...restItemProps } = typeof itemProps === "function" ? itemProps(item[0]) : (itemProps || {});
+        const itemClass = combineClassNames("card-details-attribute-item", className);
+
         switch (item[0]) {
         case "id": {
           return (

diff --git a/src/ui/components/CardDetails/CardDetailsAttributes/CardDetailsAttributes.types.ts b/src/ui/components/CardDetails/CardDetailsAttributes/CardDetailsAttributes.types.ts
@@ -4,15 +4,17 @@ import {
 } from "../../../../core/agent/services/credentialService.types";
 import { CardDetailsItemProps } from "../CardDetailsItem/CardDetailsItem.types";
 
+type ItemProps = Omit<CardDetailsItemProps, "info"> | ((key?: string) =>  Omit<CardDetailsItemProps, "info">);
+
 export interface CardDetailsAttributesProps {
   data: JSONObject;
   customType?: string;
-  itemProps?: Omit<CardDetailsItemProps, "info">;
+  itemProps?: ItemProps;
 }
 
 export interface CardDetailsNestedAttributesProps {
   attribute: [string, JSONValue];
   customType?: string;
   cardKeyValue?: string;
-  itemProps?: Omit<CardDetailsItemProps, "info">;
+  itemProps?: ItemProps;
 }
diff --git a/src/ui/components/CardDetails/CardDetailsAttributes/CardDetailsNestedAttributes.tsx b/src/ui/components/CardDetails/CardDetailsAttributes/CardDetailsNestedAttributes.tsx
@@ -12,7 +12,6 @@ const CardDetailsNestedAttributes = ({
   cardKeyValue,
   itemProps,
 }: CardDetailsNestedAttributesProps) => {
-  const { className, ...restItemProps } = itemProps || {};
   const key = attribute[0];
   const item = attribute[1] as any;
   const dateRegex =
@@ -29,6 +28,7 @@ const CardDetailsNestedAttributes = ({
     return "";
   }, []);
 
+  const { className, ...restItemProps } = typeof itemProps === "function" ? itemProps(key) : (itemProps || {});
   const isObjectItem = typeof item === "object" && item !== null;
   const detailItemsClass = combineClassNames(
     "card-details-attribute-item",

diff --git a/src/ui/pages/NotificationDetails/NotificationDetails.tsx b/src/ui/pages/NotificationDetails/NotificationDetails.tsx
@@ -1,13 +1,17 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { KeriaNotification, NotificationRoute } from "../../../core/agent/agent.types";
+import {
+  KeriaNotification,
+  NotificationRoute,
+} from "../../../core/agent/agent.types";
 import { TabsRoutePath } from "../../../routes/paths";
 import { useAppSelector } from "../../../store/hooks";
 import { getNotificationsCache } from "../../../store/reducers/notificationsCache";
 import { useAppIonRouter } from "../../hooks";
 import { CredentialRequest } from "./components/CredentialRequest";
 import { MultiSigRequest } from "./components/MultiSigRequest";
 import { ReceiveCredential } from "./components/ReceiveCredential";
+import { RemoteSignRequest } from "./components/RemoteSignRequest";
 
 const NotificationDetails = () => {
   const pageId = "notification-details";
@@ -19,16 +23,19 @@ const NotificationDetails = () => {
     return notificationCache.find((notification) => notification.id === id);
   }, [id, notificationCache]);
 
-  const currentNotification = useRef<KeriaNotification | undefined>(notificationDetails);
+  const currentNotification = useRef<KeriaNotification | undefined>(
+    notificationDetails
+  );
 
   const handleBack = useCallback(() => {
     ionicRouter.push(TabsRoutePath.NOTIFICATIONS, "back", "pop");
   }, [ionicRouter]);
 
-  const displayNotification = notificationDetails || currentNotification.current;
+  const displayNotification =
+    notificationDetails || currentNotification.current;
 
   useEffect(() => {
-    if(!displayNotification) handleBack();
+    if (!displayNotification) handleBack();
   }, [handleBack, displayNotification]);
 
   switch (displayNotification?.a?.r) {
@@ -69,6 +76,15 @@ const NotificationDetails = () => {
         multisigExn
       />
     );
+  case NotificationRoute.LocalSign:
+    return (
+      <RemoteSignRequest
+        pageId={pageId}
+        activeStatus={!!displayNotification}
+        notificationDetails={displayNotification}
+        handleBack={handleBack}
+      />
+    );
   default:
     return null;
   }

diff --git a/src/ui/pages/NotificationDetails/components/RemoteSignRequest/RemoteSignRequest.scss b/src/ui/pages/NotificationDetails/components/RemoteSignRequest/RemoteSignRequest.scss
@@ -0,0 +1,141 @@
+.custom-sign-request {
+  .sign-request-header {
+    height: 2.75rem;
+  }
+
+  & .page-header {
+    ion-toolbar {
+      --background: transparent;
+
+      & > ion-title.md {
+        margin: 0;
+      }
+    }
+  }
+
+  .sign-footer {
+    padding: 0.5rem 0;
+
+    .secondary-button::part(native) {
+      border: none;
+      color: var(--ion-color-error-800);
+    }
+  }
+
+  .sign-info {
+    margin: 0 0 0.75rem;
+  }
+
+  .sign-header {
+    margin: 1.75rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .sign-owner-logo {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 2.5rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .sign-name {
+      font-size: 1.5rem;
+      line-height: 1.75rem;
+      margin-bottom: 0.5rem;
+      color: var(--ion-color-neutral-800);
+    }
+
+    .sign-link {
+      font-weight: 500;
+      font-size: 0.75rem;
+      line-height: 1rem;
+      margin: 0;
+      color: var(--ion-color-neutral-600);
+    }
+  }
+
+  .sign-content {
+    .sign-identifier {
+      margin-bottom: 1.5rem;
+
+      .identifier {
+        display: block;
+        padding: 0.75rem 0;
+
+        @media screen and (min-width: 250px) and (max-width: 370px) {
+          font-size: 0.8rem;
+          padding: 0.25rem 0;
+        }
+      }
+
+      .action-button {
+        --color: var(--ion-color-neutral-500);
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    .sign-data {        
+      & > .card-details-info-block-inner {
+        .content-container {
+          height: 0;
+          transition: all 0.5s ease-in-out;
+          overflow: hidden;
+
+          .content {
+            &  > ion-item:last-of-type {
+              margin-bottom: 0.5rem;
+            }
+          }
+        }
+
+        .action-button {
+          --color: var(--ion-color-neutral-500);
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
+      .card-details-nested-content {
+        & > .card-details-info-block-inner {
+          padding: 1rem;
+        }
+      }
+
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      & > .card-details-info-block-inner > .sign-info-item {
+        &:first-child {
+          margin-top: 0.75rem;
+        }
+
+        &:last-child {
+          margin-bottom: 0.75rem;
+        }
+
+        @media screen and (min-width: 250px) and (max-width: 370px) {
+          &:first-child {
+            margin-top: 0.5rem;
+          }
+
+          &:last-child {
+            margin-bottom: 0.5rem;
+          }
+        }
+      }
+      .sign-string {
+        display: block;
+        padding: 0.75rem 0;
+        font-weight: normal;
+        @media screen and (min-width: 250px) and (max-width: 370px) {
+          font-size: 0.8rem;
+          padding: 0.25rem 0;
+        }
+      }
+    }
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,4 +39,5 @@ const signObjectFix: PeerConnectSigningEvent = { @@
       },
     };
-    export { signTransactionFix, signObjectFix };
+    export { signObjectFix, signTransactionFix };