fix #7522

1 files changed, 13 insertions, 18 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index ab36af376..1c26450f7 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -45,6 +45,7 @@ import warningIcon from "./svg/warning_24px.svg";
  * @author sebasjm
  */
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 type PageLocation<DynamicPart extends object> = {
   pattern: string;
   (params: DynamicPart): string;
@@ -62,6 +63,7 @@ function replaceAll(
   return result;
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 function pageDefinition<T extends object>(pattern: string): PageLocation<T> {
   const patternParams = pattern.match(/(:[\w?]*)/g);
   if (!patternParams)
@@ -133,7 +135,8 @@ export const Pages = {
   ),
 };
 
-export function PopupNavBar({ path = "" }: { path?: string }): VNode {
+export type PopupNavBarOptions = "balance" | "backup" | "dev";
+export function PopupNavBar({ path }: { path?: PopupNavBarOptions }): VNode {
   const api = useBackendContext();
   const hook = useAsyncAsHook(async () => {
     return await api.wallet.call(
@@ -146,13 +149,10 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
   const { i18n } = useTranslationContext();
   return (
     <NavigationHeader>
-      <a
-        href={Pages.balance}
-        class={path.startsWith("/balance") ? "active" : ""}
-      >
+      <a href={Pages.balance} class={path === "balance" ? "active" : ""}>
         <i18n.Translate>Balance</i18n.Translate>
       </a>
-      <a href={Pages.backup} class={path.startsWith("/backup") ? "active" : ""}>
+      <a href={Pages.backup} class={path === "backup" ? "active" : ""}>
         <i18n.Translate>Backup</i18n.Translate>
       </a>
       <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}>
@@ -185,8 +185,8 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
     </NavigationHeader>
   );
 }
-
-export function WalletNavBar({ path = "" }: { path?: string }): VNode {
+export type WalletNavBarOptions = "balance" | "backup" | "dev";
+export function WalletNavBar({ path }: { path?: WalletNavBarOptions }): VNode {
   const { i18n } = useTranslationContext();
 
   const api = useBackendContext();
@@ -196,21 +196,16 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode {
       {},
     );
   });
-  const attentionCount = !hook || hook.hasError ? 0 : hook.response.total;
+  const attentionCount =
+    (!hook || hook.hasError ? 0 : hook.response?.total) ?? 0;
 
   return (
     <NavigationHeaderHolder>
       <NavigationHeader>
-        <a
-          href={Pages.balance}
-          class={path.startsWith("/balance") ? "active" : ""}
-        >
+        <a href={Pages.balance} class={path === "balance" ? "active" : ""}>
           <i18n.Translate>Balance</i18n.Translate>
         </a>
-        <a
-          href={Pages.backup}
-          class={path.startsWith("/backup") ? "active" : ""}
-        >
+        <a href={Pages.backup} class={path === "backup" ? "active" : ""}>
           <i18n.Translate>Backup</i18n.Translate>
         </a>
 
@@ -223,7 +218,7 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode {
         )}
 
         <JustInDevMode>
-          <a href={Pages.dev} class={path.startsWith("/dev") ? "active" : ""}>
+          <a href={Pages.dev} class={path === "dev" ? "active" : ""}>
             <i18n.Translate>Dev</i18n.Translate>
           </a>
         </JustInDevMode>