render amount and limit input

7 files changed, 79 insertions, 55 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index 29334cae4..fc8dfd599 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -27,6 +27,7 @@ import { CopyButton, CopyIcon } from "../components/CopyButton.js";
 import logo from "../assets/logo-2021.svg";
 import { useAccountDetails } from "../hooks/access.js";
 import { Attention } from "../components/Attention.js";
+import { RenderAmount } from "./PaytoWireTransferForm.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -87,7 +88,7 @@ export function BankFrame({
                     class="h-8 w-auto"
                     src={logo}
                     alt="Taler"
-                    style={{ height: 35, margin: 10 }}
+                    style={{ height: "1.5rem", margin: ".5rem" }}
                   />
                 </a>
               </div>
@@ -322,10 +323,10 @@ function MaybeShowDebugInfo({ info }: { info: any }): VNode {
   const [settings] = useSettings()
   if (settings.showDebugInfo) {
     return <pre class="whitespace-break-spaces ">
-    {info}
-  </pre>
+      {info}
+    </pre>
   }
-  return <Fragment /> 
+  return <Fragment />
 }
 
 
@@ -333,19 +334,19 @@ function StatusBanner(): VNode {
   const notifs = useNotifications()
   if (notifs.length === 0) return <Fragment />
   return <div class="fixed z-20 w-full p-4"> {
-      notifs.map(n => {
-        switch (n.message.type) {
-          case "error":
-            return <Attention type="danger" title={n.message.title} onClose={() => {
-              n.remove()
-            }}>
-              {n.message.description &&
-                <div class="mt-2 text-sm text-red-700">
-                  {n.message.description}
-                </div>
-              }
-              <MaybeShowDebugInfo info={n.message.debug} />
-              {/* <a href="#" class="text-gray-500">
+    notifs.map(n => {
+      switch (n.message.type) {
+        case "error":
+          return <Attention type="danger" title={n.message.title} onClose={() => {
+            n.remove()
+          }}>
+            {n.message.description &&
+              <div class="mt-2 text-sm text-red-700">
+                {n.message.description}
+              </div>
+            }
+            <MaybeShowDebugInfo info={n.message.debug} />
+            {/* <a href="#" class="text-gray-500">
                 show debug info
               </a>
               {n.message.debug &&
@@ -353,13 +354,13 @@ function StatusBanner(): VNode {
                   {n.message.debug}
                 </div>
               } */}
-            </Attention>
-          case "info":
-            return <Attention type="success" title={n.message.title} onClose={() => {
-              n.remove();
-            }} />
-        }
-      })}
+          </Attention>
+        case "info":
+          return <Attention type="success" title={n.message.title} onClose={() => {
+            n.remove();
+          }} />
+      }
+    })}
   </div>
 
 }
@@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode {
   const result = useAccountDetails(account);
   if (!result.ok) return <div />
 
-  return <div>
-    {Amounts.currencyOf(result.data.balance.amount)}
-    &nbsp;{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""}
-    {Amounts.stringifyValue(result.data.balance.amount)}
-  </div>
+  return <RenderAmount
+    value={Amounts.parseOrThrow(result.data.balance.amount)}
+    negative={result.data.balance.credit_debit_indicator === "debit"}
+  />
 }
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index fef272831..f60ba3270 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ
   const { i18n } = useTranslationContext();
   const [settings] = useSettings();
 
-  const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer");
+  const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>();
 
   return (
     <div class="mt-2">
@@ -47,7 +47,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ
               setTab("charge-wallet")
             }} />
             <span class="flex flex-1">
-              <div class="text-lg mr-2">&#x1F4B5;</div>
+              <div class="text-4xl mr-4 my-auto">&#x1F4B5;</div>
               <span class="flex flex-col">
                 <span id="project-type-0-label" class="block text-sm font-medium text-gray-900">
                   <i18n.Translate>a <b>Taler</b> wallet</i18n.Translate>
@@ -76,7 +76,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ
               setTab("wire-transfer")
             }} />
             <span class="flex flex-1">
