render amount and limit input

3 files changed, 19 insertions, 16 deletions

diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 4b7649fb6..a32deb266 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -19,6 +19,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { State } from "./index.js";
 import { format } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
+import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -62,8 +63,8 @@ export function ReadyView({ cashouts, onSelected }: State.Ready): VNode {
                     ? format(item.confirmation_time, "dd/MM/yyyy HH:mm:ss")
                     : "-"}
                 </td>
-                <td>{Amounts.stringifyValue(item.amount_debit)}</td>
-                <td>{Amounts.stringifyValue(item.amount_credit)}</td>
+                <td><RenderAmount value={Amounts.parseOrThrow(item.amount_debit)} /></td>
+                <td><RenderAmount value={Amounts.parseOrThrow(item.amount_credit)} /></td>
                 <td>{item.status}</td>
                 <td>
                   <a
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index f92c874f3..69f4369a2 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -20,6 +20,7 @@ import { State } from "./index.js";
 import { format, isToday } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
 import { useEffect, useRef } from "preact/hooks";
+import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -72,13 +73,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                 {txs.map(item => {
                   const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss")
                   const amount = <Fragment>
-                    {item.negative ? "-" : ""}
-                    {item.amount ? (
-                      `${Amounts.stringifyValue(item.amount)} ${item.amount.currency
-                      }`
-                    ) : (
-                      <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
-                    )}
+                    { }
                   </Fragment>
                   return (<tr key={idx}>
                     <td class="relative py-2 pl-2 pr-2 text-sm ">
@@ -86,20 +81,26 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                       <dl class="font-normal sm:hidden">
                         <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
                         <dd class="mt-1 truncate text-gray-700">
-                          {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? (
-                            `${Amounts.stringifyValue(item.amount)}`
+                          {item.negative ? i18n.str`sent` : i18n.str`received`}
+
+                          {item.amount ? (
+                            <RenderAmount value={item.amount} />
                           ) : (
                             <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
                           )}</dd>
+
                         <dt class="sr-only sm:hidden"><i18n.Translate>Counterpart</i18n.Translate></dt>
                         <dd class="mt-1 truncate text-gray-500 sm:hidden">
-                        {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart}
+                          {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart}
                         </dd>
                       </dl>
                     </td>
                     <td data-negative={item.negative ? "true" : "false"}
                       class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
-                      {amount}
+                      {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} />
+                      ) : (
+                        <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
+                      )}
                     </td>
                     <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td>
                     <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
index f15a9ee6a..7cf658681 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -31,6 +31,7 @@ import { getInitialBackendBaseURL } from "../hooks/backend.js";
 import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js";
 import { ErrorLoading } from "./ErrorLoading.js";
 import { BankFrame } from "../pages/BankFrame.js";
+import { ConfigStateProvider } from "../context/config.js";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
 /**
@@ -84,11 +85,11 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode {
     </BankFrame>
   }
   if (checked.type === "ok") {
-    return <Fragment>{children}</Fragment>
+    return <ConfigStateProvider value={checked.result}>{children}</ConfigStateProvider>
   }
-  
+
   return <BankFrame>
-    <ErrorLoading error={checked.result}/>
+    <ErrorLoading error={checked.result} />
   </BankFrame>
 }