You do not have any verifiable credentials in your wallet.
@@ -137,7 +137,7 @@ export default function VerifiableCredentialList() {
return (
<>
-
{verifiableCredentials.value.map((credential) => {
return (
diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialStatus.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialStatus.tsx
index 7155220f2..ce9ad400a 100644
--- a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialStatus.tsx
+++ b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialStatus.tsx
@@ -4,24 +4,36 @@ import RevokedIcon from '@assets/svg/revoked.svg';
import ActiveIcon from '@assets/svg/verified.svg';
import ExpiredIcon from '@assets/svg/block.svg';
import PendingIcon from '@assets/svg/pending.svg';
+import { useTranslation } from 'react-i18next';
/**
* Component for displaying the status of a verifiable credential.
*/
export default function StatusIcon({ status }: { status: VerifiableCredentialStatus }) {
+ const { t } = useTranslation('verifiableCredential', { keyPrefix: 'status' });
+
let icon = null;
+ let text = '';
switch (status) {
case VerifiableCredentialStatus.Active:
icon =
;
+ text = t('Active');
break;
case VerifiableCredentialStatus.Revoked:
icon =
;
+ text = t('Revoked');
break;
case VerifiableCredentialStatus.Expired:
icon =
;
+ text = t('Expired');
break;
case VerifiableCredentialStatus.NotActivated:
icon =
;
+ text = t('Pending');
+ break;
+ case VerifiableCredentialStatus.Pending:
+ icon =
;
+ text = t('Pending');
break;
default:
icon = null;
@@ -30,7 +42,7 @@ export default function StatusIcon({ status }: { status: VerifiableCredentialSta
return (
- {VerifiableCredentialStatus[status]}
+ {text}
{icon}
);
diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/da.ts b/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/da.ts
index 75341d4ed..59d8f2435 100644
--- a/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/da.ts
+++ b/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/da.ts
@@ -14,6 +14,13 @@ const t: typeof en = {
validFrom: 'Gyldig fra',
validUntil: 'Gyldig indtil',
},
+ status: {
+ Active: 'Aktiv',
+ Revoked: 'Ophævet',
+ Expired: 'Udløbet',
+ NotActivated: 'Ikke aktiveret',
+ Pending: 'Afventer',
+ },
};
export default t;
diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/en.ts b/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/en.ts
index aca3d8fd3..f88d5d750 100644
--- a/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/en.ts
+++ b/packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/en.ts
@@ -12,6 +12,13 @@ const t = {
validFrom: 'Valid from',
validUntil: 'Valid until',
},
+ status: {
+ Active: 'Active',
+ Revoked: 'Revoked',
+ Expired: 'Expired',
+ NotActivated: 'Not activated',
+ Pending: 'Pending',
+ },
};
export default t;
diff --git a/packages/browser-wallet/src/popup/shared/Topbar/Topbar.stories.tsx b/packages/browser-wallet/src/popup/shared/Topbar/Topbar.stories.tsx
index 4afbd4e94..34aba8de9 100644
--- a/packages/browser-wallet/src/popup/shared/Topbar/Topbar.stories.tsx
+++ b/packages/browser-wallet/src/popup/shared/Topbar/Topbar.stories.tsx
@@ -22,23 +22,25 @@ const Template: ComponentStory
= (args) => {
export const WithBackButton = Template.bind({});
WithBackButton.args = {
title: 'Page Navigation Title',
+ onBackButtonClick: () => {},
};
export const WithoutBackButton = Template.bind({});
WithoutBackButton.args = {
title: 'Page Navigation Title',
- backButton: { show: false },
+ onBackButtonClick: undefined,
};
export const WithMoreMenuButton = Template.bind({});
WithMoreMenuButton.args = {
title: 'Page Navigation Title',
- backButton: { show: false },
+ onBackButtonClick: undefined,
menuButton: { type: ButtonTypes.More, items: [{ title: 'Revoke', icon: Test
}] },
};
export const WithBackAndMoreMenuButton = Template.bind({});
WithBackAndMoreMenuButton.args = {
title: 'Page Navigation Title',
+ onBackButtonClick: () => {},
menuButton: { type: ButtonTypes.More, items: [{ title: 'Revoke', icon: Test
}] },
};
diff --git a/packages/browser-wallet/src/popup/shared/Topbar/Topbar.tsx b/packages/browser-wallet/src/popup/shared/Topbar/Topbar.tsx
index 416c3c2e2..a7fb34168 100644
--- a/packages/browser-wallet/src/popup/shared/Topbar/Topbar.tsx
+++ b/packages/browser-wallet/src/popup/shared/Topbar/Topbar.tsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import BackIcon from '@assets/svg/back-icon.svg';
import MoreIcon from '@assets/svg/more.svg';
-import { useNavigate } from 'react-router-dom';
import clsx from 'clsx';
import Button from '../Button';
import PopupMenu, { PopupMenuItem } from '../PopupMenu/PopupMenu';
@@ -10,17 +9,6 @@ export enum ButtonTypes {
More,
}
-interface NoBackButton {
- show: false;
-}
-
-interface ShowBackButton {
- show: true;
- onClick: () => void;
-}
-
-type BackButton = ShowBackButton | NoBackButton;
-
interface MoreMenuButton {
type: ButtonTypes.More;
items: PopupMenuItem[];
@@ -30,28 +18,18 @@ export type MenuButton = MoreMenuButton;
interface TopbarProps {
title: string;
- backButton?: BackButton;
+ onBackButtonClick?: () => void;
menuButton?: MenuButton;
}
-export default function Topbar({
- title,
- backButton = {
- show: true,
- onClick: () => {
- const nav = useNavigate();
- return nav(-1);
- },
- },
- menuButton,
-}: TopbarProps) {
+export default function Topbar({ title, onBackButtonClick, menuButton }: TopbarProps) {
const [showPopupMenu, setShowPopupMenu] = useState(false);
return (
- {backButton.show && (
-