added react eslint and fix most of the warns

15 files changed, 48 insertions, 44 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index 728bf0945..c4daf458a 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
@@ -18,7 +18,7 @@ export function AddNewActionView({ onCancel }: Props): VNode {
   const uriType = classifyTalerUri(url);
   const { i18n } = useTranslationContext();
 
-  function redirectToWallet() {
+  function redirectToWallet(): void {
     platform.openWalletURIFromPopup(url);
   }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 1f06847cf..505aa600b 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { AbsoluteTime, Translate } from "@gnu-taler/taler-util";
+import { AbsoluteTime } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentPaid,
@@ -242,7 +242,7 @@ function daysUntil(d: AbsoluteTime): string {
   return `${str}`;
 }
 
-function getStatusTypeOrder(t: ProviderPaymentStatus) {
+function getStatusTypeOrder(t: ProviderPaymentStatus): number {
   return [
     ProviderPaymentType.InsufficientBalance,
     ProviderPaymentType.TermsChanged,
@@ -252,7 +252,10 @@ function getStatusTypeOrder(t: ProviderPaymentStatus) {
   ].indexOf(t.type);
 }
 
-function getStatusPaidOrder(a: ProviderPaymentPaid, b: ProviderPaymentPaid) {
+function getStatusPaidOrder(
+  a: ProviderPaymentPaid,
+  b: ProviderPaymentPaid,
+): number {
   return a.paidUntil.t_ms === "never"
     ? -1
     : b.paidUntil.t_ms === "never"
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts
index 24456cc7c..13ce322e9 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts
@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { SelectFieldHandler, TextFieldHandler, useComponentState } from "./CreateManualWithdraw.js";
 import { expect } from "chai";
 import { mountHook } from "../test-utils.js";
+import { SelectFieldHandler, TextFieldHandler, useComponentState } from "./CreateManualWithdraw.js";
 
 
 const exchangeListWithARSandUSD = {
@@ -181,7 +181,7 @@ describe("CreateManualWithdraw states", () => {
 });
 
 
-async function defaultTestForInputText(awaiter: () => Promise<void>, getField: () => TextFieldHandler) {
+async function defaultTestForInputText(awaiter: () => Promise<void>, getField: () => TextFieldHandler): Promise<void> {
   const initialValue = getField().value;
   const otherValue = `${initialValue} something else`
   getField().onInput(otherValue)
@@ -192,7 +192,7 @@ async function defaultTestForInputText(awaiter: () => Promise<void>, getField: (
 }
 
 
-async function defaultTestForInputSelect(awaiter: () => Promise<void>, getField: () => SelectFieldHandler) {
+async function defaultTestForInputSelect(awaiter: () => Promise<void>, getField: () => SelectFieldHandler): Promise<void> {
   const initialValue = getField().value;
   const keys = Object.keys(getField().list)
   const nextIdx = keys.indexOf(initialValue) + 1
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index 52ad797fa..a549bf59a 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -33,7 +33,6 @@ import {
   LightText,
   LinkPrimary,
   SubTitle,
-  Title,
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { Pages } from "../NavigationBar.js";
@@ -232,7 +231,9 @@ export function CreateManualWithdraw({
       <section>
         {error && (
           <ErrorMessage
-            title={<i18n.Translate>Can't create the reserve</i18n.Translate>}
+            title={
+              <i18n.Translate>Can&apos;t create the reserve</i18n.Translate>
+            }
             description={error}
           />
         )}
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts
index 1e7b0a54f..bf8cc4d5a 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts
@@ -19,14 +19,15 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useComponentState } from "./DepositPage.js";
+import { Amounts, Balance } from "@gnu-taler/taler-util";
+import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { expect } from "chai";
 import { mountHook } from "../test-utils.js";
-import { Amounts, Balance } from "@gnu-taler/taler-util";
+import { useComponentState } from "./DepositPage.js";
 
 
 const currency = "EUR"
-const feeCalculator = async () => ({
+const feeCalculator = async (): Promise<DepositFee> => ({
   coin: Amounts.parseOrThrow(`${currency}:1`),
   wire: Amounts.parseOrThrow(`${currency}:1`),
   refresh: Amounts.parseOrThrow(`${currency}:1`)
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index 1ad8b07f5..375a03f86 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -141,7 +141,7 @@ export function useComponentState(
   const [accountIdx, setAccountIdx] = useState(0);
   const [amount, setAmount] = useState<number | undefined>(undefined);
   const [fee, setFee] = useState<DepositGroupFees | undefined>(undefined);
-  function updateAmount(num: number | undefined) {
+  function updateAmount(num: number | undefined): void {
     setAmount(num);
     setFee(undefined);
   }
diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
index 8709e2ba7..a54c16754 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
@@ -57,8 +57,6 @@ export function DeveloperPage(): VNode {
       ? nonResponse
       : response.response;
 
-  const balanceResponse = useAsyncAsHook(wxApi.getBalance);
-
   return (
     <View
       status={status}
@@ -213,7 +211,7 @@ export function View({
       <p>
         <i18n.Translate>Coins</i18n.Translate>:
       </p>
-      {Object.keys(money_by_exchange).map((ex) => {
+      {Object.keys(money_by_exchange).map((ex, idx) => {
         const allcoins = money_by_exchange[ex];
         allcoins.sort((a, b) => {
           return b.denom_value - a.denom_value;
@@ -231,7 +229,14 @@ export function View({
           } as SplitedCoinInfo,
         );
 
-        return <ShowAllCoins coins={coins} ex={ex} currencies={currencies} />;
+        return (
+          <ShowAllCoins
+            key={idx}
+            coins={coins}
+            ex={ex}
+            currencies={currencies}
+          />
+        );
       })}
       <br />
       <Diagnostics diagnostics={status} timedOut={timedOut} />
@@ -272,7 +277,7 @@ function ShowAllCoins({
   ex: string;
   coins: SplitedCoinInfo;
   currencies: { [ex: string]: string };
-}) {
+}): VNode {
   const { i18n } = useTranslationContext();
   const [collapsedSpent, setCollapsedSpent] = useState(true);
   const [collapsedUnspent, setCollapsedUnspent] = useState(false);
@@ -308,9 +313,9 @@ function ShowAllCoins({
               <i18n.Translate>from refresh?</i18n.Translate>
             </td>
           </tr>
-          {coins.usable.map((c) => {
+          {coins.usable.map((c, idx) => {
             return (
-              <tr>
+              <tr key={idx}>
                 <td>{c.id.substring(0, 5)}</td>
                 <td>{c.denom_value}</td>
                 <td>{c.remain_value}</td>
@@ -347,9 +352,9 @@ function ShowAllCoins({
               <i18n.Translate>from refresh?</i18n.Translate>
             </td>
           </tr>
-          {coins.spent.map((c) => {
+          {coins.spent.map((c, idx) => {
             return (
-              <tr>
+              <tr key={idx}>
                 <td>{c.id.substring(0, 5)}</td>
                 <td>{c.denom_value}</td>
                 <td>{c.remain_value}</td>
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index e7b7ccaac..ce1bcbebe 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -2,7 +2,7 @@ import {
   canonicalizeBaseUrl,
   TalerConfigResponse,
 } from "@gnu-taler/taler-util";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import {
@@ -81,7 +81,7 @@ export function ExchangeSetUrlPage({
   onCancel,
   onVerify,
   onConfirm,
-}: Props) {
+}: Props): VNode {
   const { i18n } = useTranslationContext();
   const { loading, result, endpoint, updateEndpoint, error } =
     useEndpointStatus(initialValue ?? "", onVerify);
@@ -119,7 +119,7 @@ export function ExchangeSetUrlPage({
         {result && expectedCurrency && expectedCurrency !== result.currency && (
           <WarningBox>
             <i18n.Translate>
-              This exchange doesn't match the expected currency
+              This exchange doesn&apos;t match the expected currency
               <b>{expectedCurrency}</b>
             </i18n.Translate>
           </WarningBox>
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 9c1cd2d03..92f1dea1b 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -41,7 +41,7 @@ export default {
 };
 
 let count = 0;
-const commonTransaction = () =>
+const commonTransaction = (): TransactionCommon =>
   ({
     amountRaw: "USD:10",
     amountEffective: "USD:9",
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index ed1552879..51ffcb31a 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -26,13 +26,11 @@ import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
 import {
   ButtonBoxPrimary,
-  ButtonBoxWarning,
   ButtonPrimary,
   CenteredBoldText,
   CenteredText,
   DateSeparator,
   NiceSelect,
-  WarningBox,
 } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
 import { TransactionItem } from "../components/TransactionItem.js";
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 863da9439..e3a5b9cbe 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -18,7 +18,6 @@ import {
   Amounts,
   BackupBackupProviderTerms,
   canonicalizeBaseUrl,
-  Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -91,7 +90,7 @@ export function SetUrlView({
   onVerify,
   onConfirm,
   withError,
-}: SetUrlViewProps) {
+}: SetUrlViewProps): VNode {
   const { i18n } = useTranslationContext();
   const [value, setValue] = useState<string>(initialValue || "");
   const [urlError, setUrlError] = useState(false);
@@ -191,7 +190,7 @@ export function ConfirmProviderView({
   provider,
   onCancel,
   onConfirm,
-}: ConfirmProviderViewProps) {
+}: ConfirmProviderViewProps): VNode {
   const [accepted, setAccepted] = useState(false);
   const { i18n } = useTranslationContext();
 
@@ -203,13 +202,13 @@ export function ConfirmProviderView({
         </Title>
         <div>
           <i18n.Translate>Provider URL</i18n.Translate>:{" "}
-          <a href={url} target="_blank">
+          <a href={url} target="_blank" rel="noreferrer">
             {url}
           </a>
         </div>
         <SmallLightText>
           <i18n.Translate>
-            Please review and accept this provider's terms of service
+            Please review and accept this provider&apos;s terms of service
           </i18n.Translate>
         </SmallLightText>
         <SubTitle>
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index f908b4638..bf9f55b10 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -64,7 +64,8 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode {
       <LoadingError
         title={
           <i18n.Translate>
-            There was an error loading the provider detail for "{providerURL}"
+            There was an error loading the provider detail for &quot;
+            {providerURL}&quot;
           </i18n.Translate>
         }
         error={state}
@@ -110,7 +111,7 @@ export function ProviderView({
         <section>
           <p>
             <i18n.Translate>
-              There is not known provider with url "{url}".
+              There is not known provider with url &quot;{url}&quot;.
             </i18n.Translate>
           </p>
         </section>
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 16a64af5b..50ab5175f 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -1,10 +1,8 @@
 import {
   AmountJson,
-  parsePaytoUri,
   Amounts,
-  segwitMinAmount,
-  generateFakeSegwitAddress,
   PaytoUri,
+  segwitMinAmount,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
@@ -58,8 +56,8 @@ export function ReserveCreated({
           </p>
           <p>
             <i18n.Translate>
-              In bitcoincore wallet use 'Add Recipient' button to add two
-              additional recipient and copy adresses and amounts
+              In bitcoincore wallet use &apos;Add Recipient&apos; button to add
+              two additional recipient and copy addresses and amounts
             </i18n.Translate>
             <ul>
               <li>
@@ -73,8 +71,8 @@ export function ReserveCreated({
               </li>
             </ul>
             <i18n.Translate>
-              In Electrum wallet paste the following three lines in 'Pay to'
-              field :
+              In Electrum wallet paste the following three lines in &apos;Pay
+              to&apos; field :
             </i18n.Translate>
             <ul>
               <li>
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 8e843e75e..9a41bcc25 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -32,7 +32,6 @@ import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions.js";
-import { useLang } from "../hooks/useLang.js";
 import { Pages } from "../NavigationBar.js";
 import { buildTermsOfServiceStatus } from "../utils/index.js";
 import * as wxApi from "../wxApi.js";
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
index e7b83e27d..5aad3b782 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
@@ -23,7 +23,6 @@
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox.js";
-import { Diagnostics } from "../components/Diagnostics.js";
 import { SubTitle, Title } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";