3 files changed, 33 insertions, 8 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>
   );
 }