fix(ui): update mutilsig fallback icon

cardano-foundation · Mar 28, 2024 · ad1f85f · ad1f85f
1 parent e6df5f2
commit ad1f85f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 13 deletions.
diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx
@@ -14,8 +14,9 @@ import { IdentifierStageProps } from "../CreateIdentifier.types";
 import { ConnectionShortDetails } from "../../../pages/Connections/Connections.types";
 import { useAppSelector } from "../../../../store/hooks";
 import { getConnectionsCache } from "../../../../store/reducers/connectionsCache";
-import CardanoLogo from "../../../assets/images/CardanoLogo.jpg";
 import { ConnectionType } from "../../../../core/agent/agent.types";
+import KeriLogo from "../../../assets/images/KeriGeneric.jpg";
+import DidComLogo from "../../../assets/images/didCommGeneric.jpg";
 
 const IdentifierStage1 = ({
   state,
@@ -62,6 +63,9 @@ const IdentifierStage1 = ({
     }));
   };
 
+  const getFallbackLogo = (type?: ConnectionType) =>
+    type === ConnectionType.DIDCOMM ? DidComLogo : KeriLogo;
+
   return (
     <>
       <ScrollablePageLayout
@@ -100,7 +104,7 @@ const IdentifierStage1 = ({
               >
                 <IonLabel className="connection-item">
                   <img
-                    src={connection?.logo ?? CardanoLogo}
+                    src={connection?.logo || getFallbackLogo(connection?.type)}
                     className="connection-logo"
                     alt="connection-logo"
                   />

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage3.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage3.tsx
@@ -21,6 +21,9 @@ import {
   IdentifierShortDetails,
   IdentifierType,
 } from "../../../../core/agent/services/identifierService.types";
+import KeriLogo from "../../../assets/images/KeriGeneric.jpg";
+import DidComLogo from "../../../assets/images/didCommGeneric.jpg";
+import { ConnectionType } from "../../../../core/agent/agent.types";
 
 const IdentifierStage3 = ({
   state,
@@ -104,6 +107,9 @@ const IdentifierStage3 = ({
     }, CREATE_IDENTIFIER_BLUR_TIMEOUT);
   };
 
+  const getFallbackLogo = (type?: ConnectionType) =>
+    type === ConnectionType.DIDCOMM ? DidComLogo : KeriLogo;
+
   return (
     <>
       <ScrollablePageLayout
@@ -159,7 +165,7 @@ const IdentifierStage3 = ({
                 >
                   <IonLabel>
                     <img
-                      src={connection?.logo ?? CardanoLogo}
+                      src={connection?.logo || getFallbackLogo(connection.type)}
                       className="connection-logo"
                       alt="connection-logo"
                     />

diff --git a/src/ui/pages/IncomingRequest/components/MultiSigRequestStageOne.scss b/src/ui/pages/IncomingRequest/components/MultiSigRequestStageOne.scss
@@ -0,0 +1,14 @@
+.request-user-logo {
+  border-radius: 50%;
+  background-color: var(--ion-color-primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+
+  ion-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
diff --git a/src/ui/pages/IncomingRequest/components/MultiSigRequestStageOne.tsx b/src/ui/pages/IncomingRequest/components/MultiSigRequestStageOne.tsx
@@ -6,18 +6,23 @@ import {
   IonRow,
   IonCol,
   IonLabel,
+  IonIcon,
 } from "@ionic/react";
+import { personCircleOutline } from "ionicons/icons";
 import { useState } from "react";
 import {
   Alert as AlertAccept,
   Alert as AlertDecline,
 } from "../../../components/Alert";
 import { i18n } from "../../../../i18n";
-import CardanoLogo from "../../../../ui/assets/images/CardanoLogo.jpg";
 import { ScrollablePageLayout } from "../../../components/layout/ScrollablePageLayout";
 import { PageFooter } from "../../../components/PageFooter";
 import { RequestProps } from "../IncomingRequest.types";
 import { PageHeader } from "../../../components/PageHeader";
+import KeriLogo from "../../../assets/images/KeriGeneric.jpg";
+import DidComLogo from "../../../assets/images/didCommGeneric.jpg";
+import { ConnectionType } from "../../../../core/agent/agent.types";
+import "./MultiSigRequestStageOne.scss";
 
 const MultiSigRequestStageOne = ({
   pageId,
@@ -44,6 +49,9 @@ const MultiSigRequestStageOne = ({
     handleIgnore && handleIgnore();
   };
 
+  const getFallbackLogo = (type?: ConnectionType) =>
+    type === ConnectionType.DIDCOMM ? DidComLogo : KeriLogo;
+
   return (
     <>
       <ScrollablePageLayout
@@ -73,14 +81,20 @@ const MultiSigRequestStageOne = ({
                       size="1.25"
                       className="multisig-connection-logo"
                     >
-                      <img
-                        data-testid="multisig-connection-logo"
-                        src={
-                          requestData.multisigIcpDetails?.sender.logo ||
-                          CardanoLogo
-                        }
-                        alt="multisig-connection-logo"
-                      />
+                      {requestData.multisigIcpDetails?.sender.logo ? (
+                        <img
+                          data-testid="multisig-connection-logo"
+                          src={requestData.multisigIcpDetails?.sender.logo}
+                          alt="multisig-connection-logo"
+                        />
+                      ) : (
+                        <div className="request-user-logo">
+                          <IonIcon
+                            icon={personCircleOutline}
+                            color="light"
+                          />
+                        </div>
+                      )}
                     </IonCol>
                     <IonCol
                       size="10.35"
@@ -116,7 +130,10 @@ const MultiSigRequestStageOne = ({
                           >
                             <img
                               data-testid={`other-multisig-connection-logo-${index}`}
-                              src={connection.logo || CardanoLogo}
+                              src={
+                                connection.logo ||
+                                getFallbackLogo(connection.type)
+                              }
                               alt="multisig-connection-logo"
                             />
                           </IonCol>