webextension: fix useEffect dependency tracking

2 files changed, 10 insertions, 4 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index f1c8f270c..7b7d940c7 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -134,6 +134,8 @@ export function PayPage({
   const foundAmount = foundBalance
     ? Amounts.parseOrThrow(foundBalance.available)
     : undefined;
+  // We use a string here so that dependency tracking for useEffect works properly
+  const foundAmountStr = foundAmount ? Amounts.stringify(foundAmount) : undefined;
 
   useEffect(() => {
     if (!talerPayUri) return;
@@ -142,6 +144,7 @@ export function PayPage({
         const p = await wxApi.preparePay(talerPayUri);
         setPayStatus(p);
       } catch (e) {
+        console.log("Got error while trying to pay", e);
         if (e instanceof OperationFailedError) {
           setPayErrMsg(e);
         }
@@ -151,7 +154,7 @@ export function PayPage({
       }
     };
     doFetch();
-  }, [talerPayUri, foundAmount]);
+  }, [talerPayUri, foundAmountStr]);
 
   if (!talerPayUri) {
     return <span>missing pay uri</span>;
diff --git a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
index 38ec5bf72..e9f03d0fa 100644
--- a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
@@ -13,7 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { ExchangesListRespose, NotificationType } from "@gnu-taler/taler-util";
+import { NotificationType } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
 
@@ -30,7 +30,10 @@ interface HookError {
 export type HookResponse<T> = HookOk<T> | HookError | undefined;
 
 //"withdraw-group-finished"
-export function useAsyncAsHook<T>(fn: () => Promise<T>, updateOnNotification?: Array<NotificationType>): HookResponse<T> {
+export function useAsyncAsHook<T>(
+  fn: () => Promise<T>,
+  updateOnNotification?: Array<NotificationType>,
+): HookResponse<T> {
   const [result, setHookResponse] = useState<HookResponse<T>>(undefined);
   useEffect(() => {
     async function doAsync() {
@@ -46,7 +49,7 @@ export function useAsyncAsHook<T>(fn: () => Promise<T>, updateOnNotification?: A
     doAsync();
     if (updateOnNotification && updateOnNotification.length > 0) {
       return wxApi.onUpdateNotification(updateOnNotification, () => {
-        doAsync()
+        doAsync();
       });
     }
   }, []);