feat: useListAccounts

Author: VGabriel45

packages/connect/src/hooks/useListAccounts.ts

@@ -0,0 +1,81 @@
+import { IntentResponseAccountList, SequenceWaaS } from '@0xsequence/waas'
+import { useQuery } from '@tanstack/react-query'
+import { useConnections } from 'wagmi'
+
+interface UseListAccountsResult {
+  /** The accounts data if available */
+  data?: IntentResponseAccountList
+  /** Whether the query is currently loading */
+  isLoading: boolean
+  /** Any error that occurred during the query */
+  error: Error | null
+  /** Function to manually refetch the accounts */
+  refetch: () => Promise<void>
+}
+
+/**
+ * Hook to list all accounts associated with the current WaaS session.
+ * Uses React Query for proper async state management.
+ *
+ * @returns {UseListAccountsResult} Object containing the accounts data, loading state, error state, and refetch function
+ *
+ * @example
+ * ```tsx
+ * function AccountsList() {
+ *   const { data, isLoading, error, refetch } = useListAccounts()
+ *
+ *   if (isLoading) return <div>Loading accounts...</div>
+ *   if (error) return <div>Error: {error.message}</div>
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => refetch()}>Refresh Accounts</button>
+ *       {data?.accounts.map(account => (
+ *         <div key={account.id}>{account.address}</div>
+ *       ))}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export const useListAccounts = (): UseListAccountsResult => {
+  const connections = useConnections()
+
+  const {
+    data,
+    isLoading,
+    error,
+    refetch: reactQueryRefetch
+  } = useQuery({
+    queryKey: ['waas', 'listAccounts'],
+    queryFn: async () => {
+      console.log('FETCHING ACCOUNTS')
+      const waasConnection = connections.find(c => c.connector.id.includes('waas'))
+      if (!waasConnection) {
+        throw new Error('No WaaS connector found')
+      }
+
+      const sequenceWaas = (waasConnection.connector as any).sequenceWaas as SequenceWaaS
+      if (!sequenceWaas) {
+        throw new Error('WaaS instance not properly initialized')
+      }
+
+      return await sequenceWaas.listAccounts()
+    },
+    // Only run the query if we have connections
+    enabled: connections.length > 0,
+    // Cache the results for 1 minute
+    staleTime: 60 * 1000
+  })
+
+  const refetch = async () => {
+    await reactQueryRefetch()
+  }
+
+  return {
+    data,
+    isLoading,
+    error: error as Error | null,
+    refetch
+  }
+}

packages/connect/src/index.ts

@@ -93,6 +93,7 @@ export { useProjectAccessKey } from './hooks/useProjectAccessKey'
 export { useStorage, useStorageItem } from './hooks/useStorage'
 export { useChain } from './hooks/useChain'
 export { useWallets } from './hooks/useWallets'
+export { useListAccounts } from './hooks/useListAccounts'
 export type { ConnectedWallet } from './hooks/useWallets'
 export type { LinkedWallet } from '@0xsequence/api'
 

packages/connect/src/styles.ts

@@ -302,9 +302,6 @@ 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);
   }
@@ -386,9 +383,6 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
-  .table {
-    display: table;
-  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -482,9 +476,6 @@ 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%);
   }
@@ -560,9 +551,6 @@ 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%);
   }
@@ -587,21 +575,12 @@ 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;
   }
@@ -943,9 +922,6 @@ 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);
   }
@@ -1215,9 +1191,6 @@ 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);
   }
@@ -1253,10 +1226,6 @@ 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));