From df7f7f8148179a79f99218eef31e91b166a6fe6c Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Wed, 4 Sep 2024 20:42:39 +0000
Subject: [PATCH] Upgrade Hooks

---
 packages/ensjs/src/hooks.ts                   |  2 +-
 packages/ensjs/src/hooks/useNames.ts          | 29 -----------
 .../ensjs/src/hooks/useNamesForAddress.ts     | 49 +++++++++++++++++++
 3 files changed, 50 insertions(+), 30 deletions(-)
 delete mode 100644 packages/ensjs/src/hooks/useNames.ts
 create mode 100644 packages/ensjs/src/hooks/useNamesForAddress.ts

diff --git a/packages/ensjs/src/hooks.ts b/packages/ensjs/src/hooks.ts
index 9a3f8510..939e03ee 100644
--- a/packages/ensjs/src/hooks.ts
+++ b/packages/ensjs/src/hooks.ts
@@ -1 +1 @@
-export { useNames } from './hooks/useNames.js'
+export { useNamesForAddress } from './hooks/useNamesForAddress.js'
diff --git a/packages/ensjs/src/hooks/useNames.ts b/packages/ensjs/src/hooks/useNames.ts
deleted file mode 100644
index 2ffe4ebb..00000000
--- a/packages/ensjs/src/hooks/useNames.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { QueryClient, useQuery } from '@tanstack/react-query'
-import type { Address } from 'viem'
-import { getNamesForAddress } from '../subgraph.js'
-import type { ClientWithEns } from '../contracts/consts.js'
-
-export type UseNamesParams = {
-  address: Address
-  client: ClientWithEns
-}
-
-// TODO: figure out why not taking from provider
-const qclient = new QueryClient()
-export const useNames = (data: UseNamesParams) => {
-  const { address, client } = data
-
-  return useQuery(
-    {
-      queryKey: ['ensjs', 'names-for-address', address],
-      queryFn: async () => {
-        const result = await getNamesForAddress(client, {
-          address,
-        })
-
-        return result
-      },
-    },
-    qclient,
-  )
-}
diff --git a/packages/ensjs/src/hooks/useNamesForAddress.ts b/packages/ensjs/src/hooks/useNamesForAddress.ts
new file mode 100644
index 00000000..c4fb699d
--- /dev/null
+++ b/packages/ensjs/src/hooks/useNamesForAddress.ts
@@ -0,0 +1,49 @@
+import {
+  QueryClient,
+  useQuery,
+  type UseQueryResult,
+} from '@tanstack/react-query'
+import type { Address } from 'viem'
+import {
+  getNamesForAddress,
+  type GetNamesForAddressReturnType,
+} from '../subgraph.js'
+import type { ClientWithEns } from '../contracts/consts.js'
+
+export type UseNamesParams = {
+  address: Address
+  client: ClientWithEns
+  queryClient?: QueryClient
+}
+
+// TODO: figure out why not taking from provider
+const fallbackQueryClient = new QueryClient()
+
+/**
+ * Returns a list of names for an address
+ *
+ * Keep in mind that this list will be loaded from the subgraph, and only include watchable names.
+ * Read more about enumeration and watchability here: https://docs.ens.domains/web/enumerate
+ *
+ * @param data - {@link UseNamesParams}
+ * @returns - {@link GetNamesForAddressReturnType}
+ */
+export const useNamesForAddress = (
+  data: UseNamesParams,
+): UseQueryResult<GetNamesForAddressReturnType> => {
+  const { address, client, queryClient = fallbackQueryClient } = data
+
+  return useQuery(
+    {
+      queryKey: ['ensjs', 'names-for-address', address],
+      queryFn: async () => {
+        const result = await getNamesForAddress(client, {
+          address,
+        })
+
+        return result
+      },
+    },
+    queryClient,
+  )
+}