From d483a3f5574355ed9c43eb6ddea59e5734323cf0 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 19 Apr 2023 12:42:47 -0300
Subject: fix #7704

---
 .../src/wallet/Application.tsx                     | 853 ++++++++++-----------
 1 file changed, 418 insertions(+), 435 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet/Application.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index ff8cf0314..5c75b734b 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -20,15 +20,21 @@
  * @author sebasjm
  */
 
+import { TranslatedString } from "@gnu-taler/taler-util";
 import {
-  TalerUriAction,
-  TranslatedString,
-  parseTalerUri,
-} from "@gnu-taler/taler-util";
+  TranslationProvider,
+  useTranslationContext,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { createHashHistory } from "history";
-import { ComponentChildren, Fragment, h, VNode } from "preact";
-import { route, Route, Router } from "preact-router";
+import { ComponentChildren, Fragment, VNode, h } from "preact";
+import { Route, Router, route } from "preact-router";
 import { useEffect } from "preact/hooks";
+import {
+  Pages,
+  WalletNavBar,
+  WalletNavBarOptions,
+  getPathnameForTalerURI,
+} from "../NavigationBar.js";
 import { AlertView, CurrentAlerts } from "../components/CurrentAlerts.js";
 import { LogoHeader } from "../components/LogoHeader.js";
 import PendingTransactions from "../components/PendingTransactions.js";
@@ -39,12 +45,7 @@ import {
   WalletBox,
 } from "../components/styled/index.js";
 import { AlertProvider } from "../context/alert.js";
-import { DevContextProvider } from "../context/devContext.js";
 import { IoCProviderForRuntime } from "../context/iocContext.js";
-import {
-  TranslationProvider,
-  useTranslationContext,
-} from "@gnu-taler/web-util/lib/index.browser";
 import { DepositPage as DepositPageCTA } from "../cta/Deposit/index.js";
 import { InvoiceCreatePage } from "../cta/InvoiceCreate/index.js";
 import { InvoicePayPage } from "../cta/InvoicePay/index.js";
@@ -59,12 +60,7 @@ import {
   WithdrawPageFromParams,
   WithdrawPageFromURI,
 } from "../cta/Withdraw/index.js";
-import {
-  Pages,
-  WalletNavBar,
-  WalletNavBarOptions,
-  getPathnameForTalerURI,
-} from "../NavigationBar.js";
+import { strings } from "../i18n/strings.js";
 import { platform } from "../platform/foreground.js";
 import CloseIcon from "../svg/close_24px.svg";
 import { AddBackupProviderPage } from "./AddBackupProvider/index.js";
@@ -80,7 +76,6 @@ import { QrReaderPage } from "./QrReader.js";
 import { SettingsPage } from "./Settings.js";
 import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
