diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/pages/popup.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/pages/popup.tsx | 61 |
1 files changed, 30 insertions, 31 deletions
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, |