From 877b428edcc28664c02254825b281045ecdd0072 Mon Sep 17 00:00:00 2001
From: Roland <33993199+rolznz@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:09:27 +0700
Subject: [PATCH] fix: do not change deposit address after depositing funds on
 current channel order page (#346)

---
 frontend/src/hooks/useOnchainAddress.ts               | 7 +++++--
 frontend/src/screens/channels/CurrentChannelOrder.tsx | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/useOnchainAddress.ts b/frontend/src/hooks/useOnchainAddress.ts
index b85a7ef4..c604a932 100644
--- a/frontend/src/hooks/useOnchainAddress.ts
+++ b/frontend/src/hooks/useOnchainAddress.ts
@@ -1,4 +1,4 @@
-import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
 
 import React from "react";
 import { useCSRF } from "src/hooks/useCSRF";
@@ -7,7 +7,10 @@ import { swrFetcher } from "src/utils/swr";
 
 export function useOnchainAddress() {
   const { data: csrf } = useCSRF();
-  const swr = useSWR<string>("/api/wallet/address", swrFetcher);
+  // Use useSWRImmutable to avoid address randomly changing after deposit (e.g. on page re-focus on the channel order page)
+  const swr = useSWRImmutable<string>("/api/wallet/address", swrFetcher, {
+    revalidateOnMount: true,
+  });
   const [isLoading, setLoading] = React.useState(false);
 
   const getNewAddress = React.useCallback(async () => {
diff --git a/frontend/src/screens/channels/CurrentChannelOrder.tsx b/frontend/src/screens/channels/CurrentChannelOrder.tsx
index 54d12c99..621b301f 100644
--- a/frontend/src/screens/channels/CurrentChannelOrder.tsx
+++ b/frontend/src/screens/channels/CurrentChannelOrder.tsx
@@ -347,7 +347,9 @@ function PayBitcoinChannelOrderTopup({ order }: { order: NewChannelOrder }) {
             </CardDescription>
           </CardHeader>
           {unspentAmount > 0 && (
-            <CardContent>{unspentAmount} sats deposited</CardContent>
+            <CardContent>
+              {new Intl.NumberFormat().format(unspentAmount)} sats deposited
+            </CardContent>
           )}
         </Card>