fixes #8294

18 files changed, 165 insertions, 89 deletions

diff --git a/packages/demobank-ui/src/pages/AccountPage/index.ts b/packages/demobank-ui/src/pages/AccountPage/index.ts
index 31a8a9e34..6c67f6d90 100644
--- a/packages/demobank-ui/src/pages/AccountPage/index.ts
+++ b/packages/demobank-ui/src/pages/AccountPage/index.ts
@@ -36,6 +36,10 @@ export interface Props {
   routeClose: RouteDefinition<Record<string, never>>;
   routeChargeWallet: RouteDefinition<Record<string, never>>;
   routeWireTransfer: RouteDefinition<Record<string, never>>;
+  routePublicAccounts: RouteDefinition<Record<string, never>>;
+  routeCreateWireTransfer: RouteDefinition<{ destination: string }>;
+  routeOperationDetails: RouteDefinition<{ wopid: string }>;
+  routeSolveSecondFactor: RouteDefinition<Record<string, never>>;
 }
 
 export type State =
@@ -72,6 +76,10 @@ export namespace State {
     routeClose: RouteDefinition<Record<string, never>>;
     routeChargeWallet: RouteDefinition<Record<string, never>>;
     routeWireTransfer: RouteDefinition<Record<string, never>>;
+    routePublicAccounts: RouteDefinition<Record<string, never>>;
+    routeCreateWireTransfer: RouteDefinition<{ destination: string }>;
+    routeOperationDetails: RouteDefinition<{ wopid: string }>;
+    routeSolveSecondFactor: RouteDefinition<Record<string, never>>;
   }
 
   export interface InvalidIban {
diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts
index a07ea37d3..58da82f80 100644
--- a/packages/demobank-ui/src/pages/AccountPage/state.ts
+++ b/packages/demobank-ui/src/pages/AccountPage/state.ts
@@ -28,6 +28,10 @@ export function useComponentState({
   account,
   tab,
   routeChargeWallet,
+  routeCreateWireTransfer,
+  routePublicAccounts,
+  routeSolveSecondFactor,
+  routeOperationDetails,
   routeWireTransfer,
   onOperationCreated,
   onClose,
@@ -96,6 +100,10 @@ export function useComponentState({
     onOperationCreated,
     error: undefined,
     tab,
+    routeOperationDetails,
+    routeCreateWireTransfer,
+    routePublicAccounts,
+    routeSolveSecondFactor,
     onAuthorizationRequired,
     onClose,
     routeClose,
diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx
index 9baefe96c..7694ca1d3 100644
--- a/packages/demobank-ui/src/pages/AccountPage/views.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx
@@ -22,7 +22,7 @@ import { useBankState } from "../../hooks/bank-state.js";
 import { usePreferences } from "../../hooks/preferences.js";
 import { PaymentOptions } from "../PaymentOptions.js";
 import { State } from "./index.js";
-import { privatePages } from "../../Routing.js";
+import { RouteDefinition } from "../../route.js";
 
 export function InvalidIbanView({ error }: State.InvalidIban) {
   return (
@@ -32,7 +32,9 @@ export function InvalidIbanView({ error }: State.InvalidIban) {
 
 const IS_PUBLIC_ACCOUNT_ENABLED = false;
 
-function ShowDemoInfo(): VNode {
+function ShowDemoInfo({ routePublicAccounts }: {
+  routePublicAccounts: RouteDefinition<Record<string, never>>;
+}): VNode {
   const { i18n } = useTranslationContext();
   const [settings, updateSettings] = usePreferences();
   if (!settings.showDemoDescription) return <Fragment />;
@@ -48,7 +50,7 @@ function ShowDemoInfo(): VNode {
           This part of the demo shows how a bank that supports Taler directly
           would work. In addition to using your own bank account, you can also
           see the transaction history of some{" "}
-          <a href={privatePages.publicAccountList.url({})}>Public Accounts</a>.
+          <a href={routePublicAccounts.url({})}>Public Accounts</a>.
         </i18n.Translate>
       ) : (
         <i18n.Translate>
@@ -60,7 +62,9 @@ function ShowDemoInfo(): VNode {
   );
 }
 
-function ShowPedingOperation(): VNode {
+function ShowPedingOperation({ routeSolveSecondFactor }: {
+  routeSolveSecondFactor: RouteDefinition<Record<string, never>>;
+}): VNode {
   const { i18n } = useTranslationContext();
   const [bankState, updateBankState] = useBankState();
   if (!bankState.currentChallenge) return <Fragment />;
@@ -93,7 +97,7 @@ function ShowPedingOperation(): VNode {
       </i18n.Translate>{" "}
       <a
         class="font-semibold text-yellow-700 hover:text-yellow-600"
-        href={`#/2fa`}
+        href={routeSolveSecondFactor.url({})}
       >
         <i18n.Translate>this page</i18n.Translate>
       </a>
@@ -107,6 +111,10 @@ export function ReadyView({
   routeChargeWallet,
   routeWireTransfer,
   limit,
+  routeCreateWireTransfer,
+  routePublicAccounts,
+  routeOperationDetails,
+  routeSolveSecondFactor,
   onClose,
   routeClose,
   onOperationCreated,
@@ -114,10 +122,11 @@ export function ReadyView({
 }: State.Ready): VNode {
   return (
     <Fragment>
-      <ShowPedingOperation />
-      <ShowDemoInfo />
+      <ShowPedingOperation routeSolveSecondFactor={routeSolveSecondFactor} />
+      <ShowDemoInfo routePublicAccounts={routePublicAccounts} />
       <PaymentOptions
         tab={tab}
+        routeOperationDetails={routeOperationDetails}
         routeChargeWallet={routeChargeWallet}
         routeWireTransfer={routeWireTransfer}
         limit={limit}
@@ -126,7 +135,7 @@ export function ReadyView({
         onOperationCreated={onOperationCreated}
         onAuthorizationRequired={onAuthorizationRequired}
       />
-      <Transactions account={account} />
+      <Transactions account={account} routeCreateWireTransfer={routeCreateWireTransfer} />
     </Fragment>
   );
 }
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index d6ab882f1..f16e0e9bf 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -26,7 +26,6 @@ import {
 } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, VNode, h } from "preact";
 import { useEffect, useErrorBoundary } from "preact/hooks";
-import { privatePages } from "../Routing.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useSettingsContext } from "../context/settings.js";
 import { useAccountDetails } from "../hooks/access.js";
@@ -38,6 +37,7 @@ import {
   usePreferences,
 } from "../hooks/preferences.js";
 import { RenderAmount } from "./PaytoWireTransferForm.js";
+import { RouteDefinition } from "../route.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -45,8 +45,10 @@ const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
 export function BankFrame({
   children,
   account,
+  routeAccountDetails,
 }: {
   account?: string;
+  routeAccountDetails?: RouteDefinition<Record<string, never>>;
   children: ComponentChildren;
 }): VNode {
   const { i18n } = useTranslationContext();
@@ -86,9 +88,9 @@ export function BankFrame({
             backend.state.status !== "loggedIn"
               ? undefined
               : () => {
-                  backend.logOut();
-                  resetBankState();
-                }
+                backend.logOut();
+                resetBankState();
+              }
           }
           sites={
             !settings.topNavSites ? [] : Object.entries(settings.topNavSites)
@@ -143,12 +145,12 @@ export function BankFrame({
       <GlobalNotificationsBanner />
 
       <main class="-mt-32 flex-1">
-        {account && (
+        {account && routeAccountDetails && (
           <header class="py-5 bg-indigo-600   ">
             <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
               <h1 class=" flex flex-wrap items-center justify-between sm:flex-nowrap">
                 <span class="text-2xl font-bold tracking-tight text-white">
-                  <WelcomeAccount account={account} />
+                  <WelcomeAccount account={account} routeAccountDetails={routeAccountDetails} />
                 </span>
                 <span class="text-2xl font-bold tracking-tight text-white">
                   <AccountBalance account={account} />
@@ -174,7 +176,10 @@ export function BankFrame({
   );
 }
 
-function WelcomeAccount({ account }: { account: string }): VNode {
+function WelcomeAccount({ account, routeAccountDetails }: {
+  account: string,
+  routeAccountDetails: RouteDefinition<Record<string, never>>;
+}): VNode {
   const { i18n } = useTranslationContext();
   const result = useAccountDetails(account);
   if (!result) {
@@ -186,7 +191,7 @@ function WelcomeAccount({ account }: { account: string }): VNode {
   if (result.type === "fail") {
     return (
       <a
-        href={privatePages.myAccountDetails.url({})}
+        href={routeAccountDetails.url({})}
         class="underline underline-offset-2"
       >
         <i18n.Translate>Welcome</i18n.Translate>
@@ -195,7 +200,7 @@ function WelcomeAccount({ account }: { account: string }): VNode {
   }
   return (
     <a
-      href={privatePages.myAccountDetails.url({})}
+      href={routeAccountDetails.url({})}
       class="underline underline-offset-2"
     >
       <i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx
index dbd8e9b77..40d974a17 100644
--- a/packages/demobank-ui/src/pages/OperationState/views.tsx
+++ b/packages/demobank-ui/src/pages/OperationState/views.tsx
@@ -392,10 +392,7 @@ export function ReadyView({
             <div class="max-w-xl text-sm text-gray-500">
               <p>
                 <i18n.Translate>
-                  If you are using a web browser on desktop you should access
-                  your wallet with the GNU Taler WebExtension now or click the
-                  link if your WebExtension have the "Inject Taler support"
-                  option enabled.
+                  If you are using a web browser on desktop you can also
                 </i18n.Translate>
               </p>
             </div>
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index eb21f637a..39b31a094 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -74,6 +74,7 @@ export function PaymentOptions({
   limit,
   onOperationCreated,
   onClose,
+  routeOperationDetails,
   onAuthorizationRequired,
 }: {
   limit: AmountJson;
@@ -81,6 +82,8 @@ export function PaymentOptions({
   onAuthorizationRequired: () => void;
   onOperationCreated: (wopid: string) => void;
   onClose: () => void;
+
+  routeOperationDetails: RouteDefinition<{ wopid: string }>;
   routeClose: RouteDefinition<Record<string, never>>;
   routeChargeWallet: RouteDefinition<Record<string, never>>;
   routeWireTransfer: RouteDefinition<Record<string, never>>;
@@ -111,7 +114,7 @@ export function PaymentOptions({
                   <div class="text-4xl mr-4 my-auto">&#x1F4B5;</div>
                   <span class="grow self-center text-lg text-gray-900 align-middle text-center">
                     <i18n.Translate>
-                      to a <b>Taler</b> wallet
+                      to a Taler wallet
                     </i18n.Translate>
                   </span>
                   <svg
@@ -196,6 +199,7 @@ export function PaymentOptions({
         </div>
         {tab === "charge-wallet" && (
           <WalletWithdrawForm
+            routeOperationDetails={routeOperationDetails}
             focus
             limit={limit}
             onAuthorizationRequired={onAuthorizationRequired}
diff --git a/packages/demobank-ui/src/pages/ProfileNavigation.tsx b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
index 607487c9d..94669584a 100644
--- a/packages/demobank-ui/src/pages/ProfileNavigation.tsx
+++ b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
@@ -15,16 +15,24 @@
  */
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { VNode, h } from "preact";
-import { privatePages } from "../Routing.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useBackendState } from "../hooks/backend.js";
 import { assertUnreachable } from "@gnu-taler/taler-util";
 import { useNavigationContext } from "../context/navigation.js";
+import { RouteDefinition } from "../route.js";
 
 export function ProfileNavigation({
   current,
+  routeMyAccountCashout,
+  routeMyAccountDelete,
+  routeMyAccountDetails,
+  routeMyAccountPassword,
 }: {
-  current: "details" | "delete" | "credentials" | "cashouts";
+  current: "details" | "delete" | "credentials" | "cashouts",
+  routeMyAccountDetails: RouteDefinition<Record<string, never>>;
+  routeMyAccountDelete: RouteDefinition<Record<string, never>>;
+  routeMyAccountPassword: RouteDefinition<Record<string, never>>;
+  routeMyAccountCashout: RouteDefinition<Record<string, never>>;
 }): VNode {
   const { i18n } = useTranslationContext();
   const { config } = useBankCoreApiContext();
@@ -48,19 +56,19 @@ export function ProfileNavigation({
             const op = e.currentTarget.value as typeof current;
             switch (op) {
               case "details": {
-                navigateTo(privatePages.myAccountDetails.url({}));
+                navigateTo(routeMyAccountDetails.url({}));
                 return;
               }
               case "delete": {
-                navigateTo(privatePages.myAccountDelete.url({}));
+                navigateTo(routeMyAccountDelete.url({}));
                 return;
               }
               case "credentials": {
-                navigateTo(privatePages.myAccountPassword.url({}));
+                navigateTo(routeMyAccountPassword.url({}));
                 return;
               }
               case "cashouts": {
-                navigateTo(privatePages.myAccountCashouts.url({}));
+                navigateTo(routeMyAccountCashout.url({}));
                 return;
               }
               default:
@@ -92,7 +100,7 @@ export function ProfileNavigation({
           aria-label="Tabs"
         >
           <a
-            href={privatePages.myAccountDetails.url({})}
+            href={routeMyAccountDetails.url({})}
             data-selected={current == "details"}
             class="rounded-l-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
           >
@@ -107,7 +115,7 @@ export function ProfileNavigation({
           </a>
           {!config.allow_deletions ? undefined : (
             <a
-              href={privatePages.myAccountDelete.url({})}
+              href={routeMyAccountDelete.url({})}
               data-selected={current == "delete"}
               aria-current="page"
               class="             text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
@@ -123,7 +131,7 @@ export function ProfileNavigation({
             </a>
           )}
           <a
-            href={privatePages.myAccountPassword.url({})}
+            href={routeMyAccountPassword.url({})}
             data-selected={current == "credentials"}
             aria-current="page"
             class="             text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
@@ -139,7 +147,7 @@ export function ProfileNavigation({
           </a>
           {config.allow_conversion && nonAdminUser ? (
             <a
-              href={privatePages.myAccountCashouts.url({})}
+              href={routeMyAccountCashout.url({})}
               data-selected={current == "cashouts"}
               class="rounded-r-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
             >
diff --git a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
index 0f951b1a8..2864cac65 100644
--- a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
+++ b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
@@ -31,8 +31,8 @@ export function PublicHistoriesPage(): VNode {
   const result = usePublicAccounts(undefined);
   const firstAccount =
     result &&
-    !(result instanceof TalerError) &&
-    result.data.public_accounts.length > 0
+      !(result instanceof TalerError) &&
+      result.data.public_accounts.length > 0
       ? result.data.public_accounts[0].username
       : undefined;
 
@@ -70,7 +70,7 @@ export function PublicHistoriesPage(): VNode {
         </a>
       </li>,
     );
-    txs[account.username] = <Transactions account={account.username} />;
+    txs[account.username] = <Transactions account={account.username} routeCreateWireTransfer={undefined} />;
   }
 
   return (
diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx
index bf0369855..b439003a0 100644
--- a/packages/demobank-ui/src/pages/QrCodeSection.tsx
+++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx
@@ -141,7 +141,7 @@ export function QrCodeSection({
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-base font-semibold leading-6 text-gray-900">
             <i18n.Translate>
-              Or if you have the wallet in another device
+              Or if you have the Taler wallet in another device
             </i18n.Translate>
           </h3>
           <div class="mt-4 max-w-xl text-sm text-gray-500">
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 8ce4c6a09..be1528db8 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -20,8 +20,7 @@ import {
   HttpStatusCode,
   TranslatedString,
   assertUnreachable,
-  parseWithdrawUri,
-  stringifyWithdrawUri,
+  parseWithdrawUri
 } from "@gnu-taler/taler-util";
 import {
   Attention,
@@ -33,7 +32,6 @@ import {
 import { VNode, h } from "preact";
 import { forwardRef } from "preact/compat";
 import { useState } from "preact/hooks";
-import { privatePages } from "../Routing.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useBackendState } from "../hooks/backend.js";
 import { useBankState } from "../hooks/bank-state.js";
@@ -42,8 +40,6 @@ import { RouteDefinition } from "../route.js";
 import { undefinedIfEmpty } from "../utils.js";
 import { OperationState } from "./OperationState/index.js";
 import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
-import { useTalerWalletIntegrationAPI } from "../context/wallet-integration.js";
-import { useNavigationContext } from "../context/navigation.js";
 
 const RefAmount = forwardRef(InputAmount);
 
@@ -52,9 +48,11 @@ function OldWithdrawalForm({
   limit,
   routeCancel,
   focus,
+  routeOperationDetails,
 }: {
   limit: AmountJson;
   focus?: boolean;
+  routeOperationDetails: RouteDefinition<{ wopid: string }>,
   onOperationCreated: (wopid: string) => void;
   routeCancel: RouteDefinition<Record<string, never>>;
 }): VNode {
@@ -83,7 +81,7 @@ function OldWithdrawalForm({
     //   withdrawalOperationId: bankState.currentWithdrawalOperationId,
     // });
     // const uri = parseWithdrawUri(suri)!
-    const url = privatePages.operationDetails.url({
+    const url = routeOperationDetails.url({
       wopid: bankState.currentWithdrawalOperationId,
     });
     return (
@@ -95,12 +93,12 @@ function OldWithdrawalForm({
         <a
           class="font-semibold text-yellow-700 hover:text-yellow-600"
           href={url}
-          // onClick={(e) => {
-          //   e.preventDefault()
-          //   walletInegrationApi.publishTalerAction(uri, () => {
-          //     navigateTo(url)
-          //   })
-          // }}
+        // onClick={(e) => {
+        //   e.preventDefault()
+        //   walletInegrationApi.publishTalerAction(uri, () => {
+        //     navigateTo(url)
+        //   })
+        // }}
         >
           <i18n.Translate>this page</i18n.Translate>
         </a>
@@ -285,9 +283,11 @@ export function WalletWithdrawForm({
   onAuthorizationRequired,
   onOperationCreated,
   onOperationAborted,
+  routeOperationDetails,
 }: {
   limit: AmountJson;
   focus?: boolean;
+  routeOperationDetails: RouteDefinition<{ wopid: string }>,
   onAuthorizationRequired: () => void;
   onOperationCreated: (wopid: string) => void;
   onOperationAborted: () => void;
@@ -300,7 +300,7 @@ export function WalletWithdrawForm({
     <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
       <div class="px-4 sm:px-0">
         <h2 class="text-base font-semibold leading-7 text-gray-900">
-          <i18n.Translate>Prepare your wallet</i18n.Translate>
+          <i18n.Translate>Prepare your Taler wallet</i18n.Translate>
         </h2>
         <p class="mt-1 text-sm text-gray-500">
           <i18n.Translate>
@@ -313,7 +313,7 @@ export function WalletWithdrawForm({
       <div class="col-span-2">
         {settings.showInstallWallet && (
           <Attention
-            title={i18n.str`You need a GNU Taler Wallet`}
+            title={i18n.str`You need a Taler wallet`}
             onClose={() => {
               updateSettings("showInstallWallet", false);
             }}
@@ -335,6 +335,7 @@ export function WalletWithdrawForm({
         {!settings.fastWithdrawal ? (
           <OldWithdrawalForm
             focus={focus}
+            routeOperationDetails={routeOperationDetails}
             limit={limit}
             routeCancel={routeCancel}
             onOperationCreated={onOperationCreated}
@@ -345,7 +346,7 @@ export function WalletWithdrawForm({
             onAuthorizationRequired={onAuthorizationRequired}
             routeClose={routeCancel}
             onAbort={onOperationAborted}
-            // route={routeCancel}
+          // route={routeCancel}
           />
         )}
       </div>
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 66c27ef4c..e8fff1901 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -214,9 +214,7 @@ export function WithdrawalConfirmationQuestion({
                                   <Fragment>
                                     <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                       <dt class="text-sm font-medium leading-6 text-gray-900">
-                                        <i18n.Translate>
-                                          Taler Exchange operator's account
-                                        </i18n.Translate>
+                                        <i18n.Translate>Payment provider's account number</i18n.Translate>
                                       </dt>
                                       <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                                         {p.iban}
@@ -225,12 +223,10 @@ export function WithdrawalConfirmationQuestion({
                                     {name && (
                                       <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                         <dt class="text-sm font-medium leading-6 text-gray-900">
-                                          <i18n.Translate>
-                                            Taler Exchange operator's name
-                                          </i18n.Translate>
+                                          <i18n.Translate>Payment provider's name</i18n.Translate>
                                         </dt>
                                         <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                                          {p.params["receiver-name"]}
+                                          {name}
                                         </dd>
                                       </div>
                                     )}
@@ -244,9 +240,7 @@ export function WithdrawalConfirmationQuestion({
                                   <Fragment>
                                     <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                       <dt class="text-sm font-medium leading-6 text-gray-900">
-                                        <i18n.Translate>
-                                          Taler Exchange operator's account
-                                        </i18n.Translate>
+                                        <i18n.Translate>Payment provider's account id</i18n.Translate>
                                       </dt>
                                       <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                                         {p.account}
@@ -255,12 +249,10 @@ export function WithdrawalConfirmationQuestion({
                                     {name && (
                                       <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                         <dt class="text-sm font-medium leading-6 text-gray-900">
-                                          <i18n.Translate>
-                                            Taler Exchange operator's name
-                                          </i18n.Translate>
+                                          <i18n.Translate>Payment provider's name</i18n.Translate>
                                         </dt>
                                         <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                                          {p.params["receiver-name"]}
+                                          {name}
                                         </dd>
                                       </div>
                                     )}
@@ -271,9 +263,7 @@ export function WithdrawalConfirmationQuestion({
                                 return (
                                   <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                     <dt class="text-sm font-medium leading-6 text-gray-900">
-                                      <i18n.Translate>
-                                        Taler Exchange operator's account
-                                      </i18n.Translate>
+                                      <i18n.Translate>Payment provider's account</i18n.Translate>
                                     </dt>
                                     <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                                       {details.account.targetPath}
diff --git a/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx b/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx
index e69a4dfb2..e03260dbb 100644
--- a/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx
@@ -30,6 +30,7 @@ export function WithdrawalOperationPage({
 }: {
   onAuthorizationRequired: () => void;
   operationId: string;
+  pupose: "after-creation" | "after-confirmation",
   onOperationAborted: () => void;
   routeClose: RouteDefinition<Record<string, never>>;
 }): VNode {
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index a23909338..8faa91d07 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -101,7 +101,7 @@ export function WithdrawalQRCode({
             <div class="mt-2">
               <p class="text-sm text-gray-500">
                 <i18n.Translate>
-                  The wire transfer to the Taler Exchange operator's account was
+                  The wire transfer to the payment provider's account was
                   aborted from somewhere else, your balance was not affected.
                 </i18n.Translate>
               </p>
@@ -169,6 +169,7 @@ export function WithdrawalQRCode({
       </div>
     );
   }
+
   if (data.status === "pending") {
     return (
       <QrCodeSection
diff --git a/packages/demobank-ui/src/pages/account/CashoutListForAccount.tsx b/packages/demobank-ui/src/pages/account/CashoutListForAccount.tsx
index 670bbaea0..656c2a52a 100644
--- a/packages/demobank-ui/src/pages/account/CashoutListForAccount.tsx
+++ b/packages/demobank-ui/src/pages/account/CashoutListForAccount.tsx
@@ -26,12 +26,20 @@ interface Props {
   routeClose: RouteDefinition<Record<string, never>>;
   onAuthorizationRequired: () => void;
   routeCashoutDetails: RouteDefinition<{ cid: string }>;
+  routeMyAccountDetails: RouteDefinition<Record<string, never>>;
+  routeMyAccountDelete: RouteDefinition<Record<string, never>>;
+  routeMyAccountPassword: RouteDefinition<Record<string, never>>;
+  routeMyAccountCashout: RouteDefinition<Record<string, never>>;
 }
 
 export function CashoutListForAccount({
   account,
   onAuthorizationRequired,
   routeCashoutDetails,
+  routeMyAccountCashout,
+  routeMyAccountDelete,
+  routeMyAccountDetails,
+  routeMyAccountPassword,
   routeClose,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
@@ -46,7 +54,12 @@ export function CashoutListForAccount({
   return (
     <Fragment>
       {accountIsTheCurrentUser ? (
-        <ProfileNavigation current="cashouts" />
+        <ProfileNavigation current="cashouts"
+          routeMyAccountCashout={routeMyAccountCashout}
+          routeMyAccountDelete={routeMyAccountDelete}
+          routeMyAccountDetails={routeMyAccountDetails}
+          routeMyAccountPassword={routeMyAccountPassword}
+        />
       ) : (
         <h1 class="text-base font-semibold leading-6 text-gray-900">
           <i18n.Translate>Cashout for account {account}</i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
index 6d5a1c18d..70fd85ee8 100644
--- a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
+++ b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -46,8 +46,16 @@ export function ShowAccountDetails({
   routeClose,
   onUpdateSuccess,
   onAuthorizationRequired,
+  routeMyAccountCashout,
+  routeMyAccountDelete,
+  routeMyAccountDetails,
+  routeMyAccountPassword,
 }: {
   routeClose: RouteDefinition<Record<string, never>>;
+  routeMyAccountDetails: RouteDefinition<Record<string, never>>;
+  routeMyAccountDelete: RouteDefinition<Record<string, never>>;
+  routeMyAccountPassword: RouteDefinition<Record<string, never>>;
+  routeMyAccountCashout: RouteDefinition<Record<string, never>>;
   onUpdateSuccess: () => void;
   onAuthorizationRequired: () => void;
   account: string;
@@ -171,7 +179,12 @@ export function ShowAccountDetails({
     <Fragment>
       <LocalNotificationBanner notification={notification} showDebug={true} />
       {accountIsTheCurrentUser ? (
-        <ProfileNavigation current="details" />
+        <ProfileNavigation current="details"
+          routeMyAccountCashout={routeMyAccountCashout}
+          routeMyAccountDelete={routeMyAccountDelete}
+          routeMyAccountDetails={routeMyAccountDetails}
+          routeMyAccountPassword={routeMyAccountPassword}
+        />
       ) : (
         <h1 class="text-base font-semibold leading-6 text-gray-900">
           <i18n.Translate>Account "{account}"</i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
index 4dcce599d..3ce9b1094 100644
--- a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
+++ b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
@@ -41,9 +41,17 @@ export function UpdateAccountPassword({
   routeClose,
   onUpdateSuccess,
   onAuthorizationRequired,
+  routeMyAccountCashout,
+  routeMyAccountDelete,
+  routeMyAccountDetails,
+  routeMyAccountPassword,
   focus,
 }: {
   routeClose: RouteDefinition<Record<string, never>>;
+  routeMyAccountDetails: RouteDefinition<Record<string, never>>;
+  routeMyAccountDelete: RouteDefinition<Record<string, never>>;
+  routeMyAccountPassword: RouteDefinition<Record<string, never>>;
+  routeMyAccountCashout: RouteDefinition<Record<string, never>>;
   focus?: boolean;
   onAuthorizationRequired: () => void;
   onUpdateSuccess: () => void;
@@ -136,7 +144,12 @@ export function UpdateAccountPassword({
     <Fragment>
       <LocalNotificationBanner notification={notification} />
       {accountIsTheCurrentUser ? (
-        <ProfileNavigation current="credentials" />
+        <ProfileNavigation current="credentials"
+          routeMyAccountCashout={routeMyAccountCashout}
+          routeMyAccountDelete={routeMyAccountDelete}
+          routeMyAccountDetails={routeMyAccountDetails}
+          routeMyAccountPassword={routeMyAccountPassword}
+        />
       ) : (
         <h1 class="text-base font-semibold leading-6 text-gray-900">
           <i18n.Translate>Account "{accountName}"</i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
index fcad47b4a..5d4a5c5db 100644
--- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
@@ -475,9 +475,9 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
                 !editableThreshold
                   ? undefined
                   : (e) => {
-                      form.debit_threshold = e as AmountString;
-                      updateForm(structuredClone(form));
-                    }
+                    form.debit_threshold = e as AmountString;
+                    updateForm(structuredClone(form));
+                  }
               }
             />
             <ShowInputErrorLabel
@@ -503,7 +503,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
                     class="text-sm text-black font-medium leading-6 "
                     id="availability-label"
                   >
-                    <i18n.Translate>Is this a Taler Exchange?</i18n.Translate>
+                    <i18n.Translate>Is this a payment provider?</i18n.Translate>
                   </span>
                 </span>
                 <button
@@ -538,7 +538,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
           )}
           {/* channel, not shown if old cashout api */}
           {OLD_CASHOUT_API ||
-          config.supported_tan_channels.length === 0 ? undefined : (
+            config.supported_tan_channels.length === 0 ? undefined : (
             <div class="sm:col-span-5">
               <label
                 class="block text-sm font-medium leading-6 text-gray-900"
@@ -549,7 +549,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
               <div class="mt-2 max-w-xl text-sm text-gray-500">
                 <div class="px-4 mt-4 grid grid-cols-1 gap-y-6">
                   {config.supported_tan_channels.indexOf(TanChannel.EMAIL) ===
-                  -1 ? undefined : (
+                    -1 ? undefined : (
                     <label
                       onClick={(e) => {
                         if (!hasEmail) return;
@@ -607,7 +607,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
                   )}
 
                   {config.supported_tan_channels.indexOf(TanChannel.SMS) ===
-                  -1 ? undefined : (
+                    -1 ? undefined : (
                     <label
                       onClick={(e) => {
                         if (!hasPhone) return;
diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
index f0f8f71be..1a7edd6b9 100644
--- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx
+++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
@@ -37,21 +37,22 @@ import {
 } from "date-fns";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import { privatePages } from "../../Routing.js";
 import { ErrorLoadingWithDebug } from "../../components/ErrorLoadingWithDebug.js";
 import { Transactions } from "../../components/Transactions/index.js";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { useConversionInfo, useLastMonitorInfo } from "../../hooks/circuit.js";
+import { RouteDefinition } from "../../route.js";
 import { RenderAmount } from "../PaytoWireTransferForm.js";
 import { WireTransfer } from "../WireTransfer.js";
 import { AccountList } from "./AccountList.js";
-import { RouteDefinition } from "../../route.js";
 
 /**
  * Query account information and show QR code if there is pending withdrawal
  */
 interface Props {
   routeCreate: RouteDefinition<Record<string, never>>;
+  routeDownloadStats: RouteDefinition<Record<string, never>>;
+  routeCreateWireTransfer: RouteDefinition<{ destination: string }>;
 
   routeShowAccount: RouteDefinition<{ account: string }>;
   routeRemoveAccount: RouteDefinition<{ account: string }>;
@@ -65,14 +66,16 @@ export function AdminHome({
   routeShowAccount,
   routeShowCashoutsAccount,
   routeUpdatePasswordAccount,
+  routeDownloadStats,
+  routeCreateWireTransfer,
   onAuthorizationRequired,
 }: Props): VNode {
   return (
     <Fragment>
-      <Metrics />
+      <Metrics routeDownloadStats={routeDownloadStats} />
       <WireTransfer onAuthorizationRequired={onAuthorizationRequired} />
 
-      <Transactions account="admin" />
+      <Transactions account="admin" routeCreateWireTransfer={routeCreateWireTransfer} />
       <AccountList
         routeCreate={routeCreate}
         routeRemoveAccount={routeRemoveAccount}
@@ -140,7 +143,9 @@ export function getTimeframesForDate(
   }
 }
 
-function Metrics(): VNode {
+function Metrics({ routeDownloadStats }: {
+  routeDownloadStats: RouteDefinition<Record<string, never>>;
+}): VNode {
   const { i18n, dateLocale } = useTranslationContext();
   const [metricType, setMetricType] =
     useState<TalerCorebankApi.MonitorTimeframeParam>(
@@ -335,7 +340,7 @@ function Metrics(): VNode {
       </div>
       <dl class="mt-5 grid grid-cols-1 md:grid-cols-2  divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:divide-x md:divide-y-0">
         {resp.current.body.type !== "with-conversions" ||
-        resp.previous.body.type !== "with-conversions" ? undefined : (
+          resp.previous.body.type !== "with-conversions" ? undefined : (
           <Fragment>
             <div class="px-4 py-5 sm:p-6">
               <dt class="text-base font-normal text-gray-900">
@@ -382,7 +387,7 @@ function Metrics(): VNode {
       </dl>
       <div class="flex justify-end mt-2">
         <a
-          href={privatePages.statsDownload.url({})}
+          href={routeDownloadStats.url({})}
           class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           <i18n.Translate>Download stats as CSV</i18n.Translate>
@@ -411,9 +416,9 @@ function MetricValue({
 
   const rate =
     !currAmount ||
-    Number.isNaN(currAmount) ||
-    !prevAmount ||
-    Number.isNaN(prevAmount)
+      Number.isNaN(currAmount) ||
+      !prevAmount ||
+      Number.isNaN(prevAmount)
       ? 0
       : cmp === -1
         ? 1 - Math.round(currAmount) / Math.round(prevAmount)