From af7b107f455b01e136db2211c357cc59a506139a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 1 Jun 2022 15:47:47 -0300 Subject: mui button impl --- .../src/components/Banner.stories.tsx | 4 +- .../src/components/Banner.tsx | 2 +- .../src/components/Checkbox.tsx | 2 +- .../src/components/CheckboxOutlined.tsx | 2 +- .../src/components/MultiActionButton.tsx | 40 ++++---- .../src/context/devContext.ts | 10 +- .../taler-wallet-webextension/src/cta/Deposit.tsx | 11 +- .../src/cta/Pay.stories.tsx | 40 ++++---- packages/taler-wallet-webextension/src/cta/Pay.tsx | 26 +++-- .../taler-wallet-webextension/src/cta/Refund.tsx | 5 +- .../src/cta/TermsOfServiceSection.tsx | 23 +++-- packages/taler-wallet-webextension/src/cta/Tip.tsx | 8 +- .../taler-wallet-webextension/src/cta/Withdraw.tsx | 25 ++--- .../src/mui/Alert.stories.tsx | 12 ++- .../taler-wallet-webextension/src/mui/Alert.tsx | 2 +- .../taler-wallet-webextension/src/mui/Button.tsx | 21 +++- .../taler-wallet-webextension/src/mui/style.tsx | 42 ++++++-- .../src/popup/Application.tsx | 26 +++-- .../src/popup/BalancePage.tsx | 32 +++--- .../src/popup/NoBalanceHelp.tsx | 2 +- .../src/popup/TalerActionFound.tsx | 52 +++++++--- .../src/wallet/AddNewActionView.tsx | 21 ++-- .../src/wallet/Application.tsx | 55 +++++----- .../src/wallet/BackupPage.tsx | 19 ++-- .../src/wallet/CreateManualWithdraw.tsx | 8 +- .../src/wallet/DepositPage.tsx | 23 +++-- .../src/wallet/DeveloperPage.tsx | 111 ++++++++++++--------- .../src/wallet/ExchangeAddConfirm.tsx | 37 +++---- .../src/wallet/ExchangeAddPage.tsx | 2 +- .../src/wallet/ExchangeSetUrl.tsx | 14 +-- .../src/wallet/History.tsx | 25 +++-- .../src/wallet/ManualWithdrawPage.tsx | 2 +- .../src/wallet/ProviderAddPage.tsx | 32 +++--- .../src/wallet/ProviderDetailPage.tsx | 41 ++++---- .../src/wallet/ReserveCreated.tsx | 13 +-- .../src/wallet/Settings.tsx | 2 +- .../src/wallet/Transaction.tsx | 51 +++++----- 37 files changed, 476 insertions(+), 367 deletions(-) (limited to 'packages') diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index f91d94d0f..c8a7a5eef 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -77,8 +77,8 @@ export const BasicExample = (): VNode => ( ]} confirm={{ label: "turn on wifi", - action: () => { - return null; + action: async () => { + return; }, }} /> diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 88b36430b..c1f216f05 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -15,7 +15,7 @@ interface Props extends JSX.HTMLAttributes { }[]; confirm?: { label: string; - action: () => void; + action: () => Promise; }; } diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx index 2e14f3367..5b782c628 100644 --- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx +++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx @@ -18,7 +18,7 @@ import { h, VNode } from "preact"; interface Props { enabled?: boolean; - onToggle?: () => void; + onToggle?: () => Promise; label: VNode; name: string; description?: VNode; diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx index 1b38935c0..a596ba94d 100644 --- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx +++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx @@ -19,7 +19,7 @@ import { h, VNode } from "preact"; interface Props { enabled: boolean; - onToggle: () => void; + onToggle: () => Promise; label: VNode; name: string; } diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index c4ccaa696..3bc6ba400 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -1,16 +1,14 @@ +import { getUnpackedSettings } from "http2"; import { h, VNode } from "preact"; -import arrowDown from "../svg/chevron-down.svg"; -import { - ButtonBoxPrimary, - ButtonPrimary, - ParagraphClickable, -} from "./styled/index.js"; import { useState } from "preact/hooks"; +import { Button } from "../mui/Button.js"; +import arrowDown from "../svg/chevron-down.svg"; +import { ParagraphClickable } from "./styled/index.js"; export interface Props { label: (s: string) => VNode; actions: string[]; - onClick: (s: string) => void; + onClick: (s: string) => Promise; } /** @@ -43,9 +41,9 @@ export function MultiActionButton({ if (!canChange) { return ( - doClick(selected)}> + ); } @@ -73,40 +71,44 @@ export function MultiActionButton({ ))} )} - doClick(selected)} style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0, marginRight: 0, - maxWidth: 170, + // maxWidth: 170, overflowX: "hidden", textOverflow: "ellipsis", }} > {label(selected)} - + - setOpened((s) => !s)} + ); } diff --git a/packages/taler-wallet-webextension/src/context/devContext.ts b/packages/taler-wallet-webextension/src/context/devContext.ts index 1ce483d8d..ec79f22d8 100644 --- a/packages/taler-wallet-webextension/src/context/devContext.ts +++ b/packages/taler-wallet-webextension/src/context/devContext.ts @@ -25,11 +25,11 @@ import { useLocalStorage } from "../hooks/useLocalStorage.js"; interface Type { devMode: boolean; - toggleDevMode: () => void; + toggleDevMode: () => Promise; } const Context = createContext({ devMode: false, - toggleDevMode: () => null, + toggleDevMode: async () => { return; }, }); export const useDevContext = (): Type => useContext(Context); @@ -44,8 +44,8 @@ export const DevContextProviderForTesting = ({ return h(Context.Provider, { value: { devMode: value, - toggleDevMode: () => { - null; + toggleDevMode: async () => { + return; }, }, children, @@ -55,7 +55,7 @@ export const DevContextProviderForTesting = ({ export const DevContextProvider = ({ children }: { children: any }): VNode => { const [value, setter] = useLocalStorage("devMode"); const devMode = value === "true"; - const toggleDevMode = (): void => setter((v) => (!v ? "true" : undefined)); + const toggleDevMode = async (): Promise => setter((v) => (!v ? "true" : undefined)); children = children.length === 1 && typeof children === "function" ? children({ devMode }) diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx index 2fc7cbc41..3cbd46e30 100644 --- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx +++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx @@ -44,13 +44,14 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { ButtonHandler } from "../mui/handlers.js"; import * as wxApi from "../wxApi.js"; interface Props { talerDepositUri?: string; amount: AmountString; - goBack: () => void; + goBack: () => Promise; } type State = Loading | Ready | Completed; @@ -206,11 +207,15 @@ export function View({ state }: ViewProps): VNode { />
- +
); diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx index 76bfa3ab3..04b44fcda 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx @@ -33,6 +33,10 @@ export default { argTypes: {}, }; +const noop = async (): Promise => { + return; +}; + export const NoBalance = createExample(TestedComponent, { state: { status: "ready", @@ -61,8 +65,8 @@ export const NoBalance = createExample(TestedComponent, { amountRaw: "USD:10", }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const NoEnoughBalance = createExample(TestedComponent, { @@ -97,8 +101,8 @@ export const NoEnoughBalance = createExample(TestedComponent, { amountRaw: "USD:10", }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const EnoughBalanceButRestricted = createExample(TestedComponent, { @@ -133,8 +137,8 @@ export const EnoughBalanceButRestricted = createExample(TestedComponent, { amountRaw: "USD:10", }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const PaymentPossible = createExample(TestedComponent, { @@ -172,8 +176,8 @@ export const PaymentPossible = createExample(TestedComponent, { proposalId: "proposal1234", }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const PaymentPossibleWithFee = createExample(TestedComponent, { @@ -211,8 +215,8 @@ export const PaymentPossibleWithFee = createExample(TestedComponent, { proposalId: "proposal1234", }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); import beer from "../../static-dev/beer.png"; @@ -271,8 +275,8 @@ export const TicketWithAProductList = createExample(TestedComponent, { proposalId: "proposal1234", }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const AlreadyConfirmedByOther = createExample(TestedComponent, { @@ -309,8 +313,8 @@ export const AlreadyConfirmedByOther = createExample(TestedComponent, { paid: false, }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const AlreadyPaidWithoutFulfillment = createExample(TestedComponent, { @@ -347,8 +351,8 @@ export const AlreadyPaidWithoutFulfillment = createExample(TestedComponent, { paid: true, }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); export const AlreadyPaidWithFulfillment = createExample(TestedComponent, { @@ -387,6 +391,6 @@ export const AlreadyPaidWithFulfillment = createExample(TestedComponent, { paid: true, }, }, - goBack: () => null, - goToWalletManualWithdraw: () => null, + goBack: noop, + goToWalletManualWithdraw: noop, }); diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 4f44ebab2..59e26c40e 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -60,13 +60,14 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { ButtonHandler } from "../mui/handlers.js"; import * as wxApi from "../wxApi.js"; interface Props { talerPayUri?: string; - goToWalletManualWithdraw: (currency?: string) => void; - goBack: () => void; + goToWalletManualWithdraw: (currency?: string) => Promise; + goBack: () => Promise; } type State = Loading | Ready | Confirmed; @@ -265,8 +266,8 @@ export function View({ goToWalletManualWithdraw, }: { state: Ready | Confirmed; - goToWalletManualWithdraw: (currency?: string) => void; - goBack: () => void; + goToWalletManualWithdraw: (currency?: string) => Promise; + goBack: () => Promise; }): VNode { const { i18n } = useTranslationContext(); const contractTerms: ContractTerms = state.payStatus.contractTerms; @@ -522,7 +523,7 @@ function ButtonsSection({ goToWalletManualWithdraw, }: { state: Ready | Confirmed; - goToWalletManualWithdraw: (currency: string) => void; + goToWalletManualWithdraw: (currency: string) => Promise; }): VNode { const { i18n } = useTranslationContext(); if (state.status === "ready") { @@ -531,11 +532,15 @@ function ButtonsSection({ return (
- +
@@ -560,12 +565,13 @@ function ButtonsSection({ {BalanceMessage}
- goToWalletManualWithdraw(state.amount.currency)} > Withdraw digital cash - +
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx index 5387a1782..004a8604b 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund.tsx +++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx @@ -40,6 +40,7 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { ButtonHandler } from "../mui/handlers.js"; import * as wxApi from "../wxApi.js"; import { ProductList } from "./Pay.js"; @@ -188,9 +189,9 @@ export function View({ state }: ViewProps): VNode { ) : undefined}
- +
); diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx index 057144866..7092468cd 100644 --- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx +++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx @@ -2,14 +2,13 @@ import { Fragment, h, VNode } from "preact"; import { CheckboxOutlined } from "../components/CheckboxOutlined.js"; import { ExchangeXmlTos } from "../components/ExchangeToS.js"; import { - ButtonSuccess, - ButtonWarning, LinkSuccess, TermsOfService, WarningBox, WarningText, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; import { TermsState } from "../utils/index.js"; export interface Props { @@ -58,20 +57,28 @@ export function TermsOfServiceSection({ )} {terms.status === "new" && (
- onReview(true)}> +
)} {terms.status === "changed" && (
- onReview(true)}> +
)} @@ -95,7 +102,7 @@ export function TermsOfServiceSection({ I accept the exchange terms of service } - onToggle={() => { + onToggle={async () => { onAccept(!reviewed); if (ableToReviewTermsOfService) onReview(false); }} @@ -154,7 +161,7 @@ export function TermsOfServiceSection({ I accept the exchange terms of service } - onToggle={() => { + onToggle={async () => { onAccept(!reviewed); if (ableToReviewTermsOfService) onReview(false); }} diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx index dc4757b33..156d4f5a3 100644 --- a/packages/taler-wallet-webextension/src/cta/Tip.tsx +++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx @@ -210,9 +210,13 @@ export function View({ state }: { state: State }): VNode { />
- + diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index c4bc3457a..4b8aeccd0 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -33,8 +33,6 @@ import { LogoHeader } from "../components/LogoHeader.js"; import { Part } from "../components/Part.js"; import { SelectList } from "../components/SelectList.js"; import { - ButtonSuccess, - ButtonWarning, Input, LinkSuccess, SubTitle, @@ -43,19 +41,14 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; +import { ButtonHandler, SelectFieldHandler } from "../mui/handlers.js"; import { buildTermsOfServiceState } from "../utils/index.js"; -import { - ButtonHandler, - SelectFieldHandler, - ToggleHandler, -} from "../mui/handlers.js"; import * as wxApi from "../wxApi.js"; import { Props as TermsOfServiceSectionProps, TermsOfServiceSection, } from "./TermsOfServiceSection.js"; -import { startOfWeekYear } from "date-fns/esm"; -import { Checkbox } from "../components/Checkbox.js"; interface Props { talerWithdrawUri?: string; @@ -527,22 +520,24 @@ export function View({ state }: { state: State }): VNode {
{(state.tosProps.terms.status === "accepted" || (state.mustAcceptFirst && state.tosProps.reviewed)) && ( - Confirm withdrawal - + )} {state.tosProps.terms.status === "notfound" && ( - Withdraw anyway - + )}
) : ( diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx index 12b2a8625..a2c8576c7 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx @@ -68,18 +68,22 @@ export const WithTitle = (): VNode => ( ); +const showSomething = async function (): Promise { + alert("closed"); +}; + export const WithAction = (): VNode => ( - alert("closed")}> + this is an warning - alert("closed")}> + this is an error - alert("closed")}> + this is an success - alert("closed")}> + this is an info diff --git a/packages/taler-wallet-webextension/src/mui/Alert.tsx b/packages/taler-wallet-webextension/src/mui/Alert.tsx index 7d0ce55d0..b2ea1f5d7 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.tsx @@ -49,7 +49,7 @@ interface Props { title?: string; variant?: "filled" | "outlined" | "standard"; role?: string; - onClose?: () => void; + onClose?: () => Promise; // icon: VNode; severity?: "info" | "warning" | "success" | "error"; children: ComponentChildren; diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx index 451b1d48d..3f8702f88 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -1,7 +1,7 @@ import { ComponentChildren, h, VNode, JSX } from "preact"; import { css } from "@linaria/core"; // eslint-disable-next-line import/extensions -import { theme, ripple, Colors } from "./style"; +import { theme, ripple, Colors, rippleOutlined } from "./style"; // eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation"; @@ -31,12 +31,13 @@ interface Props { disableFocusRipple?: boolean; endIcon?: string | VNode; fullWidth?: boolean; + style?: h.JSX.CSSProperties; href?: string; size?: "small" | "medium" | "large"; startIcon?: VNode | string; variant?: "contained" | "outlined" | "text"; color?: Colors; - onClick?: () => void; + onClick?: () => Promise; } const button = css` @@ -199,6 +200,7 @@ export function Button({ fullWidth, variant = "text", size = "medium", + style: parentStyle, color = "primary", onClick, }: Props): VNode { @@ -267,12 +269,15 @@ export function Button({ colorVariant[variant], sizeVariant[variant][size], ].join(" ")} + containedRipple={variant === "contained"} onClick={onClick} style={{ + ...parentStyle, "--color-main": theme.palette[color].main, "--color-contrastText": theme.palette[color].contrastText, "--color-main-alpha-half": alpha(theme.palette[color].main, 0.5), "--color-dark": theme.palette[color].dark, + "--color-light": theme.palette[color].light, "--color-main-alpha-opacity": alpha( theme.palette[color].main, theme.palette.action.hoverOpacity, @@ -295,13 +300,15 @@ export function Button({ interface BaseProps extends JSX.HTMLAttributes { class: string; - onClick?: () => void; + onClick?: () => Promise; + containedRipple?: boolean; children?: ComponentChildren; } function ButtonBase({ class: _class, children, + containedRipple, onClick, dangerouslySetInnerHTML, ...rest @@ -309,7 +316,11 @@ function ButtonBase({ function doClick(): void { if (onClick) onClick(); } - const classNames = [buttonBaseStyle, _class, ripple].join(" "); + const classNames = [ + buttonBaseStyle, + _class, + containedRipple ? ripple : rippleOutlined, + ].join(" "); if (dangerouslySetInnerHTML) { return (
- + {currencyWithNonZeroAmount.length > 0 && ( ( - Deposit {{s}} - )} + label={(s) => Deposit {s}} actions={currencyWithNonZeroAmount} onClick={(c) => goToWalletDeposit(c)} /> )} - +
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx index ddce93cd8..20f44b5dc 100644 --- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx +++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -8,7 +8,7 @@ import { Typography } from "../mui/Typography.js"; export function NoBalanceHelp({ goToWalletManualWithdraw, }: { - goToWalletManualWithdraw: () => void; + goToWalletManualWithdraw: () => Promise; }): VNode { return ( void; + onDismiss: () => Promise; } export function TalerActionFound({ url, onDismiss }: Props): VNode { const uriType = classifyTalerUri(url); const { i18n } = useTranslationContext(); - function redirectToWallet(): void { + async function redirectToWallet(): Promise { platform.openWalletURIFromPopup(url); } return ( @@ -51,9 +52,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode {

This page has pay action.

- + )} {uriType === TalerUriType.TalerWithdraw && ( @@ -63,9 +68,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { This page has a withdrawal action.

- + )} {uriType === TalerUriType.TalerTip && ( @@ -73,9 +82,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode {

This page has a tip action.

- + )} {uriType === TalerUriType.TalerNotifyReserve && ( @@ -85,9 +98,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { This page has a notify reserve action.

- + )} {uriType === TalerUriType.TalerRefund && ( @@ -95,9 +112,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode {

This page has a refund action.

- + )} {uriType === TalerUriType.Unknown && ( @@ -113,10 +134,9 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode {
- onDismiss()}> - {" "} - Dismiss{" "} - +
); diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx index c4daf458a..cd1fa0763 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx @@ -2,15 +2,12 @@ import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { platform } from "../platform/api.js"; -import { - Button, - ButtonSuccess, - InputWithLabel, -} from "../components/styled/index.js"; +import { InputWithLabel } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; export interface Props { - onCancel: () => void; + onCancel: () => Promise; } export function AddNewActionView({ onCancel }: Props): VNode { @@ -18,7 +15,7 @@ export function AddNewActionView({ onCancel }: Props): VNode { const uriType = classifyTalerUri(url); const { i18n } = useTranslationContext(); - function redirectToWallet(): void { + async function redirectToWallet(): Promise { platform.openWalletURIFromPopup(url); } @@ -41,11 +38,15 @@ export function AddNewActionView({ onCancel }: Props): VNode {
- {uriType !== TalerUriType.Unknown && ( - + )}
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx index 6a7f62c6c..37ea80d96 100644 --- a/packages/taler-wallet-webextension/src/wallet/Application.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx @@ -94,7 +94,9 @@ export function Application(): VNode { > - route(Pages.balance_transaction.replace(":tid", txId)) + redirectTo( + Pages.balance_transaction.replace(":tid", txId), + ) } /> @@ -123,10 +125,12 @@ export function Application(): VNode { path={Pages.balance_history} component={HistoryPage} goToWalletDeposit={(currency: string) => - route(Pages.balance_deposit.replace(":currency", currency)) + redirectTo( + Pages.balance_deposit.replace(":currency", currency), + ) } goToWalletManualWithdraw={(currency?: string) => - route( + redirectTo( Pages.balance_manual_withdraw.replace( ":currency?", currency || "", @@ -137,29 +141,31 @@ export function Application(): VNode { { - route( + goToWalletHistory={(currency?: string) => + redirectTo( Pages.balance_history.replace(":currency?", currency || ""), - ); - }} + ) + } /> { - route(Pages.balance); - }} + onCancel={() => redirectTo(Pages.balance)} /> { - route(Pages.balance_history.replace(":currency?", currency)); + redirectTo( + Pages.balance_history.replace(":currency?", currency), + ); }} onSuccess={(currency: string) => { - route(Pages.balance_history.replace(":currency?", currency)); + redirectTo( + Pages.balance_history.replace(":currency?", currency), + ); setGlobalNotification( All done, your transaction is in progress @@ -178,23 +184,17 @@ export function Application(): VNode { { - route(Pages.backup_provider_add); - }} + onAddProvider={() => redirectTo(Pages.backup_provider_add)} /> { - route(Pages.backup); - }} + onBack={() => redirectTo(Pages.backup)} /> { - route(Pages.backup); - }} + onBack={() => redirectTo(Pages.backup)} /> {/** @@ -203,9 +203,7 @@ export function Application(): VNode { { - route(Pages.balance); - }} + onBack={() => redirectTo(Pages.balance)} /> {/** @@ -221,14 +219,14 @@ export function Application(): VNode { path={Pages.cta_pay} component={PayPage} goToWalletManualWithdraw={(currency?: string) => - route( + redirectTo( Pages.balance_manual_withdraw.replace( ":currency?", currency || "", ), ) } - goBack={() => route(Pages.balance)} + goBack={() => redirectTo(Pages.balance)} /> @@ -258,9 +256,12 @@ export function Application(): VNode { ); } +async function redirectTo(location: string): Promise { + route(location); +} + function Redirect({ to }: { to: string }): null { useEffect(() => { - console.log("got some wrong route", to); route(to, true); }); return null; diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index 505aa600b..1f23be856 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -31,8 +31,6 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { BoldLight, - ButtonPrimary, - ButtonSuccess, Centered, CenteredBoldText, CenteredText, @@ -42,11 +40,12 @@ import { } from "../components/styled/index.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 * as wxApi from "../wxApi.js"; interface Props { - onAddProvider: () => void; + onAddProvider: () => Promise; } export function BackupPage({ onAddProvider }: Props): VNode { @@ -87,7 +86,7 @@ export function BackupPage({ onAddProvider }: Props): VNode { export interface ViewProps { providers: ProviderInfo[]; - onAddProvider: () => void; + onAddProvider: () => Promise; onSyncAll: () => Promise; } @@ -121,9 +120,9 @@ export function BackupView({ No backup providers configured - + )} @@ -131,16 +130,16 @@ export function BackupView({
- + +
)} diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 11bade6f5..502e9f8ad 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -21,14 +21,12 @@ */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; -import { TalerError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { SelectList } from "../components/SelectList.js"; import { BoldLight, - ButtonPrimary, Centered, Input, InputWithLabel, @@ -37,6 +35,7 @@ import { SubTitle, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; import { SelectFieldHandler, TextFieldHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; @@ -270,12 +269,13 @@ export function CreateManualWithdraw({
- onCreate(state.exchange.value, state.parsedAmount!)} > Start withdrawal - +
); diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index 9b8008175..1546674f1 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -23,8 +23,6 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { SelectList } from "../components/SelectList.js"; import { - Button, - ButtonPrimary, ErrorText, Input, InputWithLabel, @@ -33,6 +31,7 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { ButtonHandler, SelectFieldHandler, @@ -275,7 +274,11 @@ export function View({ state }: ViewProps): VNode {

-
@@ -345,20 +348,24 @@ export function View({ state }: ViewProps): VNode { }
- {!state.depositHandler.onClick ? ( - + ) : ( - + )}
diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx index c4725a8d7..e71ea48f0 100644 --- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx @@ -30,6 +30,9 @@ import { Time } from "../components/Time.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 { Paper } from "../mui/Paper.js"; import * as wxApi from "../wxApi.js"; export function DeveloperPage(): VNode { @@ -133,7 +136,6 @@ export function View({ const money_by_exchange = coins.reduce( (prev, cur) => { const denom = Amounts.parseOrThrow(cur.denom_value); - console.log(cur); if (!prev[cur.exchange_base_url]) { prev[cur.exchange_base_url] = []; currencies[cur.exchange_base_url] = denom.currency; @@ -154,57 +156,72 @@ export function View({ [exchange_name: string]: CalculatedCoinfInfo[]; }, ); - + function Item({ children }: any) { + return
{children}
; + } return (

Debug tools:

- - -
- - { - const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) { - return Promise.reject(); - } - const buf = await f[0].arrayBuffer(); - const str = new Uint8Array(buf).reduce( - (data, byte) => data + String.fromCharCode(byte), - "", - ); - return onImportDatabase(str); - }} - /> -
- + + + + + + + + + + + + { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) { + return Promise.reject(); + } + const buf = await f[0].arrayBuffer(); + const str = new Uint8Array(buf).reduce( + (data, byte) => data + String.fromCharCode(byte), + "", + ); + return onImportDatabase(str); + }} + /> + + + {downloadedDatabase && (
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx index 135cf68d8..6f6e7a1ba 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx @@ -1,21 +1,17 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { - Button, - ButtonSuccess, - ButtonWarning, - Title, -} from "../components/styled/index.js"; +import { Title } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { TermsOfServiceSection } from "../cta/TermsOfServiceSection.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { buildTermsOfServiceState, TermsState } from "../utils/index.js"; import * as wxApi from "../wxApi.js"; export interface Props { url: string; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise; + onConfirm: () => Promise; } export function ExchangeAddConfirmPage({ @@ -71,8 +67,8 @@ export interface ViewProps { url: string; terms: TermsState | undefined; onAccept: (b: boolean) => Promise; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise; + onConfirm: () => Promise; } export function View({ @@ -114,30 +110,35 @@ export function View({ )}
- {!terms && ( - )} {terms && ( {needsReview && !reviewed && ( - + )} {(terms.status === "accepted" || (needsReview && reviewed)) && ( - + )} {terms.status === "notfound" && ( - + )} )} diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx index df423bb2b..42a5b4c9c 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx @@ -28,7 +28,7 @@ import { ExchangeSetUrlPage } from "./ExchangeSetUrl.js"; interface Props { currency?: string; - onBack: () => void; + onBack: () => Promise; } export function ExchangeAddPage({ currency, onBack }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index ad8cb7db0..755cf425f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -6,8 +6,6 @@ import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { - Button, - ButtonPrimary, Input, LightText, SubTitle, @@ -15,11 +13,12 @@ import { WarningBox, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; export interface Props { initialValue?: string; expectedCurrency?: string; - onCancel: () => void; + onCancel: () => Promise; onVerify: (s: string) => Promise; onConfirm: (url: string) => Promise; withError?: string; @@ -64,7 +63,7 @@ function useEndpointStatus( } }, 500); setHandler(h); - }, [value, setHandler, handler, onVerify]); + }, [value, setHandler, onVerify]); return { error: dirty ? error : undefined, @@ -172,10 +171,11 @@ export function ExchangeSetUrlPage({

- - Next - +
); diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 59f245522..1ab879195 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -26,7 +26,6 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { ButtonBoxPrimary, - ButtonPrimary, CenteredBoldText, CenteredText, DateSeparator, @@ -36,13 +35,14 @@ import { Time } from "../components/Time.js"; import { TransactionItem } from "../components/TransactionItem.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 * as wxApi from "../wxApi.js"; interface Props { currency?: string; - goToWalletDeposit: (currency: string) => void; - goToWalletManualWithdraw: (currency?: string) => void; + goToWalletDeposit: (currency: string) => Promise; + goToWalletManualWithdraw: (currency?: string) => Promise; } export function HistoryPage({ currency, @@ -101,8 +101,8 @@ export function HistoryView({ goToWalletManualWithdraw, goToWalletDeposit, }: { - goToWalletDeposit: (currency: string) => void; - goToWalletManualWithdraw: (currency?: string) => void; + goToWalletDeposit: (currency: string) => Promise; + goToWalletManualWithdraw: (currency?: string) => Promise; defaultCurrency?: string; transactions: Transaction[]; balances: Balance[]; @@ -198,19 +198,22 @@ export function HistoryView({ )}
- goToWalletManualWithdraw(selectedCurrency)} > Withdraw - + {currencyAmount && Amounts.isNonZero(currencyAmount) && ( - goToWalletDeposit(selectedCurrency)} > Deposit - + )}
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index daa46086e..05ac9cf7f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -34,7 +34,7 @@ import { ReserveCreated } from "./ReserveCreated.js"; interface Props { currency?: string; - onCancel: () => void; + onCancel: () => Promise; } export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index ed4a91f12..7e8dc6589 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -25,8 +25,6 @@ import { useEffect, useState } from "preact/hooks"; import { Checkbox } from "../components/Checkbox.js"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { - Button, - ButtonPrimary, Input, LightText, SmallLightText, @@ -34,12 +32,13 @@ import { Title, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; import { queryToSlashConfig } from "../utils/index.js"; import * as wxApi from "../wxApi.js"; interface Props { currency: string; - onBack: () => void; + onBack: () => Promise; } export function ProviderAddPage({ onBack }: Props): VNode { @@ -67,11 +66,13 @@ export function ProviderAddPage({ onBack }: Props): VNode { { + onCancel={async () => { setVerifying(undefined); }} onConfirm={() => { - wxApi.addBackupProvider(verifying.url, verifying.name).then(onBack); + return wxApi + .addBackupProvider(verifying.url, verifying.name) + .then(onBack); }} /> ); @@ -79,7 +80,7 @@ export function ProviderAddPage({ onBack }: Props): VNode { export interface SetUrlViewProps { initialValue?: string; - onCancel: () => void; + onCancel: () => Promise; onVerify: (s: string) => Promise; onConfirm: (url: string, name: string) => Promise; withError?: string; @@ -161,10 +162,11 @@ export function SetUrlView({

- - { const url = canonicalizeBaseUrl(value); @@ -174,7 +176,7 @@ export function SetUrlView({ }} > Next - +
); @@ -183,8 +185,8 @@ export function SetUrlView({ export interface ConfirmProviderViewProps { provider: BackupBackupProviderTerms; url: string; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise; + onConfirm: () => Promise; } export function ConfirmProviderView({ url, @@ -236,17 +238,17 @@ export function ConfirmProviderView({ Accept terms of service} name="terms" - onToggle={() => setAccepted((old) => !old)} + onToggle={async () => setAccepted((old) => !old)} enabled={accepted} />
- - +
); diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index bf9f55b10..7ea29286b 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -25,21 +25,16 @@ import { Fragment, h, VNode } from "preact"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; -import { - Button, - ButtonDestructive, - ButtonPrimary, - PaymentStatus, - SmallLightText, -} from "../components/styled/index.js"; +import { PaymentStatus, SmallLightText } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import * as wxApi from "../wxApi.js"; interface Props { pid: string; - onBack: () => void; + onBack: () => Promise; } export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { @@ -77,10 +72,10 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { wxApi.syncOneProvider(providerURL)} - onDelete={async () => wxApi.removeProvider(providerURL).then(onBack)} + onSync={() => wxApi.syncOneProvider(providerURL)} + onDelete={() => wxApi.removeProvider(providerURL).then(onBack)} onBack={onBack} - onExtend={() => { + onExtend={async () => { null; }} /> @@ -90,10 +85,10 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { export interface ViewProps { url: string; info: ProviderInfo | null; - onDelete: () => void; - onSync: () => void; - onBack: () => void; - onExtend: () => void; + onDelete: () => Promise; + onSync: () => Promise; + onBack: () => Promise; + onExtend: () => Promise; } export function ProviderView({ @@ -116,7 +111,7 @@ export function ProviderView({

-
@@ -149,9 +144,9 @@ export function ProviderView({ {" "}
@@ -229,13 +227,17 @@ export function TransactionView({
- - +
@@ -387,9 +389,12 @@ export function TransactionView({
- onRefund(transaction.proposalId)}> +
-- cgit v1.2.3