feat: add keriblox logo and title

src/ui/components/CardList/CardList.tsx

@@ -11,6 +11,7 @@ import "./CardList.scss";
 import { CardItemProps, CardListProps } from "./CardList.types";
 import CitizenPortal from "../../assets/images/citizen-portal.svg";
 import Socialbook from "../../assets/images/socialbook.svg";
+import KeribloxLogo from "../../assets/images/Keriblox-logo.png";
 
 const CardInfo = <T extends object = object>({
   index,
@@ -50,6 +51,18 @@ const CardInfo = <T extends object = object>({
         </div>
       );
     }
+    if (card.title === "Keriblox") {
+      return (
+        <div className="socialbook-logo-container">
+          <img
+            src={KeribloxLogo}
+            alt={card.title}
+            className="card-logo"
+            data-testid="card-logo"
+          />
+        </div>
+      );
+    }
 
     if (card.image) {
       return (

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

@@ -29,6 +29,7 @@ interface IdentifierDetailModalProps
 const QR_CODE_TYPES = {
   GUARDIANSHIP: "guardianship",
   SOCIALMEDIA: "socialmedia",
+  KERIBLOX: "keriblox",
 } as const;
 
 const ERROR_MESSAGES = {

src/ui/components/ProfileDetailsModal/components/IncomingRequest/IncomingRequest.tsx

@@ -1,15 +1,16 @@
+import { IonIcon } from "@ionic/react";
+import { personCircleOutline } from "ionicons/icons";
+import { useEffect, useState } from "react";
 import { i18n } from "../../../../../i18n";
 import { ResponsivePageLayout } from "../../../layout/ResponsivePageLayout";
 import { PageFooter } from "../../../PageFooter";
 import { PageHeader } from "../../../PageHeader";
 import CitizenPortal from "../../../../assets/images/citizen-portal.svg";
 import Socialbook from "../../../../assets/images/socialbook.svg";
-import "./IncomingRequest.scss";
+import KeribloxIcon from "../../../../assets/images/Keriblox-logo.png";
 import { IncomingRequestProps } from "./IncomingRequest.types";
-import { useEffect, useState } from "react";
 import { QR_CODE_TYPES } from "../../ProfileDetailsModal.types";
-import { IonIcon } from "@ionic/react";
-import { personCircleOutline } from "ionicons/icons";
+import "./IncomingRequest.scss";
 
 const IncomingRequest = ({
   setShowConfirmation,
@@ -36,6 +37,9 @@ const IncomingRequest = ({
       } else if (type === QR_CODE_TYPES.SOCIALMEDIA) {
         setRequester("Socialbook");
         setLogo(Socialbook);
+      } else if (type === QR_CODE_TYPES.KERIBLOX) {
+        setRequester("Keriblox");
+        setLogo(KeribloxIcon);
       }
     }
   }, [type]);

src/ui/pages/NotificationDetails/components/CredentialRequest/CredentialRequestInformation/CredentialRequestInformation.tsx

@@ -35,6 +35,7 @@ import { CredentialRequestProps, MemberInfo } from "../CredentialRequest.types";
 import { LightCredentialDetailModal } from "../LightCredentialDetailModal";
 import "./CredentialRequestInformation.scss";
 import CitizenPortal from "../../../../../assets/images/citizen-portal.svg";
+import KeribloxLogo from "../../../../../assets/images/Keriblox-logo.png";
 import Socialbook from "../../../../../assets/images/socialbook.svg";
 
 const CredentialRequestInformation = ({
@@ -89,6 +90,8 @@ const CredentialRequestInformation = ({
           setRequester("Citizen Portal");
         } else if (type === "socialmedia") {
           setRequester("Socialbook");
+        } else if (type === "keriblox") {
+          setRequester("Keriblox");
         } else {
           setRequester(connection.label || i18n.t("tabs.connections.unknown"));
         }
@@ -345,6 +348,18 @@ const CredentialRequestInformation = ({
       );
     }
 
+    if (requester === "Keriblox") {
+      return (
+        <div className="socialbook-logo-container">
+          <img
+            src={KeribloxLogo}
+            className="card-logo"
+            data-testid="card-logo"
+          />
+        </div>
+      );
+    }
+
     return <FallbackIcon src={connection?.logo} />;
   })();
 

src/ui/pages/NotificationDetails/components/CredentialShareRequest/CredentialShareRequest.tsx

@@ -15,6 +15,7 @@ import { showError } from "../../../../utils/error";
 import { NotificationDetailsProps } from "../../NotificationDetails.types";
 import CitizenPortal from "../../../../assets/images/citizen-portal.svg";
 import Socialbook from "../../../../assets/images/socialbook.svg";
+import KeribloxLogo from "../../../../assets/images/Keriblox-logo.png";
 import { ResponsivePageLayout } from "../../../../components/layout/ResponsivePageLayout";
 import "./CredentialShareRequest.scss";
 
@@ -50,6 +51,8 @@ const CredentialShareRequest = ({
           setRequester("Citizen Portal");
         } else if (type === "socialmedia") {
           setRequester("Socialbook");
+        } else if (type === "keriblox") {
+          setRequester("Keriblox");
         } else {
           setRequester(connection.label || i18n.t("tabs.connections.unknown"));
         }
@@ -61,6 +64,16 @@ const CredentialShareRequest = ({
     }
   }, [notificationDetails.connectionId]);
 
+  let logoToRender = "";
+
+  if (requester === "Citizen Portal") {
+    logoToRender = CitizenPortal;
+  } else if (requester === "Socialbook") {
+    logoToRender = Socialbook;
+  } else if (requester === "Keriblox") {
+    logoToRender = KeribloxLogo;
+  }
+
   useEffect(() => {
     if (requester === i18n.t("tabs.connections.unknown")) {
       check();
@@ -104,9 +117,7 @@ const CredentialShareRequest = ({
         <div className="credential-share-request-center">
           <div className="credential-share-request-icons-row">
             <div className="credential-share-request-user-logo">
-              <img
-                src={requester === "Socialbook" ? Socialbook : CitizenPortal}
-              />
+              <img src={logoToRender} />
             </div>
           </div>
           <p className="credential-share-request-message">

src/ui/pages/Notifications/NotificationItem.tsx

@@ -28,6 +28,7 @@ import { timeDifference } from "../../utils/formatters";
 import { NotificationItemProps } from "./Notification.types";
 import CitizenPortal from "../../assets/images/citizen-portal.svg";
 import Socialbook from "../../assets/images/socialbook.svg";
+import KeribloxLogo from "../../assets/images/Keriblox-logo.png";
 
 const NotificationItem = ({
   item,
@@ -64,6 +65,8 @@ const NotificationItem = ({
           setConnectionName("Citizen Portal");
         } else if (type === "socialmedia") {
           setConnectionName("Socialbook");
+        } else if (type === "keriblox") {
+          setConnectionName("Keriblox");
         } else {
           setConnectionName(connection.label || "Unknown");
         }
@@ -194,6 +197,19 @@ const NotificationItem = ({
       );
     }
 
+    if (connectionName === "Keriblox") {
+      return (
+        <div className="socialbook-logo-container">
+          <img
+            src={KeribloxLogo}
+            alt={connectionName}
+            className="card-logo"
+            data-testid="card-logo"
+          />
+        </div>
+      );
+    }
+
     return (
       <FallbackIcon
         alt="notifications-tab-item-logo"