From a994009d2f094c4d9c12da68dac3abb28bdef4b3 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 16 Nov 2021 13:59:53 -0300 Subject: reserveCreated new design --- packages/taler-util/src/payto.ts | 45 ++++- .../src/NavigationBar.tsx | 6 +- .../src/components/Checkbox.tsx | 5 +- .../src/components/CheckboxOutlined.tsx | 5 +- .../src/components/DebugCheckbox.tsx | 4 +- .../src/components/Diagnostics.tsx | 75 ++++----- .../src/components/EditableText.tsx | 47 +++--- .../src/components/ExchangeToS.tsx | 14 +- .../src/components/SelectList.tsx | 10 +- .../src/components/Time.tsx | 41 +++++ .../src/components/TransactionItem.tsx | 17 +- .../src/components/styled/index.tsx | 87 +++++----- packages/taler-wallet-webextension/src/cta/Pay.tsx | 16 +- .../taler-wallet-webextension/src/cta/Refund.tsx | 20 +-- packages/taler-wallet-webextension/src/cta/Tip.tsx | 13 +- .../src/cta/Withdraw.stories.tsx | 115 ++++--------- .../taler-wallet-webextension/src/cta/Withdraw.tsx | 13 +- .../taler-wallet-webextension/src/cta/payback.tsx | 5 +- .../src/cta/reset-required.tsx | 6 +- .../src/cta/return-coins.tsx | 5 +- .../src/popup/BackupPage.tsx | 11 +- .../src/popup/BalancePage.tsx | 25 ++- .../taler-wallet-webextension/src/popup/Debug.tsx | 7 +- .../src/popup/History.tsx | 4 +- .../taler-wallet-webextension/src/renderHtml.tsx | 19 ++- .../src/wallet/BackupPage.tsx | 12 +- .../src/wallet/BalancePage.tsx | 18 +- .../src/wallet/CreateManualWithdraw.stories.tsx | 21 +-- .../src/wallet/CreateManualWithdraw.tsx | 89 +++++++--- .../src/wallet/History.tsx | 37 +++-- .../src/wallet/ManualWithdrawPage.tsx | 55 +++---- .../src/wallet/ProviderDetailPage.tsx | 119 +++++++------- .../src/wallet/ReserveCreated.stories.tsx | 26 ++- .../src/wallet/ReserveCreated.tsx | 183 +++++++++++++++------ .../src/wallet/Transaction.tsx | 92 +++++------ .../src/wallet/Welcome.tsx | 7 +- .../taler-wallet-webextension/static/wallet.html | 20 ++- 37 files changed, 736 insertions(+), 558 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/Time.tsx (limited to 'packages') diff --git a/packages/taler-util/src/payto.ts b/packages/taler-util/src/payto.ts index 504db533b..fc3380555 100644 --- a/packages/taler-util/src/payto.ts +++ b/packages/taler-util/src/payto.ts @@ -16,12 +16,31 @@ import { URLSearchParams } from "./url.js"; -interface PaytoUri { +export type PaytoUri = PaytoUriUnknown | PaytoUriIBAN | PaytoUriTalerBank; + +interface PaytoUriGeneric { targetType: string; targetPath: string; params: { [name: string]: string }; } +interface PaytoUriUnknown extends PaytoUriGeneric { + isKnown: false; +} + +interface PaytoUriIBAN extends PaytoUriGeneric { + isKnown: true; + targetType: 'iban', + iban: string; +} + +interface PaytoUriTalerBank extends PaytoUriGeneric { + isKnown: true; + targetType: 'x-taler-bank', + host: string; + account: string; +} + const paytoPfx = "payto://"; /** @@ -63,9 +82,33 @@ export function parsePaytoUri(s: string): PaytoUri | undefined { params[v] = k; }); + if (targetType === 'x-taler-bank') { + const parts = targetPath.split('/') + const host = parts[0] + const account = parts[1] + return { + targetPath, + targetType, + params, + isKnown: true, + host, account, + }; + + } + if (targetType === 'iban') { + return { + isKnown: true, + targetPath, + targetType, + params, + iban: targetPath + }; + + } return { targetPath, targetType, params, + isKnown: false }; } diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index f206fa2dd..56704fb57 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -25,10 +25,10 @@ * Imports. */ import { i18n } from "@gnu-taler/taler-util"; -import { ComponentChildren, JSX, h } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; import Match from "preact-router/match"; -import { useDevContext } from "./context/devContext"; import { PopupNavigation } from "./components/styled"; +import { useDevContext } from "./context/devContext"; export enum Pages { welcome = "/welcome", @@ -59,7 +59,7 @@ interface TabProps { children?: ComponentChildren; } -function Tab(props: TabProps): JSX.Element { +function Tab(props: TabProps): VNode { let cssClass = ""; if (props.current?.startsWith(props.target)) { cssClass = "active"; diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx index 276ac9ff0..59e84f4b0 100644 --- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx +++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx @@ -14,8 +14,7 @@ GNU Taler; see the file COPYING. If not, see */ -import { JSX } from "preact/jsx-runtime"; -import { h } from "preact"; +import { h, VNode } from "preact"; interface Props { enabled: boolean; @@ -30,7 +29,7 @@ export function Checkbox({ onToggle, label, description, -}: Props): JSX.Element { +}: Props): VNode { return (
*/ -import { JSX } from "preact/jsx-runtime"; import { Outlined, StyledCheckboxLabel } from "./styled/index"; -import { h } from "preact"; +import { h, VNode } from "preact"; interface Props { enabled: boolean; @@ -47,7 +46,7 @@ export function CheckboxOutlined({ enabled, onToggle, label, -}: Props): JSX.Element { +}: Props): VNode { return ( diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx index 952df15ae..b57075805 100644 --- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see */ -import { JSX, h } from "preact"; +import { h, VNode } from "preact"; export function DebugCheckbox({ enabled, @@ -22,7 +22,7 @@ export function DebugCheckbox({ }: { enabled: boolean; onToggle: () => void; -}): JSX.Element { +}): VNode { return (
Diagnostics timed out. Could not talk to the wallet backend.

; } if (diagnostics) { if (diagnostics.errors.length === 0) { - return null; - } else { - return ( -
-

Problems detected:

-
    - {diagnostics.errors.map((errMsg) => ( -
  1. {errMsg}
    2. - ))} -
- {diagnostics.firefoxIdbProblem ? ( -

- Please check in your about:config settings that you - have IndexedDB enabled (check the preference name{" "} - dom.indexedDB.enabled). -

- ) : null} - {diagnostics.dbOutdated ? ( -

- Your wallet database is outdated. Currently automatic migration is - not supported. Please go{" "} - here to reset the - wallet database. -

- ) : null} -
- ); + return ; } + return ( +
+

Problems detected:

+
    + {diagnostics.errors.map((errMsg) => ( +
  1. {errMsg}
    2. + ))} +
+ {diagnostics.firefoxIdbProblem ? ( +

+ Please check in your about:config settings that you + have IndexedDB enabled (check the preference name{" "} + dom.indexedDB.enabled). +

+ ) : null} + {diagnostics.dbOutdated ? ( +

+ Your wallet database is outdated. Currently automatic migration is + not supported. Please go{" "} + here to reset the + wallet database. +

+ ) : null} +
+ ); } return

Running diagnostics ...

; diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 8b3e6d375..72bfbe809 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -14,9 +14,8 @@ GNU Taler; see the file COPYING. If not, see */ -import { h } from "preact"; +import { h, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; -import { JSX } from "preact/jsx-runtime"; interface Props { value: string; @@ -31,31 +30,35 @@ export function EditableText({ onChange, label, description, -}: Props): JSX.Element { +}: Props): VNode { const [editing, setEditing] = useState(false); const ref = useRef(null); let InputText; if (!editing) { - InputText = () => ( -
-

{value}

- -
- ); + InputText = function InputToEdit(): VNode { + return ( +
+

{value}

+ +
+ ); + }; } else { - InputText = () => ( -
- - -
- ); + InputText = function InputEditing(): VNode { + return ( +
+ + +
+ ); + }; } return (
diff --git a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx index 6d2731cd8..a71108c50 100644 --- a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx +++ b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx @@ -13,12 +13,10 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ -import { Fragment, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; -import { JSXInternal } from "preact/src/jsx"; -import { h } from "preact"; -export function ExchangeXmlTos({ doc }: { doc: Document }) { +export function ExchangeXmlTos({ doc }: { doc: Document }): VNode { const termsNode = doc.querySelector("[ids=terms-of-service]"); if (!termsNode) { return ( @@ -70,7 +68,7 @@ function renderChild(child: Element): VNode { default: return (
- unknown tag {child.nodeName} + unknown tag {child.nodeName}
); } @@ -81,10 +79,10 @@ function renderChild(child: Element): VNode { * @returns */ function AnchorWithOpenState( - props: JSXInternal.HTMLAttributes, -) { + props: h.JSX.HTMLAttributes, +): VNode { const [open, setOpen] = useState(false); - function doClick(e: JSXInternal.TargetedMouseEvent) { + function doClick(e: h.JSX.TargetedMouseEvent): void { setOpen(!open); e.preventDefault(); } diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx index f89ba19b2..78dd2feb4 100644 --- a/packages/taler-wallet-webextension/src/components/SelectList.tsx +++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx @@ -14,9 +14,8 @@ GNU Taler; see the file COPYING. If not, see */ -import { JSX } from "preact/jsx-runtime"; +import { Fragment, h, VNode } from "preact"; import { NiceSelect } from "./styled/index"; -import { h } from "preact"; interface Props { value?: string; @@ -34,13 +33,12 @@ export function SelectList({ name, value, list, - canBeNull, onChange, label, description, -}: Props): JSX.Element { +}: Props): VNode { return ( -
+
+ ); } diff --git a/packages/taler-wallet-webextension/src/components/Time.tsx b/packages/taler-wallet-webextension/src/components/Time.tsx new file mode 100644 index 000000000..452b08334 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Time.tsx @@ -0,0 +1,41 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see + */ + +import { Timestamp } from "@gnu-taler/taler-util"; +import { formatISO, format } from "date-fns"; +import { h, VNode } from "preact"; + +export function Time({ + timestamp, + format: formatString, +}: { + timestamp: Timestamp | undefined; + format: string; +}): VNode { + return ( + + ); +} diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index 1917d5627..99ca86385 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -20,8 +20,7 @@ import { Transaction, TransactionType, } from "@gnu-taler/taler-util"; -import { format, formatDistance } from "date-fns"; -import { h } from "preact"; +import { h, VNode } from "preact"; import imageBank from "../../static/img/ri-bank-line.svg"; import imageHandHeart from "../../static/img/ri-hand-heart-line.svg"; import imageRefresh from "../../static/img/ri-refresh-line.svg"; @@ -36,11 +35,12 @@ import { LargeText, LightText, } from "./styled/index"; +import { Time } from "./Time"; export function TransactionItem(props: { tx: Transaction; multiCurrency: boolean; -}): JSX.Element { +}): VNode { const tx = props.tx; switch (tx.type) { case TransactionType.Withdrawal: @@ -125,10 +125,7 @@ export function TransactionItem(props: { } } -function TransactionLayout(props: TransactionLayoutProps): JSX.Element { - const date = new Date(props.timestamp.t_ms); - const dateStr = format(date, "dd MMM, hh:mm"); - +function TransactionLayout(props: TransactionLayoutProps): VNode { return ( @@ -146,7 +143,9 @@ function TransactionLayout(props: TransactionLayoutProps): JSX.Element { Waiting for confirmation )} - {dateStr} + + ` overflow: auto; table td { - padding: 5px 10px; + padding: 5px 5px; } table tr { border-bottom: 1px solid black; @@ -328,7 +328,8 @@ const ButtonVariant = styled(Button)` text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); `; -export const ButtonPrimary = styled(ButtonVariant)` +export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` + font-size: ${({ small }) => (small ? "small" : "inherit")}; background-color: rgb(66, 184, 221); `; export const ButtonBoxPrimary = styled(ButtonBox)` @@ -501,29 +502,40 @@ export const Input = styled.div<{ invalid?: boolean }>` `; export const InputWithLabel = styled.div<{ invalid?: boolean }>` + /* display: flex; */ + & label { display: block; + font-weight: bold; + margin-left: 0.5em; padding: 5px; color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } - & > div { - position: relative; - display: flex; - top: 0px; - bottom: 0px; - - & > div { - position: absolute; - background-color: lightgray; - padding: 5px; - margin: 2px; - } - & > input { - flex: 1; - padding: 5px; - border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; - } + & div { + line-height: 24px; + display: flex; + } + & div > span { + background-color: lightgray; + box-sizing: border-box; + border-bottom-left-radius: 0.25em; + border-top-left-radius: 0.25em; + height: 2em; + display: inline-block; + padding-left: 0.5em; + padding-right: 0.5em; + align-items: center; + display: flex; + } + & input { + border-width: 1px; + box-sizing: border-box; + height: 2em; + /* border-color: lightgray; */ + border-bottom-right-radius: 0.25em; + border-top-right-radius: 0.25em; + border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")}; } `; @@ -535,6 +547,7 @@ export const ErrorBox = styled.div` flex-direction: column; /* margin: 0.5em; */ padding: 1em; + margin: 1em; /* width: 100%; */ color: #721c24; background: #f8d7da; @@ -592,6 +605,8 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` } `; +const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`; + export const NiceSelect = styled.div` & > select { -webkit-appearance: none; @@ -600,11 +615,18 @@ export const NiceSelect = styled.div` appearance: none; outline: 0; box-shadow: none; - background-image: none; + + background-image: ${image}; + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + background-color: white; - flex: 1; - padding: 0.5em 1em; + border-radius: 0.25rem; + font-size: 1em; + padding: 0.5em 3em 0.5em 1em; cursor: pointer; } @@ -613,27 +635,6 @@ export const NiceSelect = styled.div` /* width: 10em; */ overflow: hidden; border-radius: 0.25em; - - &::after { - content: "\u25BC"; - position: absolute; - top: 0; - right: 0; - padding: 0.5em 1em; - cursor: pointer; - pointer-events: none; - -webkit-transition: 0.25s all ease; - -o-transition: 0.25s all ease; - transition: 0.25s all ease; - } - - &:hover::after { - /* color: #f39c12; */ - } - - &::-ms-expand { - display: none; - } `; export const Outlined = styled.div` diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 1023013d2..d5861c47c 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -36,7 +36,7 @@ import { PreparePayResult, PreparePayResultType, } from "@gnu-taler/taler-util"; -import { h, Fragment, JSX, VNode } from "preact"; +import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { LogoHeader } from "../components/LogoHeader"; import { Part } from "../components/Part"; @@ -100,7 +100,7 @@ const doPayment = async ( return res; }; -export function PayPage({ talerPayUri }: Props): JSX.Element { +export function PayPage({ talerPayUri }: Props): VNode { const [payStatus, setPayStatus] = useState( undefined, ); @@ -159,7 +159,7 @@ export function PayPage({ talerPayUri }: Props): JSX.Element { return Loading payment information ...; } - const onClick = async () => { + const onClick = async (): Promise => { try { const res = await doPayment(payStatus); setPayResult(res); @@ -198,7 +198,7 @@ export function PaymentRequestView({ onClick, payErrMsg, balance, -}: PaymentRequestViewProps) { +}: PaymentRequestViewProps): VNode { let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw); const contractTerms: ContractTerms = payStatus.contractTerms; @@ -225,7 +225,7 @@ export function PaymentRequestView({ merchantName = (pub: {contractTerms.merchant_pub}); } - function Alternative() { + function Alternative(): VNode { const [showQR, setShowQR] = useState(false); const privateUri = payStatus.status !== PreparePayResultType.AlreadyConfirmed @@ -246,7 +246,7 @@ export function PaymentRequestView({ ); } - function ButtonsSection() { + function ButtonsSection(): VNode { if (payResult) { if (payResult.type === ConfirmPayResultType.Pending) { return ( @@ -257,7 +257,7 @@ export function PaymentRequestView({ ); } - return null; + return ; } if (payErrMsg) { return ( @@ -392,7 +392,7 @@ export function PaymentRequestView({ ); } -function amountToString(text: AmountLike) { +function amountToString(text: AmountLike): string { const aj = Amounts.jsonifyAmount(text); const amount = Amounts.stringifyValue(aj, 2); return `${amount} ${aj.currency}`; diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx index aa11dca6a..cecd1ac00 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund.tsx +++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx @@ -20,12 +20,11 @@ * @author Florian Dold */ -import * as wxApi from "../wxApi"; -import { AmountView } from "../renderHtml"; -import { ApplyRefundResponse, Amounts } from "@gnu-taler/taler-util"; +import { Amounts, ApplyRefundResponse } from "@gnu-taler/taler-util"; +import { h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; -import { JSX } from "preact/jsx-runtime"; -import { h } from "preact"; +import { AmountView } from "../renderHtml"; +import * as wxApi from "../wxApi"; interface Props { talerRefundUri?: string; @@ -33,7 +32,7 @@ interface Props { export interface ViewProps { applyResult: ApplyRefundResponse; } -export function View({ applyResult }: ViewProps) { +export function View({ applyResult }: ViewProps): VNode { return (

GNU Taler Wallet

@@ -58,7 +57,7 @@ export function View({ applyResult }: ViewProps) {
); } -export function RefundPage({ talerRefundUri }: Props): JSX.Element { +export function RefundPage({ talerRefundUri }: Props): VNode { const [applyResult, setApplyResult] = useState< ApplyRefundResponse | undefined >(undefined); @@ -71,9 +70,10 @@ export function RefundPage({ talerRefundUri }: Props): JSX.Element { const result = await wxApi.applyRefund(talerRefundUri); setApplyResult(result); } catch (e) { - console.error(e); - setErrMsg(e.message); - console.log("err message", e.message); + if (e instanceof Error) { + setErrMsg(e.message); + console.log("err message", e.message); + } } }; doFetch(); diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx index 0a1c1238c..5a9ab720d 100644 --- a/packages/taler-wallet-webextension/src/cta/Tip.tsx +++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx @@ -20,12 +20,11 @@ * @author Florian Dold */ -import { useEffect, useState } from "preact/hooks"; import { PrepareTipResult } from "@gnu-taler/taler-util"; +import { h, VNode } from "preact"; +import { useEffect, useState } from "preact/hooks"; import { AmountView } from "../renderHtml"; import * as wxApi from "../wxApi"; -import { JSX } from "preact/jsx-runtime"; -import { h } from "preact"; interface Props { talerTipUri?: string; @@ -35,7 +34,11 @@ export interface ViewProps { onAccept: () => void; onIgnore: () => void; } -export function View({ prepareTipResult, onAccept, onIgnore }: ViewProps) { +export function View({ + prepareTipResult, + onAccept, + onIgnore, +}: ViewProps): VNode { return (

GNU Taler Wallet

@@ -64,7 +67,7 @@ export function View({ prepareTipResult, onAccept, onIgnore }: ViewProps) { ); } -export function TipPage({ talerTipUri }: Props): JSX.Element { +export function TipPage({ talerTipUri }: Props): VNode { const [updateCounter, setUpdateCounter] = useState(0); const [prepareTipResult, setPrepareTipResult] = useState< PrepareTipResult | undefined diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx index 90df2a27e..54ae19c61 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx @@ -19,10 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { amountFractionalBase, Amounts } from "@gnu-taler/taler-util"; -import { ExchangeRecord } from "@gnu-taler/taler-wallet-core"; -import { ExchangeWithdrawDetails } from "@gnu-taler/taler-wallet-core/src/operations/withdraw"; -import { getMaxListeners } from "process"; +import { amountFractionalBase } from "@gnu-taler/taler-util"; import { createExample } from "../test-utils"; import { View as TestedComponent } from "./Withdraw"; @@ -793,12 +790,6 @@ export const NewTerms = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -810,7 +801,9 @@ export const NewTerms = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "xml", @@ -834,12 +827,6 @@ export const TermsReviewingPLAIN = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -851,7 +838,9 @@ export const TermsReviewingPLAIN = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "plain", @@ -876,12 +865,6 @@ export const TermsReviewingHTML = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -893,7 +876,9 @@ export const TermsReviewingHTML = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "html", @@ -935,12 +920,6 @@ export const TermsReviewingPDF = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -952,7 +931,9 @@ export const TermsReviewingPDF = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "pdf", @@ -979,12 +960,6 @@ export const TermsReviewingXML = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -996,7 +971,9 @@ export const TermsReviewingXML = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "xml", @@ -1021,12 +998,6 @@ export const NewTermsAccepted = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -1037,7 +1008,9 @@ export const NewTermsAccepted = createExample(TestedComponent, { value: 2, fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "xml", @@ -1062,12 +1035,6 @@ export const TermsShowAgainXML = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -1079,7 +1046,9 @@ export const TermsShowAgainXML = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "xml", @@ -1105,12 +1074,6 @@ export const TermsChanged = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -1122,7 +1085,9 @@ export const TermsChanged = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "xml", @@ -1146,12 +1111,6 @@ export const TermsNotFound = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -1163,7 +1122,9 @@ export const TermsNotFound = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { status: "notfound", }, @@ -1183,12 +1144,6 @@ export const TermsAlreadyAccepted = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: amountFractionalBase * 0.5, @@ -1200,7 +1155,9 @@ export const TermsAlreadyAccepted = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { status: "accepted", }, @@ -1220,12 +1177,6 @@ export const WithoutFee = createExample(TestedComponent, { }, ], exchangeBaseUrl: "exchange.demo.taler.net", - details: { - content: "", - contentType: "", - currentEtag: "", - acceptedEtag: undefined, - }, withdrawalFee: { currency: "USD", fraction: 0, @@ -1237,7 +1188,9 @@ export const WithoutFee = createExample(TestedComponent, { fraction: 10000000, }, - onSwitchExchange: async () => {}, + onSwitchExchange: async () => { + null; + }, terms: { value: { type: "xml", diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index 603dafcde..8258717bd 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -29,9 +29,8 @@ import { i18n, WithdrawUriInfoResponse, } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; +import { VNode, h, Fragment } from "preact"; import { useState } from "preact/hooks"; -import { Fragment } from "preact/jsx-runtime"; import { CheckboxOutlined } from "../components/CheckboxOutlined"; import { ExchangeXmlTos } from "../components/ExchangeToS"; import { LogoHeader } from "../components/LogoHeader"; @@ -60,7 +59,6 @@ interface Props { } export interface ViewProps { - details: GetExchangeTosResult; withdrawalFee: AmountJson; exchangeBaseUrl: string; amount: AmountJson; @@ -112,14 +110,13 @@ interface TermsDocumentPdf { location: URL; } -function amountToString(text: AmountJson) { +function amountToString(text: AmountJson): string { const aj = Amounts.jsonifyAmount(text); const amount = Amounts.stringifyValue(aj); return `${amount} ${aj.currency}`; } export function View({ - details, withdrawalFee, exchangeBaseUrl, knownExchanges, @@ -132,7 +129,7 @@ export function View({ onAccept, reviewed, confirmed, -}: ViewProps) { +}: ViewProps): VNode { const needsReview = terms.status === "changed" || terms.status === "new"; const [switchingExchange, setSwitchingExchange] = useState< @@ -309,7 +306,7 @@ export function WithdrawPageWithParsedURI({ }: { uri: string; uriInfo: WithdrawUriInfoResponse; -}) { +}): VNode { const [customExchange, setCustomExchange] = useState( undefined, ); @@ -407,7 +404,7 @@ export function WithdrawPageWithParsedURI({ return ( */ -import { JSX } from "preact/jsx-runtime"; -import { h } from "preact"; +import { h, VNode } from "preact"; /** * View and edit auditors. @@ -27,6 +26,6 @@ import { h } from "preact"; * Imports. */ -export function makePaybackPage(): JSX.Element { +export function makePaybackPage(): VNode { return
not implemented
; } diff --git a/packages/taler-wallet-webextension/src/cta/reset-required.tsx b/packages/taler-wallet-webextension/src/cta/reset-required.tsx index 3949318c4..75c4c1962 100644 --- a/packages/taler-wallet-webextension/src/cta/reset-required.tsx +++ b/packages/taler-wallet-webextension/src/cta/reset-required.tsx @@ -20,7 +20,7 @@ * @author Florian Dold */ -import { Component, JSX, h } from "preact"; +import { Component, h, VNode } from "preact"; import * as wxApi from "../wxApi"; interface State { @@ -45,7 +45,7 @@ class ResetNotification extends Component { const res = await wxApi.checkUpgrade(); this.setState({ resetRequired: res.dbResetRequired }); } - render(): JSX.Element { + render(): VNode { if (this.state.resetRequired) { return (
@@ -92,6 +92,6 @@ class ResetNotification extends Component { /** * @deprecated to be removed */ -export function createResetRequiredPage(): JSX.Element { +export function createResetRequiredPage(): VNode { return ; } diff --git a/packages/taler-wallet-webextension/src/cta/return-coins.tsx b/packages/taler-wallet-webextension/src/cta/return-coins.tsx index 548202cab..55f0297d4 100644 --- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx +++ b/packages/taler-wallet-webextension/src/cta/return-coins.tsx @@ -14,8 +14,7 @@ TALER; see the file COPYING. If not, see */ -import { JSX } from "preact/jsx-runtime"; -import { h } from "preact"; +import { h, VNode } from "preact"; /** * Return coins to own bank account. * @@ -25,6 +24,6 @@ import { h } from "preact"; /** * Imports. */ -export function createReturnCoinsPage(): JSX.Element { +export function createReturnCoinsPage(): VNode { return Not implemented yet.; } diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 894c8a791..ae93f8a40 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -24,18 +24,18 @@ import { formatDuration, intervalToDuration, } from "date-fns"; -import { Fragment, JSX, VNode, h } from "preact"; +import { Fragment, h, VNode } from "preact"; import { BoldLight, ButtonPrimary, ButtonSuccess, Centered, - CenteredText, CenteredBoldText, + CenteredText, PopupBox, RowBorderGray, - SmallText, SmallLightText, + SmallText, } from "../components/styled"; import { useBackupStatus } from "../hooks/useBackupStatus"; import { Pages } from "../NavigationBar"; @@ -72,8 +72,9 @@ export function BackupView({ return (
- {providers.map((provider) => ( + {providers.map((provider, idx) => ( void; -}) { +}): VNode { const balance = useBalances(); return ( void; } -function formatPending(entry: Balance): JSX.Element { - let incoming: JSX.Element | undefined; - let payment: JSX.Element | undefined; +function formatPending(entry: Balance): VNode { + let incoming: VNode | undefined; + let payment: VNode | undefined; - const available = Amounts.parseOrThrow(entry.available); + // const available = Amounts.parseOrThrow(entry.available); const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming); const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing); @@ -105,8 +102,8 @@ export function BalanceView({ balance, Linker, goToWalletManualWithdraw, -}: BalanceViewProps) { - function Content() { +}: BalanceViewProps): VNode { + function Content(): VNode { if (!balance) { return ; } @@ -139,7 +136,7 @@ export function BalanceView({ return (
- {balance.response.balances.map((entry) => { + {balance.response.balances.map((entry, idx) => { const av = Amounts.parseOrThrow(entry.available); // Create our number formatter. let formatter; @@ -168,7 +165,7 @@ export function BalanceView({ const fontSize = v.length < 8 ? "3em" : v.length < 13 ? "2em" : "1em"; return ( - +
*/ -import { JSX, h } from "preact"; +import { h, VNode } from "preact"; import { Diagnostics } from "../components/Diagnostics"; import { useDiagnostics } from "../hooks/useDiagnostics.js"; import * as wxApi from "../wxApi"; -export function DeveloperPage(props: any): JSX.Element { +export function DeveloperPage(): VNode { const [status, timedOut] = useDiagnostics(); return (
@@ -36,6 +36,7 @@ export function DeveloperPage(props: any): JSX.Element { export function reload(): void { try { + // eslint-disable-next-line no-undef chrome.runtime.reload(); window.close(); } catch (e) { @@ -57,7 +58,9 @@ export async function confirmReset(): Promise { export function openExtensionPage(page: string) { return () => { + // eslint-disable-next-line no-undef chrome.tabs.create({ + // eslint-disable-next-line no-undef url: chrome.extension.getURL(page), }); }; diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx index 8fe6de16c..2228271dc 100644 --- a/packages/taler-wallet-webextension/src/popup/History.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.tsx @@ -21,14 +21,14 @@ import { Transaction, TransactionsResponse, } from "@gnu-taler/taler-util"; -import { h, JSX } from "preact"; +import { h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { PopupBox } from "../components/styled"; import { TransactionItem } from "../components/TransactionItem"; import { useBalances } from "../hooks/useBalances"; import * as wxApi from "../wxApi"; -export function HistoryPage(props: any): JSX.Element { +export function HistoryPage(): VNode { const [transactions, setTransactions] = useState< TransactionsResponse | undefined >(undefined); diff --git a/packages/taler-wallet-webextension/src/renderHtml.tsx b/packages/taler-wallet-webextension/src/renderHtml.tsx index 9c2a794dd..15986d5d1 100644 --- a/packages/taler-wallet-webextension/src/renderHtml.tsx +++ b/packages/taler-wallet-webextension/src/renderHtml.tsx @@ -28,13 +28,13 @@ import { Amounts, amountFractionalBase, } from "@gnu-taler/taler-util"; -import { Component, ComponentChildren, JSX, h } from "preact"; +import { Component, ComponentChildren, h, VNode } from "preact"; /** * Render amount as HTML, which non-breaking space between * decimal value and currency. */ -export function renderAmount(amount: AmountJson | string): JSX.Element { +export function renderAmount(amount: AmountJson | string): VNode { let a; if (typeof amount === "string") { a = Amounts.parse(amount); @@ -56,13 +56,13 @@ export const AmountView = ({ amount, }: { amount: AmountJson | string; -}): JSX.Element => renderAmount(amount); +}): VNode => renderAmount(amount); /** * Abbreviate a string to a given length, and show the full * string on hover as a tooltip. */ -export function abbrev(s: string, n = 5): JSX.Element { +export function abbrev(s: string, n = 5): VNode { let sAbbrev = s; if (s.length > n) { sAbbrev = s.slice(0, n) + ".."; @@ -92,7 +92,7 @@ export class Collapsible extends Component { super(props); this.state = { collapsed: props.initiallyCollapsed }; } - render(): JSX.Element { + render(): VNode { const doOpen = (e: any): void => { this.setState({ collapsed: false }); e.preventDefault(); @@ -132,19 +132,19 @@ interface ExpanderTextProps { /** * Show a heading with a toggle to show/hide the expandable content. */ -export function ExpanderText({ text }: ExpanderTextProps): JSX.Element { +export function ExpanderText({ text }: ExpanderTextProps): VNode { return {text}; } export interface LoadingButtonProps - extends JSX.HTMLAttributes { + extends h.JSX.HTMLAttributes { isLoading: boolean; } export function ProgressButton({ isLoading, ...rest -}: LoadingButtonProps): JSX.Element { +}: LoadingButtonProps): VNode { return (
{transaction?.error ? ( retry ) : null} - - 🗑 - + + Forget +
); } - function amountToString(text: AmountLike) { + function amountToString(text: AmountLike): string { const aj = Amounts.jsonifyAmount(text); const amount = Amounts.stringifyValue(aj); return `${amount} ${aj.currency}`; @@ -140,23 +139,26 @@ export function TransactionView({ return (

Withdrawal

-
- {transaction.timestamp.t_ms === "never" - ? "never" - : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} -
+
; + return
; } diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx index 0b8e5c609..a6dd040e4 100644 --- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx @@ -20,16 +20,15 @@ * @author Florian Dold */ -import { JSX } from "preact/jsx-runtime"; import { Checkbox } from "../components/Checkbox"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; import { Diagnostics } from "../components/Diagnostics"; import { WalletBox } from "../components/styled"; import { useDiagnostics } from "../hooks/useDiagnostics"; import { WalletDiagnostics } from "@gnu-taler/taler-util"; -import { h } from "preact"; +import { h, VNode } from "preact"; -export function WelcomePage() { +export function WelcomePage(): VNode { const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); const [diagnostics, timedOut] = useDiagnostics(); return ( @@ -53,7 +52,7 @@ export function View({ togglePermissions, diagnostics, timedOut, -}: ViewProps): JSX.Element { +}: ViewProps): VNode { return (

Browser Extension Installed!

diff --git a/packages/taler-wallet-webextension/static/wallet.html b/packages/taler-wallet-webextension/static/wallet.html index a1c069d74..f9dd8a19b 100644 --- a/packages/taler-wallet-webextension/static/wallet.html +++ b/packages/taler-wallet-webextension/static/wallet.html @@ -2,11 +2,27 @@ - - + -- cgit v1.2.3