amount field

5 files changed, 41 insertions, 44 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
index 373045833..3f23515b2 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
@@ -18,6 +18,7 @@ import { AmountJson, PaytoUri } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import {
+  AmountFieldHandler,
   ButtonHandler,
   SelectFieldHandler,
   TextFieldHandler,
@@ -98,7 +99,7 @@ export namespace State {
     totalFee: AmountJson;
     totalToDeposit: AmountJson;
 
-    amount: TextFieldHandler;
+    amount: AmountFieldHandler;
     account: SelectFieldHandler;
     cancelHandler: ButtonHandler;
     depositHandler: ButtonHandler;
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
index 91883c823..bbf2c2771 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
@@ -52,9 +52,13 @@ export function useComponentState(
   });
 
   const initialValue =
-    parsed !== undefined ? Amounts.stringifyValue(parsed) : "0";
+    parsed !== undefined
+      ? parsed
+      : currency !== undefined
+      ? Amounts.zeroOfCurrency(currency)
+      : undefined;
   // const [accountIdx, setAccountIdx] = useState<number>(0);
-  const [amount, setAmount] = useState(initialValue);
+  const [amount, setAmount] = useState<AmountJson>(initialValue ?? ({} as any));
   const [selectedAccount, setSelectedAccount] = useState<PaytoUri>();
 
   const [fee, setFee] = useState<DepositGroupFees | undefined>(undefined);
@@ -81,7 +85,7 @@ export function useComponentState(
   }
   const { accounts, balances } = hook.response;
 
-  const parsedAmount = Amounts.parse(`${currency}:${amount}`);
+  // const parsedAmount = Amounts.parse(`${currency}:${amount}`);
 
   if (addingAccount) {
     return {
@@ -129,8 +133,8 @@ export function useComponentState(
   const firstAccount = accounts[0].uri;
   const currentAccount = !selectedAccount ? firstAccount : selectedAccount;
 
-  if (fee === undefined && parsedAmount) {
-    getFeeForAmount(currentAccount, parsedAmount, api).then((initialFee) => {
+  if (fee === undefined) {
+    getFeeForAmount(currentAccount, amount, api).then((initialFee) => {
       setFee(initialFee);
     });
     return {
@@ -143,9 +147,9 @@ export function useComponentState(
 
   async function updateAccountFromList(accountStr: string): Promise<void> {
     const uri = !accountStr ? undefined : parsePaytoUri(accountStr);
-    if (uri && parsedAmount) {
+    if (uri) {
       try {
-        const result = await getFeeForAmount(uri, parsedAmount, api);
+        const result = await getFeeForAmount(uri, amount, api);
         setSelectedAccount(uri);
         setFee(result);
       } catch (e) {
@@ -155,17 +159,15 @@ export function useComponentState(
     }
   }
 
-  async function updateAmount(numStr: string): Promise<void> {
-    const parsed = Amounts.parse(`${currency}:${numStr}`);
-    if (parsed) {
-      try {
-        const result = await getFeeForAmount(currentAccount, parsed, api);
-        setAmount(numStr);
-        setFee(result);
-      } catch (e) {
-        setAmount(numStr);
-        setFee(undefined);
-      }
+  async function updateAmount(newAmount: AmountJson): Promise<void> {
+    // const parsed = Amounts.parse(`${currency}:${numStr}`);
+    try {
+      const result = await getFeeForAmount(currentAccount, newAmount, api);
+      setAmount(newAmount);
+      setFee(result);
+    } catch (e) {
+      setAmount(newAmount);
+      setFee(undefined);
     }
   }
 
@@ -175,32 +177,29 @@ export function useComponentState(
       : Amounts.zeroOfCurrency(currency);
 
   const totalToDeposit =
-    parsedAmount && fee !== undefined
-      ? Amounts.sub(parsedAmount, totalFee).amount
+    fee !== undefined
+      ? Amounts.sub(amount, totalFee).amount
       : Amounts.zeroOfCurrency(currency);
 
   const isDirty = amount !== initialValue;
   const amountError = !isDirty
     ? undefined
-    : !parsedAmount
-    ? "Invalid amount"
-    : Amounts.cmp(balance, parsedAmount) === -1
+    : Amounts.cmp(balance, amount) === -1
     ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}`
     : undefined;
 
   const unableToDeposit =
-    !parsedAmount || //no amount specified
     Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee
     fee === undefined || //no fee calculated yet
     amountError !== undefined; //amount field may be invalid
 
   async function doSend(): Promise<void> {
-    if (!parsedAmount || !currency) return;
+    if (!currency) return;
 
     const depositPaytoUri = stringifyPaytoUri(currentAccount);
-    const amount = Amounts.stringify(parsedAmount);
+    const amountStr = Amounts.stringify(amount);
     await api.wallet.call(WalletApiOperation.CreateDepositGroup, {
-      amount,
+      amount: amountStr,
       depositPaytoUri,
     });
     onSuccess(currency);
@@ -211,7 +210,7 @@ export function useComponentState(
     error: undefined,
     currency,
     amount: {
-      value: String(amount),
+      value: amount,
       onInput: updateAmount,
       error: amountError,
     },
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
index f03788d4e..75c544c84 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
@@ -52,7 +52,7 @@ export const WithNoAccountForIBAN = createExample(ReadyView, {
     onInput: async () => {
       null;
     },
-    value: "10:USD",
+    value: Amounts.parseOrThrow("USD:10"),
   },
   onAddAccount: {},
   cancelHandler: {},
@@ -87,7 +87,7 @@ export const WithIBANAccountTypeSelected = createExample(ReadyView, {
     onInput: async () => {
       null;
     },
-    value: "10:USD",
+    value: Amounts.parseOrThrow("USD:10"),
   },
   onAddAccount: {},
   cancelHandler: {},
@@ -123,7 +123,7 @@ export const NewBitcoinAccountTypeSelected = createExample(ReadyView, {
     onInput: async () => {
       null;
     },
-    value: "10:USD",
+    value: Amounts.parseOrThrow("USD:10"),
   },
   cancelHandler: {},
   depositHandler: {
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
index 17e17d185..3f08c678c 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
@@ -194,7 +194,7 @@ describe("DepositPage states", () => {
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
       expect(r.account.value).eq(stringifyPaytoUri(ibanPayto.uri));
-      expect(r.amount.value).eq("0");
+      expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
       expect(r.depositHandler.onClick).undefined;
     }
 
@@ -269,7 +269,7 @@ describe("DepositPage states", () => {
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
       expect(r.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
-      expect(r.amount.value).eq("0");
+      expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
       expect(r.depositHandler.onClick).undefined;
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
       expect(r.account.onChange).not.undefined;
@@ -285,7 +285,7 @@ describe("DepositPage states", () => {
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
       expect(r.account.value).eq(accountSelected);
-      expect(r.amount.value).eq("0");
+      expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
       expect(r.depositHandler.onClick).undefined;
     }
@@ -423,7 +423,7 @@ describe("DepositPage states", () => {
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
       expect(r.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
-      expect(r.amount.value).eq("0");
+      expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
       expect(r.depositHandler.onClick).undefined;
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
       expect(r.account.onChange).not.undefined;
@@ -439,13 +439,13 @@ describe("DepositPage states", () => {
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
       expect(r.account.value).eq(accountSelected);
-      expect(r.amount.value).eq("0");
+      expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
       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");
+      r.amount.onInput(Amounts.parseOrThrow("EUR:10"));
     }
 
     expect(await waitForStateUpdate()).true;
@@ -456,7 +456,7 @@ describe("DepositPage states", () => {
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
       expect(r.account.value).eq(accountSelected);
-      expect(r.amount.value).eq("10");
+      expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:10"));
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`));
       expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`));
       expect(r.depositHandler.onClick).not.undefined;
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
index 771db828d..6a28f31e1 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
@@ -173,25 +173,22 @@ export function ReadyView(state: State.Ready): VNode {
           <Grid item xs={1}>
             <AmountField
               label={<i18n.Translate>Amount</i18n.Translate>}
-              currency={state.currency}
               handler={state.amount}
             />
           </Grid>
           <Grid item xs={1}>
             <AmountField
               label={<i18n.Translate>Deposit fee</i18n.Translate>}
-              currency={state.currency}
               handler={{
-                value: Amounts.stringifyValue(state.totalFee),
+                value: state.totalFee,
               }}
             />
           </Grid>
           <Grid item xs={1}>
             <AmountField
               label={<i18n.Translate>Total deposit</i18n.Translate>}
-              currency={state.currency}
               handler={{
-                value: Amounts.stringifyValue(state.totalToDeposit),
+                value: state.totalToDeposit,
               }}
             />
           </Grid>