Add import when there is no web3Id credentials

Concordium · Aug 18, 2023 · e2f4bb2 · e2f4bb2
1 parent 4a12cc1
commit e2f4bb2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialList.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialList.tsx
@@ -25,6 +25,11 @@ import { VerifiableCredentialCard } from './VerifiableCredentialCard';
 import VerifiableCredentialDetails from './VerifiableCredentialDetails';
 import { useVerifiableCredentialExport } from '../VerifiableCredentialBackup/utils';
 
+async function goToImportPage() {
+    await popupMessageHandler.sendInternalMessage(InternalMessageType.LoadWeb3IdBackup);
+    window.close();
+}
+
 /**
  * Component to display while loading verifiable credentials from storage.
  */
@@ -37,9 +42,22 @@ function LoadingVerifiableCredentials() {
  */
 function NoVerifiableCredentials() {
     const { t } = useTranslation('verifiableCredential');
+
+    const menuButton = useMemo(() => {
+        const importButton = {
+            title: t('menu.import'),
+            onClick: goToImportPage,
+        };
+
+        return {
+            type: ButtonTypes.More,
+            items: [importButton],
+        };
+    }, []);
+
     return (
         <>
-            <Topbar title={t('topbar.list')} />
+            <Topbar title={t('topbar.list')} menuButton={menuButton} />
             <div className="verifiable-credential-wrapper">
                 <div className="flex-column align-center">
                     <p className="m-t-20 m-h-30">You do not have any verifiable credentials in your wallet.</p>
@@ -107,9 +125,6 @@ export default function VerifiableCredentialList() {
     const exportCredentials = useVerifiableCredentialExport();
 
     const menuButton = useMemo(() => {
-        const goToImportPage = () =>
-            popupMessageHandler.sendInternalMessage(InternalMessageType.LoadWeb3IdBackup).then(() => window.close());
-
         const backupButton = {
             title: t('menu.export'),
             onClick: exportCredentials,

diff --git a/.../browser-wallet/src/popup/pages/VerifiableCredentialBackup/VerifiableCredentialImport.tsx b/.../browser-wallet/src/popup/pages/VerifiableCredentialBackup/VerifiableCredentialImport.tsx
@@ -27,6 +27,7 @@ function DisplayResult({ imported }: { imported: VerifiableCredential[] }) {
                     {imported.map((credential) => {
                         return (
                             <VerifiableCredentialCardWithStatusFromChain
+                                key={credential.id}
                                 className="verifiable-credential-import__card"
                                 credential={credential}
                             />