-              <div class="text-lg mr-2">&#x2194;</div>
+              <div class="text-4xl mr-4 my-auto">&#x2194;</div>
               <span class="flex flex-col">
                 <span id="project-type-1-label" class="block text-sm font-medium text-gray-900">
                   <i18n.Translate>another bank account</i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 785dc4264..b3fd51670 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -39,6 +39,8 @@ import {
   undefinedIfEmpty,
   validateIBAN,
 } from "../utils.js";
+import { useConfigState } from "../hooks/config.js";
+import { useConfigContext } from "../context/config.js";
 
 const logger = new Logger("PaytoWireTransferForm");
 
@@ -55,7 +57,7 @@ export function PaytoWireTransferForm({
   onCancel: (() => void) | undefined;
   limit: AmountJson;
 }): VNode {
-  const [isRawPayto, setIsRawPayto] = useState(true);
+  const [isRawPayto, setIsRawPayto] = useState(false);
   // FIXME: remove this
   const [iban, setIban] = useState<string | undefined>("DE4745461198061");
   const [subject, setSubject] = useState<string | undefined>("ASD");
@@ -285,7 +287,7 @@ export function PaytoWireTransferForm({
 
             <div class="sm:col-span-5">
               <label for="amount" class="block text-sm font-medium leading-6 text-gray-900">{i18n.str`Amount`}</label>
-              <Amount
+              <InputAmount
                 name="amount"
                 left
                 currency={limit.currency}
@@ -372,7 +374,9 @@ export function doAutoFocus(element: HTMLElement | null) {
   }
 }
 
-export function Amount(
+const FRAC_SEPARATOR = "."
+
+export function InputAmount(
   {
     currency,
     name,
@@ -390,6 +394,7 @@ export function Amount(
   },
   ref: Ref<HTMLInputElement>,
 ): VNode {
+  const cfg = useConfigContext()
   return (
     <div class="mt-2">
       <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
@@ -409,10 +414,14 @@ export function Amount(
           autocomplete="off"
           value={value ?? ""}
           disabled={!onChange}
-          onInput={(e): void => {
-            if (onChange) {
-              onChange(e.currentTarget.value);
+          onInput={(e) => {
+            if (!onChange) return;
+            const l = e.currentTarget.value.length
+            const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR)
+            if (sep_pos !== -1 && l - sep_pos - 1 > cfg.currency_fraction_limit) {
+              e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + cfg.currency_fraction_limit + 1)
             }
+            onChange(e.currentTarget.value);
           }}
         />
       </div>
@@ -421,3 +430,21 @@ export function Amount(
   );
 }
 
+export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode {
+  const cfg = useConfigContext()
+  const str = Amounts.stringifyValue(value)
+  const sep_pos = str.indexOf(FRAC_SEPARATOR)
+  if (sep_pos !== -1 && str.length - sep_pos - 1 > cfg.currency_fraction_digits) {
+    const limit = sep_pos + cfg.currency_fraction_digits + 1
+    const normal = str.substring(0, limit)
+    const small = str.substring(limit)
+    return <span class="whitespace-nowrap">
+      {negative ? "-" : undefined}
+      {value.currency} {normal} <sup class="-ml-2">{small}</sup>
+    </span>
+  }
+  return <span class="whitespace-nowrap">
+    {negative ? "-" : undefined}
+    {value.currency} {str}
+  </span>
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 7357223b7..da299b1c8 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -34,13 +34,13 @@ import { forwardRef } from "preact/compat";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useAccessAPI } from "../hooks/access.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
-import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js";
+import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
 import { useSettings } from "../hooks/settings.js";
 import { OperationState } from "./OperationState/index.js";
 import { Attention } from "../components/Attention.js";
 
 const logger = new Logger("WalletWithdrawForm");
-const RefAmount = forwardRef(Amount);
+const RefAmount = forwardRef(InputAmount);
 
 
 function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 208d4b859..ddcd2492d 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -38,6 +38,7 @@ import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
 import { useAccessAnonAPI } from "../hooks/access.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { useSettings } from "../hooks/settings.js";
+import { RenderAmount } from "./PaytoWireTransferForm.js";
 
 const logger = new Logger("WithdrawalConfirmationQuestion");
 
@@ -318,7 +319,7 @@ export function WithdrawalConfirmationQuestion({
                   <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">Amount</dt>
                     <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                      {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)}
+                      <RenderAmount value={details.amount} />
                     </dd>
                   </div>
                 </dl>
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx
index f99b320a4..a6899e679 100644
--- a/packages/demobank-ui/src/pages/admin/AccountList.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx
@@ -4,6 +4,7 @@ import { handleNotOkResult } from "../HomePage.js";
 import { AccountAction } from "./Home.js";
 import { Amounts } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { RenderAmount } from "../PaytoWireTransferForm.js";
 
 interface Props {
   onAction: (type: AccountAction, account: string) => void;
@@ -88,12 +89,7 @@ export function AccountList({ account, onAction, onCreateAccount }: Props): VNod
                         i18n.str`unknown`
                       ) : (
                         <span class="amount">
-                          {balanceIsDebit ? <b>-</b> : null}
-                          <span class="value">{`${Amounts.stringifyValue(
-                            balance,
-                          )}`}</span>
-                          &nbsp;
-                          <span class="currency">{`${balance.currency}`}</span>
+                          <RenderAmount value={balance} negative={balanceIsDebit} />
                         </span>
                       )}
                     </td>
diff --git a/packages/demobank-ui/src/pages/business/Home.tsx b/packages/demobank-ui/src/pages/business/Home.tsx
index 2945cb65a..1a84effcd 100644
--- a/packages/demobank-ui/src/pages/business/Home.tsx
+++ b/packages/demobank-ui/src/pages/business/Home.tsx
@@ -45,7 +45,7 @@ import {
   undefinedIfEmpty,
 } from "../../utils.js";
 import { handleNotOkResult } from "../HomePage.js";
-import { Amount } from "../PaytoWireTransferForm.js";
+import { InputAmount } from "../PaytoWireTransferForm.js";
 import { ShowAccountDetails } from "../ShowAccountDetails.js";
 import { UpdateAccountPassword } from "../UpdateAccountPassword.js";
 
@@ -342,7 +342,7 @@ function CreateCashout({
 
           </label>
           <div style={{ display: "flex" }}>
-            <Amount
+            <InputAmount
               name="amount"
               currency={amount.currency}
               value={form.amount}
@@ -372,7 +372,7 @@ function CreateCashout({
         </fieldset>
         <fieldset>
           <label for="balance-now">{i18n.str`Balance now`}</label>
-          <Amount
+          <InputAmount
             name="banace-now"
             currency={balance.currency}
             value={Amounts.stringifyValue(balance)}
@@ -382,7 +382,7 @@ function CreateCashout({
           <label for="total-cost"
             style={{ fontWeight: "bold", color: "red" }}
           >{i18n.str`Total cost`}</label>
-          <Amount
+          <InputAmount
             name="total-cost"
             currency={balance.currency}
             value={Amounts.stringifyValue(calc.debit)}
@@ -390,7 +390,7 @@ function CreateCashout({
         </fieldset>
         <fieldset>
           <label for="balance-after">{i18n.str`Balance after`}</label>
-          <Amount
+          <InputAmount
             name="balance-after"
             currency={balance.currency}
             value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""}
@@ -400,7 +400,7 @@ function CreateCashout({
           <Fragment>
             <fieldset>
               <label for="amount-conversiojn">{i18n.str`Amount after conversion`}</label>
-              <Amount
+              <InputAmount
                 name="amount-conversion"
                 currency={fiatCurrency}
                 value={Amounts.stringifyValue(calc.beforeFee)}
@@ -409,7 +409,7 @@ function CreateCashout({
 
             <fieldset>
               <label form="cashout-fee">{i18n.str`Cashout fee`}</label>
-              <Amount
+              <InputAmount
                 name="cashout-fee"
                 currency={fiatCurrency}
                 value={Amounts.stringifyValue(sellFee)}
@@ -421,7 +421,7 @@ function CreateCashout({
           <label for="total"
             style={{ fontWeight: "bold", color: "green" }}
           >{i18n.str`Total cashout transfer`}</label>
-          <Amount
+          <InputAmount
             name="total"
             currency={fiatCurrency}
             value={Amounts.stringifyValue(calc.credit)}