diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
4 files changed, 27 insertions, 20 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx index 13ce71974..c9f98c0fb 100644 --- a/packages/taler-wallet-webextension/src/popup/Application.tsx +++ b/packages/taler-wallet-webextension/src/popup/Application.tsx @@ -23,10 +23,10 @@ import { createHashHistory } from "history"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import Router, { route, Route } from "preact-router"; -import { Match } from "preact-router/match"; import { useEffect, useState } from "preact/hooks"; import PendingTransactions from "../components/PendingTransactions.js"; import { PopupBox } from "../components/styled/index.js"; +import { AlertProvider } from "../context/alert.js"; import { DevContextProvider } from "../context/devContext.js"; import { IoCProviderForRuntime } from "../context/iocContext.js"; import { @@ -34,7 +34,7 @@ import { useTranslationContext, } from "../context/translation.js"; import { useTalerActionURL } from "../hooks/useTalerActionURL.js"; -import { PopupNavBarOptions, Pages, PopupNavBar } from "../NavigationBar.js"; +import { Pages, PopupNavBar, PopupNavBarOptions } from "../NavigationBar.js"; import { platform } from "../platform/foreground.js"; import { BackupPage } from "../wallet/BackupPage.js"; import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js"; @@ -219,7 +219,9 @@ function PopupTemplate({ <PendingTransactions goToTransaction={goToTransaction} /> ) : undefined} <PopupNavBar path={path} /> - <PopupBox>{children}</PopupBox> + <PopupBox> + <AlertProvider>{children}</AlertProvider> + </PopupBox> </Fragment> ); } diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx index 8f3762c29..0fe9e7b49 100644 --- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx @@ -19,19 +19,19 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { BalanceView as TestedComponent } from "./BalancePage.js"; export default { title: "balance", }; -export const EmptyBalance = createExample(TestedComponent, { +export const EmptyBalance = tests.createExample(TestedComponent, { balances: [], goToWalletManualWithdraw: {}, }); -export const SomeCoins = createExample(TestedComponent, { +export const SomeCoins = tests.createExample(TestedComponent, { balances: [ { available: "USD:10.5", @@ -45,7 +45,7 @@ export const SomeCoins = createExample(TestedComponent, { goToWalletManualWithdraw: {}, }); -export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { +export const SomeCoinsInTreeCurrencies = tests.createExample(TestedComponent, { balances: [ { available: "EUR:1", @@ -73,7 +73,7 @@ export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { addAction: {}, }); -export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { +export const NoCoinsInTreeCurrencies = tests.createExample(TestedComponent, { balances: [ { available: "EUR:3", @@ -101,7 +101,7 @@ export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { addAction: {}, }); -export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, { +export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, { balances: [ { available: "USD:0", diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index 96f0f6dd9..87767d008 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -22,7 +22,11 @@ import { BalanceTable } from "../components/BalanceTable.js"; import { ErrorAlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; import { MultiActionButton } from "../components/MultiActionButton.js"; -import { alertFromError, ErrorAlert } from "../context/alert.js"; +import { + alertFromError, + ErrorAlert, + useAlertContext, +} from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; @@ -75,6 +79,7 @@ function useComponentState({ }: Props): State { const api = useBackendContext(); const { i18n } = useTranslationContext(); + const { pushAlertOnError } = useAlertContext(); const [addingAction, setAddingAction] = useState(false); const state = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.GetBalances, {}), @@ -104,7 +109,7 @@ function useComponentState({ status: "action", error: undefined, cancel: { - onClick: async () => setAddingAction(false), + onClick: pushAlertOnError(async () => setAddingAction(false)), }, }; } @@ -113,10 +118,10 @@ function useComponentState({ error: undefined, balances: state.response.balances, addAction: { - onClick: async () => setAddingAction(true), + onClick: pushAlertOnError(async () => setAddingAction(true)), }, goToWalletManualWithdraw: { - onClick: goToWalletManualWithdraw, + onClick: pushAlertOnError(goToWalletManualWithdraw), }, goToWalletDeposit, goToWalletHistory, diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx index 00293a690..e928cb538 100644 --- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx @@ -19,33 +19,33 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { TalerActionFound as TestedComponent } from "./TalerActionFound.js"; export default { title: "TalerActionFound", }; -export const PayAction = createExample(TestedComponent, { +export const PayAction = tests.createExample(TestedComponent, { url: "taler://pay/something", }); -export const WithdrawalAction = createExample(TestedComponent, { +export const WithdrawalAction = tests.createExample(TestedComponent, { url: "taler://withdraw/something", }); -export const TipAction = createExample(TestedComponent, { +export const TipAction = tests.createExample(TestedComponent, { url: "taler://tip/something", }); -export const NotifyAction = createExample(TestedComponent, { +export const NotifyAction = tests.createExample(TestedComponent, { url: "taler://notify-reserve/something", }); -export const RefundAction = createExample(TestedComponent, { +export const RefundAction = tests.createExample(TestedComponent, { url: "taler://refund/something", }); -export const InvalidAction = createExample(TestedComponent, { +export const InvalidAction = tests.createExample(TestedComponent, { url: "taler://something/asd", }); |