fix #7162

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

@@ -32,7 +32,7 @@ export enum Pages {
   welcome = "/welcome",
 
   balance = "/balance",
-  balance_history = "/balance/history/:currency",
+  balance_history = "/balance/history/:currency?",
   balance_manual_withdraw = "/balance/manual-withdraw/:currency?",
   balance_deposit = "/balance/deposit/:currency",
   balance_transaction = "/balance/transaction/:tid",

packages/taler-wallet-webextension/src/cta/Tip.tsx

@@ -23,6 +23,7 @@
 import { PrepareTipResult } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { Loading } from "../components/Loading";
 import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
@@ -105,7 +106,7 @@ export function TipPage({ talerTipUri }: Props): VNode {
   }
 
   if (!prepareTipResult) {
-    return <span>Loading ...</span>;
+    return <Loading />;
   }
 
   return (

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

@@ -127,13 +127,6 @@ function Application(): VNode {
 
               <Route path={Pages.pending} component={Pending} />
 
-              <Route
-                path={Pages.balance_transaction}
-                component={({ tid }: { tid: string }) =>
-                  goToWalletPage(Pages.balance_transaction.replace(":tid", tid))
-                }
-              />
-
               <Route
                 path={Pages.backup}
                 component={BackupPage}

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

@@ -21,7 +21,6 @@ import {
   NotificationType,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
-import { route } from "preact-router";
 import { useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
 import { LoadingError } from "../components/LoadingError";
@@ -32,7 +31,12 @@ import { CreateManualWithdraw } from "./CreateManualWithdraw";
 import { ExchangeAddPage } from "./ExchangeAddPage";
 import { ReserveCreated } from "./ReserveCreated";
 
-export function ManualWithdrawPage({ currency }: { currency?: string }): VNode {
+interface Props {
+  currency?: string;
+  onCancel: () => void;
+}
+
+export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
   const [success, setSuccess] = useState<
     | {
         response: AcceptManualWithdrawalResult;
@@ -80,9 +84,7 @@ export function ManualWithdrawPage({ currency }: { currency?: string }): VNode {
         payto={success.response.exchangePaytoUris[0]}
         exchangeBaseUrl={success.exchangeBaseUrl}
         amount={success.amount}
-        onBack={() => {
+        onCancel={onCancel}
-          route(Pages.balance);
-        }}
       />
     );
   }

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

@@ -9,13 +9,13 @@ export interface Props {
   payto: string;
   exchangeBaseUrl: string;
   amount: AmountJson;
-  onBack: () => void;
+  onCancel: () => void;
 }
 
 export function ReserveCreated({
   reservePub,
   payto,
-  onBack,
+  onCancel,
   exchangeBaseUrl,
   amount,
 }: Props): VNode {
@@ -55,7 +55,7 @@ export function ReserveCreated({
       </section>
       <footer>
         <div />
-        <ButtonDestructive onClick={onBack}>
+        <ButtonDestructive onClick={onCancel}>
           Cancel withdrawal
         </ButtonDestructive>
       </footer>

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

@@ -26,11 +26,12 @@ import {
 } from "@gnu-taler/taler-util";
 import { differenceInSeconds } from "date-fns";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
-import { route } from "preact-router";
 import { useState } from "preact/hooks";
 import emptyImg from "../../static/img/empty.png";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
 import { ErrorTalerOperation } from "../components/ErrorTalerOperation";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import { Part } from "../components/Part";
 import {
   Button,
@@ -49,7 +50,11 @@ import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { Pages } from "../NavigationBar";
 import * as wxApi from "../wxApi";
 
-export function TransactionPage({ tid }: { tid: string }): VNode {
+interface Props {
+  tid: string;
+  goToWalletHistory: (currency?: string) => void;
+}
+export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
   async function getTransaction(): Promise<Transaction> {
     const res = await wxApi.getTransactions();
     const ts = res.transactions.filter((t) => t.transactionId === tid);
@@ -65,43 +70,30 @@ export function TransactionPage({ tid }: { tid: string }): VNode {
   ]);
 
   if (!state) {
-    return (
+    return <Loading />;
-      <div>
-        <i18n.Translate>Loading ...</i18n.Translate>
-      </div>
-    );
   }
 
   if (state.hasError) {
-    route(Pages.balance);
     return (
-      <div>
+      <LoadingError
-        <i18n.Translate>
+        title="Could not load the transaction information"
-          There was an error. Redirecting into the history page
+        error={state}
-        </i18n.Translate>
+      />
-      </div>
     );
   }
 
-  function goToHistory(): void {
+  const currency = Amounts.parse(state.response.amountRaw)?.currency;
-    const currency =
-      state !== undefined && !state.hasError
-        ? Amounts.parseOrThrow(state.response.amountRaw).currency
-        : undefined;
-
-    if (currency) {
-      route(Pages.balance_history.replace(":currency", currency));
-    } else {
-      route(Pages.balance);
-    }
-  }
 
   return (
     <TransactionView
       transaction={state.response}
-      onDelete={() => wxApi.deleteTransaction(tid).then(goToHistory)}
+      onDelete={() =>
-      onRetry={() => wxApi.retryTransaction(tid).then(goToHistory)}
+        wxApi.deleteTransaction(tid).then(() => goToWalletHistory(currency))
-      onBack={goToHistory}
+      }
+      onRetry={() =>
+        wxApi.retryTransaction(tid).then(() => goToWalletHistory(currency))
+      }
+      onBack={() => goToWalletHistory(currency)}
     />
   );
 }

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

@@ -121,12 +121,6 @@ function Application(): VNode {
                  * BALANCE
                  */}
 
-                <Route
-                  path={Pages.balance}
-                  component={Redirect}
-                  to={Pages.balance_history.replace(":currency", "")}
-                />
-
                 <Route
                   path={Pages.balance_history}
                   component={HistoryPage}
@@ -145,11 +139,22 @@ function Application(): VNode {
                 <Route
                   path={Pages.balance_transaction}
                   component={TransactionPage}
+                  goToWalletHistory={(currency?: string) => {
+                    route(
+                      Pages.balance_history.replace(
+                        ":currency",
+                        currency || "",
+                      ),
+                    );
+                  }}
                 />
 
                 <Route
                   path={Pages.balance_manual_withdraw}
                   component={ManualWithdrawPage}
+                  onCancel={() => {
+                    route(Pages.balance);
+                  }}
                 />
 
                 <Route
@@ -232,7 +237,14 @@ function Application(): VNode {
 
                 {/**
                  * NOT FOUND
+                 * all redirects should be at the end
                  */}
+                <Route
+                  path={Pages.balance}
+                  component={Redirect}
+                  to={Pages.balance_history.replace(":currency", "")}
+                />
+
                 <Route
                   default
                   component={Redirect}