From 4e7967dbace6734ac364c30a9dc691c1014bea45 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 13 Jun 2023 16:46:31 -0300 Subject: showing off information about operation plan --- .../src/wallet/DestinationSelection/index.ts | 8 +- .../src/wallet/DestinationSelection/state.ts | 90 ++++++++++++++++++++-- .../src/wallet/DestinationSelection/views.tsx | 16 +++- .../src/wallet/ExchangeAddPage.tsx | 29 +++++-- 4 files changed, 127 insertions(+), 16 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet') diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts index 9a0ba1d88..e3f4a89cb 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts @@ -17,7 +17,11 @@ import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; import { ErrorAlert } from "../../context/alert.js"; -import { AmountFieldHandler, ButtonHandler } from "../../mui/handlers.js"; +import { + AmountFieldHandler, + ButtonHandler, + ToggleHandler, +} from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; import { ReadyView, SelectCurrencyView } from "./views.js"; @@ -71,6 +75,8 @@ export namespace State { goToBank: ButtonHandler; goToWallet: ButtonHandler; amountHandler: AmountFieldHandler; + amounts: any; + mode: ToggleHandler; } } diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts index b76543b46..b6d4f4cc2 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts @@ -14,9 +14,9 @@ GNU Taler; see the file COPYING. If not, see */ -import { Amounts } from "@gnu-taler/taler-util"; +import { Amounts, TransactionType } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; -import { useState } from "preact/hooks"; +import { useEffect, useState } from "preact/hooks"; import { alertFromError, useAlertContext } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; @@ -34,19 +34,77 @@ export function useComponentState(props: Props): RecursiveState { const hook = useAsyncAsHook(async () => { if (!parsedInitialAmount) return undefined; - const resp = await api.wallet.call(WalletApiOperation.GetBalanceDetail, { + const balance = await api.wallet.call(WalletApiOperation.GetBalanceDetail, { currency: parsedInitialAmount.currency, }); - return resp; + return { balance }; }); - const total = hook && !hook.hasError ? hook.response : undefined; + const info = hook && !hook.hasError ? hook.response : undefined; // const initialCurrency = parsedInitialAmount?.currency; const [amount, setAmount] = useState( !parsedInitialAmount ? undefined : parsedInitialAmount, ); + const [rawMode, setRawMode] = useState(false); + + const [fee, setFee] = useState({}); + useEffect(() => { + if (!amount) return; + + // const type = TransactionType.Deposit + [ + TransactionType.Deposit as const, + TransactionType.Withdrawal as const, + ].forEach((type) => { + Promise.all([ + api.wallet.call(WalletApiOperation.GetPlanForOperation, { + type, + mode: "effective", + account: "payto://iban/DE123", + instructedAmount: Amounts.stringify(amount), + }), + api.wallet.call(WalletApiOperation.GetPlanForOperation, { + type, + mode: "raw", + account: "payto://iban/DE123", + instructedAmount: Amounts.stringify(amount), + }), + ]).then(([effective1, raw1]) => { + Promise.all([ + api.wallet.call(WalletApiOperation.GetPlanForOperation, { + type, + mode: "raw", + instructedAmount: effective1.rawAmount, + account: "payto://iban/DE123", + }), + api.wallet.call(WalletApiOperation.GetPlanForOperation, { + type, + mode: "effective", + instructedAmount: raw1.effectiveAmount, + account: "payto://iban/DE123", + }), + ]).then(([effective2, raw2]) => { + setFee({ + ...fee, + [type]: { + effective: effective1, + raw: raw1, + // effective: { + // // first: effective1, + // // second: effective2, + // }, + // raw: { + // // first: raw1, + // // second: raw2, + // }, + }, + }); + }); + }); + }); + }, [amount?.value, amount?.fraction, rawMode]); //FIXME: get this information from wallet // eslint-disable-next-line no-constant-condition @@ -118,6 +176,15 @@ export function useComponentState(props: Props): RecursiveState { return { status: "ready", error: undefined, + amounts: fee, + mode: { + button: { + onClick: pushAlertOnError(async () => { + setRawMode(!rawMode); + }), + }, + value: rawMode, + }, previous, selectCurrency: { onClick: pushAlertOnError(async () => { @@ -133,10 +200,10 @@ export function useComponentState(props: Props): RecursiveState { }, sendAll: { onClick: - total === undefined + info === undefined ? undefined : pushAlertOnError(async () => { - setAmount(total.balanceMerchantDepositable); + setAmount(info.balance.balanceMerchantDepositable); }), }, goToWallet: { @@ -156,7 +223,16 @@ export function useComponentState(props: Props): RecursiveState { return { status: "ready", error: undefined, + amounts: fee, previous, + mode: { + button: { + onClick: pushAlertOnError(async () => { + setRawMode(!rawMode); + }), + }, + value: rawMode, + }, selectCurrency: { onClick: pushAlertOnError(async () => { setAmount(undefined); diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx index 47c5ffea1..2c862202a 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx @@ -34,6 +34,8 @@ import arrowIcon from "../../svg/chevron-down.inline.svg"; import bankIcon from "../../svg/ri-bank-line.inline.svg"; import { assertUnreachable } from "../../utils/index.js"; import { Contact, State } from "./index.js"; +import { useEffect } from "preact/hooks"; +import { Checkbox } from "../../components/Checkbox.js"; export function SelectCurrencyView({ currencies, @@ -192,6 +194,8 @@ export function ReadyView(props: State.Ready): VNode { export function ReadyGetView({ amountHandler, goToBank, + amounts, + mode, goToWallet, selectCurrency, previous, @@ -201,14 +205,22 @@ export function ReadyGetView({ return (

- Specify the amount and the origin + Specify the amount and the origin2

+
{JSON.stringify(amounts["withdrawal"], undefined, 2)}
+ + @@ -281,6 +293,7 @@ export function ReadyGetView({ } export function ReadySendView({ amountHandler, + amounts, goToBank, goToWallet, previous, @@ -293,6 +306,7 @@ export function ReadySendView({

Specify the amount and the destination

+
{JSON.stringify(amounts["deposit"], undefined, 2)}
- queryToSlashKeys(url) - .then((config) => { - setVerifying({ url, config }); - }) - .catch((e) => e.message) + onConfirm={ + async (url) => { + setVerifying({ + url, + config: { + name: "1", + version: "15:0:0", + currency: "ARS", + }, + }); + return undefined; + } + // queryToSlashKeys(url) + // .then((config) => { + // setVerifying({ url, config }); + // }) + // .catch((e) => e.message) } /> ); -- cgit v1.2.3