standard Amount field and add more validation (neg values)

3 files changed, 72 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
index 2693db79e..d8b752d44 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
@@ -49,7 +49,6 @@ export function useComponentState(
     parsed !== undefined ? Amounts.stringifyValue(parsed) : "0";
   // const [accountIdx, setAccountIdx] = useState<number>(0);
   const [amount, setAmount] = useState(initialValue);
-
   const [selectedAccount, setSelectedAccount] = useState<PaytoUri>();
 
   const [fee, setFee] = useState<DepositGroupFees | undefined>(undefined);
@@ -124,6 +123,16 @@ export function useComponentState(
   const firstAccount = accounts[0].uri
   const currentAccount = !selectedAccount ? firstAccount : selectedAccount;
 
+  if (fee === undefined && parsedAmount) {
+    getFeeForAmount(currentAccount, parsedAmount, api).then(initialFee => {
+      setFee(initialFee)
+    })
+    return {
+      status: "loading",
+      error: undefined,
+    };
+  }
+
   const accountMap = createLabelsForBankAccount(accounts);
 
   async function updateAccountFromList(accountStr: string): Promise<void> {
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
index 9f336ac1a..17e17d185 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
@@ -167,6 +167,11 @@ describe("DepositPage states", () => {
         accounts: [ibanPayto],
       },
     );
+    handler.addWalletCallResponse(
+      WalletApiOperation.GetFeeForDeposit,
+      undefined,
+      withoutFee(),
+    );
 
     const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } =
       mountHook(() => useComponentState(props, mock));
@@ -177,6 +182,11 @@ describe("DepositPage states", () => {
     }
 
     expect(await waitForStateUpdate()).true;
+    {
+      const { status } = pullLastResultOrThrow();
+      expect(status).equal("loading");
+    }
+    expect(await waitForStateUpdate()).true;
 
     {
       const r = pullLastResultOrThrow();
@@ -219,6 +229,12 @@ describe("DepositPage states", () => {
       undefined,
       withoutFee(),
     );
+
+    handler.addWalletCallResponse(
+      WalletApiOperation.GetFeeForDeposit,
+      undefined,
+      withoutFee(),
+    );
     handler.addWalletCallResponse(
       WalletApiOperation.GetFeeForDeposit,
       undefined,
@@ -239,6 +255,12 @@ describe("DepositPage states", () => {
     }
 
     expect(await waitForStateUpdate()).true;
+    {
+      const { status } = pullLastResultOrThrow();
+      expect(status).equal("loading");
+    }
+
+    expect(await waitForStateUpdate()).true;
     const accountSelected = stringifyPaytoUri(ibanPayto.uri);
 
     {
@@ -364,6 +386,11 @@ describe("DepositPage states", () => {
     handler.addWalletCallResponse(
       WalletApiOperation.GetFeeForDeposit,
       undefined,
+      withoutFee(),
+    );
+    handler.addWalletCallResponse(
+      WalletApiOperation.GetFeeForDeposit,
+      undefined,
       withSomeFee(),
     );
     handler.addWalletCallResponse(
@@ -381,6 +408,13 @@ describe("DepositPage states", () => {
     }
 
     expect(await waitForStateUpdate()).true;
+
+    {
+      const { status } = pullLastResultOrThrow();
+      expect(status).equal("loading");
+    }
+
+    expect(await waitForStateUpdate()).true;
     const accountSelected = stringifyPaytoUri(ibanPayto.uri);
 
     {
@@ -409,6 +443,8 @@ describe("DepositPage states", () => {
       expect(r.depositHandler.onClick).undefined;
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`));
 
+      expect(r.amount.onInput).not.undefined;
+      if (!r.amount.onInput) return;
       r.amount.onInput("10");
     }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
index e864c8413..771db828d 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
@@ -16,6 +16,7 @@
 
 import { Amounts, PaytoUri } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
+import { AmountField } from "../../components/AmountField.js";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { SelectList } from "../../components/SelectList.js";
@@ -28,6 +29,7 @@ import {
 } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
+import { Grid } from "../../mui/Grid.js";
 import { State } from "./index.js";
 
 export function LoadingErrorView({ error }: State.LoadingUriError): VNode {
@@ -167,48 +169,33 @@ export function ReadyView(state: State.Ready): VNode {
         <p>
           <AccountDetails account={state.currentAccount} />
         </p>
-        <InputWithLabel invalid={!!state.amount.error}>
-          <label>
-            <i18n.Translate>Amount</i18n.Translate>
-          </label>
-          <div>
-            <span>{state.currency}</span>
-            <input
-              type="number"
-              value={state.amount.value}
-              onInput={(e) => state.amount.onInput(e.currentTarget.value)}
+        <Grid container spacing={2} columns={1}>
+          <Grid item xs={1}>
+            <AmountField
+              label={<i18n.Translate>Amount</i18n.Translate>}
+              currency={state.currency}
+              handler={state.amount}
             />
-          </div>
-          {state.amount.error && <ErrorText>{state.amount.error}</ErrorText>}
-        </InputWithLabel>
-
-        <InputWithLabel>
-          <label>
-            <i18n.Translate>Deposit fee</i18n.Translate>
-          </label>
-          <div>
-            <span>{state.currency}</span>
-            <input
-              type="number"
-              disabled
-              value={Amounts.stringifyValue(state.totalFee)}
+          </Grid>
+          <Grid item xs={1}>
+            <AmountField
+              label={<i18n.Translate>Deposit fee</i18n.Translate>}
+              currency={state.currency}
+              handler={{
+                value: Amounts.stringifyValue(state.totalFee),
+              }}
             />
-          </div>
-        </InputWithLabel>
-
-        <InputWithLabel>
-          <label>
-            <i18n.Translate>Total deposit</i18n.Translate>
-          </label>
-          <div>
-            <span>{state.currency}</span>
-            <input
-              type="number"
-              disabled
-              value={Amounts.stringifyValue(state.totalToDeposit)}
+          </Grid>
+          <Grid item xs={1}>
+            <AmountField
+              label={<i18n.Translate>Total deposit</i18n.Translate>}
+              currency={state.currency}
+              handler={{
+                value: Amounts.stringifyValue(state.totalToDeposit),
+              }}
             />
-          </div>
-        </InputWithLabel>
+          </Grid>
+        </Grid>
       </section>
       <footer>
         <Button