render amount and limit input

1 files changed, 12 insertions, 11 deletions

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>