fixes #8294

4 files changed, 57 insertions, 47 deletions

diff --git a/packages/demobank-ui/src/components/Transactions/index.ts b/packages/demobank-ui/src/components/Transactions/index.ts
index b0e67d4d9..f4e799839 100644
--- a/packages/demobank-ui/src/components/Transactions/index.ts
+++ b/packages/demobank-ui/src/components/Transactions/index.ts
@@ -19,9 +19,11 @@ import { Loading, utils } from "@gnu-taler/web-util/browser";
 import { ErrorLoadingWithDebug } from "../ErrorLoadingWithDebug.js";
 import { useComponentState } from "./state.js";
 import { ReadyView } from "./views.js";
+import { RouteDefinition } from "../../route.js";
 
 export interface Props {
   account: string;
+  routeCreateWireTransfer: RouteDefinition<{ destination: string }> | undefined;
 }
 
 export type State = State.Loading | State.LoadingUriError | State.Ready;
@@ -43,6 +45,7 @@ export namespace State {
   export interface Ready extends BaseInfo {
     status: "ready";
     error: undefined;
+    routeCreateWireTransfer: RouteDefinition<{ destination: string }> | undefined;
     transactions: Transaction[];
     onPrev?: () => void;
     onNext?: () => void;
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index 74e6b0d36..5e99a8a76 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -23,7 +23,7 @@ import {
 import { useTransactions } from "../../hooks/access.js";
 import { Props, State, Transaction } from "./index.js";
 
-export function useComponentState({ account }: Props): State {
+export function useComponentState({ account, routeCreateWireTransfer }: Props): State {
   const result = useTransactions(account);
   if (!result) {
     return {
@@ -42,38 +42,39 @@ export function useComponentState({ account }: Props): State {
     result.data.type === "fail"
       ? []
       : result.data.body.transactions
-          .map((tx) => {
-            const negative = tx.direction === "debit";
-            const cp = parsePaytoUri(
-              negative ? tx.creditor_payto_uri : tx.debtor_payto_uri,
-            );
-            const counterpart =
-              (cp === undefined || !cp.isKnown
-                ? undefined
-                : cp.targetType === "iban"
-                  ? cp.iban
-                  : cp.targetType === "x-taler-bank"
-                    ? cp.account
-                    : cp.targetType === "bitcoin"
-                      ? `${cp.targetPath.substring(0, 6)}...`
-                      : undefined) ?? "unknown";
+        .map((tx) => {
+          const negative = tx.direction === "debit";
+          const cp = parsePaytoUri(
+            negative ? tx.creditor_payto_uri : tx.debtor_payto_uri,
+          );
+          const counterpart =
+            (cp === undefined || !cp.isKnown
+              ? undefined
+              : cp.targetType === "iban"
+                ? cp.iban
+                : cp.targetType === "x-taler-bank"
+                  ? cp.account
+                  : cp.targetType === "bitcoin"
+                    ? `${cp.targetPath.substring(0, 6)}...`
+                    : undefined) ?? "unknown";
 
-            const when = AbsoluteTime.fromProtocolTimestamp(tx.date);
-            const amount = Amounts.parse(tx.amount);
-            const subject = tx.subject;
-            return {
-              negative,
-              counterpart,
-              when,
-              amount,
-              subject,
-            };
-          })
-          .filter((x): x is Transaction => x !== undefined);
+          const when = AbsoluteTime.fromProtocolTimestamp(tx.date);
+          const amount = Amounts.parse(tx.amount);
+          const subject = tx.subject;
+          return {
+            negative,
+            counterpart,
+            when,
+            amount,
+            subject,
+          };
+        })
+        .filter((x): x is Transaction => x !== undefined);
 
   return {
     status: "ready",
     error: undefined,
+    routeCreateWireTransfer,
     transactions,
     onNext: result.isLastPage ? undefined : result.loadMore,
     onPrev: result.isFirstPage ? undefined : result.loadMorePrev,
diff --git a/packages/demobank-ui/src/components/Transactions/test.ts b/packages/demobank-ui/src/components/Transactions/test.ts
index cf33a0b1c..9ded218c1 100644
--- a/packages/demobank-ui/src/components/Transactions/test.ts
+++ b/packages/demobank-ui/src/components/Transactions/test.ts
@@ -33,6 +33,7 @@ describe("Transaction states", () => {
 
     const props: Props = {
       account: "myAccount",
+      routeCreateWireTransfer: undefined,
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_FIRST_PAGE, {
@@ -161,6 +162,7 @@ describe("Transaction states", () => {
 
     const props: Props = {
       account: "myAccount",
+      routeCreateWireTransfer: undefined,
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_ERROR, {
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index 51fb90b61..53e437523 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -20,10 +20,10 @@ import { Fragment, h, VNode } from "preact";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 import { State } from "./index.js";
-import { privatePages } from "../../Routing.js";
 
 export function ReadyView({
   transactions,
+  routeCreateWireTransfer,
   onNext,
   onPrev,
 }: State.Ready): VNode {
@@ -93,8 +93,8 @@ export function ReadyView({
                       item.when.t_ms === "never"
                         ? ""
                         : format(item.when.t_ms, "HH:mm:ss", {
-                            locale: dateLocale,
-                          });
+                          locale: dateLocale,
+                        });
                     return (
                       <tr
                         key={idx}
@@ -134,14 +134,16 @@ export function ReadyView({
                             </dt>
                             <dd class="mt-1 truncate text-gray-500 sm:hidden">
                               {item.negative ? i18n.str`to` : i18n.str`from`}{" "}
-                              <a
-                                href={privatePages.wireTranserCreate.url({
-                                  destination: item.counterpart,
-                                })}
-                                class="text-indigo-600 hover:text-indigo-900"
-                              >
-                                {item.counterpart}
-                              </a>
+                              {!routeCreateWireTransfer ? item.counterpart :
+                                <a
+                                  href={routeCreateWireTransfer.url({
+                                    destination: item.counterpart,
+                                  })}
+                                  class="text-indigo-600 hover:text-indigo-900"
+                                >
+                                  {item.counterpart}
+                                </a>
+                              }
                             </dd>
                             <dd class="mt-1 text-gray-500 sm:hidden">
                               <pre class="break-words w-56 whitespace-break-spaces p-2 rounded-md mx-auto my-2 bg-gray-100">
@@ -168,14 +170,16 @@ export function ReadyView({
                           )}
                         </td>
                         <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">
-                          <a
-                            href={privatePages.wireTranserCreate.url({
-                              destination: item.counterpart,
-                            })}
-                            class="text-indigo-600 hover:text-indigo-900"
-                          >
-                            {item.counterpart}
-                          </a>
+                          {!routeCreateWireTransfer ? item.counterpart :
+                            <a
+                              href={routeCreateWireTransfer.url({
+                                destination: item.counterpart,
+                              })}
+                              class="text-indigo-600 hover:text-indigo-900"
+                            >
+                              {item.counterpart}
+                            </a>
+                          }
                         </td>
                         <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">
                           {item.subject}