Merge pull request #1801 from statechannels/ts-payment-channel-update…

…d-events-demo Wire up "payment channel updated" events stream to demo
statechannels · Oct 12, 2023 · 33b9e85 · 33b9e85
2 parents f081e1a + 09617eb
commit 33b9e85
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 27 deletions.
diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx
@@ -116,14 +116,6 @@ export default function App() {
       .finally(() => console.timeEnd("Connect to Nitro Node"));
   }, [url]);
 
-  const updateChannelInfo = async (channelId: string) => {
-    if (channelId == "") {
-      throw new Error("Empty channel id provided");
-    }
-    const paymentChannel = await nitroClient?.GetPaymentChannel(channelId);
-    setPaymentChannelInfo(paymentChannel);
-  };
-
   const triggerFileDownload = (file: File) => {
     // This will prompt the browser to download the file
     const blob = new Blob([file], { type: file.type });
@@ -149,15 +141,21 @@ export default function App() {
     // await nitroClient.WaitForObjective(result.Id);
 
     setPaymentChannelId(result.ChannelId);
-    updateChannelInfo(result.ChannelId);
-    console.timeEnd("Create Payment Channel");
 
-    // TODO: Slightly hacky but we wait a beat before querying so we see the updated balance
-    setTimeout(() => {
-      updateChannelInfo(result.ChannelId);
-    }, 1000);
-  };
+    nitroClient.onPaymentChannelUpdated(
+      result.ChannelId,
+      setPaymentChannelInfo
+    );
+
+    // It's possible the channel updated before we registered the handler above, so
+    // query the channel once now to get the latest information:
 
+    setPaymentChannelInfo(
+      await nitroClient?.GetPaymentChannel(result.ChannelId)
+    );
+
+    console.timeEnd("Create Payment Channel");
+  };
   const fetchAndDownloadFile = async () => {
     setErrorText("");
     setFetchInProgress(true);
@@ -182,25 +180,16 @@ export default function App() {
             nitroClient,
             (progress) => {
               setDownloadProgress(progress);
-              updateChannelInfo(paymentChannelInfo.ID);
             }
           )
         : await fetchFile(
             selectedFile.url,
             skipPayment ? 0 : costPerByte * selectedFile.size,
             paymentChannelInfo.ID,
-            nitroClient,
-            () => {
-              updateChannelInfo(paymentChannelInfo.ID);
-            }
+            nitroClient
           );
       setDownloadProgress(100);
       triggerFileDownload(file);
-
-      // TODO: Slightly hacky but we wait a beat before querying so we see the updated balance
-      setTimeout(() => {
-        updateChannelInfo(paymentChannelInfo.ID);
-      }, 50);
     } catch (e: unknown) {
       console.error(e);
 

diff --git a/packages/payment-proxy-client/src/file.ts b/packages/payment-proxy-client/src/file.ts
@@ -6,7 +6,7 @@ export async function fetchFile(
   paymentAmount: number,
   channelId: string,
   nitroClient: NitroRpcClient,
-  updateChannelCallback: () => void
+  updateChannelCallback?: () => void
 ): Promise<File> {
   console.time("Create Payment Vouncher");
   const voucher = await nitroClient.CreateVoucher(channelId, paymentAmount);
@@ -15,7 +15,7 @@ export async function fetchFile(
   console.time("Fetch file");
   const req = createRequest(url, voucher);
   const fetchPromise = fetch(req);
-  updateChannelCallback();
+  updateChannelCallback && updateChannelCallback();
   const response = await fetchPromise;
   console.timeEnd("Fetch file");
   if (response.status != 200) {