Fix linked wallets update (#372)

* Fix linkWallets update on change

* Remove unnecessary comment

Author: tolgahan-arikan

packages/connect/src/hooks/useWallets.ts

@@ -65,6 +65,16 @@ export interface UseLinkedWalletsResult {
   clearCache: () => void
 }
 
+// --- Listener pattern for cross-instance updates ---
+const linkedWalletsListeners: Set<() => Promise<void>> = new Set()
+const notifyLinkedWalletsListeners = () => {
+  // Use setTimeout to ensure notification happens after the current execution context,
+  // allowing React state updates to potentially settle before listeners run.
+  setTimeout(() => {
+    linkedWalletsListeners.forEach(listener => listener())
+  }, 0)
+}
+
 export const useLinkedWallets = (args: GetLinkedWalletsArgs, options: UseLinkedWalletsOptions = {}): UseLinkedWalletsResult => {
   const apiClient = useAPIClient()
   const [data, setData] = useState<LinkedWallet[] | undefined>(undefined)
@@ -99,10 +109,17 @@ export const useLinkedWallets = (args: GetLinkedWalletsArgs, options: UseLinkedW
     }
   }, [apiClient, args.parentWalletAddress, args.signatureChainId, options.enabled])
 
-  // Fetch on mount and when dependencies change
+  // Fetch on mount, when dependencies change, and register/unregister listener
   useEffect(() => {
+    // Register the listener
+    linkedWalletsListeners.add(fetchData)
+
+    // Initial fetch
     fetchData()
+
+    // Cleanup: remove listener and abort ongoing request
     return () => {
+      linkedWalletsListeners.delete(fetchData)
       abortControllerRef.current?.abort()
     }
   }, [fetchData])
@@ -114,6 +131,8 @@ export const useLinkedWallets = (args: GetLinkedWalletsArgs, options: UseLinkedW
   const refetch = async () => {
     clearCache()
     await fetchData()
+    // Notify other hook instances after successful fetch
+    notifyLinkedWalletsListeners()
   }
 
   return {

packages/connect/src/styles.ts

@@ -302,6 +302,9 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -383,6 +386,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -476,6 +482,9 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -551,6 +560,9 @@ export const styles = String.raw`
   .w-screen {
     width: 100vw;
   }
+  .max-w-1 {
+    max-width: calc(var(--spacing) * 1);
+  }
   .max-w-1\/2 {
     max-width: calc(1/2 * 100%);
   }
@@ -575,12 +587,21 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-top {
     transform-origin: top;
   }
@@ -922,6 +943,9 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1191,6 +1215,9 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
   }
@@ -1226,6 +1253,10 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));