fix #7522

1 files changed, 137 insertions, 109 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index 8186c6790..9cae0d048 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -21,7 +21,7 @@
  */
 
 import { createHashHistory } from "history";
-import { Fragment, h, VNode } from "preact";
+import { ComponentChildren, Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
 import { Match } from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
@@ -34,15 +34,28 @@ import {
   useTranslationContext,
 } from "../context/translation.js";
 import { useTalerActionURL } from "../hooks/useTalerActionURL.js";
-import { Pages, PopupNavBar } from "../NavigationBar.js";
+import { PopupNavBarOptions, Pages, PopupNavBar } from "../NavigationBar.js";
 import { platform } from "../platform/api.js";
 import { BackupPage } from "../wallet/BackupPage.js";
 import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js";
 import { BalancePage } from "./BalancePage.js";
 import { TalerActionFound } from "./TalerActionFound.js";
 
-function CheckTalerActionComponent(): VNode {
-  const [action] = useTalerActionURL();
+export function Application(): VNode {
+  return (
+    <TranslationProvider>
+      <DevContextProvider>
+        <IoCProviderForRuntime>
+          <ApplicationView />
+        </IoCProviderForRuntime>
+      </DevContextProvider>
+    </TranslationProvider>
+  );
+}
+function ApplicationView(): VNode {
+  const hash_history = createHashHistory();
+
+  const [action, setDismissed] = useTalerActionURL();
 
   const actionUri = action?.uri;
 
@@ -52,116 +65,110 @@ function CheckTalerActionComponent(): VNode {
     }
   }, [actionUri]);
 
-  return <Fragment />;
-}
+  async function redirectToTxInfo(tid: string): Promise<void> {
+    redirectTo(Pages.balanceTransaction({ tid }));
+  }
 
