migrate to preact

9 files changed, 65 insertions, 61 deletions

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<PreparePayResult | undefined>();
-  const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>();
+  const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(undefined);
+  const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(undefined);
   const [payErrMsg, setPayErrMsg] = useState<string | undefined>("");
   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 = <strong>{contractTerms.merchant.name}</strong>;
   } else {
@@ -200,7 +201,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element {
       ) : (
         <div>
           <ProgressButton
-            loading={loading}
+            isLoading={loading}
             disabled={insufficientBalance}
             onClick={() => 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 <http://www.gnu.org/licenses/>
  */
 
+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 <div>not implemented</div>;
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<any, any> {
+class Router extends Component<any, any> {
   static setRoute(s: string): void {
     window.location.hash = s;
   }
@@ -85,21 +85,21 @@ class Router extends React.Component<any, any> {
   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<any, any> {
 
 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<HTMLAnchorElement>): void => {
+  const onClick = (e: JSXInternal.TargetedMouseEvent<HTMLAnchorElement>): void => {
     Router.setRoute(props.target);
     e.preventDefault();
   };
@@ -129,7 +129,7 @@ function Tab(props: TabProps): JSX.Element {
   );
 }
 
-class WalletNavBar extends React.Component<any, any> {
+class WalletNavBar extends Component<any, any> {
   private cancelSubscription: any;
 
   componentWillMount(): void {
@@ -179,7 +179,7 @@ function EmptyBalanceView(): JSX.Element {
   );
 }
 
-class WalletBalanceView extends React.Component<any, any> {
+class WalletBalanceView extends Component<any, any> {
   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<void> => {
@@ -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 (
     <div>
-      {txs.map((tx) => (
-        <TransactionItem tx={tx} />
+      {txs.map((tx,i) => (
+        <TransactionItem key={i} tx={tx} />
       ))}
     </div>
   );
 }
 
-class WalletSettings extends React.Component<any, any> {
+class WalletSettings extends Component<any, any> {
   render(): JSX.Element {
     return (
       <div>
@@ -522,14 +521,14 @@ function reload(): void {
   }
 }
 
-function confirmReset(): void {
+async function confirmReset(): Promise<void> {
   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<any>) => {
-    evt.preventDefault();
-    chrome.tabs.create({
-      url: page,
-    });
-  };
-}
+// function openTab(page: string) {
+//   return (evt: React.SyntheticEvent<any>) => {
+//     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<ApplyRefundResponse>();
+  const [applyResult, setApplyResult] = useState<ApplyRefundResponse|undefined>(undefined);
   const [errMsg, setErrMsg] = useState<string | undefined>(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<any, State> {
+class ResetNotification extends Component<any, State> {
   constructor(props: any) {
     super(props);
     this.state = { checked: false, resetRequired: true };
@@ -50,7 +49,7 @@ class ResetNotification extends React.Component<any, State> {
     if (this.state.resetRequired) {
       return (
         <div>
-          <h1>Manual Reset Reqired</h1>
+          <h1>Manual Reset Required</h1>
           <p>
             The wallet&apos;s database in your browser is incompatible with the{" "}
             currently installed wallet. Please reset manually.
@@ -63,7 +62,9 @@ class ResetNotification extends React.Component<any, State> {
             id="check"
             type="checkbox"
             checked={this.state.checked}
-            onChange={(e) => this.setState({ checked: e.target.checked })}
+            onChange={() => {
+              this.setState(prev => ({ checked: prev.checked }))
+            }}
           />{" "}
           <label htmlFor="check">
             I understand that I will lose all my data
diff --git a/packages/taler-wallet-webextension/src/pages/return-coins.tsx b/packages/taler-wallet-webextension/src/pages/return-coins.tsx
index e8cf8c9dd..2273d1454 100644
--- a/packages/taler-wallet-webextension/src/pages/return-coins.tsx
+++ b/packages/taler-wallet-webextension/src/pages/return-coins.tsx
@@ -14,6 +14,8 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { JSX } from "preact/jsx-runtime";
+
 /**
  * Return coins to own bank account.
  *
@@ -23,8 +25,6 @@
 /**
  * Imports.
  */
-import * as React from "react";
-
 export function createReturnCoinsPage(): JSX.Element {
   return <span>Not implemented yet.</span>;
 }
diff --git a/packages/taler-wallet-webextension/src/pages/tip.tsx b/packages/taler-wallet-webextension/src/pages/tip.tsx
index b1ac27228..65ddb3734 100644
--- a/packages/taler-wallet-webextension/src/pages/tip.tsx
+++ b/packages/taler-wallet-webextension/src/pages/tip.tsx
@@ -20,17 +20,17 @@
  * @author Florian Dold <dold@taler.net>
  */
 
-import * as React from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "preact/hooks";
 import { PrepareTipResult } from "@gnu-taler/taler-util";
 import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
+import { JSX } from "preact/jsx-runtime";
 
 function TalerTipDialog({ talerTipUri }: { talerTipUri: string }): JSX.Element {
   const [updateCounter, setUpdateCounter] = useState<number>(0);
   const [prepareTipResult, setPrepareTipResult] = useState<
     PrepareTipResult | undefined
-  >();
+  >(undefined);
 
   const [tipIgnored, setTipIgnored] = useState(false);
 
diff --git a/packages/taler-wallet-webextension/src/pages/welcome.tsx b/packages/taler-wallet-webextension/src/pages/welcome.tsx
index dd10ac13c..54819558c 100644
--- a/packages/taler-wallet-webextension/src/pages/welcome.tsx
+++ b/packages/taler-wallet-webextension/src/pages/welcome.tsx
@@ -20,13 +20,14 @@
  * @author Florian Dold
  */
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "preact/hooks";
 import { getDiagnostics } from "../wxApi";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
 import { getPermissionsApi } from "../compat";
 import { extendedPermissions } from "../permissions";
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
+import { JSX } from "preact/jsx-runtime";
 
 function Diagnostics(): JSX.Element | null {
   const [timedOut, setTimedOut] = useState(false);
@@ -102,9 +103,9 @@ export function PermissionsCheckbox(): JSX.Element {
   const [extendedPermissionsEnabled, setExtendedPermissionsEnabled] = useState(
     false,
   );
-  async function handleExtendedPerm(requestedVal: boolean): Promise<void> {
+  async function handleExtendedPerm(): Promise<void> {
     let nextVal: boolean | undefined;
-    if (requestedVal) {
+    if (extendedPermissionsEnabled) {
       const granted = await new Promise<boolean>((resolve, reject) => {
         // We set permissions here, since apparently FF wants this to be done
         // as the result of an input event ...
@@ -141,7 +142,7 @@ export function PermissionsCheckbox(): JSX.Element {
     <div>
       <input
         checked={extendedPermissionsEnabled}
-        onChange={(x) => 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<WithdrawUriInfoResponse | undefined>();
+  const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>(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(() => {