Fall back to ccd logo

Author: soerenbf

packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss

@@ -27,11 +27,18 @@
     }
 
     svg, img {
-        width: rem(16px);
-        height: rem(16px);
+        width: rem(22px);
+        height: rem(22px);
+        background-color: $color-white;
+        padding: rem(2px);
+        border-radius: rem(4px);
 
         object-position: center;
         object-fit: contain;
+
+        path {
+            fill: $color-grey-3;
+        }
     }
 
     &__top {

packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx

@@ -14,14 +14,14 @@ import {
     VerifiableCredentialStatus,
 } from '@shared/storage/types';
 
+import Img from '@popup/shared/Img';
 import {
     defaultFormatAttribute,
     useCredentialLocalization,
     useCredentialMetadata,
     useCredentialSchema,
     useCredentialStatus,
 } from '../utils/verifiable-credentials';
-import Img from '@popup/shared/Img';
 
 /**
  * Component for displaying the status of a verifiable credential.
@@ -75,9 +75,9 @@ export function Web3IdCardView({ status, title, attributes, className, warning,
         <Card className={clsx('web3-id-card-x', className)}>
             <Card.Row>
                 <div className="web3-id-card-x__top">
-                    <div className="flex align-items-center justify-space-between">
-                        <div className="flex align-items-center">
-                            {logo !== undefined ? <Img src={logo.url} withDefaults /> : <ConcordiumLogo />}
+                    <div className="flex align-center justify-space-between">
+                        <div className="flex align-center">
+                            {logo !== undefined ? <Img src={logo.url} /> : <ConcordiumLogo />}
                             <Text.MainMedium>{title}</Text.MainMedium>
                         </div>
                         <Status status={status} />
@@ -149,8 +149,6 @@ type Props = Pick<ViewProps, 'className'> & {
     credential: VerifiableCredential;
 };
 
-// TODO:
-// - Use the icon from the issuer if available
 export default function Web3IdCard({ credential, ...viewProps }: Props) {
     const { t } = useTranslation('x', { keyPrefix: 'sharedX.web3IdCard.warning' });
     const status = useCredentialStatus(credential);
@@ -184,6 +182,7 @@ export default function Web3IdCard({ credential, ...viewProps }: Props) {
             title={metadata.title}
             status={status}
             warning={warning}
+            logo={metadata.logo}
             {...viewProps}
         />
     );

packages/browser-wallet/src/popup/shared/Img.tsx

@@ -17,7 +17,7 @@ type WithDefaultsProps = BaseProps & {
 type NoDefaultsProps = BaseProps & {
     withDefaults?: false;
     loadingImage?: string;
-    failedImage?: string;
+    failedImage?: string | JSX.Element;
 };
 
 type Props = WithDefaultsProps | NoDefaultsProps;
@@ -49,7 +49,10 @@ export default function Img({ src, alt, className, ...props }: Props) {
                 }}
                 onError={handleError}
             />
-            {shouldHide && <img className={className} src={failed ? failedImage : loadingImage} alt={alt} />}
+            {shouldHide && failed && typeof failedImage !== 'string' && failedImage !== undefined && failedImage}
+            {shouldHide && (typeof failedImage === 'string' || failedImage === undefined || !failed) && (
+                <img className={className} src={failed ? (failedImage as string) : loadingImage} alt={alt} />
+            )}
         </>
     );
 }