diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
5 files changed, 144 insertions, 27 deletions
diff --git a/packages/taler-wallet-webextension/src/pwa/index.html b/packages/taler-wallet-webextension/src/pwa/index.html index 4ffbe5205..c150ee68d 100644 --- a/packages/taler-wallet-webextension/src/pwa/index.html +++ b/packages/taler-wallet-webextension/src/pwa/index.html @@ -23,7 +23,6 @@ function openPopup() { document.getElementById("popup-overlay").style.display = "flex"; window.frames["popup"].location = "popup.html"; - window.frames["popup"]; } function closePopup() { document.getElementById("popup-overlay").style.display = "none"; @@ -37,6 +36,9 @@ function closeWallet() { redirectWallet("about:blank"); } + function reloadWallet() { + window.frames["wallet"].location.reload() + } function openPage() { window.frames["other"].location = document.getElementById("page-url").value; @@ -44,15 +46,19 @@ </script> <button value="asd" onclick="openPopup()">open popup</button> <button value="asd" onclick="closeWallet();openWallet()"> - reload wallet page + restart + </button> + <button value="asd" onclick="reloadWallet()"> + refresh </button> <br /> <iframe id="wallet-window" name="wallet" src="wallet.html" - width="1000" - height="100%" + style="height: calc(100% - 30px)" + width="850" + height="90%" > </iframe> <!-- <input id="page-url" type="text" /> @@ -70,14 +76,14 @@ height="325" > </iframe> --> - <hr /> - <div class="overlay" id="popup-overlay"> + <div class="overlay" id="popup-overlay" onclick="closePopup()"> + <iframe - id="popup-window" - name="popup" - src="about:blank" - width="500" - height="325" + id="popup-window" + name="popup" + src="about:blank" + width="500" + height="325" > </iframe> </div> 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 <http://www.gnu.org/licenses/> */ -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<State> { 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<any>({}); + 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<State> { 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<State> { }, 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<State> { 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 ( <Container> <h1> - <i18n.Translate>Specify the amount and the origin</i18n.Translate> + <i18n.Translate>Specify the amount and the origin2</i18n.Translate> </h1> + <pre>{JSON.stringify(amounts["withdrawal"], undefined, 2)}</pre> <Grid container columns={2} justifyContent="space-between"> <AmountField label={i18n.str`Amount`} required handler={amountHandler} /> + <Checkbox + label={i18n.str`Raw mode`} + name="rawMode" + enabled={mode.value!} + onToggle={mode.button.onClick!} + /> + <Button onClick={selectCurrency.onClick}> <i18n.Translate>Change currency</i18n.Translate> </Button> @@ -281,6 +293,7 @@ export function ReadyGetView({ } export function ReadySendView({ amountHandler, + amounts, goToBank, goToWallet, previous, @@ -293,6 +306,7 @@ export function ReadySendView({ <h1> <i18n.Translate>Specify the amount and the destination</i18n.Translate> </h1> + <pre>{JSON.stringify(amounts["deposit"], undefined, 2)}</pre> <Grid container columns={2} justifyContent="space-between"> <AmountField diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx index d8a7c6090..9be12fb28 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx @@ -59,14 +59,29 @@ export function ExchangeAddPage({ currency, onBack }: Props): VNode { if (found) { throw Error("This exchange is already known"); } - return queryToSlashKeys(url); + return { + name: "1", + version: "15:0:0", + currency: "ARS", + }; }} - onConfirm={(url) => - queryToSlashKeys<TalerConfigResponse>(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<TalerConfigResponse>(url) + // .then((config) => { + // setVerifying({ url, config }); + // }) + // .catch((e) => e.message) } /> ); |