On changing network, causes to the dashboard to refetch data (#137)

Author: sstefdev

packages/invoice-dashboard/src/lib/view-requests.svelte

@@ -58,6 +58,8 @@
       })
     | undefined;
   let currencyManager: CurrencyManager;
+  let previousWalletAddress: string | undefined;
+  let previousNetwork: string | undefined;
 
   let columns = {
     issuedAt: false,
@@ -82,44 +84,42 @@
   });
 
   const getRequests = async () => {
-    try {
-      loading = true;
+    if (!wallet || !requestNetwork) return;
+    loading = true;
 
+    try {
       const requestsData = await requestNetwork?.fromIdentity({
         type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-        value: signer,
+        value: wallet?.accounts[0]?.address,
       });
-
       requests = requestsData
         ?.map((request) => request.getData())
         .sort((a, b) => b.timestamp - a.timestamp);
-
-      loading = false;
     } catch (error) {
-      loading = false;
       console.error("Failed to fetch requests:", error);
+    } finally {
+      loading = false;
     }
   };
 
   const getOneRequest = async (activeRequest: any) => {
-    try {
-      loading = true;
+    if (!activeRequest) return;
+    loading = true;
 
+    try {
       const _request = await requestNetwork?.fromRequestId(
         activeRequest?.requestId!
       );
-
       requests = requests?.filter(
         (request) => request.requestId !== activeRequest.requestId
       );
       requests = [...requests, _request.getData()].sort(
         (a, b) => b.timestamp - a.timestamp
       );
-
-      loading = false;
     } catch (error) {
-      loading = false;
       console.error("Failed to fetch request:", error);
+    } finally {
+      loading = false;
     }
   };
 
@@ -133,8 +133,24 @@
   let currentPage = 1;
   let totalPages = 1;
 
-  $: wallet, getRequests();
-  $: wallet, (activeRequest = undefined);
+  $: {
+    const currentWalletAddress = wallet?.accounts[0]?.address;
+    const currentNetwork = wallet?.chains[0]?.id;
+
+    if (
+      currentWalletAddress &&
+      currentWalletAddress !== previousWalletAddress
+    ) {
+      getRequests();
+      previousWalletAddress = currentWalletAddress;
+
+      activeRequest = undefined;
+    }
+
+    if (currentNetwork && currentNetwork !== previousNetwork) {
+      previousNetwork = currentNetwork;
+    }
+  }
 
   $: {
     if (sortColumn && sortOrder) {

packages/invoice-dashboard/src/types/global.d.ts

@@ -1,5 +1,11 @@
 declare interface Window {
   ethereum: {
+    on: (event: string, callback: (accounts: string[]) => void) => void;
+    removeListener: (
+      event: string,
+      callback: (accounts: string[]) => void
+    ) => void;
     request: (request: { method: string }) => Promise<void>;
+    autoRefreshOnNetworkChange: boolean;
   };
 }

shared/components/button/button.svelte

@@ -8,16 +8,25 @@
   let className: $$Props["class"] = undefined;
   export let builders: $$Props["builders"] = [];
   export { className as class };
+  export let onClick: (event: MouseEvent) => void = () => {};
+  export let preventDefault: boolean = true;
 
   $: classes = ["rn-btn", className].filter(Boolean).join(" ");
+
+  function handleClick(event: MouseEvent) {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    onClick(event);
+  }
 </script>
 
 <ButtonPrimitive.Root
   {builders}
   class={classes}
   type="button"
   {...$$restProps}
-  on:click
+  on:click={handleClick}
   on:keydown
 >
   <slot />