diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
25 files changed, 312 insertions, 488 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts index 3205588af..2adcc9f74 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts @@ -15,9 +15,7 @@ */ import { - AmountJson, - BackupBackupProviderTerms, - TalerErrorDetail, + TalerErrorDetail } from "@gnu-taler/taler-util"; import { SyncTermsOfServiceResponse } from "@gnu-taler/taler-wallet-core"; import { Loading } from "../../components/Loading.js"; @@ -25,15 +23,13 @@ import { HookError } from "../../hooks/useAsyncAsHook.js"; import { ButtonHandler, TextFieldHandler, - ToggleHandler, + ToggleHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { - LoadingUriView, - SelectProviderView, - ConfirmProviderView, + ConfirmProviderView, LoadingUriView, + SelectProviderView } from "./views.js"; export interface Props { @@ -90,6 +86,6 @@ const viewMapping: StateViewMap<State> = { export const AddBackupProviderPage = compose( "AddBackupProvider", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts index 504ee4678..271a1bf98 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts @@ -17,15 +17,15 @@ import { canonicalizeBaseUrl, Codec, - TalerErrorDetail, + TalerErrorDetail } from "@gnu-taler/taler-util"; import { codecForSyncTermsOfServiceResponse, - WalletApiOperation, + WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useEffect, useState } from "preact/hooks"; +import { useBackendContext } from "../../context/backend.js"; import { assertUnreachable } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; type UrlState<T> = UrlOk<T> | UrlError; @@ -106,37 +106,37 @@ function useUrlState<T>( constHref == undefined ? undefined : async () => { - const req = await fetch(constHref).catch((e) => { - return setState({ - status: "network-error", - href: constHref, - }); + const req = await fetch(constHref).catch((e) => { + return setState({ + status: "network-error", + href: constHref, }); - if (!req) return; + }); + if (!req) return; - if (req.status >= 400 && req.status < 500) { - setState({ - status: "client-error", - code: req.status, - }); - return; - } - if (req.status > 500) { - setState({ - status: "server-error", - code: req.status, - }); - return; - } + if (req.status >= 400 && req.status < 500) { + setState({ + status: "client-error", + code: req.status, + }); + return; + } + if (req.status > 500) { + setState({ + status: "server-error", + code: req.status, + }); + return; + } - const json = await req.json(); - try { - const result = codec.decode(json); - setState({ status: "ok", result }); - } catch (e: any) { - setState({ status: "parsing-error", json }); - } - }, + const json = await req.json(); + try { + const result = codec.decode(json); + setState({ status: "ok", result }); + } catch (e: any) { + setState({ status: "parsing-error", json }); + } + }, [host, path], ); @@ -145,8 +145,8 @@ function useUrlState<T>( export function useComponentState( { currency, onBack, onComplete, onPaymentRequired }: Props, - api: typeof wxApi, ): State { + const api = useBackendContext() const [url, setHost] = useState<string | undefined>(); const [name, setName] = useState<string | undefined>(); const [tos, setTos] = useState(false); @@ -223,8 +223,8 @@ export function useComponentState( !urlState || urlState.status !== "ok" || !name ? undefined : async () => { - setShowConfirm(true); - }, + setShowConfirm(true); + }, }, urlOk: urlState?.status === "ok", url: { diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts index 1143853f8..929e051cb 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts @@ -19,12 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { expect } from "chai"; +import { tests } from "../../../../web-util/src/index.browser.js"; import { - createWalletApiMock, - mountHook, - nullFunction, + createWalletApiMock, nullFunction } from "../../test-utils.js"; import { Props } from "./index.js"; import { useComponentState } from "./state.js"; @@ -36,44 +34,21 @@ const props: Props = { onPaymentRequired: nullFunction, }; describe("AddBackupProvider states", () => { - it("should start in 'select-provider' state", async () => { - const { handler, mock } = createWalletApiMock(); - - // handler.addWalletCallResponse( - // WalletApiOperation.ListKnownBankAccounts, - // undefined, - // { - // accounts: [], - // }, - // ); - - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const state = pullLastResultOrThrow(); - expect(state.status).equal("select-provider"); - if (state.status !== "select-provider") return; - expect(state.name.value).eq(""); - expect(state.url.value).eq(""); - } - //FIXME: this should not make an extra update - /** - * this may be due to useUrlState because is using an effect over - * a dependency with a timeout - */ - // NOTE: do not remove this comment, keeping as an example - // await waitForStateUpdate() - // { - // const state = pullLastResultOrThrow(); - // expect(state.status).equal("select-provider"); - // if (state.status !== "select-provider") return; - // expect(state.name.value).eq("") - // expect(state.url.value).eq("") - // } - - await assertNoPendingUpdate(); + it("should start in 'select-provider' state", async () => { + const { handler, TestingContext } = createWalletApiMock(); + + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + (state) => { + expect(state.status).equal("select-provider"); + if (state.status !== "select-provider") return; + expect(state.name.value).eq(""); + expect(state.url.value).eq(""); + }, + ], TestingContext) + + expect(hookBehavior).deep.equal({ result: "ok" }) expect(handler.getCallingQueueState()).eq("empty"); + }); }); diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index c9dbfb64d..6e987f965 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -42,11 +42,11 @@ import { SmallText, WarningBox, } from "../components/styled/index.js"; +import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; import { Pages } from "../NavigationBar.js"; -import { wxApi } from "../wxApi.js"; interface Props { onAddProvider: () => Promise<void>; @@ -107,8 +107,9 @@ export function ShowRecoveryInfo({ export function BackupPage({ onAddProvider }: Props): VNode { const { i18n } = useTranslationContext(); + const api = useBackendContext(); const status = useAsyncAsHook(() => - wxApi.wallet.call(WalletApiOperation.GetBackupInfo, {}), + api.wallet.call(WalletApiOperation.GetBackupInfo, {}), ); const [recoveryInfo, setRecoveryInfo] = useState<string>(""); if (!status) { @@ -124,7 +125,7 @@ export function BackupPage({ onAddProvider }: Props): VNode { } async function getRecoveryInfo(): Promise<void> { - const r = await wxApi.wallet.call( + const r = await api.wallet.call( WalletApiOperation.ExportBackupRecovery, {}, ); @@ -158,7 +159,7 @@ export function BackupPage({ onAddProvider }: Props): VNode { providers={providers} onAddProvider={onAddProvider} onSyncAll={async () => - wxApi.wallet.call(WalletApiOperation.RunBackupCycle, {}).then() + api.wallet.call(WalletApiOperation.RunBackupCycle, {}).then() } onShowInfo={getRecoveryInfo} /> diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts index 3f23515b2..ad4c759bf 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts @@ -20,11 +20,9 @@ import { HookError } from "../../hooks/useAsyncAsHook.js"; import { AmountFieldHandler, ButtonHandler, - SelectFieldHandler, - TextFieldHandler, + SelectFieldHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { ManageAccountPage } from "../ManageAccount/index.js"; import { useComponentState } from "./state.js"; import { @@ -32,7 +30,7 @@ import { LoadingErrorView, NoAccountToDepositView, NoEnoughBalanceView, - ReadyView, + ReadyView } from "./views.js"; export interface Props { @@ -119,6 +117,6 @@ const viewMapping: StateViewMap<State> = { export const DepositPage = compose( "DepositPage", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index bbf2c2771..5ad0841dc 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -21,18 +21,18 @@ import { KnownBankAccountsInfo, parsePaytoUri, PaytoUri, - stringifyPaytoUri, + stringifyPaytoUri } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { useBackendContext } from "../../context/backend.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; -import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; export function useComponentState( { amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props, - api: typeof wxApi, ): State { + const api = useBackendContext() const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr); const currency = parsed !== undefined ? parsed.currency : currencyStr; @@ -55,8 +55,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>(); @@ -134,7 +134,7 @@ export function useComponentState( const currentAccount = !selectedAccount ? firstAccount : selectedAccount; if (fee === undefined) { - getFeeForAmount(currentAccount, amount, api).then((initialFee) => { + getFeeForAmount(currentAccount, amount, api.wallet).then((initialFee) => { setFee(initialFee); }); return { @@ -149,7 +149,7 @@ export function useComponentState( const uri = !accountStr ? undefined : parsePaytoUri(accountStr); if (uri) { try { - const result = await getFeeForAmount(uri, amount, api); + const result = await getFeeForAmount(uri, amount, api.wallet); setSelectedAccount(uri); setFee(result); } catch (e) { @@ -162,7 +162,7 @@ export function useComponentState( async function updateAmount(newAmount: AmountJson): Promise<void> { // const parsed = Amounts.parse(`${currency}:${numStr}`); try { - const result = await getFeeForAmount(currentAccount, newAmount, api); + const result = await getFeeForAmount(currentAccount, newAmount, api.wallet); setAmount(newAmount); setFee(result); } catch (e) { @@ -185,8 +185,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 @@ -243,11 +243,11 @@ export function useComponentState( async function getFeeForAmount( p: PaytoUri, a: AmountJson, - api: typeof wxApi, + wallet: ReturnType<typeof useBackendContext>["wallet"], ): Promise<DepositGroupFees> { const depositPaytoUri = `payto://${p.targetType}/${p.targetPath}`; const amount = Amounts.stringify(a); - return await api.wallet.call(WalletApiOperation.GetFeeForDeposit, { + return await wallet.call(WalletApiOperation.GetFeeForDeposit, { amount, depositPaytoUri, }); diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts index 3f08c678c..90ac020b7 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts @@ -23,14 +23,13 @@ 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, - mountHook, - nullFunction, + createWalletApiMock, nullFunction } from "../../test-utils.js"; import { useComponentState } from "./state.js"; @@ -50,7 +49,7 @@ const withSomeFee = (): DepositGroupFees => ({ describe("DepositPage states", () => { it("should have status 'no-enough-balance' when balance is empty", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); const props = { currency, onCancel: nullFunction, onSuccess: nullFunction }; handler.addWalletCallResponse(WalletApiOperation.GetBalances, undefined, { @@ -72,27 +71,21 @@ describe("DepositPage states", () => { }, ); - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - - expect(await waitForStateUpdate()).true; - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("no-enough-balance"); - } + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + ({ status }) => { + expect(status).equal("loading"); + }, + ({ status }) => { + expect(status).equal("no-enough-balance"); + }, + ], TestingContext) - await assertNoPendingUpdate(); + expect(hookBehavior).deep.equal({ result: "ok" }) expect(handler.getCallingQueueState()).eq("empty"); }); it("should have status 'no-accounts' when balance is not empty and accounts is empty", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); const props = { currency, onCancel: nullFunction, onSuccess: nullFunction }; handler.addWalletCallResponse(WalletApiOperation.GetBalances, undefined, { @@ -113,22 +106,17 @@ describe("DepositPage states", () => { accounts: [], }, ); - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - - expect(await waitForStateUpdate()).true; - { - const r = pullLastResultOrThrow(); - if (r.status !== "no-accounts") expect.fail(); - // expect(r.cancelHandler.onClick).not.undefined; - } - - await assertNoPendingUpdate(); + + 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(handler.getCallingQueueState()).eq("empty"); }); @@ -146,7 +134,7 @@ describe("DepositPage states", () => { }; it("should have status 'ready' but unable to deposit ", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); const props = { currency, onCancel: nullFunction, onSuccess: nullFunction }; handler.addWalletCallResponse(WalletApiOperation.GetBalances, undefined, { @@ -173,37 +161,29 @@ describe("DepositPage states", () => { withoutFee(), ); - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - - expect(await waitForStateUpdate()).true; - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - expect(await waitForStateUpdate()).true; - - { - const r = pullLastResultOrThrow(); - if (r.status !== "ready") expect.fail(); - expect(r.cancelHandler.onClick).not.undefined; - expect(r.currency).eq(currency); - expect(r.account.value).eq(stringifyPaytoUri(ibanPayto.uri)); - expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(r.depositHandler.onClick).undefined; - } - - await assertNoPendingUpdate(); + 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(handler.getCallingQueueState()).eq("empty"); }); it("should not be able to deposit more than the balance ", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); const props = { currency, onCancel: nullFunction, onSuccess: nullFunction }; handler.addWalletCallResponse(WalletApiOperation.GetBalances, undefined, { @@ -235,134 +215,45 @@ describe("DepositPage states", () => { undefined, withoutFee(), ); - handler.addWalletCallResponse( - WalletApiOperation.GetFeeForDeposit, - undefined, - withoutFee(), - ); - handler.addWalletCallResponse( - WalletApiOperation.GetFeeForDeposit, - undefined, - withoutFee(), - ); - - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - expect(await waitForStateUpdate()).true; - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - - expect(await waitForStateUpdate()).true; const accountSelected = stringifyPaytoUri(ibanPayto.uri); - { - const r = pullLastResultOrThrow(); - if (r.status !== "ready") expect.fail(); - expect(r.cancelHandler.onClick).not.undefined; - expect(r.currency).eq(currency); - expect(r.account.value).eq(stringifyPaytoUri(talerBankPayto.uri)); - expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(r.depositHandler.onClick).undefined; - expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - expect(r.account.onChange).not.undefined; - - r.account.onChange!(accountSelected); - } - - expect(await waitForStateUpdate()).true; - - { - const r = pullLastResultOrThrow(); - if (r.status !== "ready") expect.fail(); - expect(r.cancelHandler.onClick).not.undefined; - expect(r.currency).eq(currency); - expect(r.account.value).eq(accountSelected); - expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - expect(r.depositHandler.onClick).undefined; - } - - await assertNoPendingUpdate(); - }); + 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) - // it("should calculate the fee upon entering amount ", async () => { - // const { pullLastResultOrThrow, waitForStateUpdate, 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, - // ), - // ); - - // { - // const { status } = getLastResultOrThrow(); - // expect(status).equal("loading"); - // } - - // await waitNextUpdate(); - - // { - // const r = getLastResultOrThrow(); - // if (r.status !== "ready") expect.fail(); - // expect(r.cancelHandler.onClick).not.undefined; - // expect(r.currency).eq(currency); - // expect(r.account.value).eq(accountSelected); - // expect(r.amount.value).eq("0"); - // expect(r.depositHandler.onClick).undefined; - // expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - - // r.amount.onInput("10"); - // } - - // expect(await waitForStateUpdate()).true; - - // { - // const r = pullLastResultOrThrow(); - // if (r.status !== "ready") expect.fail(); - // expect(r.cancelHandler.onClick).not.undefined; - // expect(r.currency).eq(currency); - // expect(r.account.value).eq(accountSelected); - // expect(r.amount.value).eq("10"); - // expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - // expect(r.depositHandler.onClick).undefined; - - // r.amount.onInput("3"); - // } - - // expect(await waitForStateUpdate()).true; - - // { - // const r = pullLastResultOrThrow(); - // if (r.status !== "ready") expect.fail(); - // expect(r.cancelHandler.onClick).not.undefined; - // expect(r.currency).eq(currency); - // expect(r.account.value).eq(accountSelected); - // expect(r.amount.value).eq("3"); - // expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - // expect(r.depositHandler.onClick).not.undefined; - // } - - // await assertNoPendingUpdate(); - // expect(handler.getCallingQueueState()).eq("empty") - // }); + expect(hookBehavior).deep.equal({ result: "ok" }) + expect(handler.getCallingQueueState()).eq("empty"); + }); it("should calculate the fee upon entering amount ", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); const props = { currency, onCancel: nullFunction, onSuccess: nullFunction }; handler.addWalletCallResponse(WalletApiOperation.GetBalances, undefined, { @@ -399,70 +290,54 @@ describe("DepositPage states", () => { withSomeFee(), ); - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - - expect(await waitForStateUpdate()).true; - - { - const { status } = pullLastResultOrThrow(); - expect(status).equal("loading"); - } - - expect(await waitForStateUpdate()).true; const accountSelected = stringifyPaytoUri(ibanPayto.uri); - { - const r = pullLastResultOrThrow(); - if (r.status !== "ready") expect.fail(); - expect(r.cancelHandler.onClick).not.undefined; - expect(r.currency).eq(currency); - expect(r.account.value).eq(stringifyPaytoUri(talerBankPayto.uri)); - expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(r.depositHandler.onClick).undefined; - expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); - expect(r.account.onChange).not.undefined; - - r.account.onChange!(accountSelected); - } - - expect(await waitForStateUpdate()).true; - - { - const r = pullLastResultOrThrow(); - if (r.status !== "ready") expect.fail(); - expect(r.cancelHandler.onClick).not.undefined; - expect(r.currency).eq(currency); - expect(r.account.value).eq(accountSelected); - expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0")); - expect(r.depositHandler.onClick).undefined; - expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); - - expect(r.amount.onInput).not.undefined; - if (!r.amount.onInput) return; - r.amount.onInput(Amounts.parseOrThrow("EUR:10")); - } - - expect(await waitForStateUpdate()).true; - - { - const r = pullLastResultOrThrow(); - if (r.status !== "ready") expect.fail(); - expect(r.cancelHandler.onClick).not.undefined; - expect(r.currency).eq(currency); - expect(r.account.value).eq(accountSelected); - expect(r.amount.value).deep.eq(Amounts.parseOrThrow("EUR:10")); - expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); - expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); - expect(r.depositHandler.onClick).not.undefined; - } - - await assertNoPendingUpdate(); + 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(handler.getCallingQueueState()).eq("empty"); + }); }); diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts index 2f066d744..f1e766a18 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts @@ -18,7 +18,6 @@ import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { AmountFieldHandler, ButtonHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { LoadingUriView, ReadyView, SelectCurrencyView } from "./views.js"; @@ -88,6 +87,6 @@ const viewMapping: StateViewMap<State> = { export const DestinationSelectionPage = compose( "DestinationSelectionPage", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts index a67f926bc..0621d3304 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts @@ -17,15 +17,15 @@ import { Amounts } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { useBackendContext } from "../../context/backend.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { assertUnreachable, RecursiveState } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { Contact, Props, State } from "./index.js"; export function useComponentState( props: Props, - api: typeof wxApi, ): RecursiveState<State> { + const api = useBackendContext() const parsedInitialAmount = !props.amount ? undefined : Amounts.parse(props.amount); diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts index c2aa04849..afba5db35 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts @@ -23,11 +23,12 @@ import { Amounts, ExchangeEntryStatus, ExchangeListItem, - ExchangeTosStatus, + ExchangeTosStatus } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { expect } from "chai"; -import { createWalletApiMock, mountHook } from "../../test-utils.js"; +import { tests } from "../../../../web-util/src/index.browser.js"; +import { createWalletApiMock, nullFunction } from "../../test-utils.js"; import { useComponentState } from "./state.js"; const exchangeArs: ExchangeListItem = { @@ -42,7 +43,7 @@ const exchangeArs: ExchangeListItem = { describe("Destination selection states", () => { it("should select currency if no amount specified", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); handler.addWalletCallResponse( WalletApiOperation.ListExchanges, @@ -54,83 +55,65 @@ describe("Destination selection states", () => { const props = { type: "get" as const, - goToWalletManualWithdraw: () => { - return null; - }, - goToWalletWalletInvoice: () => { - null; - }, + goToWalletManualWithdraw: nullFunction, + goToWalletWalletInvoice: nullFunction, }; - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const state = pullLastResultOrThrow(); - - if (state.status !== "loading") expect.fail(); - if (state.error) expect.fail(); - } - - expect(await waitForStateUpdate()).true; - - { - const state = pullLastResultOrThrow(); - - if (state.status !== "select-currency") expect.fail(); - if (state.error) expect.fail(); - expect(state.currencies).deep.eq({ - ARS: "ARS", - "": "Select a currency", - }); - - state.onCurrencySelected(exchangeArs.currency!); - } - - expect(await waitForStateUpdate()).true; - - { - const state = pullLastResultOrThrow(); - if (state.status !== "ready") expect.fail(); - if (state.error) expect.fail(); - expect(state.goToBank.onClick).eq(undefined); - expect(state.goToWallet.onClick).eq(undefined); + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + ({ status }) => { + expect(status).equal("loading"); + }, + (state) => { + if (state.status !== "select-currency") expect.fail(); + if (state.error) expect.fail(); + expect(state.currencies).deep.eq({ + ARS: "ARS", + "": "Select a currency", + }); + + state.onCurrencySelected(exchangeArs.currency!); + }, + (state) => { + if (state.status !== "ready") expect.fail(); + if (state.error) expect.fail(); + expect(state.goToBank.onClick).eq(undefined); + expect(state.goToWallet.onClick).eq(undefined); - expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:0")); - } + expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:0")); + }, + ], TestingContext) - await assertNoPendingUpdate(); + expect(hookBehavior).deep.equal({ result: "ok" }) expect(handler.getCallingQueueState()).eq("empty"); + }); it("should be possible to start with an amount specified in request params", async () => { - const { handler, mock } = createWalletApiMock(); + const { handler, TestingContext } = createWalletApiMock(); const props = { type: "get" as const, - goToWalletManualWithdraw: () => { - return null; - }, - goToWalletWalletInvoice: () => { - null; - }, + goToWalletManualWithdraw: nullFunction, + goToWalletWalletInvoice: nullFunction, amount: "ARS:2", }; - const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } = - mountHook(() => useComponentState(props, mock)); - - { - const state = pullLastResultOrThrow(); - - if (state.status !== "ready") expect.fail(); - if (state.error) expect.fail(); - expect(state.goToBank.onClick).not.eq(undefined); - expect(state.goToWallet.onClick).not.eq(undefined); - expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:2")); - } + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + // ({ status }) => { + // expect(status).equal("loading"); + // }, + (state) => { + if (state.status !== "ready") expect.fail(); + if (state.error) expect.fail(); + expect(state.goToBank.onClick).not.eq(undefined); + expect(state.goToWallet.onClick).not.eq(undefined); + + expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:2")); + }, + ], TestingContext) - await assertNoPendingUpdate(); + expect(hookBehavior).deep.equal({ result: "ok" }) expect(handler.getCallingQueueState()).eq("empty"); + }); }); diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx index 2333fd3c1..c42798c8f 100644 --- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx @@ -31,12 +31,12 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { Diagnostics } from "../components/Diagnostics.js"; import { NotifyUpdateFadeOut } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; +import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { useDiagnostics } from "../hooks/useDiagnostics.js"; import { Button } from "../mui/Button.js"; import { Grid } from "../mui/Grid.js"; -import { wxApi } from "../wxApi.js"; export function DeveloperPage(): VNode { const [status, timedOut] = useDiagnostics(); @@ -45,13 +45,15 @@ export function DeveloperPage(): VNode { //FIXME: waiting for retry notification make a always increasing loop of notifications listenAllEvents.includes = (e) => e !== "waiting-for-retry"; // includes every event + const api = useBackendContext(); + const response = useAsyncAsHook(async () => { - const op = await wxApi.wallet.call( + const op = await api.wallet.call( WalletApiOperation.GetPendingOperations, {}, ); - const c = await wxApi.wallet.call(WalletApiOperation.DumpCoins, {}); - const ex = await wxApi.wallet.call(WalletApiOperation.ListExchanges, {}); + const c = await api.wallet.call(WalletApiOperation.DumpCoins, {}); + const ex = await api.wallet.call(WalletApiOperation.ListExchanges, {}); return { operations: op.pendingOperations, coins: c.coins, @@ -60,10 +62,7 @@ export function DeveloperPage(): VNode { }); useEffect(() => { - return wxApi.listener.onUpdateNotification( - listenAllEvents, - response?.retry, - ); + return api.listener.onUpdateNotification(listenAllEvents, response?.retry); }); const nonResponse = { operations: [], coins: [], exchanges: [] }; @@ -82,7 +81,7 @@ export function DeveloperPage(): VNode { coins={coins} exchanges={exchanges} onDownloadDatabase={async () => { - const db = await wxApi.wallet.call(WalletApiOperation.ExportDb, {}); + const db = await api.wallet.call(WalletApiOperation.ExportDb, {}); return JSON.stringify(db); }} /> @@ -135,9 +134,10 @@ export function View({ content, }); } + const api = useBackendContext(); const fileRef = useRef<HTMLInputElement>(null); async function onImportDatabase(str: string): Promise<void> { - return wxApi.wallet.call(WalletApiOperation.ImportDb, { + return api.wallet.call(WalletApiOperation.ImportDb, { dump: JSON.parse(str), }); } @@ -177,7 +177,7 @@ export function View({ onClick={() => confirmReset( i18n.str`Do you want to IRREVOCABLY DESTROY everything inside your wallet and LOSE ALL YOUR COINS?`, - () => wxApi.background.resetDb(), + () => api.background.resetDb(), ) } > @@ -190,7 +190,7 @@ export function View({ onClick={() => confirmReset( i18n.str`TESTING: This may delete all your coin, proceed with caution`, - () => wxApi.background.runGarbageCollector(), + () => api.background.runGarbageCollector(), ) } > diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts index 4b7725264..95badb218 100644 --- a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts @@ -17,7 +17,6 @@ import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { LoadingUriView, ReadyView } from "./views.js"; @@ -55,6 +54,6 @@ const viewMapping: StateViewMap<State> = { export const ComponentName = compose( "ComponentName", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts index d194b3f97..31a351579 100644 --- a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts @@ -14,10 +14,9 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; -export function useComponentState({ p }: Props, api: typeof wxApi): State { +export function useComponentState({ p }: Props): State { return { status: "ready", error: undefined, diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx index a0c62787a..d8a7c6090 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx @@ -21,9 +21,9 @@ import { import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; +import { useBackendContext } from "../context/backend.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { queryToSlashKeys } from "../utils/index.js"; -import { wxApi } from "../wxApi.js"; import { ExchangeAddConfirmPage } from "./ExchangeAddConfirm.js"; import { ExchangeSetUrlPage } from "./ExchangeSetUrl.js"; @@ -37,8 +37,9 @@ export function ExchangeAddPage({ currency, onBack }: Props): VNode { { url: string; config: TalerConfigResponse } | undefined >(undefined); + const api = useBackendContext(); const knownExchangesResponse = useAsyncAsHook(() => - wxApi.wallet.call(WalletApiOperation.ListExchanges, {}), + api.wallet.call(WalletApiOperation.ListExchanges, {}), ); const knownExchanges = !knownExchangesResponse ? [] @@ -75,7 +76,7 @@ export function ExchangeAddPage({ currency, onBack }: Props): VNode { url={verifying.url} onCancel={onBack} onConfirm={async () => { - await wxApi.wallet.call(WalletApiOperation.AddExchange, { + await api.wallet.call(WalletApiOperation.AddExchange, { exchangeBaseUrl: canonicalizeBaseUrl(verifying.url), forceUpdate: true, }); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts index a95830f8e..661fa5286 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts @@ -18,14 +18,13 @@ import { DenomOperationMap, ExchangeFullDetails, ExchangeListItem, - FeeDescriptionPair, + FeeDescriptionPair } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { ComparingView, @@ -33,7 +32,7 @@ import { NoExchangesView, PrivacyContentView, ReadyView, - TosContentView, + TosContentView } from "./views.js"; export interface Props { @@ -106,6 +105,6 @@ const viewMapping: StateViewMap<State> = { export const ExchangeSelectionPage = compose( "ExchangeSelectionPage", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts index 63d545b97..585050413 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts @@ -17,17 +17,17 @@ import { DenomOperationMap, FeeDescription } from "@gnu-taler/taler-util"; import { createPairTimeline, - WalletApiOperation, + WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { useBackendContext } from "../../context/backend.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; -import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; export function useComponentState( { onCancel, onSelection, list: exchanges, currentExchange }: Props, - api: typeof wxApi, ): State { + const api = useBackendContext() const initialValue = exchanges.findIndex( (e) => e.exchangeBaseUrl === currentExchange, ); @@ -52,14 +52,14 @@ export function useComponentState( const selected = !selectedExchange ? undefined : await api.wallet.call(WalletApiOperation.GetExchangeDetailedInfo, { - exchangeBaseUrl: selectedExchange.exchangeBaseUrl, - }); + exchangeBaseUrl: selectedExchange.exchangeBaseUrl, + }); const original = !initialExchange ? undefined : await api.wallet.call(WalletApiOperation.GetExchangeDetailedInfo, { - exchangeBaseUrl: initialExchange.exchangeBaseUrl, - }); + exchangeBaseUrl: initialExchange.exchangeBaseUrl, + }); return { exchanges, diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 4b9c5c711..50f634f52 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -33,13 +33,13 @@ import { } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; import { TransactionItem } from "../components/TransactionItem.js"; +import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; import { NoBalanceHelp } from "../popup/NoBalanceHelp.js"; import DownloadIcon from "../svg/download_24px.svg"; import UploadIcon from "../svg/upload_24px.svg"; -import { wxApi } from "../wxApi.js"; interface Props { currency?: string; @@ -52,13 +52,14 @@ export function HistoryPage({ goToWalletDeposit, }: Props): VNode { const { i18n } = useTranslationContext(); + const api = useBackendContext(); const state = useAsyncAsHook(async () => ({ - b: await wxApi.wallet.call(WalletApiOperation.GetBalances, {}), - tx: await wxApi.wallet.call(WalletApiOperation.GetTransactions, {}), + b: await api.wallet.call(WalletApiOperation.GetBalances, {}), + tx: await api.wallet.call(WalletApiOperation.GetTransactions, {}), })); useEffect(() => { - return wxApi.listener.onUpdateNotification( + return api.listener.onUpdateNotification( [NotificationType.WithdrawGroupFinished], state?.retry, ); diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts index df4e7586f..0ee6472d6 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts @@ -20,10 +20,9 @@ import { HookError } from "../../hooks/useAsyncAsHook.js"; import { ButtonHandler, SelectFieldHandler, - TextFieldHandler, + TextFieldHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { LoadingUriView, ReadyView } from "./views.js"; @@ -75,6 +74,6 @@ const viewMapping: StateViewMap<State> = { export const ManageAccountPage = compose( "ManageAccountPage", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts index 1f920f05f..d60ef962b 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts @@ -17,18 +17,18 @@ import { KnownBankAccountsInfo, parsePaytoUri, - stringifyPaytoUri, + stringifyPaytoUri } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { useBackendContext } from "../../context/backend.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; -import { wxApi } from "../../wxApi.js"; import { AccountByType, Props, State } from "./index.js"; export function useComponentState( { currency, onAccountAdded, onCancel }: Props, - api: typeof wxApi, ): State { + const api = useBackendContext() const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }), ); diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts index 253a0e629..3791b8967 100644 --- a/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts @@ -18,11 +18,10 @@ import { UserAttentionUnreadList } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { LoadingUriView, ReadyView } from "./views.js"; -export interface Props {} +export type Props = object export type State = State.Loading | State.LoadingUriError | State.Ready; @@ -56,6 +55,6 @@ const viewMapping: StateViewMap<State> = { export const NotificationsPage = compose( "NotificationsPage", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts index 093722cf0..1042dea9f 100644 --- a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts @@ -15,11 +15,12 @@ */ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { useBackendContext } from "../../context/backend.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; -import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; -export function useComponentState({}: Props, api: typeof wxApi): State { +export function useComponentState(p: Props): State { + const api = useBackendContext() const hook = useAsyncAsHook(async () => { return await api.wallet.call( WalletApiOperation.GetUserAttentionRequests, diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index d5f072828..eb86c9a3f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -31,10 +31,10 @@ import { SubTitle, Title, } from "../components/styled/index.js"; +import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { Button } from "../mui/Button.js"; import { queryToSlashConfig } from "../utils/index.js"; -import { wxApi } from "../wxApi.js"; interface Props { currency: string; @@ -46,7 +46,7 @@ export function ProviderAddPage({ onBack }: Props): VNode { | { url: string; name: string; provider: BackupBackupProviderTerms } | undefined >(undefined); - + const api = useBackendContext(); if (!verifying) { return ( <SetUrlView @@ -70,7 +70,7 @@ export function ProviderAddPage({ onBack }: Props): VNode { setVerifying(undefined); }} onConfirm={() => { - return wxApi.wallet + return api.wallet .call(WalletApiOperation.AddBackupProvider, { backupProviderBaseUrl: verifying.url, name: verifying.name, diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index 6dde30b39..46d54e871 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -28,10 +28,10 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { PaymentStatus, SmallLightText } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; +import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; -import { wxApi } from "../wxApi.js"; interface Props { pid: string; @@ -47,12 +47,10 @@ export function ProviderDetailPage({ onWithdraw, }: Props): VNode { const { i18n } = useTranslationContext(); + const api = useBackendContext(); async function getProviderInfo(): Promise<ProviderInfo | null> { //create a first list of backup info by currency - const status = await wxApi.wallet.call( - WalletApiOperation.GetBackupInfo, - {}, - ); + const status = await api.wallet.call(WalletApiOperation.GetBackupInfo, {}); const providers = status.providers.filter( (p) => p.syncProviderBaseUrl === providerURL, @@ -103,7 +101,7 @@ export function ProviderDetailPage({ <ProviderView info={info} onSync={async () => - wxApi.wallet + api.wallet .call(WalletApiOperation.RunBackupCycle, { providers: [providerURL], }) @@ -120,7 +118,7 @@ export function ProviderDetailPage({ onWithdraw(info.paymentStatus.amount); }} onDelete={() => - wxApi.wallet + api.wallet .call(WalletApiOperation.RemoveBackupProvider, { provider: providerURL, }) diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index c0268a1ae..f00b242d6 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -34,6 +34,7 @@ import { SuccessText, WarningText, } from "../components/styled/index.js"; +import { useBackendContext } from "../context/backend.js"; import { useDevContext } from "../context/devContext.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; @@ -43,7 +44,6 @@ import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js"; import { ToggleHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; import { platform } from "../platform/api.js"; -import { wxApi } from "../wxApi.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; @@ -53,10 +53,11 @@ export function SettingsPage(): VNode { const { devModeToggle } = useDevContext(); const { name, update } = useBackupDeviceName(); const webex = platform.getWalletWebExVersion(); + const api = useBackendContext(); const exchangesHook = useAsyncAsHook(async () => { - const list = await wxApi.wallet.call(WalletApiOperation.ListExchanges, {}); - const version = await wxApi.wallet.call(WalletApiOperation.GetVersion, {}); + const list = await api.wallet.call(WalletApiOperation.ListExchanges, {}); + const version = await api.wallet.call(WalletApiOperation.GetVersion, {}); return { exchanges: list.exchanges, version }; }); const { exchanges, version } = diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index e70f5fbd1..b7eb4a947 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -60,11 +60,11 @@ import { WarningBox, } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; +import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; import { Pages } from "../NavigationBar.js"; -import { wxApi } from "../wxApi.js"; interface Props { tid: string; @@ -76,17 +76,17 @@ export function TransactionPage({ goToWalletHistory, }: Props): VNode { const { i18n } = useTranslationContext(); - + const api = useBackendContext(); const state = useAsyncAsHook( () => - wxApi.wallet.call(WalletApiOperation.GetTransactionById, { + api.wallet.call(WalletApiOperation.GetTransactionById, { transactionId, }), [transactionId], ); useEffect(() => - wxApi.listener.onUpdateNotification( + api.listener.onUpdateNotification( [NotificationType.WithdrawGroupFinished], state?.retry, ), @@ -118,19 +118,19 @@ export function TransactionPage({ null; }} onDelete={async () => { - await wxApi.wallet.call(WalletApiOperation.DeleteTransaction, { + await api.wallet.call(WalletApiOperation.DeleteTransaction, { transactionId, }); goToWalletHistory(currency); }} onRetry={async () => { - await wxApi.wallet.call(WalletApiOperation.RetryTransaction, { + await api.wallet.call(WalletApiOperation.RetryTransaction, { transactionId, }); goToWalletHistory(currency); }} onRefund={async (purchaseId) => { - await wxApi.wallet.call(WalletApiOperation.ApplyRefundFromPurchaseId, { + await api.wallet.call(WalletApiOperation.ApplyRefundFromPurchaseId, { purchaseId, }); }} |