diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
35 files changed, 407 insertions, 407 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts index 4ec4c0ffe..e0b79e060 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts @@ -53,7 +53,7 @@ export namespace State { export interface ConfirmProvider { status: "confirm-provider"; - error: undefined | TalerErrorDetail; + error: undefined; url: string; provider: SyncTermsOfServiceResponse; tos: ToggleHandler; diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts index 1b30ed0cd..cf35abac7 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts @@ -14,16 +14,13 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { - canonicalizeBaseUrl, - Codec, - TalerErrorDetail, -} from "@gnu-taler/taler-util"; +import { canonicalizeBaseUrl, Codec } from "@gnu-taler/taler-util"; import { codecForSyncTermsOfServiceResponse, WalletApiOperation, } from "@gnu-taler/taler-wallet-core"; import { useEffect, useState } from "preact/hooks"; +import { useAlertContext } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; import { assertUnreachable } from "../../utils/index.js"; import { Props, State } from "./index.js"; @@ -152,17 +149,15 @@ export function useComponentState({ const [url, setHost] = useState<string | undefined>(); const [name, setName] = useState<string | undefined>(); const [tos, setTos] = useState(false); + const { pushAlertOnError } = useAlertContext(); const urlState = useUrlState( url, "config", codecForSyncTermsOfServiceResponse(), ); - const [operationError, setOperationError] = useState< - TalerErrorDetail | undefined - >(); const [showConfirm, setShowConfirm] = useState(false); - async function addBackupProvider() { + async function addBackupProvider(): Promise<void> { if (!url || !name) return; const resp = await api.wallet.call(WalletApiOperation.AddBackupProvider, { @@ -178,8 +173,6 @@ export function useComponentState({ } else { return onComplete(url); } - case "error": - return setOperationError(resp.error); case "ok": return onComplete(url); default: @@ -190,18 +183,18 @@ export function useComponentState({ if (showConfirm && urlState && urlState.status === "ok") { return { status: "confirm-provider", - error: operationError, + error: undefined, onAccept: { - onClick: !tos ? undefined : addBackupProvider, + onClick: !tos ? undefined : pushAlertOnError(addBackupProvider), }, onCancel: { - onClick: onBack, + onClick: pushAlertOnError(onBack), }, provider: urlState.result, tos: { value: tos, button: { - onClick: async () => setTos(!tos), + onClick: pushAlertOnError(async () => setTos(!tos)), }, }, url: url ?? "", @@ -213,25 +206,25 @@ export function useComponentState({ error: undefined, name: { value: name || "", - onInput: async (e) => setName(e), + onInput: pushAlertOnError(async (e) => setName(e)), error: name === undefined ? undefined : !name ? "Can't be empty" : undefined, }, onCancel: { - onClick: onBack, + onClick: pushAlertOnError(onBack), }, onConfirm: { onClick: !urlState || urlState.status !== "ok" || !name ? undefined - : async () => { + : pushAlertOnError(async () => { setShowConfirm(true); - }, + }), }, urlOk: urlState?.status === "ok", url: { value: url || "", - onInput: async (e) => setHost(e), + onInput: pushAlertOnError(async (e) => setHost(e)), error: errorString(urlState), }, }; diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx index 887ad235e..9d1656ec6 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx @@ -19,14 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ConfirmProviderView, SelectProviderView } from "./views.js"; export default { title: "add backup provider", }; -export const DemoService = createExample(ConfirmProviderView, { +export const DemoService = tests.createExample(ConfirmProviderView, { url: "https://sync.demo.taler.net/", provider: { annual_fee: "KUDOS:0.1", @@ -40,7 +40,7 @@ export const DemoService = createExample(ConfirmProviderView, { onCancel: {}, }); -export const FreeService = createExample(ConfirmProviderView, { +export const FreeService = tests.createExample(ConfirmProviderView, { url: "https://sync.taler:9667/", provider: { annual_fee: "ARS:0", @@ -54,14 +54,14 @@ export const FreeService = createExample(ConfirmProviderView, { onCancel: {}, }); -export const Initial = createExample(SelectProviderView, { +export const Initial = tests.createExample(SelectProviderView, { url: { value: "" }, name: { value: "" }, onCancel: {}, onConfirm: {}, }); -export const WithValue = createExample(SelectProviderView, { +export const WithValue = tests.createExample(SelectProviderView, { url: { value: "sync.demo.taler.net", }, @@ -72,7 +72,7 @@ export const WithValue = createExample(SelectProviderView, { onConfirm: {}, }); -export const WithConnectionError = createExample(SelectProviderView, { +export const WithConnectionError = tests.createExample(SelectProviderView, { url: { value: "sync.demo.taler.net", error: "Network error", @@ -84,7 +84,7 @@ export const WithConnectionError = createExample(SelectProviderView, { onConfirm: {}, }); -export const WithClientError = createExample(SelectProviderView, { +export const WithClientError = tests.createExample(SelectProviderView, { url: { value: "sync.demo.taler.net", error: "URL may not be right: (404) Not Found", @@ -96,7 +96,7 @@ export const WithClientError = createExample(SelectProviderView, { onConfirm: {}, }); -export const WithServerError = createExample(SelectProviderView, { +export const WithServerError = tests.createExample(SelectProviderView, { url: { value: "sync.demo.taler.net", error: "Try another server: (500) Internal Server Error", diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts index 3241a3ab0..a939c9268 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts @@ -21,7 +21,8 @@ import { expect } from "chai"; import { tests } from "../../../../web-util/src/index.browser.js"; -import { createWalletApiMock, nullFunction } from "../../test-utils.js"; +import { nullFunction } from "../../mui/handlers.js"; +import { createWalletApiMock } from "../../test-utils.js"; import { Props } from "./index.js"; import { useComponentState } from "./state.js"; diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx index f5db3825d..8c45ae050 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { AddNewActionView as TestedComponent } from "./AddNewActionView.js"; export default { @@ -30,4 +30,4 @@ export default { }, }; -export const Initial = createExample(TestedComponent, {}); +export const Initial = tests.createExample(TestedComponent, {}); diff --git a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx index c3a1ea5d6..8ae1a76ce 100644 --- a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx @@ -25,14 +25,14 @@ import { BackupView as TestedComponent, ShowRecoveryInfo, } from "./BackupPage.js"; -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { TalerProtocolTimestamp } from "@gnu-taler/taler-util"; export default { title: "backup", }; -export const LotOfProviders = createExample(TestedComponent, { +export const LotOfProviders = tests.createExample(TestedComponent, { providers: [ { active: true, @@ -164,7 +164,7 @@ export const LotOfProviders = createExample(TestedComponent, { ], }); -export const OneProvider = createExample(TestedComponent, { +export const OneProvider = tests.createExample(TestedComponent, { providers: [ { active: true, @@ -190,10 +190,10 @@ export const OneProvider = createExample(TestedComponent, { ], }); -export const Empty = createExample(TestedComponent, { +export const Empty = tests.createExample(TestedComponent, { providers: [], }); -export const Recovery = createExample(ShowRecoveryInfo, { +export const Recovery = tests.createExample(ShowRecoveryInfo, { info: "taler://recovery/ASLDKJASLKDJASD", }); diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index 48c9c9cb1..c3abb570b 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -29,7 +29,7 @@ import { } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; -import { AlertView } from "../components/CurrentAlerts.js"; +import { ErrorAlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; import { QR } from "../components/QR.js"; import { @@ -118,8 +118,8 @@ export function BackupPage({ onAddProvider }: Props): VNode { } if (status.hasError) { return ( - <AlertView - alert={alertFromError( + <ErrorAlertView + error={alertFromError( i18n.str`Could not load backup providers`, status, )} diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index b597c77be..935adf012 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -25,7 +25,7 @@ import { } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; -import { alertFromError } from "../../context/alert.js"; +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"; @@ -39,6 +39,7 @@ export function useComponentState({ }: Props): State { const api = useBackendContext(); const { i18n } = useTranslationContext(); + const { pushAlertOnError } = useAlertContext(); const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr); const currency = parsed !== undefined ? parsed.currency : currencyStr; @@ -130,9 +131,9 @@ export function useComponentState({ error: undefined, currency, onAddAccount: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setAddingAccount(true); - }, + }), }, }; } @@ -221,27 +222,27 @@ export function useComponentState({ currency, amount: { value: amount, - onInput: updateAmount, + onInput: pushAlertOnError(updateAmount), error: amountError, }, onAddAccount: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setAddingAccount(true); - }, + }), }, account: { list: accountMap, value: stringifyPaytoUri(currentAccount), - onChange: updateAccountFromList, + onChange: pushAlertOnError(updateAccountFromList), }, currentAccount, cancelHandler: { - onClick: async () => { + onClick: pushAlertOnError(async () => { onCancel(currency); - }, + }), }, depositHandler: { - onClick: unableToDeposit ? undefined : doSend, + onClick: unableToDeposit ? undefined : pushAlertOnError(doSend), }, totalFee, totalToDeposit, @@ -263,7 +264,7 @@ async function getFeeForAmount( }); } -export function labelForAccountType(id: string) { +export function labelForAccountType(id: string): string { switch (id) { case "": return "Choose one"; diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx index b4d1060eb..99f08477f 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx @@ -19,26 +19,21 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts, DepositGroupFees } from "@gnu-taler/taler-util"; -import { createExample } from "../../test-utils.js"; -import { labelForAccountType } from "./state.js"; +import { Amounts } from "@gnu-taler/taler-util"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; +import { nullFunction } from "../../mui/handlers.js"; import { ReadyView } from "./views.js"; export default { title: "deposit", }; -// const ac = parsePaytoUri("payto://iban/ES8877998399652238")!; -// const accountMap = createLabelsForBankAccount([ac]); - -export const WithNoAccountForIBAN = createExample(ReadyView, { +export const WithNoAccountForIBAN = tests.createExample(ReadyView, { status: "ready", account: { list: {}, value: "", - onChange: async () => { - null; - }, + onChange: nullFunction, }, currentAccount: { isKnown: true, @@ -49,31 +44,25 @@ export const WithNoAccountForIBAN = createExample(ReadyView, { }, currency: "USD", amount: { - onInput: async () => { - null; - }, + onInput: nullFunction, value: Amounts.parseOrThrow("USD:10"), }, onAddAccount: {}, cancelHandler: {}, depositHandler: { - onClick: async () => { - return; - }, + onClick: nullFunction, }, totalFee: Amounts.zeroOfCurrency("USD"), totalToDeposit: Amounts.parseOrThrow("USD:10"), // onCalculateFee: alwaysReturnFeeToOne, }); -export const WithIBANAccountTypeSelected = createExample(ReadyView, { +export const WithIBANAccountTypeSelected = tests.createExample(ReadyView, { status: "ready", account: { list: { asdlkajsdlk: "asdlkajsdlk", qwerqwer: "qwerqwer" }, value: "asdlkajsdlk", - onChange: async () => { - null; - }, + onChange: nullFunction, }, currentAccount: { isKnown: true, @@ -84,31 +73,25 @@ export const WithIBANAccountTypeSelected = createExample(ReadyView, { }, currency: "USD", amount: { - onInput: async () => { - null; - }, + onInput: nullFunction, value: Amounts.parseOrThrow("USD:10"), }, onAddAccount: {}, cancelHandler: {}, depositHandler: { - onClick: async () => { - return; - }, + onClick: nullFunction, }, totalFee: Amounts.zeroOfCurrency("USD"), totalToDeposit: Amounts.parseOrThrow("USD:10"), // onCalculateFee: alwaysReturnFeeToOne, }); -export const NewBitcoinAccountTypeSelected = createExample(ReadyView, { +export const NewBitcoinAccountTypeSelected = tests.createExample(ReadyView, { status: "ready", account: { list: {}, value: "asdlkajsdlk", - onChange: async () => { - null; - }, + onChange: nullFunction, }, currentAccount: { isKnown: true, @@ -120,16 +103,12 @@ export const NewBitcoinAccountTypeSelected = createExample(ReadyView, { onAddAccount: {}, currency: "USD", amount: { - onInput: async () => { - null; - }, + onInput: nullFunction, value: Amounts.parseOrThrow("USD:10"), }, cancelHandler: {}, depositHandler: { - onClick: async () => { - return; - }, + onClick: nullFunction, }, totalFee: Amounts.zeroOfCurrency("USD"), totalToDeposit: Amounts.parseOrThrow("USD:10"), diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts index b222709a7..0054ab5af 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts @@ -28,7 +28,8 @@ import { import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { expect } from "chai"; import { tests } from "../../../../web-util/src/index.browser.js"; -import { createWalletApiMock, nullFunction } from "../../test-utils.js"; +import { nullFunction } from "../../mui/handlers.js"; +import { createWalletApiMock } from "../../test-utils.js"; import { useComponentState } from "./state.js"; diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts index 1fe324c5a..d5015ae1d 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts @@ -17,7 +17,7 @@ import { Amounts } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; -import { alertFromError } from "../../context/alert.js"; +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"; @@ -26,6 +26,7 @@ import { Contact, Props, State } from "./index.js"; export function useComponentState(props: Props): RecursiveState<State> { const api = useBackendContext(); + const { pushAlertOnError } = useAlertContext(); const parsedInitialAmount = !props.amount ? undefined : Amounts.parse(props.amount); @@ -108,26 +109,26 @@ export function useComponentState(props: Props): RecursiveState<State> { error: undefined, previous, selectCurrency: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setAmount(undefined); - }, + }), }, goToBank: { onClick: invalid ? undefined - : async () => { + : pushAlertOnError(async () => { props.goToWalletBankDeposit(currencyAndAmount); - }, + }), }, goToWallet: { onClick: invalid ? undefined - : async () => { + : pushAlertOnError(async () => { props.goToWalletWalletSend(currencyAndAmount); - }, + }), }, amountHandler: { - onInput: async (s) => setAmount(s), + onInput: pushAlertOnError(async (s) => setAmount(s)), value: amount, }, type: props.type, @@ -138,26 +139,26 @@ export function useComponentState(props: Props): RecursiveState<State> { error: undefined, previous, selectCurrency: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setAmount(undefined); - }, + }), }, goToBank: { onClick: invalid ? undefined - : async () => { + : pushAlertOnError(async () => { props.goToWalletManualWithdraw(currencyAndAmount); - }, + }), }, goToWallet: { onClick: invalid ? undefined - : async () => { + : pushAlertOnError(async () => { props.goToWalletWalletInvoice(currencyAndAmount); - }, + }), }, amountHandler: { - onInput: async (s) => setAmount(s), + onInput: pushAlertOnError(async (s) => setAmount(s)), value: amount, }, type: props.type, diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx index ffec8ba36..111f47776 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx @@ -19,14 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ReadyView, SelectCurrencyView } from "./views.js"; export default { title: "destination", }; -export const GetCash = createExample(ReadyView, { +export const GetCash = tests.createExample(ReadyView, { amountHandler: { value: { currency: "EUR", @@ -40,7 +40,7 @@ export const GetCash = createExample(ReadyView, { selectCurrency: {}, type: "get", }); -export const SendCash = createExample(ReadyView, { +export const SendCash = tests.createExample(ReadyView, { amountHandler: { value: { currency: "EUR", @@ -55,7 +55,7 @@ export const SendCash = createExample(ReadyView, { type: "send", }); -export const SelectCurrency = createExample(SelectCurrencyView, { +export const SelectCurrency = tests.createExample(SelectCurrencyView, { currencies: { "": "Select a currency", USD: "USD", diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts index cc511ce65..b079ef0e8 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts @@ -28,7 +28,8 @@ import { import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { expect } from "chai"; import { tests } from "../../../../web-util/src/index.browser.js"; -import { createWalletApiMock, nullFunction } from "../../test-utils.js"; +import { nullFunction } from "../../mui/handlers.js"; +import { createWalletApiMock } from "../../test-utils.js"; import { useComponentState } from "./state.js"; const exchangeArs: ExchangeListItem = { diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx index d9a5a8fd7..d4ccb60e6 100644 --- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx @@ -20,7 +20,7 @@ */ import { PendingTaskType } from "@gnu-taler/taler-wallet-core"; -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { View as TestedComponent } from "./DeveloperPage.js"; export default { @@ -31,7 +31,7 @@ export default { }, }; -export const AllOff = createExample(TestedComponent, { +export const AllOff = tests.createExample(TestedComponent, { onDownloadDatabase: async () => "this is the content of the database", operations: [ { diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx index 696e424c4..e157e6e6f 100644 --- a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx @@ -19,11 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ReadyView } from "./views.js"; export default { title: "example", }; -export const Ready = createExample(ReadyView, {}); +export const Ready = tests.createExample(ReadyView, {}); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx index 8fbecfc4c..216e50385 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ExchangeAddConfirmPage as TestedComponent } from "./ExchangeAddConfirm.js"; export default { @@ -32,14 +32,14 @@ export default { }, }; -export const TermsNotFound = createExample(TestedComponent, { +export const TermsNotFound = tests.createExample(TestedComponent, { url: "https://exchange.demo.taler.net/", }); -export const NewTerms = createExample(TestedComponent, { +export const NewTerms = tests.createExample(TestedComponent, { url: "https://exchange.demo.taler.net/", }); -export const TermsChanged = createExample(TestedComponent, { +export const TermsChanged = tests.createExample(TestedComponent, { url: "https://exchange.demo.taler.net/", }); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx index cd86ad8c6..914ca8ae4 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { queryToSlashKeys } from "../utils/index.js"; import { ExchangeSetUrlPage as TestedComponent } from "./ExchangeSetUrl.js"; @@ -27,17 +27,17 @@ export default { title: "exchange add set url", }; -export const ExpectedUSD = createExample(TestedComponent, { +export const ExpectedUSD = tests.createExample(TestedComponent, { expectedCurrency: "USD", onVerify: queryToSlashKeys, }); -export const ExpectedKUDOS = createExample(TestedComponent, { +export const ExpectedKUDOS = tests.createExample(TestedComponent, { expectedCurrency: "KUDOS", onVerify: queryToSlashKeys, }); -export const InitialState = createExample(TestedComponent, { +export const InitialState = tests.createExample(TestedComponent, { onVerify: queryToSlashKeys, }); @@ -55,7 +55,7 @@ const knownExchanges = [ }, ]; -export const WithDemoAsKnownExchange = createExample(TestedComponent, { +export const WithDemoAsKnownExchange = tests.createExample(TestedComponent, { onVerify: async (url) => { const found = knownExchanges.findIndex((e) => e.exchangeBaseUrl === url) !== -1; diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts index cfb32cbbb..7ad11e67c 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts @@ -20,7 +20,7 @@ import { WalletApiOperation, } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; -import { alertFromError } from "../../context/alert.js"; +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"; @@ -33,6 +33,7 @@ export function useComponentState({ currentExchange, }: Props): State { const api = useBackendContext(); + const { pushAlertOnError } = useAlertContext(); const { i18n } = useTranslationContext(); const initialValue = exchanges.findIndex( (e) => e.exchangeBaseUrl === currentExchange, @@ -115,7 +116,7 @@ export function useComponentState({ status: "showing-privacy", error: undefined, onClose: { - onClick: async () => setShowingPrivacy(undefined), + onClick: pushAlertOnError(async () => setShowingPrivacy(undefined)), }, exchangeUrl: showingPrivacy, }; @@ -125,7 +126,7 @@ export function useComponentState({ status: "showing-tos", error: undefined, onClose: { - onClick: async () => setShowingTos(undefined), + onClick: pushAlertOnError(async () => setShowingTos(undefined)), }, exchangeUrl: showingTos, }; @@ -138,24 +139,24 @@ export function useComponentState({ exchanges: { list: exchangeMap, value: value, - onChange: async (v) => { + onChange: pushAlertOnError(async (v) => { setValue(v); - }, + }), }, error: undefined, onClose: { - onClick: onCancel, + onClick: pushAlertOnError(onCancel), }, selected, onShowPrivacy: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setShowingPrivacy(selected.exchangeBaseUrl); - }, + }), }, onShowTerms: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setShowingTos(selected.exchangeBaseUrl); - }, + }), }, }; } @@ -215,30 +216,30 @@ export function useComponentState({ exchanges: { list: exchangeMap, value: value, - onChange: async (v) => { + onChange: pushAlertOnError(async (v) => { setValue(v); - }, + }), }, error: undefined, onReset: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setValue(String(initialValue)); - }, + }), }, onSelect: { - onClick: async () => { + onClick: pushAlertOnError(async () => { onSelection(selected.exchangeBaseUrl); - }, + }), }, onShowPrivacy: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setShowingPrivacy(selected.exchangeBaseUrl); - }, + }), }, onShowTerms: { - onClick: async () => { + onClick: pushAlertOnError(async () => { setShowingTos(selected.exchangeBaseUrl); - }, + }), }, selected, coinOperationTimeline, diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx index 05765b50a..a65f85c6a 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx @@ -19,14 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ComparingView, ReadyView } from "./views.js"; export default { title: "select exchange", }; -export const Bitcoin1 = createExample(ReadyView, { +export const Bitcoin1 = tests.createExample(ReadyView, { exchanges: { list: { "0": "https://exchange.taler.ar" }, value: "0", @@ -43,7 +43,7 @@ export const Bitcoin1 = createExample(ReadyView, { onShowTerms: {}, onClose: {}, }); -export const Bitcoin2 = createExample(ReadyView, { +export const Bitcoin2 = tests.createExample(ReadyView, { exchanges: { list: { "https://exchange.taler.ar": "https://exchange.taler.ar", @@ -64,7 +64,7 @@ export const Bitcoin2 = createExample(ReadyView, { onClose: {}, }); -export const Kudos1 = createExample(ReadyView, { +export const Kudos1 = tests.createExample(ReadyView, { exchanges: { list: { "https://exchange-kudos.taler.ar": "https://exchange-kudos.taler.ar", @@ -83,7 +83,7 @@ export const Kudos1 = createExample(ReadyView, { onShowTerms: {}, onClose: {}, }); -export const Kudos2 = createExample(ReadyView, { +export const Kudos2 = tests.createExample(ReadyView, { exchanges: { list: { "https://exchange-kudos.taler.ar": "https://exchange-kudos.taler.ar", @@ -103,7 +103,7 @@ export const Kudos2 = createExample(ReadyView, { onShowTerms: {}, onClose: {}, }); -export const ComparingBitcoin = createExample(ComparingView, { +export const ComparingBitcoin = tests.createExample(ComparingView, { exchanges: { list: { "http://exchange": "http://exchange" }, value: "http://exchange", @@ -131,7 +131,7 @@ export const ComparingBitcoin = createExample(ComparingView, { missingWireTYpe: [], wireFeeTimeline: {}, }); -export const ComparingKudos = createExample(ComparingView, { +export const ComparingKudos = tests.createExample(ComparingView, { exchanges: { list: { "http://exchange": "http://exchange" }, value: "http://exchange", diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index 1674ac135..13f4c8230 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -37,7 +37,7 @@ import { WithdrawalType, } from "@gnu-taler/taler-util"; import { HistoryView as TestedComponent } from "./History.js"; -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; export default { title: "balance", @@ -160,25 +160,28 @@ const exampleData = { } as TransactionPeerPullDebit, }; -export const NoBalance = createExample(TestedComponent, { +export const NoBalance = tests.createExample(TestedComponent, { transactions: [], balances: [], }); -export const SomeBalanceWithNoTransactions = createExample(TestedComponent, { - transactions: [], - balances: [ - { - available: "TESTKUDOS:10", - pendingIncoming: "TESTKUDOS:0", - pendingOutgoing: "TESTKUDOS:0", - hasPendingTransactions: false, - requiresUserInput: false, - }, - ], -}); +export const SomeBalanceWithNoTransactions = tests.createExample( + TestedComponent, + { + transactions: [], + balances: [ + { + available: "TESTKUDOS:10", + pendingIncoming: "TESTKUDOS:0", + pendingOutgoing: "TESTKUDOS:0", + hasPendingTransactions: false, + requiresUserInput: false, + }, + ], + }, +); -export const OneSimpleTransaction = createExample(TestedComponent, { +export const OneSimpleTransaction = tests.createExample(TestedComponent, { transactions: [exampleData.withdraw], balances: [ { @@ -191,20 +194,23 @@ export const OneSimpleTransaction = createExample(TestedComponent, { ], }); -export const TwoTransactionsAndZeroBalance = createExample(TestedComponent, { - transactions: [exampleData.withdraw, exampleData.deposit], - balances: [ - { - available: "USD:0", - pendingIncoming: "USD:0", - pendingOutgoing: "USD:0", - hasPendingTransactions: false, - requiresUserInput: false, - }, - ], -}); +export const TwoTransactionsAndZeroBalance = tests.createExample( + TestedComponent, + { + transactions: [exampleData.withdraw, exampleData.deposit], + balances: [ + { + available: "USD:0", + pendingIncoming: "USD:0", + pendingOutgoing: "USD:0", + hasPendingTransactions: false, + requiresUserInput: false, + }, + ], + }, +); -export const OneTransactionPending = createExample(TestedComponent, { +export const OneTransactionPending = tests.createExample(TestedComponent, { transactions: [ { ...exampleData.withdraw, @@ -222,7 +228,7 @@ export const OneTransactionPending = createExample(TestedComponent, { ], }); -export const SomeTransactions = createExample(TestedComponent, { +export const SomeTransactions = tests.createExample(TestedComponent, { transactions: [ exampleData.withdraw, exampleData.payment, @@ -251,7 +257,7 @@ export const SomeTransactions = createExample(TestedComponent, { ], }); -export const SomeTransactionsWithTwoCurrencies = createExample( +export const SomeTransactionsWithTwoCurrencies = tests.createExample( TestedComponent, { transactions: [ @@ -283,7 +289,7 @@ export const SomeTransactionsWithTwoCurrencies = createExample( }, ); -export const FiveOfficialCurrencies = createExample(TestedComponent, { +export const FiveOfficialCurrencies = tests.createExample(TestedComponent, { transactions: [exampleData.withdraw], balances: [ { @@ -324,7 +330,7 @@ export const FiveOfficialCurrencies = createExample(TestedComponent, { ], }); -export const FiveOfficialCurrenciesWithHighValue = createExample( +export const FiveOfficialCurrenciesWithHighValue = tests.createExample( TestedComponent, { transactions: [exampleData.withdraw], @@ -368,7 +374,7 @@ export const FiveOfficialCurrenciesWithHighValue = createExample( }, ); -export const PeerToPeer = createExample(TestedComponent, { +export const PeerToPeer = tests.createExample(TestedComponent, { transactions: [ exampleData.pull_credit, exampleData.pull_debit, diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 143d3adbb..1d51f835a 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -23,7 +23,7 @@ import { import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; -import { AlertView } from "../components/CurrentAlerts.js"; +import { ErrorAlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; import { CenteredBoldText, @@ -33,7 +33,7 @@ import { } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; import { TransactionItem } from "../components/TransactionItem.js"; -import { alertFromError } from "../context/alert.js"; +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"; @@ -72,8 +72,8 @@ export function HistoryPage({ if (state.hasError) { return ( - <AlertView - alert={alertFromError( + <ErrorAlertView + error={alertFromError( i18n.str`Could not load the list of transactions`, state, )} @@ -112,6 +112,7 @@ export function HistoryView({ }): VNode { const { i18n } = useTranslationContext(); const currencies = balances.map((b) => b.available.split(":")[0]); + const { pushAlertOnError } = useAlertContext(); const defaultCurrencyIndex = currencies.findIndex( (c) => c === defaultCurrency, @@ -145,7 +146,7 @@ export function HistoryView({ return ( <NoBalanceHelp goToWalletManualWithdraw={{ - onClick: goToWalletManualWithdraw, + onClick: pushAlertOnError(goToWalletManualWithdraw), }} /> ); diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts index 176a8d100..f7383d483 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts @@ -21,7 +21,7 @@ import { } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; -import { alertFromError } from "../../context/alert.js"; +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"; @@ -33,6 +33,7 @@ export function useComponentState({ onCancel, }: Props): State { const api = useBackendContext(); + const { pushAlertOnError } = useAlertContext(); const { i18n } = useTranslationContext(); const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }), @@ -109,30 +110,30 @@ export function useComponentState({ accountType: { list: accountType, value: type, - onChange: async (v) => { + onChange: pushAlertOnError(async (v) => { setType(v); - }, + }), }, alias: { value: alias, - onInput: async (v) => { + onInput: pushAlertOnError(async (v) => { setAlias(v); - }, + }), }, uri: { value: payto, error: paytoUriError, - onInput: async (v) => { + onInput: pushAlertOnError(async (v) => { setPayto(v); - }, + }), }, accountByType, deleteAccount, onAccountAdded: { - onClick: unableToAdd ? undefined : addAccount, + onClick: unableToAdd ? undefined : pushAlertOnError(addAccount), }, onCancel: { - onClick: async () => onCancel(), + onClick: pushAlertOnError(async () => onCancel()), }, }; } diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx index ca6db8be9..e20d4e0e8 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx @@ -19,18 +19,15 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; +import { nullFunction } from "../../mui/handlers.js"; import { ReadyView } from "./views.js"; export default { title: "manage account", }; -const nullFunction = async () => { - null; -}; - -export const JustTwoBitcoinAccounts = createExample(ReadyView, { +export const JustTwoBitcoinAccounts = tests.createExample(ReadyView, { status: "ready", currency: "ARS", accountType: { @@ -84,7 +81,7 @@ export const JustTwoBitcoinAccounts = createExample(ReadyView, { onCancel: {}, }); -export const WithAllTypeOfAccounts = createExample(ReadyView, { +export const WithAllTypeOfAccounts = tests.createExample(ReadyView, { status: "ready", currency: "ARS", accountType: { @@ -165,7 +162,7 @@ export const WithAllTypeOfAccounts = createExample(ReadyView, { onCancel: {}, }); -export const AddingIbanAccount = createExample(ReadyView, { +export const AddingIbanAccount = tests.createExample(ReadyView, { status: "ready", currency: "ARS", accountType: { diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx b/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx index c4da99909..bce4a8f41 100644 --- a/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx @@ -20,14 +20,14 @@ */ import { AbsoluteTime, AttentionType } from "@gnu-taler/taler-util"; -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ReadyView } from "./views.js"; export default { title: "notifications", }; -export const Ready = createExample(ReadyView, { +export const Ready = tests.createExample(ReadyView, { list: [ { when: AbsoluteTime.now(), diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx index 9ca397302..55f80a397 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ConfirmProviderView as TestedComponent } from "./ProviderAddPage.js"; export default { @@ -32,7 +32,7 @@ export default { }, }; -export const DemoService = createExample(TestedComponent, { +export const DemoService = tests.createExample(TestedComponent, { url: "https://sync.demo.taler.net/", provider: { annual_fee: "KUDOS:0.1", @@ -41,7 +41,7 @@ export const DemoService = createExample(TestedComponent, { }, }); -export const FreeService = createExample(TestedComponent, { +export const FreeService = tests.createExample(TestedComponent, { url: "https://sync.taler:9667/", provider: { annual_fee: "ARS:0", diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx index a5528c36b..b4f2533bd 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { SetUrlView as TestedComponent } from "./ProviderAddPage.js"; export default { @@ -32,20 +32,20 @@ export default { }, }; -export const Initial = createExample(TestedComponent, {}); +export const Initial = tests.createExample(TestedComponent, {}); -export const WithValue = createExample(TestedComponent, { +export const WithValue = tests.createExample(TestedComponent, { initialValue: "sync.demo.taler.net", }); -export const WithConnectionError = createExample(TestedComponent, { +export const WithConnectionError = tests.createExample(TestedComponent, { withError: "Network error", }); -export const WithClientError = createExample(TestedComponent, { +export const WithClientError = tests.createExample(TestedComponent, { withError: "URL may not be right: (404) Not Found", }); -export const WithServerError = createExample(TestedComponent, { +export const WithServerError = tests.createExample(TestedComponent, { withError: "Try another server: (500) Internal Server Error", }); diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx index 98c68e6bd..08f26438f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx @@ -21,7 +21,7 @@ import { TalerProtocolTimestamp } from "@gnu-taler/taler-util"; import { ProviderPaymentType } from "@gnu-taler/taler-wallet-core"; -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ProviderView as TestedComponent } from "./ProviderDetailPage.js"; export default { @@ -34,7 +34,7 @@ export default { }, }; -export const Active = createExample(TestedComponent, { +export const Active = tests.createExample(TestedComponent, { info: { active: true, name: "sync.demo", @@ -58,7 +58,7 @@ export const Active = createExample(TestedComponent, { }, }); -export const ActiveErrorSync = createExample(TestedComponent, { +export const ActiveErrorSync = tests.createExample(TestedComponent, { info: { active: true, name: "sync.demo", @@ -79,6 +79,7 @@ export const ActiveErrorSync = createExample(TestedComponent, { lastError: { code: 2002, details: "details", + when: new Date().toISOString(), hint: "error hint from the server", message: "message", }, @@ -90,34 +91,37 @@ export const ActiveErrorSync = createExample(TestedComponent, { }, }); -export const ActiveBackupProblemUnreadable = createExample(TestedComponent, { - info: { - active: true, - name: "sync.demo", - syncProviderBaseUrl: "http://sync.taler:9967/", - lastSuccessfulBackupTimestamp: - TalerProtocolTimestamp.fromSeconds(1625063925), - paymentProposalIds: [ - "43Q5WWRJPNS4SE9YKS54H9THDS94089EDGXW9EHBPN6E7M184XEG", - ], - paymentStatus: { - type: ProviderPaymentType.Paid, - paidUntil: { - t_ms: 1656599921000, +export const ActiveBackupProblemUnreadable = tests.createExample( + TestedComponent, + { + info: { + active: true, + name: "sync.demo", + syncProviderBaseUrl: "http://sync.taler:9967/", + lastSuccessfulBackupTimestamp: + TalerProtocolTimestamp.fromSeconds(1625063925), + paymentProposalIds: [ + "43Q5WWRJPNS4SE9YKS54H9THDS94089EDGXW9EHBPN6E7M184XEG", + ], + paymentStatus: { + type: ProviderPaymentType.Paid, + paidUntil: { + t_ms: 1656599921000, + }, + }, + backupProblem: { + type: "backup-unreadable", + }, + terms: { + annualFee: "EUR:1", + storageLimitInMegabytes: 16, + supportedProtocolVersion: "0.0", }, - }, - backupProblem: { - type: "backup-unreadable", - }, - terms: { - annualFee: "EUR:1", - storageLimitInMegabytes: 16, - supportedProtocolVersion: "0.0", }, }, -}); +); -export const ActiveBackupProblemDevice = createExample(TestedComponent, { +export const ActiveBackupProblemDevice = tests.createExample(TestedComponent, { info: { active: true, name: "sync.demo", @@ -149,7 +153,7 @@ export const ActiveBackupProblemDevice = createExample(TestedComponent, { }, }); -export const InactiveUnpaid = createExample(TestedComponent, { +export const InactiveUnpaid = tests.createExample(TestedComponent, { info: { active: false, name: "sync.demo", @@ -166,25 +170,28 @@ export const InactiveUnpaid = createExample(TestedComponent, { }, }); -export const InactiveInsufficientBalance = createExample(TestedComponent, { - info: { - active: false, - name: "sync.demo", - syncProviderBaseUrl: "http://sync.demo.taler.net/", - paymentProposalIds: [], - paymentStatus: { - type: ProviderPaymentType.InsufficientBalance, - amount: "EUR:123", - }, - terms: { - annualFee: "EUR:0.1", - storageLimitInMegabytes: 16, - supportedProtocolVersion: "0.0", +export const InactiveInsufficientBalance = tests.createExample( + TestedComponent, + { + info: { + active: false, + name: "sync.demo", + syncProviderBaseUrl: "http://sync.demo.taler.net/", + paymentProposalIds: [], + paymentStatus: { + type: ProviderPaymentType.InsufficientBalance, + amount: "EUR:123", + }, + terms: { + annualFee: "EUR:0.1", + storageLimitInMegabytes: 16, + supportedProtocolVersion: "0.0", + }, }, }, -}); +); -export const InactivePending = createExample(TestedComponent, { +export const InactivePending = tests.createExample(TestedComponent, { info: { active: false, name: "sync.demo", @@ -202,7 +209,7 @@ export const InactivePending = createExample(TestedComponent, { }, }); -export const ActiveTermsChanged = createExample(TestedComponent, { +export const ActiveTermsChanged = tests.createExample(TestedComponent, { info: { active: true, name: "sync.demo", diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index 9b72c0fae..789465a87 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -23,7 +23,7 @@ import { WalletApiOperation, } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; -import { AlertView } from "../components/CurrentAlerts.js"; +import { ErrorAlertView } from "../components/CurrentAlerts.js"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { Loading } from "../components/Loading.js"; import { PaymentStatus, SmallLightText } from "../components/styled/index.js"; @@ -66,8 +66,8 @@ export function ProviderDetailPage({ } if (state.hasError) { return ( - <AlertView - alert={alertFromError( + <ErrorAlertView + error={alertFromError( i18n.str`There was an error loading the provider detail for "${providerURL}"`, state, )} diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx index 0fc38e90f..074fdc4fa 100644 --- a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx @@ -19,11 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { QrReaderPage } from "./QrReader.js"; export default { title: "qr reader", }; -export const Reading = createExample(QrReaderPage, {}); +export const Reading = tests.createExample(QrReaderPage, {}); diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx index 7ea3b386b..1d2893b43 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx @@ -20,7 +20,7 @@ */ import { parsePaytoUri } from "@gnu-taler/taler-util"; -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ReserveCreated as TestedComponent } from "./ReserveCreated.js"; export default { @@ -29,7 +29,7 @@ export default { argTypes: {}, }; -export const TalerBank = createExample(TestedComponent, { +export const TalerBank = tests.createExample(TestedComponent, { reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", paytoURI: parsePaytoUri( "payto://x-taler-bank/bank.taler:5882/exchangeminator?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", @@ -42,7 +42,7 @@ export const TalerBank = createExample(TestedComponent, { exchangeBaseUrl: "https://exchange.demo.taler.net", }); -export const IBAN = createExample(TestedComponent, { +export const IBAN = tests.createExample(TestedComponent, { reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", paytoURI: parsePaytoUri( "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", @@ -55,7 +55,7 @@ export const IBAN = createExample(TestedComponent, { exchangeBaseUrl: "https://exchange.demo.taler.net", }); -export const WithReceiverName = createExample(TestedComponent, { +export const WithReceiverName = tests.createExample(TestedComponent, { reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", paytoURI: parsePaytoUri( "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG&receiver=Sebastian", @@ -68,7 +68,7 @@ export const WithReceiverName = createExample(TestedComponent, { exchangeBaseUrl: "https://exchange.demo.taler.net", }); -export const Bitcoin = createExample(TestedComponent, { +export const Bitcoin = tests.createExample(TestedComponent, { reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", paytoURI: parsePaytoUri( "payto://bitcoin/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", @@ -81,7 +81,7 @@ export const Bitcoin = createExample(TestedComponent, { exchangeBaseUrl: "https://exchange.demo.taler.net", }); -export const BitcoinRegTest = createExample(TestedComponent, { +export const BitcoinRegTest = tests.createExample(TestedComponent, { reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", paytoURI: parsePaytoUri( "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", @@ -93,7 +93,7 @@ export const BitcoinRegTest = createExample(TestedComponent, { }, exchangeBaseUrl: "https://exchange.demo.taler.net", }); -export const BitcoinTest = createExample(TestedComponent, { +export const BitcoinTest = tests.createExample(TestedComponent, { reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", paytoURI: parsePaytoUri( "payto://bitcoin/tb1qw508d6qejxtdg4y5r3zarvary0c5xw7kxpjzsx?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx index 04b7f3e09..53bc577d4 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { SettingsView as TestedComponent } from "./Settings.js"; export default { @@ -45,7 +45,7 @@ const version = { }, }; -export const AllOff = createExample(TestedComponent, { +export const AllOff = tests.createExample(TestedComponent, { deviceName: "this-is-the-device-name", devModeToggle: { value: false, button: {} }, autoOpenToggle: { value: false, button: {} }, @@ -54,7 +54,7 @@ export const AllOff = createExample(TestedComponent, { ...version, }); -export const OneChecked = createExample(TestedComponent, { +export const OneChecked = tests.createExample(TestedComponent, { deviceName: "this-is-the-device-name", devModeToggle: { value: false, button: {} }, autoOpenToggle: { value: false, button: {} }, @@ -63,7 +63,7 @@ export const OneChecked = createExample(TestedComponent, { ...version, }); -export const WithOneExchange = createExample(TestedComponent, { +export const WithOneExchange = tests.createExample(TestedComponent, { deviceName: "this-is-the-device-name", devModeToggle: { value: false, button: {} }, autoOpenToggle: { value: false, button: {} }, @@ -85,45 +85,54 @@ export const WithOneExchange = createExample(TestedComponent, { ...version, }); -export const WithExchangeInDifferentState = createExample(TestedComponent, { - deviceName: "this-is-the-device-name", - devModeToggle: { value: false, button: {} }, - autoOpenToggle: { value: false, button: {} }, - clipboardToggle: { value: false, button: {} }, - setDeviceName: () => Promise.resolve(), - knownExchanges: [ - { - currency: "USD", - exchangeBaseUrl: "http://exchange1.taler", - tos: { - currentVersion: "1", - acceptedVersion: "1", - content: "content of tos", - contentType: "text/plain", - }, - paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], - }, - { - currency: "USD", - exchangeBaseUrl: "http://exchange2.taler", - tos: { - currentVersion: "2", - acceptedVersion: "1", - content: "content of tos", - contentType: "text/plain", +export const WithExchangeInDifferentState = tests.createExample( + TestedComponent, + { + deviceName: "this-is-the-device-name", + devModeToggle: { value: false, button: {} }, + autoOpenToggle: { value: false, button: {} }, + clipboardToggle: { value: false, button: {} }, + setDeviceName: () => Promise.resolve(), + knownExchanges: [ + { + currency: "USD", + exchangeBaseUrl: "http://exchange1.taler", + tos: { + currentVersion: "1", + acceptedVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, + paytoUris: [ + "payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator", + ], }, - paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], - } as any, //TODO: complete with auditors, wireInfo and denominations - { - currency: "USD", - exchangeBaseUrl: "http://exchange3.taler", - tos: { - currentVersion: "1", - content: "content of tos", - contentType: "text/plain", + { + currency: "USD", + exchangeBaseUrl: "http://exchange2.taler", + tos: { + currentVersion: "2", + acceptedVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, + paytoUris: [ + "payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator", + ], + } as any, //TODO: complete with auditors, wireInfo and denominations + { + currency: "USD", + exchangeBaseUrl: "http://exchange3.taler", + tos: { + currentVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, + paytoUris: [ + "payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator", + ], }, - paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], - }, - ], - ...version, -}); + ], + ...version, + }, +); diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index ed1bc838a..d65f3a095 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -22,7 +22,6 @@ import { import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../components/Checkbox.js"; -import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js"; import { JustInDevMode } from "../components/JustInDevMode.js"; import { Part } from "../components/Part.js"; import { SelectList } from "../components/SelectList.js"; @@ -34,6 +33,7 @@ import { SuccessText, WarningText, } from "../components/styled/index.js"; +import { useAlertContext } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; import { useDevContext } from "../context/devContext.js"; import { useTranslationContext } from "../context/translation.js"; @@ -50,8 +50,9 @@ const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; export function SettingsPage(): VNode { const autoOpenToggle = useAutoOpenPermissions(); const clipboardToggle = useClipboardPermissions(); - const { devModeToggle } = useDevContext(); + const { devMode, toggle } = useDevContext(); const { name, update } = useBackupDeviceName(); + const { pushAlertOnError } = useAlertContext(); const webex = platform.getWalletWebExVersion(); const api = useBackendContext(); @@ -72,7 +73,12 @@ export function SettingsPage(): VNode { setDeviceName={update} autoOpenToggle={autoOpenToggle} clipboardToggle={clipboardToggle} - devModeToggle={devModeToggle} + devModeToggle={{ + value: devMode, + button: { + onClick: pushAlertOnError(toggle), + }, + }} webexVersion={{ version: webex.version, hash: GIT_HASH, @@ -109,18 +115,6 @@ export function SettingsView({ return ( <Fragment> <section> - {autoOpenToggle.button.error && ( - <ErrorTalerOperation - title={i18n.str`Could not toggle auto-open`} - error={autoOpenToggle.button.error.errorDetail} - /> - )} - {/* {clipboardToggle.button.error && ( - <ErrorTalerOperation - title={i18n.str`Could not toggle clipboard`} - error={clipboardToggle.button.error.errorDetail} - /> - )} */} <SubTitle> <i18n.Translate>Navigator</i18n.Translate> </SubTitle> diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index 868d3b0e6..bc941c9af 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -39,11 +39,13 @@ import { WithdrawalType, } from "@gnu-taler/taler-util"; import { DevContextProviderForTesting } from "../context/devContext.js"; -import { - createExample, - createExampleWithCustomContext as createExampleInCustomContext, -} from "../test-utils.js"; +// import { +// createExample, +// createExampleWithCustomContext as createExampleInCustomContext, +// } from "../test-utils.js"; import { TransactionView as TestedComponent } from "./Transaction.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; +import beer from "../../static-dev/beer.png"; export default { title: "transaction details", @@ -214,24 +216,28 @@ const transactionError = { hint: "The payment is too late, the offer has expired.", }, }, + when: new Date().toISOString(), hint: "Error: WALLET_UNEXPECTED_REQUEST_ERROR", message: "Unexpected error code in response", }; -export const Withdraw = createExample(TestedComponent, { +export const Withdraw = tests.createExample(TestedComponent, { transaction: exampleData.withdraw, }); -export const WithdrawFiveMinutesAgo = createExample(TestedComponent, () => ({ - transaction: { - ...exampleData.withdraw, - timestamp: TalerProtocolTimestamp.fromSeconds( - new Date().getTime() / 1000 - 60 * 5, - ), - }, -})); +export const WithdrawFiveMinutesAgo = tests.createExample( + TestedComponent, + () => ({ + transaction: { + ...exampleData.withdraw, + timestamp: TalerProtocolTimestamp.fromSeconds( + new Date().getTime() / 1000 - 60 * 5, + ), + }, + }), +); -export const WithdrawFiveMinutesAgoAndPending = createExample( +export const WithdrawFiveMinutesAgoAndPending = tests.createExample( TestedComponent, () => ({ transaction: { @@ -244,38 +250,41 @@ export const WithdrawFiveMinutesAgoAndPending = createExample( }), ); -export const WithdrawError = createExample(TestedComponent, { +export const WithdrawError = tests.createExample(TestedComponent, { transaction: { ...exampleData.withdraw, error: transactionError, }, }); -export const WithdrawErrorInDevMode = createExampleInCustomContext( +// export const WithdrawErrorInDevMode = tests.createExampleInCustomContext( +// TestedComponent, +// { +// transaction: { +// ...exampleData.withdraw, +// error: transactionError, +// }, +// }, +// DevContextProviderForTesting, +// { value: true }, +// ); + +export const WithdrawPendingManual = tests.createExample( TestedComponent, - { + () => ({ transaction: { ...exampleData.withdraw, - error: transactionError, + withdrawalDetails: { + type: WithdrawalType.ManualTransfer, + exchangePaytoUris: ["payto://iban/ES8877998399652238"], + reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", + } as WithdrawalDetails, + pending: true, }, - }, - DevContextProviderForTesting, - { value: true }, + }), ); -export const WithdrawPendingManual = createExample(TestedComponent, () => ({ - transaction: { - ...exampleData.withdraw, - withdrawalDetails: { - type: WithdrawalType.ManualTransfer, - exchangePaytoUris: ["payto://iban/ES8877998399652238"], - reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", - } as WithdrawalDetails, - pending: true, - }, -})); - -export const WithdrawPendingTalerBankUnconfirmed = createExample( +export const WithdrawPendingTalerBankUnconfirmed = tests.createExample( TestedComponent, { transaction: { @@ -291,7 +300,7 @@ export const WithdrawPendingTalerBankUnconfirmed = createExample( }, ); -export const WithdrawPendingTalerBankConfirmed = createExample( +export const WithdrawPendingTalerBankConfirmed = tests.createExample( TestedComponent, { transaction: { @@ -306,18 +315,18 @@ export const WithdrawPendingTalerBankConfirmed = createExample( }, ); -export const Payment = createExample(TestedComponent, { +export const Payment = tests.createExample(TestedComponent, { transaction: exampleData.payment, }); -export const PaymentError = createExample(TestedComponent, { +export const PaymentError = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, error: transactionError, }, }); -export const PaymentWithRefund = createExample(TestedComponent, { +export const PaymentWithRefund = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:12", @@ -334,7 +343,7 @@ export const PaymentWithRefund = createExample(TestedComponent, { }, }); -export const PaymentWithDeliveryDate = createExample(TestedComponent, { +export const PaymentWithDeliveryDate = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:12", @@ -347,7 +356,7 @@ export const PaymentWithDeliveryDate = createExample(TestedComponent, { }, }); -export const PaymentWithDeliveryAddr = createExample(TestedComponent, { +export const PaymentWithDeliveryAddr = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:12", @@ -363,7 +372,7 @@ export const PaymentWithDeliveryAddr = createExample(TestedComponent, { }, }); -export const PaymentWithDeliveryFull = createExample(TestedComponent, { +export const PaymentWithDeliveryFull = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:12", @@ -382,7 +391,7 @@ export const PaymentWithDeliveryFull = createExample(TestedComponent, { }, }); -export const PaymentWithRefundPending = createExample(TestedComponent, { +export const PaymentWithRefundPending = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:12", @@ -392,7 +401,7 @@ export const PaymentWithRefundPending = createExample(TestedComponent, { }, }); -export const PaymentWithFeeAndRefund = createExample(TestedComponent, { +export const PaymentWithFeeAndRefund = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:11", @@ -401,7 +410,7 @@ export const PaymentWithFeeAndRefund = createExample(TestedComponent, { }, }); -export const PaymentWithFeeAndRefundFee = createExample(TestedComponent, { +export const PaymentWithFeeAndRefundFee = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:11", @@ -410,20 +419,18 @@ export const PaymentWithFeeAndRefundFee = createExample(TestedComponent, { }, }); -export const PaymentWithoutFee = createExample(TestedComponent, { +export const PaymentWithoutFee = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, amountRaw: "KUDOS:12", }, }); -export const PaymentPending = createExample(TestedComponent, { +export const PaymentPending = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, pending: true }, }); -import beer from "../../static-dev/beer.png"; - -export const PaymentWithProducts = createExample(TestedComponent, { +export const PaymentWithProducts = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, info: { @@ -460,7 +467,7 @@ export const PaymentWithProducts = createExample(TestedComponent, { } as TransactionPayment, }); -export const PaymentWithLongSummary = createExample(TestedComponent, { +export const PaymentWithLongSummary = tests.createExample(TestedComponent, { transaction: { ...exampleData.payment, info: { @@ -484,16 +491,16 @@ export const PaymentWithLongSummary = createExample(TestedComponent, { } as TransactionPayment, }); -export const Deposit = createExample(TestedComponent, { +export const Deposit = tests.createExample(TestedComponent, { transaction: exampleData.deposit, }); -export const DepositTalerBank = createExample(TestedComponent, { +export const DepositTalerBank = tests.createExample(TestedComponent, { transaction: { ...exampleData.deposit, targetPaytoUri: "payto://x-taler-bank/bank.demo.taler.net/Exchange", }, }); -export const DepositBitcoin = createExample(TestedComponent, { +export const DepositBitcoin = tests.createExample(TestedComponent, { transaction: { ...exampleData.deposit, amountRaw: "BITCOINBTC:0.0000011", @@ -502,88 +509,88 @@ export const DepositBitcoin = createExample(TestedComponent, { "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", }, }); -export const DepositIBAN = createExample(TestedComponent, { +export const DepositIBAN = tests.createExample(TestedComponent, { transaction: { ...exampleData.deposit, targetPaytoUri: "payto://iban/ES8877998399652238", }, }); -export const DepositError = createExample(TestedComponent, { +export const DepositError = tests.createExample(TestedComponent, { transaction: { ...exampleData.deposit, error: transactionError, }, }); -export const DepositPending = createExample(TestedComponent, { +export const DepositPending = tests.createExample(TestedComponent, { transaction: { ...exampleData.deposit, pending: true }, }); -export const Refresh = createExample(TestedComponent, { +export const Refresh = tests.createExample(TestedComponent, { transaction: exampleData.refresh, }); -export const RefreshError = createExample(TestedComponent, { +export const RefreshError = tests.createExample(TestedComponent, { transaction: { ...exampleData.refresh, error: transactionError, }, }); -export const Tip = createExample(TestedComponent, { +export const Tip = tests.createExample(TestedComponent, { transaction: exampleData.tip, }); -export const TipError = createExample(TestedComponent, { +export const TipError = tests.createExample(TestedComponent, { transaction: { ...exampleData.tip, error: transactionError, }, }); -export const TipPending = createExample(TestedComponent, { +export const TipPending = tests.createExample(TestedComponent, { transaction: { ...exampleData.tip, pending: true }, }); -export const Refund = createExample(TestedComponent, { +export const Refund = tests.createExample(TestedComponent, { transaction: exampleData.refund, }); -export const RefundError = createExample(TestedComponent, { +export const RefundError = tests.createExample(TestedComponent, { transaction: { ...exampleData.refund, error: transactionError, }, }); -export const RefundPending = createExample(TestedComponent, { +export const RefundPending = tests.createExample(TestedComponent, { transaction: { ...exampleData.refund, pending: true }, }); -export const InvoiceCreditComplete = createExample(TestedComponent, { +export const InvoiceCreditComplete = tests.createExample(TestedComponent, { transaction: { ...exampleData.pull_credit }, }); -export const InvoiceCreditIncomplete = createExample(TestedComponent, { +export const InvoiceCreditIncomplete = tests.createExample(TestedComponent, { transaction: { ...exampleData.pull_credit, pending: true, }, }); -export const InvoiceDebit = createExample(TestedComponent, { +export const InvoiceDebit = tests.createExample(TestedComponent, { transaction: { ...exampleData.pull_debit }, }); -export const TransferCredit = createExample(TestedComponent, { +export const TransferCredit = tests.createExample(TestedComponent, { transaction: { ...exampleData.push_credit }, }); -export const TransferDebitComplete = createExample(TestedComponent, { +export const TransferDebitComplete = tests.createExample(TestedComponent, { transaction: { ...exampleData.push_debit }, }); -export const TransferDebitIncomplete = createExample(TestedComponent, { +export const TransferDebitIncomplete = tests.createExample(TestedComponent, { transaction: { ...exampleData.push_debit, pending: true, diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 542694490..f22f3b4ee 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -44,7 +44,7 @@ import emptyImg from "../../static/img/empty.png"; import { Amount } from "../components/Amount.js"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js"; import { CopyButton } from "../components/CopyButton.js"; -import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js"; +import { ErrorAlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js"; import { QR } from "../components/QR.js"; @@ -99,8 +99,8 @@ export function TransactionPage({ if (state.hasError) { return ( - <AlertView - alert={alertFromError( + <ErrorAlertView + error={alertFromError( i18n.str`Could not load transaction information`, state, )} diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx index 7e52d4270..4e05e1b59 100644 --- a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { View as TestedComponent } from "./Welcome.js"; export default { @@ -27,7 +27,7 @@ export default { component: TestedComponent, }; -export const Normal = createExample(TestedComponent, { +export const Normal = tests.createExample(TestedComponent, { permissionToggle: { value: true, button: {} }, diagnostics: { errors: [], @@ -38,11 +38,11 @@ export const Normal = createExample(TestedComponent, { }, }); -export const TimedoutDiagnostics = createExample(TestedComponent, { +export const TimedoutDiagnostics = tests.createExample(TestedComponent, { timedOut: true, permissionToggle: { value: true, button: {} }, }); -export const RunningDiagnostics = createExample(TestedComponent, { +export const RunningDiagnostics = tests.createExample(TestedComponent, { permissionToggle: { value: true, button: {} }, }); |