Add credential metadata fallback

packages/browser-wallet/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Fixed
+
+-   An issue where changing the credential metadata URL to an invalid URL, or a URL that does not contain a credential metadata file, would result in an empty screen.
+
 ## 1.1.3
 
 ### Changed

packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/AddWeb3IdCredential.tsx

@@ -197,6 +197,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
             credentialSubject,
             id: credentialId,
             index,
+            metadataUrl: metadataUrl.url,
         };
         await setWeb3IdCredentials([...web3IdCredentials.value, fullCredential]);
         if (metadata) {

packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialHooks.tsx

@@ -22,7 +22,7 @@ import {
 import { AsyncWrapper } from '@popup/store/utils';
 import { ConcordiumGRPCClient } from '@concordium/web-sdk';
 import { useTranslation } from 'react-i18next';
-import { logError } from '@shared/utils/log-helpers';
+import { logError, logWarningMessage } from '@shared/utils/log-helpers';
 
 /**
  * Retrieve the on-chain credential status for a verifiable credential in a CIS-4 credential registry contract.
@@ -110,24 +110,36 @@ export function useCredentialMetadata(credential?: VerifiableCredential) {
         if (storedMetadata.loading) {
             return;
         }
-        let url;
+
+        let url: string | undefined;
         if (credentialEntry) {
             url = credentialEntry.credentialInfo.metadataUrl.url;
         } else if (!tempMetadata.loading && credential) {
             url = tempMetadata.value[credential.id];
         }
-        if (!url) {
+        if (url === undefined || credential === undefined) {
             return;
         }
+
         const storedCredentialMetadata = storedMetadata.value[url];
-        if (!storedCredentialMetadata) {
+        if (storedCredentialMetadata) {
+            setMetadata(storedCredentialMetadata);
+            return;
+        }
+
+        // The URL we got does not have a corresponding entry in our local storage.
+        // In this case we fallback to using the known "good" value so that we can
+        // still get metadata for this credential.
+        const fallbackCredentialMetadata = storedMetadata.value[credential.metadataUrl];
+        if (!fallbackCredentialMetadata) {
             throw new Error(
-                `Attempted to find credential metadata for credentialId: ${
-                    credentialEntry?.credentialInfo.credentialHolderId || credential?.id
-                } but none was found!`
+                `Attempted to find credential metadata for credentialId: ${credential.id} at URL ${credential.metadataUrl} but none was found!`
             );
         }
-        setMetadata(storedCredentialMetadata);
+        logWarningMessage(
+            `Using fallback credential metadata for credential ${credential.id}. The credential entry metadata URL is [${credentialEntry?.credentialInfo.metadataUrl.url}]`
+        );
+        setMetadata(fallbackCredentialMetadata);
     }, [storedMetadata.loading, tempMetadata.loading, credentialEntry, credential?.id]);
 
     return metadata;

packages/browser-wallet/src/shared/storage/types.ts

@@ -287,8 +287,11 @@ export interface VerifiableCredential extends APIVerifiableCredential {
     // Secrets
     signature: string;
     randomness: Record<string, string>;
-    /** index used to derive keys for credential */
+    // Index used to derive keys for credential
     index: number;
+    // The original metadataUrl received when first adding the credential
+    // TODO: The URL should be updated when there are valid updates to the metadata.
+    metadataUrl: string;
 }
 
 interface CredentialSchemaProperty {

packages/browser-wallet/src/shared/utils/log-helpers.ts

@@ -66,3 +66,7 @@ export async function logError(error: unknown) {
         logErrorMessage(String(error));
     }
 }
+
+export async function logWarningMessage(message: string) {
+    log(message, LoggingLevel.WARN);
+}