diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/DepositPage')
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> |