-export function Application(): VNode {
-  const hash_history = createHashHistory();
   return (
-    <TranslationProvider>
-      <DevContextProvider>
-        {({ devMode }: { devMode: boolean }) => (
-          <IoCProviderForRuntime>
-            <PendingTransactions
-              goToTransaction={(tid: string) =>
-                redirectTo(Pages.balanceTransaction({ tid }))
+    <Router history={hash_history}>
+      <Route
+        path={Pages.balance}
+        component={() => (
+          <PopupTemplate path="balance" goToTransaction={redirectToTxInfo}>
+            <BalancePage
+              goToWalletManualWithdraw={() => redirectTo(Pages.receiveCash({}))}
+              goToWalletDeposit={(currency: string) =>
+                redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
+              }
+              goToWalletHistory={(currency: string) =>
+                redirectTo(Pages.balanceHistory({ currency }))
               }
             />
-            <Match>
-              {({ path }: { path: string }) => <PopupNavBar path={path} />}
-            </Match>
-            <CheckTalerActionComponent />
-            <PopupBox devMode={devMode}>
-              <Router history={hash_history}>
-                <Route
-                  path={Pages.balance}
-                  component={BalancePage}
-                  goToWalletManualWithdraw={() =>
-                    redirectTo(Pages.receiveCash({}))
-                  }
-                  goToWalletDeposit={(currency: string) =>
-                    redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
-                  }
-                  goToWalletHistory={(currency: string) =>
-                    redirectTo(Pages.balanceHistory({ currency }))
-                  }
-                />
-
-                <Route
-                  path={Pages.cta.pattern}
-                  component={function Action({ action }: { action: string }) {
-                    const [, setDismissed] = useTalerActionURL();
-
-                    return (
-                      <TalerActionFound
-                        url={decodeURIComponent(action)}
-                        onDismiss={() => {
-                          setDismissed(true);
-                          return redirectTo(Pages.balance);
-                        }}
-                      />
-                    );
-                  }}
-                />
-
-                <Route
-                  path={Pages.backup}
-                  component={BackupPage}
-                  onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
-                />
-                <Route
-                  path={Pages.backupProviderDetail.pattern}
-                  component={ProviderDetailPage}
-                  onBack={() => redirectTo(Pages.backup)}
-                />
-
-                <Route
-                  path={Pages.balanceTransaction.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.ctaWithdrawManual.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.balanceDeposit.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.balanceHistory.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.backupProviderAdd}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.receiveCash.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.sendCash.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route path={Pages.qr} component={RedirectToWalletPage} />
-                <Route path={Pages.settings} component={RedirectToWalletPage} />
-                <Route
-                  path={Pages.settingsExchangeAdd.pattern}
-                  component={RedirectToWalletPage}
-                />
-                <Route path={Pages.dev} component={RedirectToWalletPage} />
-                <Route
-                  path={Pages.notifications}
-                  component={RedirectToWalletPage}
-                />
-
-                <Route default component={Redirect} to={Pages.balance} />
-              </Router>
-            </PopupBox>
-          </IoCProviderForRuntime>
+          </PopupTemplate>
         )}
-      </DevContextProvider>
-    </TranslationProvider>
+      />
+
+      <Route
+        path={Pages.cta.pattern}
+        component={function Action({ action }: { action: string }) {
+          // const [, setDismissed] = useTalerActionURL();
+
+          return (
+            <PopupTemplate>
+              <TalerActionFound
+                url={decodeURIComponent(action)}
+                onDismiss={() => {
+                  setDismissed(true);
+                  return redirectTo(Pages.balance);
+                }}
+              />
+            </PopupTemplate>
+          );
+        }}
+      />
+
+      <Route
+        path={Pages.backup}
+        component={() => (
+          <PopupTemplate path="backup" goToTransaction={redirectToTxInfo}>
+            <BackupPage
+              onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
+            />
+          </PopupTemplate>
+        )}
+      />
+      <Route
+        path={Pages.backupProviderDetail.pattern}
+        component={({ pid }: { pid: string }) => (
+          <PopupTemplate path="backup">
+            <ProviderDetailPage
+              onPayProvider={(uri: string) =>
+                redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
+              }
+              onWithdraw={(amount: string) =>
+                redirectTo(Pages.receiveCash({ amount }))
+              }
+              pid={pid}
+              onBack={() => redirectTo(Pages.backup)}
+            />
+          </PopupTemplate>
+        )}
+      />
+
+      <Route
+        path={Pages.balanceTransaction.pattern}
+        component={RedirectToWalletPage}
+      />
+      <Route
+        path={Pages.ctaWithdrawManual.pattern}
+        component={RedirectToWalletPage}
+      />
+      <Route
+        path={Pages.balanceDeposit.pattern}
+        component={RedirectToWalletPage}
+      />
+      <Route
+        path={Pages.balanceHistory.pattern}
+        component={RedirectToWalletPage}
+      />
+      <Route path={Pages.backupProviderAdd} component={RedirectToWalletPage} />
+      <Route
+        path={Pages.receiveCash.pattern}
+        component={RedirectToWalletPage}
+      />
+      <Route path={Pages.sendCash.pattern} component={RedirectToWalletPage} />
+      <Route path={Pages.ctaPay} component={RedirectToWalletPage} />
+      <Route path={Pages.qr} component={RedirectToWalletPage} />
+      <Route path={Pages.settings} component={RedirectToWalletPage} />
+      <Route
+        path={Pages.settingsExchangeAdd.pattern}
+        component={RedirectToWalletPage}
+      />
+      <Route path={Pages.dev} component={RedirectToWalletPage} />
+      <Route path={Pages.notifications} component={RedirectToWalletPage} />
+
+      <Route default component={Redirect} to={Pages.balance} />
+    </Router>
   );
 }
 
@@ -195,3 +202,24 @@ function Redirect({ to }: { to: string }): null {
   });
   return null;
 }
+
+function PopupTemplate({
+  path,
+  children,
+  goToTransaction,
+}: {
+  path?: PopupNavBarOptions;
+  children: ComponentChildren;
+  goToTransaction?: (id: string) => Promise<void>;
+}): VNode {
+  return (
+    <Fragment>
+      {/* <CheckTalerActionComponent /> */}
+      {goToTransaction ? (
+        <PendingTransactions goToTransaction={goToTransaction} />
+      ) : undefined}
+      <PopupNavBar path={path} />
+      <PopupBox>{children}</PopupBox>
+    </Fragment>
+  );
+}