diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index ef7b2322b..e7aa9aee4 100644 --- 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 index 5e6dd6bf8..4377a5366 100644 --- 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 { 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) {