From 30f86f8748a0d9c23538e972d30270a4f1e83941 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 7 May 2021 10:38:28 -0300 Subject: migrate to preact --- .../taler-wallet-webextension/src/pages/pay.tsx | 17 +++--- .../src/pages/payback.tsx | 3 +- .../taler-wallet-webextension/src/pages/popup.tsx | 61 +++++++++++----------- .../taler-wallet-webextension/src/pages/refund.tsx | 7 +-- .../src/pages/reset-required.tsx | 11 ++-- .../src/pages/return-coins.tsx | 4 +- .../taler-wallet-webextension/src/pages/tip.tsx | 6 +-- .../src/pages/welcome.tsx | 9 ++-- .../src/pages/withdraw.tsx | 8 +-- 9 files changed, 65 insertions(+), 61 deletions(-) (limited to 'packages/taler-wallet-webextension/src/pages') diff --git a/packages/taler-wallet-webextension/src/pages/pay.tsx b/packages/taler-wallet-webextension/src/pages/pay.tsx index 9c6b10951..80d846d67 100644 --- a/packages/taler-wallet-webextension/src/pages/pay.tsx +++ b/packages/taler-wallet-webextension/src/pages/pay.tsx @@ -27,7 +27,7 @@ import * as i18n from "../i18n"; import { renderAmount, ProgressButton } from "../renderHtml"; import * as wxApi from "../wxApi"; -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "preact/hooks"; import { getJsonI18n } from "@gnu-taler/taler-wallet-core"; import { @@ -39,10 +39,11 @@ import { ContractTerms, ConfirmPayResultType, } from "@gnu-taler/taler-util"; +import { JSX, VNode } from "preact"; function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { - const [payStatus, setPayStatus] = useState(); - const [payResult, setPayResult] = useState(); + const [payStatus, setPayStatus] = useState(undefined); + const [payResult, setPayResult] = useState(undefined); const [payErrMsg, setPayErrMsg] = useState(""); const [numTries, setNumTries] = useState(0); const [loading, setLoading] = useState(false); @@ -66,8 +67,8 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { } if (payStatus.status === PreparePayResultType.PaymentPossible) { - let amountRaw = Amounts.parseOrThrow(payStatus.amountRaw); - let amountEffective: AmountJson = Amounts.parseOrThrow( + const amountRaw = Amounts.parseOrThrow(payStatus.amountRaw); + const amountEffective: AmountJson = Amounts.parseOrThrow( payStatus.amountEffective, ); totalFees = Amounts.sub(amountEffective, amountRaw).amount; @@ -95,7 +96,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { } } - let contractTerms: ContractTerms = payStatus.contractTerms; + const contractTerms: ContractTerms = payStatus.contractTerms; if (!contractTerms) { return ( @@ -105,7 +106,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { ); } - let merchantName: React.ReactElement; + let merchantName: VNode; if (contractTerms.merchant && contractTerms.merchant.name) { merchantName = {contractTerms.merchant.name}; } else { @@ -200,7 +201,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { ) : (
doPayment()} > diff --git a/packages/taler-wallet-webextension/src/pages/payback.tsx b/packages/taler-wallet-webextension/src/pages/payback.tsx index 5d42f5f47..4233b1f96 100644 --- a/packages/taler-wallet-webextension/src/pages/payback.tsx +++ b/packages/taler-wallet-webextension/src/pages/payback.tsx @@ -14,6 +14,8 @@ TALER; see the file COPYING. If not, see */ +import { JSX } from "preact/jsx-runtime"; + /** * View and edit auditors. * @@ -23,7 +25,6 @@ /** * Imports. */ -import * as React from "react"; export function makePaybackPage(): JSX.Element { return
not implemented
; diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/pages/popup.tsx index 4d12d9a83..cf76044ce 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.tsx +++ b/packages/taler-wallet-webextension/src/pages/popup.tsx @@ -41,18 +41,18 @@ import { amountFractionalBase, } from "@gnu-taler/taler-util"; -import { abbrev, renderAmount, PageLink } from "../renderHtml"; +import { renderAmount, PageLink } from "../renderHtml"; import * as wxApi from "../wxApi"; -import React, { Fragment, useState, useEffect } from "react"; +import { useState, useEffect } from "preact/hooks"; -import moment from "moment"; import { PermissionsCheckbox } from "./welcome"; +import { JSXInternal } from "preact/src/jsx"; +import { Component, ComponentChild, ComponentChildren, JSX, toChildArray, VNode } from "preact"; // FIXME: move to newer react functions -/* eslint-disable react/no-deprecated */ -class Router extends React.Component { +class Router extends Component { static setRoute(s: string): void { window.location.hash = s; } @@ -85,21 +85,21 @@ class Router extends React.Component { render(): JSX.Element { const route = window.location.hash.substring(1); console.log("rendering route", route); - let defaultChild: React.ReactChild | null = null; - let foundChild: React.ReactChild | null = null; - React.Children.forEach(this.props.children, (child) => { + let defaultChild: ComponentChild | null = null; + let foundChild: ComponentChild | null = null; + toChildArray(this.props.children).forEach((child) => { const childProps: any = (child as any).props; if (!childProps) { return; } if (childProps.default) { - defaultChild = child as React.ReactChild; + defaultChild = child; } if (childProps.route === route) { - foundChild = child as React.ReactChild; + foundChild = child; } }); - const c: React.ReactChild | null = foundChild || defaultChild; + const c: ComponentChild | null = foundChild || defaultChild; if (!c) { throw Error("unknown route"); } @@ -110,7 +110,7 @@ class Router extends React.Component { interface TabProps { target: string; - children?: React.ReactNode; + children?: ComponentChildren; } function Tab(props: TabProps): JSX.Element { @@ -118,7 +118,7 @@ function Tab(props: TabProps): JSX.Element { if (props.target === Router.getRoute()) { cssClass = "active"; } - const onClick = (e: React.MouseEvent): void => { + const onClick = (e: JSXInternal.TargetedMouseEvent): void => { Router.setRoute(props.target); e.preventDefault(); }; @@ -129,7 +129,7 @@ function Tab(props: TabProps): JSX.Element { ); } -class WalletNavBar extends React.Component { +class WalletNavBar extends Component { private cancelSubscription: any; componentWillMount(): void { @@ -179,7 +179,7 @@ function EmptyBalanceView(): JSX.Element { ); } -class WalletBalanceView extends React.Component { +class WalletBalanceView extends Component { private balance?: BalancesResponse; private gotError = false; private canceler: (() => void) | undefined = undefined; @@ -323,7 +323,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { case "unknown": sign = ""; } - const style: React.CSSProperties = { + const style: JSX.AllCSSProperties = { marginLeft: "auto", display: "flex", flexDirection: "column", @@ -476,7 +476,7 @@ function TransactionItem(props: { tx: Transaction }): JSX.Element { function WalletHistory(props: any): JSX.Element { const [transactions, setTransactions] = useState< TransactionsResponse | undefined - >(); + >(undefined); useEffect(() => { const fetchData = async (): Promise => { @@ -484,7 +484,6 @@ function WalletHistory(props: any): JSX.Element { setTransactions(res); }; fetchData(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (!transactions) { @@ -495,14 +494,14 @@ function WalletHistory(props: any): JSX.Element { return (
- {txs.map((tx) => ( - + {txs.map((tx,i) => ( + ))}
); } -class WalletSettings extends React.Component { +class WalletSettings extends Component { render(): JSX.Element { return (
@@ -522,14 +521,14 @@ function reload(): void { } } -function confirmReset(): void { +async function confirmReset(): Promise { if ( confirm( "Do you want to IRREVOCABLY DESTROY everything inside your" + " wallet and LOSE ALL YOUR COINS?", ) ) { - wxApi.resetDb(); + await wxApi.resetDb(); window.close(); } } @@ -554,14 +553,14 @@ function openExtensionPage(page: string) { }; } -function openTab(page: string) { - return (evt: React.SyntheticEvent) => { - evt.preventDefault(); - chrome.tabs.create({ - url: page, - }); - }; -} +// function openTab(page: string) { +// return (evt: React.SyntheticEvent) => { +// evt.preventDefault(); +// chrome.tabs.create({ +// url: page, +// }); +// }; +// } function makeExtensionUrlWithParams( url: string, diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/pages/refund.tsx index 8096378fc..6525f68c6 100644 --- a/packages/taler-wallet-webextension/src/pages/refund.tsx +++ b/packages/taler-wallet-webextension/src/pages/refund.tsx @@ -20,17 +20,18 @@ * @author Florian Dold */ -import React, { useEffect, useState } from "react"; import * as wxApi from "../wxApi"; import { AmountView } from "../renderHtml"; import { - PurchaseDetails, ApplyRefundResponse, Amounts, } from "@gnu-taler/taler-util"; +// import { h } from 'preact'; +import { useEffect, useState } from "preact/hooks"; +import { JSX } from "preact/jsx-runtime"; function RefundStatusView(props: { talerRefundUri: string }): JSX.Element { - const [applyResult, setApplyResult] = useState(); + const [applyResult, setApplyResult] = useState(undefined); const [errMsg, setErrMsg] = useState(undefined); useEffect(() => { diff --git a/packages/taler-wallet-webextension/src/pages/reset-required.tsx b/packages/taler-wallet-webextension/src/pages/reset-required.tsx index 0ef5fe8b7..7f2676263 100644 --- a/packages/taler-wallet-webextension/src/pages/reset-required.tsx +++ b/packages/taler-wallet-webextension/src/pages/reset-required.tsx @@ -20,8 +20,7 @@ * @author Florian Dold */ -import * as React from "react"; - +import { Component, JSX } from "preact"; import * as wxApi from "../wxApi"; interface State { @@ -36,7 +35,7 @@ interface State { resetRequired: boolean; } -class ResetNotification extends React.Component { +class ResetNotification extends Component { constructor(props: any) { super(props); this.state = { checked: false, resetRequired: true }; @@ -50,7 +49,7 @@ class ResetNotification extends React.Component { if (this.state.resetRequired) { return (
-

Manual Reset Reqired

+

Manual Reset Required

The wallet's database in your browser is incompatible with the{" "} currently installed wallet. Please reset manually. @@ -63,7 +62,9 @@ class ResetNotification extends React.Component { id="check" type="checkbox" checked={this.state.checked} - onChange={(e) => this.setState({ checked: e.target.checked })} + onChange={() => { + this.setState(prev => ({ checked: prev.checked })) + }} />{" "}

handleExtendedPerm(x.target.checked)} + onChange={() => handleExtendedPerm()} type="checkbox" id="checkbox-perm" style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/pages/withdraw.tsx index c4a02817c..1d628be22 100644 --- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx +++ b/packages/taler-wallet-webextension/src/pages/withdraw.tsx @@ -25,19 +25,20 @@ import * as i18n from "../i18n"; import { renderAmount } from "../renderHtml"; -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "preact/hooks"; import { acceptWithdrawal, onUpdateNotification, getWithdrawalDetailsForUri, } from "../wxApi"; import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util"; +import { JSX } from "preact/jsx-runtime"; function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { - const [details, setDetails] = useState(); + const [details, setDetails] = useState(undefined); const [selectedExchange, setSelectedExchange] = useState< string | undefined - >(); + >(undefined); const talerWithdrawUri = props.talerWithdrawUri; const [cancelled, setCancelled] = useState(false); const [selecting, setSelecting] = useState(false); @@ -48,7 +49,6 @@ function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { return onUpdateNotification(() => { setUpdateCounter(updateCounter + 1); }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { -- cgit v1.2.3