From bd57fa46a44db8e8c685b40f66eaa7998e71efa5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 15 Jan 2023 17:49:57 -0300 Subject: show deposit transaction info --- .../src/wallet/DepositPage/state.ts | 222 ++++++++++----------- 1 file changed, 103 insertions(+), 119 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts') diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index 1b628047a..d7d9f2da7 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -29,13 +29,14 @@ import { alertFromError, useAlertContext } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; +import { RecursiveState } from "../../utils/index.js"; import { Props, State } from "./index.js"; export function useComponentState({ amount: amountStr, onCancel, onSuccess, -}: Props): State { +}: Props): RecursiveState { const api = useBackendContext(); const { i18n } = useTranslationContext(); const { pushAlertOnError } = useAlertContext(); @@ -49,9 +50,7 @@ export function useComponentState({ ); const { accounts } = await api.wallet.call( WalletApiOperation.ListKnownBankAccounts, - { - currency, - }, + { currency }, ); return { accounts, balances }; @@ -61,13 +60,11 @@ export function useComponentState({ parsed !== undefined ? parsed : currency !== undefined - ? Amounts.zeroOfCurrency(currency) - : undefined; + ? Amounts.zeroOfCurrency(currency) + : undefined; // const [accountIdx, setAccountIdx] = useState(0); - const [amount, setAmount] = useState(initialValue ?? ({} as any)); const [selectedAccount, setSelectedAccount] = useState(); - const [fee, setFee] = useState(undefined); const [addingAccount, setAddingAccount] = useState(false); if (!currency) { @@ -91,7 +88,12 @@ export function useComponentState({ } const { accounts, balances } = hook.response; - // const parsedAmount = Amounts.parse(`${currency}:${amount}`); + async function updateAccountFromList(accountStr: string): Promise { + const uri = !accountStr ? undefined : parsePaytoUri(accountStr); + if (uri) { + setSelectedAccount(uri); + } + } if (addingAccount) { return { @@ -139,128 +141,110 @@ export function useComponentState({ const firstAccount = accounts[0].uri; const currentAccount = !selectedAccount ? firstAccount : selectedAccount; - if (fee === undefined) { - getFeeForAmount(currentAccount, amount, api.wallet).then((initialFee) => { - setFee(initialFee); - }); - return { - status: "loading", - error: undefined, - }; - } + return () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const [amount, setAmount] = useState( + initialValue ?? ({} as any), + ); + const amountStr = Amounts.stringify(amount); + const depositPaytoUri = `payto://${currentAccount.targetType}/${currentAccount.targetPath}`; - const accountMap = createLabelsForBankAccount(accounts); + // eslint-disable-next-line react-hooks/rules-of-hooks + const hook = useAsyncAsHook(async () => { + const fee = await api.wallet.call(WalletApiOperation.GetFeeForDeposit, { + amount: amountStr, + depositPaytoUri, + }); - async function updateAccountFromList(accountStr: string): Promise { - const uri = !accountStr ? undefined : parsePaytoUri(accountStr); - if (uri) { - try { - const result = await getFeeForAmount(uri, amount, api.wallet); - setSelectedAccount(uri); - setFee(result); - } catch (e) { - setSelectedAccount(uri); - setFee(undefined); - } - } - } + return { fee }; + }, [amountStr, depositPaytoUri]); - async function updateAmount(newAmount: AmountJson): Promise { - // const parsed = Amounts.parse(`${currency}:${numStr}`); - try { - const result = await getFeeForAmount( - currentAccount, - newAmount, - api.wallet, - ); - setAmount(newAmount); - setFee(result); - } catch (e) { - setAmount(newAmount); - setFee(undefined); + if (!hook) { + return { + status: "loading", + error: undefined, + }; + } + if (hook.hasError) { + return { + status: "error", + error: alertFromError( + i18n.str`Could not load fee for amount ${amountStr}`, + hook, + ), + }; } - } - const totalFee = - fee !== undefined - ? Amounts.sum([fee.wire, fee.coin, fee.refresh]).amount - : Amounts.zeroOfCurrency(currency); + const { fee } = hook.response; - const totalToDeposit = - fee !== undefined - ? Amounts.sub(amount, totalFee).amount - : Amounts.zeroOfCurrency(currency); + const accountMap = createLabelsForBankAccount(accounts); - const isDirty = amount !== initialValue; - const amountError = !isDirty - ? undefined - : Amounts.cmp(balance, amount) === -1 - ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` - : undefined; + const totalFee = + fee !== undefined + ? Amounts.sum([fee.wire, fee.coin, fee.refresh]).amount + : Amounts.zeroOfCurrency(currency); - const unableToDeposit = - Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee - fee === undefined || //no fee calculated yet - amountError !== undefined; //amount field may be invalid + const totalToDeposit = + fee !== undefined + ? Amounts.sub(amount, totalFee).amount + : Amounts.zeroOfCurrency(currency); - async function doSend(): Promise { - if (!currency) return; + const isDirty = amount !== initialValue; + const amountError = !isDirty + ? undefined + : Amounts.cmp(balance, amount) === -1 + ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` + : undefined; - const depositPaytoUri = stringifyPaytoUri(currentAccount); - const amountStr = Amounts.stringify(amount); - await api.wallet.call(WalletApiOperation.CreateDepositGroup, { - amount: amountStr, - depositPaytoUri, - }); - onSuccess(currency); - } + const unableToDeposit = + Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee + fee === undefined || //no fee calculated yet + amountError !== undefined; //amount field may be invalid - return { - status: "ready", - error: undefined, - currency, - amount: { - value: amount, - onInput: pushAlertOnError(updateAmount), - error: amountError, - }, - onAddAccount: { - onClick: pushAlertOnError(async () => { - setAddingAccount(true); - }), - }, - account: { - list: accountMap, - value: stringifyPaytoUri(currentAccount), - onChange: pushAlertOnError(updateAccountFromList), - }, - currentAccount, - cancelHandler: { - onClick: pushAlertOnError(async () => { - onCancel(currency); - }), - }, - depositHandler: { - onClick: unableToDeposit ? undefined : pushAlertOnError(doSend), - }, - totalFee, - totalToDeposit, - // currentAccount, - // parsedAmount, - }; -} + async function doSend(): Promise { + if (!currency) return; -async function getFeeForAmount( - p: PaytoUri, - a: AmountJson, - wallet: ReturnType["wallet"], -): Promise { - const depositPaytoUri = `payto://${p.targetType}/${p.targetPath}`; - const amount = Amounts.stringify(a); - return await wallet.call(WalletApiOperation.GetFeeForDeposit, { - amount, - depositPaytoUri, - }); + const depositPaytoUri = stringifyPaytoUri(currentAccount); + const amountStr = Amounts.stringify(amount); + await api.wallet.call(WalletApiOperation.CreateDepositGroup, { + amount: amountStr, + depositPaytoUri, + }); + onSuccess(currency); + } + + return { + status: "ready", + error: undefined, + currency, + amount: { + value: amount, + onInput: pushAlertOnError(async (a) => setAmount(a)), + error: amountError, + }, + onAddAccount: { + onClick: pushAlertOnError(async () => { + setAddingAccount(true); + }), + }, + account: { + list: accountMap, + value: stringifyPaytoUri(currentAccount), + onChange: pushAlertOnError(updateAccountFromList), + }, + currentAccount, + cancelHandler: { + onClick: pushAlertOnError(async () => { + onCancel(currency); + }), + }, + depositHandler: { + onClick: unableToDeposit ? undefined : pushAlertOnError(doSend), + }, + totalFee, + totalToDeposit, + }; + }; } export function labelForAccountType(id: string): string { -- cgit v1.2.3