From e2f4bb2ced05d90ae6f73b25f90b3a100c734171 Mon Sep 17 00:00:00 2001
From: Hjort <shj@concordium.com>
Date: Fri, 18 Aug 2023 16:12:01 +0200
Subject: [PATCH] Add import when there is no web3Id credentials

---
 .../VerifiableCredentialList.tsx              | 23 +++++++++++++++----
 .../VerifiableCredentialImport.tsx            |  1 +
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialList.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialList.tsx
index 6ae9c4db..f00c5058 100644
--- 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/packages/browser-wallet/src/popup/pages/VerifiableCredentialBackup/VerifiableCredentialImport.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredentialBackup/VerifiableCredentialImport.tsx
index 8f9bb9c8..2c53f88d 100644
--- a/packages/browser-wallet/src/popup/pages/VerifiableCredentialBackup/VerifiableCredentialImport.tsx
+++ b/packages/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}
                             />