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(-)
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 (
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 {
);
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 {
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({
);
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 {
}
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({
)}
- 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({
);
@@ -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({