Save temporary VCmetadata to display pending VC + handle credentialEn…

…try not existing
Concordium · Aug 23, 2023 · 8061655 · 8061655
1 parent be7e52c
commit 8061655
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 12 deletions.
diff --git a/packages/browser-wallet/CHANGELOG.md b/packages/browser-wallet/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Fixed
+
+-   Show verifiable credentials in overview before they are put on chain.
+
 ## 1.1.1
 
 ### Fixed

diff --git a/packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/AddWeb3IdCredential.tsx b/packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/AddWeb3IdCredential.tsx
@@ -6,6 +6,7 @@ import { useLocation } from 'react-router-dom';
 import ExternalRequestLayout from '@popup/page-layouts/ExternalRequestLayout';
 import Button from '@popup/shared/Button';
 import {
+    sessionTemporaryVerifiableCredentialMetadataAtom,
     sessionTemporaryVerifiableCredentialsAtom,
     storedVerifiableCredentialMetadataAtom,
     storedVerifiableCredentialsAtom,
@@ -51,6 +52,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
     const { onClose, withClose } = useContext(fullscreenPromptContext);
     const [acceptButtonDisabled, setAcceptButtonDisabled] = useState<boolean>(false);
     const [web3IdCredentials, setWeb3IdCredentials] = useAtom(sessionTemporaryVerifiableCredentialsAtom);
+    const [tempMetdata, setTempMetadata] = useAtom(sessionTemporaryVerifiableCredentialMetadataAtom);
     const storedWeb3IdCredentials = useAtomValue(storedVerifiableCredentialsAtom);
     const [verifiableCredentialMetadata, setVerifiableCredentialMetadata] = useAtom(
         storedVerifiableCredentialMetadataAtom
@@ -144,18 +146,20 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
         const credentialHolderId = wallet.getVerifiableCredentialPublicKey(issuer, index).toString('hex');
         const credentialSubjectId = createPublicKeyIdentifier(credentialHolderId, network);
         const credentialSubject = { ...credential.credentialSubject, id: credentialSubjectId };
+        const credentialId = createCredentialId(credentialHolderId, issuer, network);
 
         const fullCredential = {
             ...credential,
             credentialSubject,
-            id: createCredentialId(credentialHolderId, issuer, network),
+            id: credentialId,
             index,
         };
         await setWeb3IdCredentials([...web3IdCredentials.value, fullCredential]);
         if (metadata) {
             const newMetadata = { ...verifiableCredentialMetadata.value };
             newMetadata[metadataUrl.url] = metadata;
             await setVerifiableCredentialMetadata(newMetadata);
+            await setTempMetadata({ ...tempMetdata.value, [credentialId]: metadata });
         }
         return credentialSubjectId;
     }

diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialHooks.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialHooks.tsx
@@ -17,10 +17,12 @@ import { useEffect, useState } from 'react';
 import {
     storedVerifiableCredentialMetadataAtom,
     storedVerifiableCredentialSchemasAtom,
+    sessionTemporaryVerifiableCredentialMetadataAtom,
 } from '@popup/store/verifiable-credential';
 import { AsyncWrapper } from '@popup/store/utils';
 import { ConcordiumGRPCClient } from '@concordium/web-sdk';
 import { useTranslation } from 'react-i18next';
+import { noOp } from 'wallet-common-helpers';
 
 /**
  * Retrieve the on-chain credential status for a verifiable credential in a CIS-4 credential registry contract.
@@ -77,9 +79,11 @@ export function useCredentialEntry(credential?: VerifiableCredential) {
         if (credential) {
             const credentialHolderId = getCredentialHolderId(credential.id);
             const registryContractAddress = getCredentialRegistryContractAddress(credential.id);
-            getVerifiableCredentialEntry(client, registryContractAddress, credentialHolderId).then((entry) => {
-                setCredentialEntry(entry);
-            });
+            getVerifiableCredentialEntry(client, registryContractAddress, credentialHolderId)
+                .then((entry) => {
+                    setCredentialEntry(entry);
+                })
+                .catch(noOp); // TODO add logging on catch?
         }
     }, [credential?.id, client]);
 
@@ -97,6 +101,7 @@ export function useCredentialMetadata(credential?: VerifiableCredential) {
     const [metadata, setMetadata] = useState<VerifiableCredentialMetadata>();
     const credentialEntry = useCredentialEntry(credential);
     const storedMetadata = useAtomValue(storedVerifiableCredentialMetadataAtom);
+    const tempMetadata = useAtomValue(sessionTemporaryVerifiableCredentialMetadataAtom);
 
     useEffect(() => {
         if (!storedMetadata.loading && credentialEntry) {
@@ -107,8 +112,14 @@ export function useCredentialMetadata(credential?: VerifiableCredential) {
                 );
             }
             setMetadata(storedCredentialMetadata);
+        } else if (!storedMetadata.loading && !credentialEntry && !tempMetadata.loading && credential) {
+            // Use temporary metadata
+            const tMetadata = tempMetadata.value[credential.id];
+            if (tMetadata) {
+                setMetadata(tMetadata);
+            }
         }
-    }, [storedMetadata, credentialEntry]);
+    }, [storedMetadata.loading, tempMetadata.loading, credentialEntry, credential?.id]);
 
     return metadata;
 }

diff --git a/packages/browser-wallet/src/popup/store/utils.ts b/packages/browser-wallet/src/popup/store/utils.ts
@@ -31,6 +31,7 @@ import {
     storedAllowlist,
     storedVerifiableCredentialMetadata,
     sessionVerifiableCredentials,
+    sessionVerifiableCredentialMetadata,
 } from '@shared/storage/access';
 import { ChromeStorageKey } from '@shared/storage/types';
 import { atom, PrimitiveAtom, WritableAtom } from 'jotai';
@@ -66,6 +67,10 @@ const accessorMap: Record<ChromeStorageKey, StorageAccessor<any>> = {
     [ChromeStorageKey.VerifiableCredentialMetadata]: storedVerifiableCredentialMetadata,
     [ChromeStorageKey.Allowlist]: storedAllowlist,
     [ChromeStorageKey.TemporaryVerifiableCredentials]: useIndexedStorage(sessionVerifiableCredentials, getGenesisHash),
+    [ChromeStorageKey.TemporaryVerifiableCredentialMetadata]: useIndexedStorage(
+        sessionVerifiableCredentialMetadata,
+        getGenesisHash
+    ),
 };
 
 export function resetOnUnmountAtom<V>(initial: V): PrimitiveAtom<V> {

diff --git a/packages/browser-wallet/src/popup/store/verifiable-credential.ts b/packages/browser-wallet/src/popup/store/verifiable-credential.ts
@@ -21,3 +21,7 @@ export const storedVerifiableCredentialMetadataAtom = atomWithChromeStorage<
 export const sessionTemporaryVerifiableCredentialsAtom = atomWithChromeStorage<
     Omit<VerifiableCredential, 'signature' | 'randomness'>[]
 >(ChromeStorageKey.TemporaryVerifiableCredentials, [], true);
+
+export const sessionTemporaryVerifiableCredentialMetadataAtom = atomWithChromeStorage<
+    Record<string, VerifiableCredentialMetadata>
+>(ChromeStorageKey.TemporaryVerifiableCredentialMetadata, {}, true);
diff --git a/packages/browser-wallet/src/shared/storage/access.ts b/packages/browser-wallet/src/shared/storage/access.ts
@@ -230,3 +230,7 @@ export const sessionPendingTransactions = makeIndexedStorageAccessor<string[]>(
 export const sessionVerifiableCredentials = makeSerializedAndIndexedStorageAccessor<
     Omit<VerifiableCredential, 'signature' | 'randomness'>[]
 >('session', ChromeStorageKey.TemporaryVerifiableCredentials);
+
+export const sessionVerifiableCredentialMetadata = makeIndexedStorageAccessor<
+    Record<string, VerifiableCredentialMetadata>
+>('session', ChromeStorageKey.TemporaryVerifiableCredentialMetadata);
diff --git a/packages/browser-wallet/src/shared/storage/types.ts b/packages/browser-wallet/src/shared/storage/types.ts
@@ -30,6 +30,7 @@ export enum ChromeStorageKey {
     VerifiableCredentialSchemas = 'verifiableCredentialSchemas',
     VerifiableCredentialMetadata = 'verifiableCredentialMetadata',
     TemporaryVerifiableCredentials = 'tempVerifiableCredentials',
+    TemporaryVerifiableCredentialMetadata = 'tempVerifiableCredentialMetadata',
     Allowlist = 'allowlist',
 }
 

diff --git a/packages/browser-wallet/src/shared/utils/verifiable-credential-helpers.ts b/packages/browser-wallet/src/shared/utils/verifiable-credential-helpers.ts
@@ -809,13 +809,17 @@ export async function getCredentialMetadata(
 ) {
     const metadataUrls: MetadataUrl[] = [];
     for (const vc of credentials) {
-        const entry = await getVerifiableCredentialEntry(
-            client,
-            getCredentialRegistryContractAddress(vc.id),
-            getCredentialHolderId(vc.id)
-        );
-        if (entry) {
-            metadataUrls.push(entry.credentialInfo.metadataUrl);
+        try {
+            const entry = await getVerifiableCredentialEntry(
+                client,
+                getCredentialRegistryContractAddress(vc.id),
+                getCredentialHolderId(vc.id)
+            );
+            if (entry) {
+                metadataUrls.push(entry.credentialInfo.metadataUrl);
+            }
+        } catch (e) {
+            // If we fail, the credential most likely doesn't exist and we skip it
         }
     }