update withdrawal page when something changes

src/webex/pages/popup.tsx

@@ -45,17 +45,6 @@ import { PermissionsCheckbox } from "./welcome";
 // FIXME: move to newer react functions
 /* eslint-disable react/no-deprecated */
 
-function onUpdateNotification(f: () => void): () => void {
-  const port = chrome.runtime.connect({ name: "notifications" });
-  const listener = (): void => {
-    f();
-  };
-  port.onMessage.addListener(listener);
-  return () => {
-    port.onMessage.removeListener(listener);
-  };
-}
-
 class Router extends React.Component<any, any> {
   static setRoute(s: string): void {
     window.location.hash = s;
@@ -190,7 +179,7 @@ class WalletBalanceView extends React.Component<any, any> {
   private unmount = false;
 
   componentWillMount(): void {
-    this.canceler = onUpdateNotification(() => this.updateBalance());
+    this.canceler = wxApi.onUpdateNotification(() => this.updateBalance());
     this.updateBalance();
   }
 
@@ -651,7 +640,7 @@ class WalletHistory extends React.Component<any, any> {
   componentWillMount(): void {
     this.update();
     this.setState({ filter: true });
-    onUpdateNotification(() => this.update());
+    wxApi.onUpdateNotification(() => this.update());
   }
 
   componentWillUnmount(): void {

src/webex/pages/withdraw.tsx

@@ -28,9 +28,9 @@ import { WithdrawDetails } from "../../types/walletTypes";
 import { WithdrawDetailView, renderAmount } from "../renderHtml";
 
 import React, { useState, useEffect } from "react";
-import { getWithdrawDetails, acceptWithdrawal } from "../wxApi";
+import { getWithdrawDetails, acceptWithdrawal, onUpdateNotification } from "../wxApi";
 
-function NewExchangeSelection(props: {
+function WithdrawalDialog(props: {
   talerWithdrawUri: string;
 }): JSX.Element {
   const [details, setDetails] = useState<WithdrawDetails | undefined>();
@@ -42,6 +42,14 @@ function NewExchangeSelection(props: {
   const [selecting, setSelecting] = useState(false);
   const [customUrl, setCustomUrl] = useState<string>("");
   const [errMsg, setErrMsg] = useState<string | undefined>("");
+  const [updateCounter, setUpdateCounter] = useState(1);
+
+  useEffect(() => {
+    return onUpdateNotification(() => {
+      setUpdateCounter(updateCounter + 1);
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   useEffect(() => {
     const fetchData = async (): Promise<void> => {
@@ -65,7 +73,7 @@ function NewExchangeSelection(props: {
       setDetails(d);
     };
     fetchData();
-  }, [selectedExchange, errMsg, selecting, talerWithdrawUri]);
+  }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]);
 
   if (errMsg) {
     return (
@@ -214,5 +222,5 @@ export function createWithdrawPage(): JSX.Element {
   if (!talerWithdrawUri) {
     throw Error("withdraw URI required");
   }
-  return <NewExchangeSelection talerWithdrawUri={talerWithdrawUri} />;
+  return <WithdrawalDialog talerWithdrawUri={talerWithdrawUri} />;
 }

src/webex/wxApi.ts

@@ -339,3 +339,15 @@ export function setExtendedPermissions(value: boolean): Promise<ExtendedPermissi
 export function getExtendedPermissions(): Promise<ExtendedPermissionsResponse> {
   return callBackend("get-extended-permissions", {});
 }
+
+
+export function onUpdateNotification(f: () => void): () => void {
+  const port = chrome.runtime.connect({ name: "notifications" });
+  const listener = (): void => {
+    f();
+  };
+  port.onMessage.addListener(listener);
+  return () => {
+    port.onMessage.removeListener(listener);
+  };
+}