diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-15 17:12:03 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-15 17:12:03 -0300 |
commit | f1f8f818dbe631fbeeba64af9dfcae1aa7842615 (patch) | |
tree | 856d3b443556ce271c3e9fdab6aed7ae7728ab65 /packages/taler-wallet-webextension/src/wallet/DepositPage | |
parent | f93bd51499ed34844b666bf6d333227adf4368bf (diff) | |
download | wallet-core-f1f8f818dbe631fbeeba64af9dfcae1aa7842615.tar.xz |
pretty
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/DepositPage')
3 files changed, 157 insertions, 126 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts index ad4c759bf..6ffbccc27 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts @@ -20,7 +20,7 @@ import { HookError } from "../../hooks/useAsyncAsHook.js"; import { AmountFieldHandler, ButtonHandler, - SelectFieldHandler + SelectFieldHandler, } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { ManageAccountPage } from "../ManageAccount/index.js"; @@ -30,7 +30,7 @@ import { LoadingErrorView, NoAccountToDepositView, NoEnoughBalanceView, - ReadyView + ReadyView, } from "./views.js"; export interface Props { diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index 5ad0841dc..02e85a1c7 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -21,7 +21,7 @@ import { KnownBankAccountsInfo, parsePaytoUri, PaytoUri, - stringifyPaytoUri + stringifyPaytoUri, } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; @@ -29,10 +29,13 @@ import { useBackendContext } from "../../context/backend.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { Props, State } from "./index.js"; -export function useComponentState( - { amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props, -): State { - const api = useBackendContext() +export function useComponentState({ + amount: amountStr, + currency: currencyStr, + onCancel, + onSuccess, +}: Props): State { + const api = useBackendContext(); const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr); const currency = parsed !== undefined ? parsed.currency : currencyStr; @@ -55,8 +58,8 @@ export function useComponentState( parsed !== undefined ? parsed : currency !== undefined - ? Amounts.zeroOfCurrency(currency) - : undefined; + ? Amounts.zeroOfCurrency(currency) + : undefined; // const [accountIdx, setAccountIdx] = useState<number>(0); const [amount, setAmount] = useState<AmountJson>(initialValue ?? ({} as any)); const [selectedAccount, setSelectedAccount] = useState<PaytoUri>(); @@ -162,7 +165,11 @@ export function useComponentState( async function updateAmount(newAmount: AmountJson): Promise<void> { // const parsed = Amounts.parse(`${currency}:${numStr}`); try { - const result = await getFeeForAmount(currentAccount, newAmount, api.wallet); + const result = await getFeeForAmount( + currentAccount, + newAmount, + api.wallet, + ); setAmount(newAmount); setFee(result); } catch (e) { @@ -185,8 +192,8 @@ export function useComponentState( const amountError = !isDirty ? undefined : Amounts.cmp(balance, amount) === -1 - ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` - : undefined; + ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` + : undefined; const unableToDeposit = Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts index 90ac020b7..b222709a7 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts @@ -23,14 +23,12 @@ import { Amounts, DepositGroupFees, parsePaytoUri, - stringifyPaytoUri + stringifyPaytoUri, } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { expect } from "chai"; import { tests } from "../../../../web-util/src/index.browser.js"; -import { - createWalletApiMock, nullFunction -} from "../../test-utils.js"; +import { createWalletApiMock, nullFunction } from "../../test-utils.js"; import { useComponentState } from "./state.js"; @@ -71,16 +69,21 @@ describe("DepositPage states", () => { }, ); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status }) => { - expect(status).equal("loading"); - }, - ({ status }) => { - expect(status).equal("no-enough-balance"); - }, - ], TestingContext) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status }) => { + expect(status).equal("loading"); + }, + ({ status }) => { + expect(status).equal("no-enough-balance"); + }, + ], + TestingContext, + ); - expect(hookBehavior).deep.equal({ result: "ok" }) + expect(hookBehavior).deep.equal({ result: "ok" }); expect(handler.getCallingQueueState()).eq("empty"); }); @@ -107,16 +110,21 @@ describe("DepositPage states", () => { }, ); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status }) => { - expect(status).equal("loading"); - }, - ({ status }) => { - expect(status).equal("no-accounts"); - }, - ], TestingContext) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status }) => { + expect(status).equal("loading"); + }, + ({ status }) => { + expect(status).equal("no-accounts"); + }, + ], + TestingContext, + ); - expect(hookBehavior).deep.equal({ result: "ok" }) + expect(hookBehavior).deep.equal({ result: "ok" }); expect(handler.getCallingQueueState()).eq("empty"); }); @@ -161,24 +169,29 @@ describe("DepositPage states", () => { withoutFee(), ); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status }) => { - expect(status).equal("loading"); - }, - ({ status }) => { - expect(status).equal("loading"); - }, - (state) => { - if (state.status !== "ready") expect.fail(); - expect(state.cancelHandler.onClick).not.undefined; - expect(state.currency).eq(currency); - expect(state.account.value).eq(stringifyPaytoUri(ibanPayto.uri)); - expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(state.depositHandler.onClick).undefined; - }, - ], TestingContext) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status }) => { + expect(status).equal("loading"); + }, + ({ status }) => { + expect(status).equal("loading"); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + expect(state.cancelHandler.onClick).not.undefined; + expect(state.currency).eq(currency); + expect(state.account.value).eq(stringifyPaytoUri(ibanPayto.uri)); + expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); + expect(state.depositHandler.onClick).undefined; + }, + ], + TestingContext, + ); - expect(hookBehavior).deep.equal({ result: "ok" }) + expect(hookBehavior).deep.equal({ result: "ok" }); expect(handler.getCallingQueueState()).eq("empty"); }); @@ -218,37 +231,42 @@ describe("DepositPage states", () => { const accountSelected = stringifyPaytoUri(ibanPayto.uri); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status }) => { - expect(status).equal("loading"); - }, - ({ status }) => { - expect(status).equal("loading"); - }, - (state) => { - if (state.status !== "ready") expect.fail(); - expect(state.cancelHandler.onClick).not.undefined; - expect(state.currency).eq(currency); - expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri)); - expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(state.depositHandler.onClick).undefined; - expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - expect(state.account.onChange).not.undefined; - - state.account.onChange!(accountSelected); - }, - (state) => { - if (state.status !== "ready") expect.fail(); - expect(state.cancelHandler.onClick).not.undefined; - expect(state.currency).eq(currency); - expect(state.account.value).eq(accountSelected); - expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - expect(state.depositHandler.onClick).undefined; - }, - ], TestingContext) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status }) => { + expect(status).equal("loading"); + }, + ({ status }) => { + expect(status).equal("loading"); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + expect(state.cancelHandler.onClick).not.undefined; + expect(state.currency).eq(currency); + expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri)); + expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); + expect(state.depositHandler.onClick).undefined; + expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); + expect(state.account.onChange).not.undefined; + + state.account.onChange!(accountSelected); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + expect(state.cancelHandler.onClick).not.undefined; + expect(state.currency).eq(currency); + expect(state.account.value).eq(accountSelected); + expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); + expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); + expect(state.depositHandler.onClick).undefined; + }, + ], + TestingContext, + ); - expect(hookBehavior).deep.equal({ result: "ok" }) + expect(hookBehavior).deep.equal({ result: "ok" }); expect(handler.getCallingQueueState()).eq("empty"); }); @@ -292,52 +310,58 @@ describe("DepositPage states", () => { const accountSelected = stringifyPaytoUri(ibanPayto.uri); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status }) => { - expect(status).equal("loading"); - }, - ({ status }) => { - expect(status).equal("loading"); - }, - (state) => { - if (state.status !== "ready") expect.fail(); - expect(state.cancelHandler.onClick).not.undefined; - expect(state.currency).eq(currency); - expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri)); - expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(state.depositHandler.onClick).undefined; - expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - expect(state.account.onChange).not.undefined; - - state.account.onChange!(accountSelected); - }, - (state) => { - if (state.status !== "ready") expect.fail(); - expect(state.cancelHandler.onClick).not.undefined; - expect(state.currency).eq(currency); - expect(state.account.value).eq(accountSelected); - expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(state.depositHandler.onClick).undefined; - expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); - - expect(state.amount.onInput).not.undefined; - if (!state.amount.onInput) return; - state.amount.onInput(Amounts.parseOrThrow("EUR:10")); - }, - (state) => { - if (state.status !== "ready") expect.fail(); - expect(state.cancelHandler.onClick).not.undefined; - expect(state.currency).eq(currency); - expect(state.account.value).eq(accountSelected); - expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:10")); - expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); - expect(state.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); - expect(state.depositHandler.onClick).not.undefined; - }, - ], TestingContext) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status }) => { + expect(status).equal("loading"); + }, + ({ status }) => { + expect(status).equal("loading"); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + expect(state.cancelHandler.onClick).not.undefined; + expect(state.currency).eq(currency); + expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri)); + expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); + expect(state.depositHandler.onClick).undefined; + expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); + expect(state.account.onChange).not.undefined; + + state.account.onChange!(accountSelected); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + expect(state.cancelHandler.onClick).not.undefined; + expect(state.currency).eq(currency); + expect(state.account.value).eq(accountSelected); + expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); + expect(state.depositHandler.onClick).undefined; + expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); + + expect(state.amount.onInput).not.undefined; + if (!state.amount.onInput) return; + state.amount.onInput(Amounts.parseOrThrow("EUR:10")); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + expect(state.cancelHandler.onClick).not.undefined; + expect(state.currency).eq(currency); + expect(state.account.value).eq(accountSelected); + expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:10")); + expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); + expect(state.totalToDeposit).deep.eq( + Amounts.parseOrThrow(`${currency}:7`), + ); + expect(state.depositHandler.onClick).not.undefined; + }, + ], + TestingContext, + ); - expect(hookBehavior).deep.equal({ result: "ok" }) + expect(hookBehavior).deep.equal({ result: "ok" }); expect(handler.getCallingQueueState()).eq("empty"); - }); }); |