fix loop rendering

15 files changed, 72 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
index 7ade50e2c..541bc733b 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /*
  This file is part of TALER
  (C) 2015 GNUnet e.V.
@@ -197,7 +198,7 @@ export function PaymentRequestView({
   payStatus,
   payResult,
 }: PaymentRequestViewProps): VNode {
-  let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
+  const totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
   const contractTerms: ContractTerms = payStatus.contractTerms;
   const { i18n } = useTranslationContext();
 
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index c2f352661..13fb69853 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of TALER
  (C) 2015 GNUnet e.V.
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 67a910397..64a0c2586 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -28,7 +28,7 @@ import {
   WithdrawUriInfoResponse,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { useState } from "preact/hooks";
+import { useCallback, useMemo, useState } from "preact/hooks";
 import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
 import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
@@ -247,37 +247,52 @@ export function WithdrawPageWithParsedURI({
   const [reviewing, setReviewing] = useState<boolean>(false);
   const [reviewed, setReviewed] = useState<boolean>(false);
 
-  const knownExchangesHook = useAsyncAsHook(() => wxApi.listExchanges());
+  const knownExchangesHook = useAsyncAsHook(
+    useCallback(() => wxApi.listExchanges(), []),
+  );
 
-  const knownExchanges =
-    !knownExchangesHook || knownExchangesHook.hasError
-      ? []
-      : knownExchangesHook.response.exchanges;
-  const withdrawAmount = Amounts.parseOrThrow(uriInfo.amount);
-  const thisCurrencyExchanges = knownExchanges.filter(
-    (ex) => ex.currency === withdrawAmount.currency,
+  const knownExchanges = useMemo(
+    () =>
+      !knownExchangesHook || knownExchangesHook.hasError
+        ? []
+        : knownExchangesHook.response.exchanges,
+    [knownExchangesHook],
+  );
+  const withdrawAmount = useMemo(
+    () => Amounts.parseOrThrow(uriInfo.amount),
+    [uriInfo.amount],
+  );
+  const thisCurrencyExchanges = useMemo(
+    () =>
+      knownExchanges.filter((ex) => ex.currency === withdrawAmount.currency),
+    [knownExchanges, withdrawAmount.currency],
   );
 
-  const exchange: string | undefined =
-    customExchange ??
-    uriInfo.defaultExchangeBaseUrl ??
-    (thisCurrencyExchanges[0]
-      ? thisCurrencyExchanges[0].exchangeBaseUrl
-      : undefined);
+  const exchange: string | undefined = useMemo(
+    () =>
+      customExchange ??
+      uriInfo.defaultExchangeBaseUrl ??
+      (thisCurrencyExchanges[0]
+        ? thisCurrencyExchanges[0].exchangeBaseUrl
+        : undefined),
+    [customExchange, thisCurrencyExchanges, uriInfo.defaultExchangeBaseUrl],
+  );
 
-  const detailsHook = useAsyncAsHook(async () => {
-    if (!exchange) throw Error("no default exchange");
-    const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
+  const detailsHook = useAsyncAsHook(
+    useCallback(async () => {
+      if (!exchange) throw Error("no default exchange");
+      const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
 
-    const tosState = buildTermsOfServiceState(tos);
+      const tosState = buildTermsOfServiceState(tos);
 
-    const info = await wxApi.getExchangeWithdrawalInfo({
-      exchangeBaseUrl: exchange,
-      amount: withdrawAmount,
-      tosAcceptedFormat: ["text/xml"],
-    });
-    return { tos: tosState, info };
-  });
+      const info = await wxApi.getExchangeWithdrawalInfo({
+        exchangeBaseUrl: exchange,
+        amount: withdrawAmount,
+        tosAcceptedFormat: ["text/xml"],
+      });
+      return { tos: tosState, info };
+    }, [exchange, withdrawAmount]),
+  );
 
   if (!detailsHook) {
     return <Loading />;
@@ -342,10 +357,14 @@ export function WithdrawPageWithParsedURI({
 }
 export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
   const { i18n } = useTranslationContext();
-  const uriInfoHook = useAsyncAsHook(() =>
-    !talerWithdrawUri
-      ? Promise.reject(undefined)
-      : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
+  const uriInfoHook = useAsyncAsHook(
+    useCallback(
+      () =>
+        !talerWithdrawUri
+          ? Promise.reject(undefined)
+          : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
+      [talerWithdrawUri],
+    ),
   );
 
   if (!talerWithdrawUri) {
diff --git a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
index 68bc9aed7..4e86c5ee5 100644
--- a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
@@ -74,6 +74,6 @@ export function useAsyncAsHook<T>(
         doAsync();
       });
     }
-  });
+  }, [fn, updateOnNotification]);
   return result;
 }
diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts
index ed51d00ee..25513f57b 100644
--- a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
index 8860ce20d..0f73f8c02 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
@@ -1,6 +1,6 @@
 import { css } from "@linaria/core";
 import { ComponentChildren, createContext, h, VNode } from "preact";
-import { useContext, useState } from "preact/hooks";
+import { useContext, useMemo, useState } from "preact/hooks";
 // eslint-disable-next-line import/extensions
 import { Colors } from "../style";
 
@@ -152,6 +152,10 @@ function withoutUndefinedProperties(obj: any): any {
 export function useFormControl(props: Partial<FCCProps> = {}): FCCProps {
   const ctx = useContext(FormControlContext);
   const cleanedProps = withoutUndefinedProperties(props);
-  if (!ctx) return { ...defaultContextValue, ...cleanedProps };
-  return { ...ctx, ...cleanedProps };
+
+  return useMemo(() => {
+    return !ctx
+      ? { ...defaultContextValue, ...cleanedProps }
+      : { ...ctx, ...cleanedProps };
+  }, [cleanedProps, ctx]);
 }
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index a25366bd2..a71f11c5e 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -169,7 +169,7 @@ export function InputBase({
     } else {
       fcs.onEmpty();
     }
-  }, [value]);
+  }, [value, fcs]);
 
   const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>): void => {
     // Fix a bug with IE11 where the focus/blur events are triggered
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts
index 67b293ec7..67779f08c 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of TALER
  (C) 2017 INRIA
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts
index 13ce322e9..e6e699ce3 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index a549bf59a..9d7a692a2 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
index cadd0c86d..edc2f971f 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index 375a03f86..335dfd3c7 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of TALER
  (C) 2016 GNUnet e.V.
@@ -162,7 +163,7 @@ export function useComponentState(
     onCalculateFee(selectedAccount, parsedAmount).then((result) => {
       setFee(result);
     });
-  }, [amount]);
+  }, [amount, selectedAccount, parsedAmount, onCalculateFee]);
 
   const bs = balances.filter((b) => b.available.startsWith(currency));
   const balance =
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index ce1bcbebe..ad8cb7db0 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -64,7 +64,7 @@ function useEndpointStatus<T>(
       }
     }, 500);
     setHandler(h);
-  }, [value]);
+  }, [value, setHandler, handler, onVerify]);
 
   return {
     error: dirty ? error : undefined,
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index e3a5b9cbe..ed4a91f12 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
@@ -112,7 +113,7 @@ export function SetUrlView({
       setUrlError(true);
       setName(undefined);
     }
-  }, [value]);
+  }, [onVerify, value]);
   return (
     <Fragment>
       <section>
diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts
index 02342063d..7401fd4fa 100644
--- a/packages/taler-wallet-webextension/src/wxBackend.ts
+++ b/packages/taler-wallet-webextension/src/wxBackend.ts
@@ -40,7 +40,6 @@ import {
   Wallet,
   WalletStoresV1
 } from "@gnu-taler/taler-wallet-core";
-import { VNode } from "preact";
 import { BrowserCryptoWorkerFactory } from "./browserCryptoWorkerFactory.js";
 import { BrowserHttpLib } from "./browserHttpLib.js";
 import { getReadRequestPermissions } from "./permissions.js";