fix: reload balances, txs and channels after transfer is complete (#706)

* fix: reload balances, txs and channels after transfer is complete * chore: use promise all
getAlby · Sep 25, 2024 · 4f263ee · 4f263ee
1 parent 8ebb4ad
commit 4f263ee
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/frontend/src/components/TransferFundsButton.tsx b/frontend/src/components/TransferFundsButton.tsx
@@ -7,13 +7,13 @@ import { request } from "src/utils/request";
 type TransferFundsButtonProps = {
   channels: Channel[] | undefined;
   albyBalance: AlbyBalance;
-  reloadAlbyBalance: () => void;
+  onTransferComplete: () => Promise<unknown>;
 } & ButtonProps;
 
 export function TransferFundsButton({
   channels,
   albyBalance,
-  reloadAlbyBalance,
+  onTransferComplete,
   children,
   ...props
 }: TransferFundsButtonProps) {
@@ -46,7 +46,7 @@ export function TransferFundsButton({
               "Content-Type": "application/json",
             },
           });
-          await reloadAlbyBalance();
+          await onTransferComplete();
           toast({
             title:
               "🎉 Funds from Alby shared wallet transferred to your Alby Hub!",

diff --git a/frontend/src/screens/channels/Channels.tsx b/frontend/src/screens/channels/Channels.tsx
@@ -67,9 +67,9 @@ import { request } from "src/utils/request";
 
 export default function Channels() {
   useSyncWallet();
-  const { data: channels } = useChannels();
+  const { data: channels, mutate: reloadChannels } = useChannels();
   const { data: nodeConnectionInfo } = useNodeConnectionInfo();
-  const { data: balances } = useBalances();
+  const { data: balances, mutate: reloadBalances } = useBalances();
   const { data: albyBalance, mutate: reloadAlbyBalance } = useAlbyBalance();
   const navigate = useNavigate();
   const [nodes, setNodes] = React.useState<Node[]>([]);
@@ -270,7 +270,13 @@ export default function Channels() {
                 variant="outline"
                 channels={channels}
                 albyBalance={albyBalance}
-                reloadAlbyBalance={reloadAlbyBalance}
+                onTransferComplete={() =>
+                  Promise.all([
+                    reloadAlbyBalance(),
+                    reloadBalances(),
+                    reloadChannels(),
+                  ])
+                }
               >
                 Migrate
               </TransferFundsButton>

diff --git a/frontend/src/screens/wallet/index.tsx b/frontend/src/screens/wallet/index.tsx
@@ -23,12 +23,14 @@ import { useAlbyBalance } from "src/hooks/useAlbyBalance";
 import { useBalances } from "src/hooks/useBalances";
 import { useChannels } from "src/hooks/useChannels";
 import { useInfo } from "src/hooks/useInfo";
+import { useTransactions } from "src/hooks/useTransactions";
 
 function Wallet() {
   const { data: info, hasChannelManagement } = useInfo();
-  const { data: balances } = useBalances();
+  const { data: balances, mutate: reloadBalances } = useBalances();
   const { data: channels } = useChannels();
   const { data: albyBalance, mutate: reloadAlbyBalance } = useAlbyBalance();
+  const { mutate: reloadTransactions } = useTransactions();
 
   if (!info || !balances) {
     return <Loading />;
@@ -61,7 +63,13 @@ function Wallet() {
               <TransferFundsButton
                 channels={channels}
                 albyBalance={albyBalance}
-                reloadAlbyBalance={reloadAlbyBalance}
+                onTransferComplete={() =>
+                  Promise.all([
+                    reloadAlbyBalance(),
+                    reloadBalances(),
+                    reloadTransactions(),
+                  ])
+                }
               >
                 Migrate Funds
               </TransferFundsButton>