fix loop rendering

3 files changed, 53 insertions, 31 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) {