Introduce useNames Hook

packages/ensjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ensdomains/ensjs",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "ENS javascript library for contract interaction",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -44,6 +44,11 @@
       "import": "./dist/esm/wallet.js",
       "default": "./dist/cjs/wallet.js"
     },
+    "./hooks": {
+      "types": "./dist/types/hooks.d.ts",
+      "import": "./dist/esm/hooks.js",
+      "default": "./dist/cjs/hooks.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -137,12 +142,14 @@
     "typedoc": "^0.24.8",
     "typedoc-plugin-markdown": "^4.0.0-next.16",
     "typescript": "5.3.2",
-    "viem": "^2.9.2",
+    "viem": "2.9.2",
     "vitest": "^1.3.1",
     "wait-on": "^6.0.1"
   },
   "peerDependencies": {
-    "viem": "^2.9.2"
+    "viem": "2.9.2",
+    "@tanstack/react-query": "^5.54",
+    "wagmi": "2"
   },
   "engines": {
     "node": ">=18"

packages/ensjs/src/hooks.ts

@@ -0,0 +1 @@
+export { useNames } from './hooks/useNames.js'

packages/ensjs/src/hooks/useNames.ts

@@ -0,0 +1,29 @@
+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,
+  )
+}