-import { strings } from "../i18n/strings.js";
 
 export function Application(): VNode {
   const { i18n } = useTranslationContext();
@@ -91,433 +86,421 @@ export function Application(): VNode {
   }
   return (
     <TranslationProvider source={strings}>
-      <DevContextProvider>
-        <IoCProviderForRuntime>
-          <Router history={hash_history}>
-            <Route
-              path={Pages.welcome}
-              component={() => (
-                <WalletTemplate>
-                  <WelcomePage />
-                </WalletTemplate>
-              )}
-            />
+      <IoCProviderForRuntime>
+        <Router history={hash_history}>
+          <Route
+            path={Pages.welcome}
+            component={() => (
+              <WalletTemplate>
+                <WelcomePage />
+              </WalletTemplate>
+            )}
+          />
 
-            <Route
-              path={Pages.qr}
-              component={() => (
-                <WalletTemplate goToTransaction={redirectToTxInfo}>
-                  <QrReaderPage
-                    onDetected={(talerActionUrl: string) => {
-                      platform.openWalletURIFromPopup(talerActionUrl);
-                    }}
-                  />
-                </WalletTemplate>
-              )}
-            />
+          <Route
+            path={Pages.qr}
+            component={() => (
+              <WalletTemplate goToTransaction={redirectToTxInfo}>
+                <QrReaderPage
+                  onDetected={(talerActionUrl: string) => {
+                    platform.openWalletURIFromPopup(talerActionUrl);
+                  }}
+                />
+              </WalletTemplate>
+            )}
+          />
 
-            <Route
-              path={Pages.settings}
-              component={() => (
-                <WalletTemplate goToTransaction={redirectToTxInfo}>
-                  <SettingsPage />
-                </WalletTemplate>
-              )}
-            />
-            <Route
-              path={Pages.notifications}
-              component={() => (
-                <WalletTemplate>
-                  <NotificationsPage />
-                </WalletTemplate>
-              )}
-            />
-            {/**
-             * SETTINGS
-             */}
-            <Route
-              path={Pages.settingsExchangeAdd.pattern}
-              component={() => (
-                <WalletTemplate>
-                  <ExchangeAddPage onBack={() => redirectTo(Pages.balance)} />
-                </WalletTemplate>
-              )}
-            />
+          <Route
+            path={Pages.settings}
+            component={() => (
+              <WalletTemplate goToTransaction={redirectToTxInfo}>
+                <SettingsPage />
+              </WalletTemplate>
+            )}
+          />
+          <Route
+            path={Pages.notifications}
+            component={() => (
+              <WalletTemplate>
+                <NotificationsPage />
+              </WalletTemplate>
+            )}
+          />
+          {/**
+           * SETTINGS
+           */}
+          <Route
+            path={Pages.settingsExchangeAdd.pattern}
+            component={() => (
+              <WalletTemplate>
+                <ExchangeAddPage onBack={() => redirectTo(Pages.balance)} />
+              </WalletTemplate>
+            )}
+          />
 
-            <Route
-              path={Pages.balanceHistory.pattern}
-              component={({ currency }: { currency?: string }) => (
-                <WalletTemplate
-                  path="balance"
-                  goToTransaction={redirectToTxInfo}
-                >
-                  <HistoryPage
-                    currency={currency}
-                    goToWalletDeposit={(currency: string) =>
-                      redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
-                    }
-                    goToWalletManualWithdraw={(currency?: string) =>
-                      redirectTo(
-                        Pages.receiveCash({
-                          amount: !currency ? undefined : `${currency}:0`,
-                        }),
-                      )
-                    }
-                  />
-                </WalletTemplate>
-              )}
-            />
-            <Route
-              path={Pages.sendCash.pattern}
-              component={({ amount }: { amount?: string }) => (
-                <WalletTemplate path="balance">
-                  <DestinationSelectionPage
-                    type="send"
-                    amount={amount}
-                    goToWalletBankDeposit={(amount: string) =>
-                      redirectTo(Pages.balanceDeposit({ amount }))
-                    }
-                    goToWalletWalletSend={(amount: string) =>
-                      redirectTo(Pages.ctaTransferCreate({ amount }))
-                    }
-                  />
-                </WalletTemplate>
-              )}
-            />
-            <Route
-              path={Pages.receiveCash.pattern}
-              component={({ amount }: { amount?: string }) => (
-                <WalletTemplate path="balance">
-                  <DestinationSelectionPage
-                    type="get"
-                    amount={amount}
-                    goToWalletManualWithdraw={(amount?: string) =>
-                      redirectTo(Pages.ctaWithdrawManual({ amount }))
-                    }
-                    goToWalletWalletInvoice={(amount?: string) =>
-                      redirectTo(Pages.ctaInvoiceCreate({ amount }))
-                    }
-                  />
-                </WalletTemplate>
-              )}
-            />
+          <Route
+            path={Pages.balanceHistory.pattern}
+            component={({ currency }: { currency?: string }) => (
+              <WalletTemplate path="balance" goToTransaction={redirectToTxInfo}>
+                <HistoryPage
+                  currency={currency}
+                  goToWalletDeposit={(currency: string) =>
+                    redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
+                  }
+                  goToWalletManualWithdraw={(currency?: string) =>
+                    redirectTo(
+                      Pages.receiveCash({
+                        amount: !currency ? undefined : `${currency}:0`,
+                      }),
+                    )
+                  }
+                />
+              </WalletTemplate>
+            )}
+          />
+          <Route
+            path={Pages.sendCash.pattern}
+            component={({ amount }: { amount?: string }) => (
+              <WalletTemplate path="balance">
+                <DestinationSelectionPage
+                  type="send"
+                  amount={amount}
+                  goToWalletBankDeposit={(amount: string) =>
+                    redirectTo(Pages.balanceDeposit({ amount }))
+                  }
+                  goToWalletWalletSend={(amount: string) =>
+                    redirectTo(Pages.ctaTransferCreate({ amount }))
+                  }
+                />
+              </WalletTemplate>
+            )}
+          />
+          <Route
+            path={Pages.receiveCash.pattern}
+            component={({ amount }: { amount?: string }) => (
+              <WalletTemplate path="balance">
+                <DestinationSelectionPage
+                  type="get"
+                  amount={amount}
+                  goToWalletManualWithdraw={(amount?: string) =>
+                    redirectTo(Pages.ctaWithdrawManual({ amount }))
+                  }
+                  goToWalletWalletInvoice={(amount?: string) =>
+                    redirectTo(Pages.ctaInvoiceCreate({ amount }))
+                  }
+                />
+              </WalletTemplate>
+            )}
+          />
 
-            <Route
-              path={Pages.balanceTransaction.pattern}
-              component={({ tid }: { tid: string }) => (
-                <WalletTemplate path="balance">
-                  <TransactionPage
-                    tid={tid}
-                    goToWalletHistory={(currency?: string) =>
-                      redirectTo(Pages.balanceHistory({ currency }))
-                    }
-                  />
-                </WalletTemplate>
-              )}
-            />
+          <Route
+            path={Pages.balanceTransaction.pattern}
+            component={({ tid }: { tid: string }) => (
+              <WalletTemplate path="balance">
+                <TransactionPage
+                  tid={tid}
+                  goToWalletHistory={(currency?: string) =>
+                    redirectTo(Pages.balanceHistory({ currency }))
+                  }
+                />
+              </WalletTemplate>
+            )}
+          />
 
-            <Route
-              path={Pages.balanceDeposit.pattern}
-              component={({ amount }: { amount: string }) => (
-                <WalletTemplate path="balance">
-                  <DepositPage
-                    amount={amount}
-                    onCancel={(currency: string) => {
-                      redirectTo(Pages.balanceHistory({ currency }));
-                    }}
-                    onSuccess={(currency: string) => {
-                      redirectTo(Pages.balanceHistory({ currency }));
-                    }}
-                  />
-                </WalletTemplate>
-              )}
-            />
+          <Route
+            path={Pages.balanceDeposit.pattern}
+            component={({ amount }: { amount: string }) => (
+              <WalletTemplate path="balance">
+                <DepositPage
+                  amount={amount}
+                  onCancel={(currency: string) => {
+                    redirectTo(Pages.balanceHistory({ currency }));
+                  }}
+                  onSuccess={(currency: string) => {
+                    redirectTo(Pages.balanceHistory({ currency }));
+                  }}
+                />
+              </WalletTemplate>
+            )}
+          />
 
-            <Route
-              path={Pages.backup}
-              component={() => (
-                <WalletTemplate
-                  path="backup"
-                  goToTransaction={redirectToTxInfo}
-                >
-                  <BackupPage
-                    onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
-                  />
-                </WalletTemplate>
-              )}
-            />
-            <Route
-              path={Pages.backupProviderDetail.pattern}
-              component={({ pid }: { pid: string }) => (
-                <WalletTemplate>
-                  <ProviderDetailPage
-                    pid={pid}
-                    onPayProvider={(uri: string) =>
-                      redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
-                    }
-                    onWithdraw={(amount: string) =>
-                      redirectTo(Pages.receiveCash({ amount }))
-                    }
-                    onBack={() => redirectTo(Pages.backup)}
-                  />
-                </WalletTemplate>
-              )}
-            />
-            <Route
-              path={Pages.backupProviderAdd}
-              component={() => (
-                <WalletTemplate>
-                  <AddBackupProviderPage
-                    onPaymentRequired={(uri: string) =>
-                      redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
-                    }
-                    onComplete={(pid: string) =>
-                      redirectTo(Pages.backupProviderDetail({ pid }))
-                    }
-                    onBack={() => redirectTo(Pages.backup)}
-                  />
-                </WalletTemplate>
-              )}
-            />
+          <Route
+            path={Pages.backup}
+            component={() => (
+              <WalletTemplate path="backup" goToTransaction={redirectToTxInfo}>
+                <BackupPage
+                  onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
+                />
+              </WalletTemplate>
+            )}
+          />
+          <Route
+            path={Pages.backupProviderDetail.pattern}
+            component={({ pid }: { pid: string }) => (
+              <WalletTemplate>
+                <ProviderDetailPage
+                  pid={pid}
+                  onPayProvider={(uri: string) =>
+                    redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
+                  }
+                  onWithdraw={(amount: string) =>
+                    redirectTo(Pages.receiveCash({ amount }))
+                  }
+                  onBack={() => redirectTo(Pages.backup)}
+                />
+              </WalletTemplate>
+            )}
+          />
+          <Route
+            path={Pages.backupProviderAdd}
+            component={() => (
+              <WalletTemplate>
+                <AddBackupProviderPage
+                  onPaymentRequired={(uri: string) =>
+                    redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
+                  }
+                  onComplete={(pid: string) =>
+                    redirectTo(Pages.backupProviderDetail({ pid }))
+                  }
+                  onBack={() => redirectTo(Pages.backup)}
+                />
+              </WalletTemplate>
+            )}
+          />
 
-            {/**
-             * DEV
-             */}
-            <Route
-              path={Pages.dev}
-              component={() => (
-                <WalletTemplate path="dev" goToTransaction={redirectToTxInfo}>
-                  <DeveloperPage />
-                </WalletTemplate>
-              )}
-            />
+          {/**
+           * DEV
+           */}
+          <Route
+            path={Pages.dev}
+            component={() => (
+              <WalletTemplate path="dev" goToTransaction={redirectToTxInfo}>
+                <DeveloperPage />
+              </WalletTemplate>
+            )}
+          />
 
-            {/**
-             * CALL TO ACTION
-             */}
-            <Route
-              path={Pages.defaultCta.pattern}
-              component={({ uri }: { uri: string }) => {
-                const path = getPathnameForTalerURI(uri);
-                if (!path) {
-                  return (
-                    <CallToActionTemplate title={i18n.str`Taler URI handler`}>
-                      <AlertView
-                        alert={{
-                          type: "warning",
-                          message: i18n.str`Could not found a handler for the Taler URI`,
-                          description: i18n.str`The uri read in the path parameter is not valid: "${uri}"`,
-                        }}
-                      />
-                    </CallToActionTemplate>
-                  );
-                }
-                return <Redirect to={path} />;
-              }}
-            />
-            <Route
-              path={Pages.ctaPay}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash payment`}>
-                  <PaymentPage
-                    talerPayUri={decodeURIComponent(talerUri)}
-                    goToWalletManualWithdraw={(amount?: string) =>
-                      redirectTo(Pages.receiveCash({ amount }))
-                    }
-                    cancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaPayTemplate}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash payment`}>
-                  <PaymentTemplatePage
-                    talerTemplateUri={decodeURIComponent(talerUri)}
-                    goToWalletManualWithdraw={(amount?: string) =>
-                      redirectTo(Pages.receiveCash({ amount }))
-                    }
-                    cancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaRefund}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash refund`}>
-                  <RefundPage
-                    talerRefundUri={decodeURIComponent(talerUri)}
-                    cancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaTips}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash tip`}>
-                  <TipPage
-                    talerTipUri={decodeURIComponent(talerUri)}
-                    onCancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaWithdraw}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash withdrawal`}>
-                  <WithdrawPageFromURI
-                    talerWithdrawUri={decodeURIComponent(talerUri)}
-                    cancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaWithdrawManual.pattern}
-              component={({ amount }: { amount: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash withdrawal`}>
-                  <WithdrawPageFromParams
-                    amount={amount}
-                    cancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaDeposit}
-              component={({
-                amount,
-                talerUri,
-              }: {
-                amount: string;
-                talerUri: string;
-              }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash deposit`}>
-                  <DepositPageCTA
-                    amountStr={amount}
-                    talerDepositUri={decodeURIComponent(talerUri)}
-                    cancel={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaInvoiceCreate.pattern}
-              component={({ amount }: { amount: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash invoice`}>
-                  <InvoiceCreatePage
-                    amount={amount}
-                    onClose={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaTransferCreate.pattern}
-              component={({ amount }: { amount: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash transfer`}>
-                  <TransferCreatePage
-                    amount={amount}
-                    onClose={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaInvoicePay}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash invoice`}>
-                  <InvoicePayPage
-                    talerPayPullUri={decodeURIComponent(talerUri)}
-                    goToWalletManualWithdraw={(amount?: string) =>
-                      redirectTo(Pages.receiveCash({ amount }))
-                    }
-                    onClose={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaTransferPickup}
-              component={({ talerUri }: { talerUri: string }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash transfer`}>
-                  <TransferPickupPage
-                    talerPayPushUri={decodeURIComponent(talerUri)}
-                    onClose={() => redirectTo(Pages.balance)}
-                    onSuccess={(tid: string) =>
-                      redirectTo(Pages.balanceTransaction({ tid }))
-                    }
-                  />
-                </CallToActionTemplate>
-              )}
-            />
-            <Route
-              path={Pages.ctaRecovery}
-              component={({
-                talerRecoveryUri,
-              }: {
-                talerRecoveryUri: string;
-              }) => (
-                <CallToActionTemplate title={i18n.str`Digital cash recovery`}>
-                  <RecoveryPage
-                    talerRecoveryUri={decodeURIComponent(talerRecoveryUri)}
-                    onCancel={() => redirectTo(Pages.balance)}
-                    onSuccess={() => redirectTo(Pages.backup)}
-                  />
-                </CallToActionTemplate>
-              )}
-            />
+          {/**
+           * CALL TO ACTION
+           */}
+          <Route
+            path={Pages.defaultCta.pattern}
+            component={({ uri }: { uri: string }) => {
+              const path = getPathnameForTalerURI(uri);
+              if (!path) {
+                return (
+                  <CallToActionTemplate title={i18n.str`Taler URI handler`}>
+                    <AlertView
+                      alert={{
+                        type: "warning",
+                        message: i18n.str`Could not found a handler for the Taler URI`,
+                        description: i18n.str`The uri read in the path parameter is not valid: "${uri}"`,
+                      }}
+                    />
+                  </CallToActionTemplate>
+                );
+              }
+              return <Redirect to={path} />;
+            }}
+          />
+          <Route
+            path={Pages.ctaPay}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash payment`}>
+                <PaymentPage
+                  talerPayUri={decodeURIComponent(talerUri)}
+                  goToWalletManualWithdraw={(amount?: string) =>
+                    redirectTo(Pages.receiveCash({ amount }))
+                  }
+                  cancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaPayTemplate}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash payment`}>
+                <PaymentTemplatePage
+                  talerTemplateUri={decodeURIComponent(talerUri)}
+                  goToWalletManualWithdraw={(amount?: string) =>
+                    redirectTo(Pages.receiveCash({ amount }))
+                  }
+                  cancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaRefund}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash refund`}>
+                <RefundPage
+                  talerRefundUri={decodeURIComponent(talerUri)}
+                  cancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaTips}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash tip`}>
+                <TipPage
+                  talerTipUri={decodeURIComponent(talerUri)}
+                  onCancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaWithdraw}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash withdrawal`}>
+                <WithdrawPageFromURI
+                  talerWithdrawUri={decodeURIComponent(talerUri)}
+                  cancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaWithdrawManual.pattern}
+            component={({ amount }: { amount: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash withdrawal`}>
+                <WithdrawPageFromParams
+                  amount={amount}
+                  cancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaDeposit}
+            component={({
+              amount,
+              talerUri,
+            }: {
+              amount: string;
+              talerUri: string;
+            }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash deposit`}>
+                <DepositPageCTA
+                  amountStr={amount}
+                  talerDepositUri={decodeURIComponent(talerUri)}
+                  cancel={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaInvoiceCreate.pattern}
+            component={({ amount }: { amount: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash invoice`}>
+                <InvoiceCreatePage
+                  amount={amount}
+                  onClose={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaTransferCreate.pattern}
+            component={({ amount }: { amount: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash transfer`}>
+                <TransferCreatePage
+                  amount={amount}
+                  onClose={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaInvoicePay}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash invoice`}>
+                <InvoicePayPage
+                  talerPayPullUri={decodeURIComponent(talerUri)}
+                  goToWalletManualWithdraw={(amount?: string) =>
+                    redirectTo(Pages.receiveCash({ amount }))
+                  }
+                  onClose={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaTransferPickup}
+            component={({ talerUri }: { talerUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash transfer`}>
+                <TransferPickupPage
+                  talerPayPushUri={decodeURIComponent(talerUri)}
+                  onClose={() => redirectTo(Pages.balance)}
+                  onSuccess={(tid: string) =>
+                    redirectTo(Pages.balanceTransaction({ tid }))
+                  }
+                />
+              </CallToActionTemplate>
+            )}
+          />
+          <Route
+            path={Pages.ctaRecovery}
+            component={({ talerRecoveryUri }: { talerRecoveryUri: string }) => (
+              <CallToActionTemplate title={i18n.str`Digital cash recovery`}>
+                <RecoveryPage
+                  talerRecoveryUri={decodeURIComponent(talerRecoveryUri)}
+                  onCancel={() => redirectTo(Pages.balance)}
+                  onSuccess={() => redirectTo(Pages.backup)}
+                />
+              </CallToActionTemplate>
+            )}
+          />
 
-            {/**
-             * NOT FOUND
-             * all redirects should be at the end
-             */}
-            <Route
-              path={Pages.balance}
-              component={() => <Redirect to={Pages.balanceHistory({})} />}
-            />
+          {/**
+           * NOT FOUND
+           * all redirects should be at the end
+           */}
+          <Route
+            path={Pages.balance}
+            component={() => <Redirect to={Pages.balanceHistory({})} />}
+          />
 
-            <Route
-              default
-              component={() => <Redirect to={Pages.balanceHistory({})} />}
-            />
-          </Router>
-        </IoCProviderForRuntime>
-      </DevContextProvider>
+          <Route
+            default
+            component={() => <Redirect to={Pages.balanceHistory({})} />}
+          />
+        </Router>
+      </IoCProviderForRuntime>
     </TranslationProvider>
   );
 }
-- 
cgit v1.2.3