diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/DepositPage')
3 files changed, 138 insertions, 89 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts index eb97ccf7f..81d401a70 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts @@ -17,11 +17,22 @@ import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { AmountOrCurrencyErrorView, LoadingErrorView, NoAccountToDepositView, NoEnoughBalanceView, ReadyView } from "./views.js"; +import { + AmountOrCurrencyErrorView, + LoadingErrorView, + NoAccountToDepositView, + NoEnoughBalanceView, + ReadyView, +} from "./views.js"; import * as wxApi from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { AmountJson, PaytoUri } from "@gnu-taler/taler-util"; -import { ButtonHandler, SelectFieldHandler, TextFieldHandler, ToggleHandler } from "../../mui/handlers.js"; +import { + ButtonHandler, + SelectFieldHandler, + TextFieldHandler, + ToggleHandler, +} from "../../mui/handlers.js"; import { AddAccountPage } from "../AddAccount/index.js"; export interface Props { @@ -31,7 +42,8 @@ export interface Props { onSuccess: (currency: string) => void; } -export type State = State.Loading +export type State = + | State.Loading | State.LoadingUriError | State.AmountOrCurrencyError | State.NoEnoughBalance diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index 87705507c..57380a632 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -14,13 +14,24 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountJson, Amounts, DepositGroupFees, KnownBankAccountsInfo, parsePaytoUri, PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { + AmountJson, + Amounts, + DepositGroupFees, + KnownBankAccountsInfo, + parsePaytoUri, + PaytoUri, + stringifyPaytoUri, +} from "@gnu-taler/taler-util"; import { useState } from "preact/hooks"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import * as wxApi from "../../wxApi.js"; import { Props, State } from "./index.js"; -export function useComponentState({ amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props, api: typeof wxApi): State { +export function useComponentState( + { amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props, + api: typeof wxApi, +): State { const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr); const currency = parsed !== undefined ? parsed.currency : currencyStr; @@ -46,8 +57,8 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on if (!currency) { return { status: "amount-or-currency-error", - error: undefined - } + error: undefined, + }; } if (!hook) { @@ -60,7 +71,7 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on return { status: "loading-error", error: hook, - } + }; } const { accounts, balances } = hook.response; @@ -74,13 +85,12 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on onAccountAdded: (p: string) => { updateAccountFromList(p); setAddingAccount(false); - hook.retry() + hook.retry(); }, onCancel: () => { setAddingAccount(false); - } - , - } + }, + }; } const bs = balances.filter((b) => b.available.startsWith(currency)); @@ -103,13 +113,15 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on error: undefined, currency, onAddAccount: { - onClick: async () => { setAddingAccount(true) } + onClick: async () => { + setAddingAccount(true); + }, }, - } + }; } const accountMap = createLabelsForBankAccount(accounts); - accountMap[""] = "Select one account..." + accountMap[""] = "Select one account..."; async function updateAccountFromList(accountStr: string): Promise<void> { // const newSelected = !accountMap[accountStr] ? undefined : accountMap[accountStr]; @@ -144,18 +156,19 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on ? Amounts.sum([fee.wire, fee.coin, fee.refresh]).amount : Amounts.getZero(currency); - const totalToDeposit = parsedAmount && fee !== undefined - ? Amounts.sub(parsedAmount, totalFee).amount - : Amounts.getZero(currency); + const totalToDeposit = + parsedAmount && fee !== undefined + ? Amounts.sub(parsedAmount, totalFee).amount + : Amounts.getZero(currency); const isDirty = amount !== initialValue; const amountError = !isDirty ? undefined : !parsedAmount - ? "Invalid amount" - : Amounts.cmp(balance, parsedAmount) === -1 - ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` - : undefined; + ? "Invalid amount" + : Amounts.cmp(balance, parsedAmount) === -1 + ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` + : undefined; const unableToDeposit = !parsedAmount || @@ -181,10 +194,11 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on value: String(amount), onInput: updateAmount, error: amountError, - }, onAddAccount: { - onClick: async () => { setAddingAccount(true) } + onClick: async () => { + setAddingAccount(true); + }, }, account: { list: accountMap, @@ -219,22 +233,26 @@ async function getFeeForAmount( export function labelForAccountType(id: string) { switch (id) { - case "": return "Choose one"; - case "x-taler-bank": return "Taler Bank"; - case "bitcoin": return "Bitcoin"; - case "iban": return "IBAN"; - default: return id; + case "": + return "Choose one"; + case "x-taler-bank": + return "Taler Bank"; + case "bitcoin": + return "Bitcoin"; + case "iban": + return "IBAN"; + default: + return id; } } export function createLabelsForBankAccount( knownBankAccounts: Array<KnownBankAccountsInfo>, ): { [value: string]: string } { - const initialList: Record<string, string> = { - } + const initialList: Record<string, string> = {}; if (!knownBankAccounts.length) return initialList; return knownBankAccounts.reduce((prev, cur, i) => { - prev[stringifyPaytoUri(cur.uri)] = cur.alias + prev[stringifyPaytoUri(cur.uri)] = cur.alias; return prev; }, initialList); } diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts index a1d4ca85a..68df5e402 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts @@ -19,7 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts, Balance, BalancesResponse, DepositGroupFees, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { + Amounts, + Balance, + BalancesResponse, + DepositGroupFees, + parsePaytoUri, + stringifyPaytoUri, +} from "@gnu-taler/taler-util"; import { expect } from "chai"; import { mountHook } from "../../test-utils.js"; @@ -52,17 +59,19 @@ const nullFunction: any = () => null; type VoidFunction = () => void; describe("DepositPage states", () => { - it("should have status 'no-enough-balance' when balance is empty", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:0` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: {} }), - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:0` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: {} }), + } as Partial<typeof wxApi> as any, + ), ); { @@ -111,25 +120,28 @@ describe("DepositPage states", () => { uri: parsePaytoUri("payto://iban/ES8877998399652238")!, kyc_completed: false, currency: "EUR", - alias: "my iban account" + alias: "my iban account", }; const talerBankPayto = { uri: parsePaytoUri("payto://x-taler-bank/ES8877998399652238")!, kyc_completed: false, currency: "EUR", - alias: "my taler account" + alias: "my taler account", }; it("should have status 'ready' but unable to deposit ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + } as Partial<typeof wxApi> as any, + ), ); { @@ -155,14 +167,17 @@ describe("DepositPage states", () => { it.skip("should not be able to deposit more than the balance ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - getFeeForDeposit: withoutFee, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + getFeeForDeposit: withoutFee, + } as Partial<typeof wxApi> as any, + ), ); { @@ -217,14 +232,17 @@ describe("DepositPage states", () => { it.skip("should calculate the fee upon entering amount ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - getFeeForDeposit: withSomeFee, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + getFeeForDeposit: withSomeFee, + } as Partial<typeof wxApi> as any, + ), ); { @@ -281,16 +299,19 @@ describe("DepositPage states", () => { it("should calculate the fee upon selecting account ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ - accounts: [ibanPayto, talerBankPayto], - }), - getFeeForDeposit: freeJustForIBAN, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ + accounts: [ibanPayto, talerBankPayto], + }), + getFeeForDeposit: freeJustForIBAN, + } as Partial<typeof wxApi> as any, + ), ); { @@ -327,7 +348,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(""); @@ -358,7 +378,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(""); @@ -374,7 +393,6 @@ describe("DepositPage states", () => { expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); expect(r.depositHandler.onClick).undefined; - if (r.account.onChange === undefined) expect.fail(); r.account.onChange(stringifyPaytoUri(talerBankPayto.uri)); } @@ -391,7 +409,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(""); @@ -414,14 +431,17 @@ describe("DepositPage states", () => { it.skip("should be able to deposit if has the enough balance ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:15` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - getFeeForDeposit: withSomeFee, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:15` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + getFeeForDeposit: withSomeFee, + } as Partial<typeof wxApi> as any, + ), ); { @@ -456,7 +476,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:10`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(); |