header rendering

packages/taler-wallet-webextension/package.json

@@ -23,7 +23,7 @@
     "date-fns": "^2.28.0",
     "history": "4.10.1",
     "preact": "^10.5.13",
-    "preact-router": "^3.2.1",
+    "preact-router": "3.2.1",
     "qrcode-generator": "^1.4.4",
     "tslib": "^2.3.1"
   },

packages/taler-wallet-webextension/src/NavigationBar.tsx

@@ -26,21 +26,20 @@
  */
 import { i18n } from "@gnu-taler/taler-util";
 import { ComponentChildren, h, VNode } from "preact";
-import Match from "preact-router/match";
 import { PopupNavigation } from "./components/styled";
 
 export enum Pages {
   welcome = "/welcome",
   balance = "/balance",
   balance_history = "/balance/history/:currency",
-  manual_withdraw = "/manual-withdraw/:currency?",
-  deposit = "/deposit/:currency",
+  manual_withdraw = "/balance/manual-withdraw/:currency?",
+  deposit = "/balance/deposit/:currency",
+  transaction = "/balance/transaction/:tid",
   settings = "/settings",
   dev = "/dev",
   cta = "/cta/:action",
   backup = "/backup",
   last_activity = "/last-activity",
-  transaction = "/transaction/:tid",
   provider_detail = "/provider/:pid",
   provider_add = "/provider/add",
   exchange_add = "/exchange/add",
@@ -73,7 +72,13 @@ function Tab(props: TabProps): VNode {
   );
 }
 
-export function NavBar({ devMode, path }: { path: string; devMode: boolean }) {
+export function NavBar({
+  devMode,
+  path,
+}: {
+  path: string;
+  devMode: boolean;
+}): VNode {
   return (
     <PopupNavigation devMode={devMode}>
       <div>
@@ -89,15 +94,3 @@ export function NavBar({ devMode, path }: { path: string; devMode: boolean }) {
     </PopupNavigation>
   );
 }
-
-export function WalletNavBar({ devMode }: { devMode: boolean }) {
-  // const { devMode } = useDevContext();
-  return (
-    <Match>
-      {({ path }: any) => {
-        console.log("path", path);
-        return <NavBar devMode={devMode} path={path} />;
-      }}
-    </Match>
-  );
-}

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -29,7 +29,7 @@ import { PopupBox } from "./components/styled";
 import { DevContextProvider } from "./context/devContext";
 import { useTalerActionURL } from "./hooks/useTalerActionURL";
 import { strings } from "./i18n/strings";
-import { Pages, WalletNavBar } from "./NavigationBar";
+import { NavBar, Pages } from "./NavigationBar";
 import { BackupPage } from "./wallet/BackupPage";
 import { BalancePage } from "./popup/BalancePage";
 import { DeveloperPage } from "./popup/DeveloperPage";
@@ -40,6 +40,7 @@ import { TalerActionFound } from "./popup/TalerActionFound";
 import { ExchangeAddPage } from "./wallet/ExchangeAddPage";
 import { IoCProviderForRuntime } from "./context/iocContext";
 import { LastActivityPage } from "./wallet/LastActivityPage";
+import { Match } from "preact-router/match";
 
 function main(): void {
   try {
@@ -75,16 +76,21 @@ function CheckTalerActionComponent(): VNode {
   return <Fragment />;
 }
 
-function Application() {
+function Application(): VNode {
+  const hash_history = createHashHistory();
   return (
     // <div>
     <DevContextProvider>
       {({ devMode }: { devMode: boolean }) => (
         <IoCProviderForRuntime>
-          <WalletNavBar devMode={devMode} />
+          <Match>
+            {({ path }: { path: string }) => (
+              <NavBar devMode={devMode} path={path} />
+            )}
+          </Match>
           <CheckTalerActionComponent />
           <PopupBox devMode={devMode}>
-            <Router history={createHashHistory()}>
+            <Router history={hash_history}>
               <Route path={Pages.dev} component={DeveloperPage} />
 
               <Route

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -24,6 +24,7 @@ import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
 import { h, render, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
+import Match from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
 import { LogoHeader } from "./components/LogoHeader";
 import { SuccessBox, WalletBox } from "./components/styled";
@@ -34,7 +35,7 @@ import { RefundPage } from "./cta/Refund";
 import { TipPage } from "./cta/Tip";
 import { WithdrawPage } from "./cta/Withdraw";
 import { strings } from "./i18n/strings";
-import { Pages, WalletNavBar } from "./NavigationBar";
+import { NavBar, Pages } from "./NavigationBar";
 import { DeveloperPage } from "./popup/DeveloperPage";
 import { BackupPage } from "./wallet/BackupPage";
 import { BalancePage } from "./wallet/BalancePage";
@@ -76,20 +77,28 @@ function Application(): VNode {
   const [globalNotification, setGlobalNotification] = useState<
     string | undefined
   >(undefined);
+  const hash_history = createHashHistory();
   return (
     <div>
       <DevContextProvider>
         {({ devMode }: { devMode: boolean }) => (
           <IoCProviderForRuntime>
             <LogoHeader />
-            <WalletNavBar devMode={devMode} />
+            {/* <Match/> won't work in the first render if <Router /> is not called first */}
+            {/* https://github.com/preactjs/preact-router/issues/415 */}
+            <Router history={hash_history} />
+            <Match>
+              {({ path }: { path: string }) => (
+                <NavBar devMode={devMode} path={path} />
+              )}
+            </Match>
             <WalletBox>
               {globalNotification && (
                 <SuccessBox onClick={() => setGlobalNotification(undefined)}>
                   <div>{globalNotification}</div>
                 </SuccessBox>
               )}
-              <Router history={createHashHistory()}>
+              <Router history={hash_history}>
                 <Route path={Pages.welcome} component={WelcomePage} />
 
                 <Route

pnpm-lock.yaml

@@ -352,7 +352,7 @@ importers:
       preact: ^10.5.13
       preact-cli: ^3.0.5
       preact-render-to-string: ^5.1.19
-      preact-router: ^3.2.1
+      preact-router: 3.2.1
       qrcode-generator: ^1.4.4
       rimraf: ^3.0.2
       rollup: ^2.63.0