feat: ensjs-react

.vscode/settings.json

@@ -5,6 +5,6 @@
   },
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
-  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }

packages/ensjs-react/.eslintrc.json

@@ -0,0 +1,67 @@
+{
+  "extends": ["airbnb", "airbnb-typescript"],
+  "plugins": ["@typescript-eslint", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "no-console": "off",
+    "no-restricted-syntax": [
+      "error",
+      {
+        "selector": "CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]",
+        "message": "Unexpected property on console object was called"
+      }
+    ],
+    "prettier/prettier": "error",
+    "import/prefer-default-export": "off",
+    "no-underscore-dangle": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "default",
+        "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": "variable",
+        "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": "property",
+        "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+        "leadingUnderscore": "allowSingleOrDouble",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": "typeLike",
+        "format": ["PascalCase"]
+      }
+    ],
+    "radix": "off",
+    "consistent-return": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "no-return-assign": "off",
+    "react/require-default-props": "off",
+    "react/function-component-definition": "off",
+    "react/no-unstable-nested-components": ["off", { "allowAsProps": true }],
+    "react/jsx-no-useless-fragment": "off"
+  }
+}

packages/ensjs-react/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ensdomains/ensjs-react",
+  "version": "0.1.0",
+  "description": "ENS react library for contract interaction",
+  "repository": "[email protected]:ensdomains/ensjs-v3.git",
+  "author": "ENS Labs Ltd",
+  "license": "MIT",
+  "devDependencies": {
+    "@ensdomains/ensjs": "workspace:*",
+    "@tanstack/react-query": "^4.19.1",
+    "@types/react": "^18.0.26",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^16.1.2",
+    "ethers": "^5.6.1",
+    "react": "^18.2.0",
+    "typescript": "^4.9.3",
+    "wagmi": "^0.8.10"
+  },
+  "peerDependencies": {
+    "@ensdomains/ensjs": "*",
+    "ethers": ">=5.6.1",
+    "react": ">=16",
+    "wagmi": ">=0.8.10"
+  },
+  "dependencies": {
+    "@ethersproject/abstract-provider": "^5.7.0",
+    "@ethersproject/providers": "^5.6.2",
+    "dataloader": "^2.1.0"
+  }
+}

packages/ensjs-react/src/hooks/index.ts

@@ -0,0 +1,16 @@
+export { default as useAddr } from './useAddr'
+export { default as useAvailable } from './useAvailable'
+export { default as useContentHash } from './useContentHash'
+export { default as useDNSOwner } from './useDNSOwner'
+export { default as useExpiry } from './useExpiry'
+export { default as useHistory } from './useHistory'
+export { default as useNames } from './useNames'
+export { default as useOwner } from './useOwner'
+export { default as usePrice } from './usePrice'
+export { default as usePrimary } from './usePrimary'
+export { default as useProfile } from './useProfile'
+export { default as useResolver } from './useResolver'
+export { default as useSubnames } from './useSubnames'
+export { default as useText } from './useText'
+export { default as useValidate } from './useValidate'
+export { default as useWrapperData } from './useWrapperData'

packages/ensjs-react/src/hooks/useAddr.ts

@@ -0,0 +1,32 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = {
+  name: string | null | undefined
+  coinType: Parameters<PublicENS['getAddr']>[1]
+} & QueryConfig<ReturnType<PublicENS['getAddr']>, Error>
+
+const useAddr = ({
+  name,
+  coinType,
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+}: Args) => {
+  const { ready, getAddr } = useEns()
+  return useCachedQuery(
+    ['getAddr', { name, coinType }],
+    () => getAddr(name!, coinType),
+    {
+      enabled: Boolean(enabled && ready && coinType && name),
+      onError,
+      onSettled,
+      onSuccess,
+    },
+  )
+}
+
+export default useAddr

packages/ensjs-react/src/hooks/useAvailable.ts

@@ -0,0 +1,26 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = {
+  name: string | null | undefined
+} & QueryConfig<ReturnType<PublicENS['getAvailable']>, Error>
+
+const useAvailable = ({
+  name,
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+}: Args) => {
+  const { ready, getAvailable } = useEns()
+  return useCachedQuery(['useAvailable', name], () => getAvailable(name!), {
+    enabled: Boolean(enabled && ready && name),
+    onError,
+    onSettled,
+    onSuccess,
+  })
+}
+
+export default useAvailable

packages/ensjs-react/src/hooks/useCachedQuery.ts

@@ -0,0 +1,68 @@
+import {
+  QueryFunction,
+  QueryKey,
+  QueryObserverResult,
+  UseQueryOptions,
+} from '@tanstack/react-query'
+import { useQuery } from 'wagmi'
+
+export type UseQueryResult<TData, TError> = Pick<
+  QueryObserverResult<TData, TError>,
+  | 'data'
+  | 'error'
+  | 'fetchStatus'
+  | 'isError'
+  | 'isFetched'
+  | 'isFetchedAfterMount'
+  | 'isFetching'
+  | 'isLoading'
+  | 'isRefetching'
+  | 'isSuccess'
+  | 'refetch'
+> & {
+  isCachedData: boolean
+  isIdle: boolean
+  status: 'idle' | 'loading' | 'success' | 'error'
+  internal: Pick<
+    QueryObserverResult,
+    | 'dataUpdatedAt'
+    | 'errorUpdatedAt'
+    | 'failureCount'
+    | 'isLoadingError'
+    | 'isPaused'
+    | 'isPlaceholderData'
+    | 'isPreviousData'
+    | 'isRefetchError'
+    | 'isStale'
+    | 'remove'
+  >
+}
+export type DefinedUseQueryResult<TData = unknown, TError = unknown> = Omit<
+  UseQueryResult<TData, TError>,
+  'data'
+> & {
+  data: TData
+}
+
+export function useCachedQuery<
+  TQueryFnData,
+  TError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UseQueryResult<TData, TError> {
+  const query = useQuery<TQueryFnData, TError, TData, TQueryKey>(
+    queryKey,
+    queryFn,
+    options as any,
+  )
+  const { isFetched, isFetchedAfterMount, status } = query
+
+  return {
+    ...query,
+    isCachedData: status === 'success' && isFetched && !isFetchedAfterMount,
+  }
+}

packages/ensjs-react/src/hooks/useContentHash.ts

@@ -0,0 +1,26 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = {
+  name: string | null | undefined
+} & QueryConfig<ReturnType<PublicENS['getContentHash']>, Error>
+
+const useContentHash = ({
+  name,
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+}: Args) => {
+  const { ready, getContentHash } = useEns()
+  return useCachedQuery(['getContentHash', name], () => getContentHash(name!), {
+    enabled: Boolean(enabled && ready && name),
+    onError,
+    onSettled,
+    onSuccess,
+  })
+}
+
+export default useContentHash

packages/ensjs-react/src/hooks/useDNSOwner.ts

@@ -0,0 +1,26 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = {
+  name: string | null | undefined
+} & QueryConfig<ReturnType<PublicENS['getDNSOwner']>, Error>
+
+const useDNSOwner = ({
+  name,
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+}: Args) => {
+  const { ready, getDNSOwner } = useEns()
+  return useCachedQuery(['getDNSOwner', name], () => getDNSOwner(name!), {
+    enabled: Boolean(enabled && ready && name),
+    onError,
+    onSettled,
+    onSuccess,
+  })
+}
+
+export default useDNSOwner

packages/ensjs-react/src/hooks/useExpiry.ts

@@ -0,0 +1,28 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = {
+  name: string | null | undefined
+  contract: Parameters<PublicENS['getExpiry']>['1']
+} & QueryConfig<ReturnType<PublicENS['getExpiry']>, Error>
+
+const useExpiry = ({
+  name,
+  contract,
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+}: Args) => {
+  const { ready, getExpiry } = useEns()
+  return useCachedQuery(['getExpiry', name], () => getExpiry(name!, contract), {
+    enabled: Boolean(enabled && ready && name),
+    onError,
+    onSettled,
+    onSuccess,
+  })
+}
+
+export default useExpiry

packages/ensjs-react/src/hooks/useHistory.ts

@@ -0,0 +1,26 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = {
+  name: string | null | undefined
+} & QueryConfig<ReturnType<PublicENS['getHistory']>, Error>
+
+const useHistory = ({
+  name,
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+}: Args) => {
+  const { ready, getHistory } = useEns()
+  return useCachedQuery(['getHistory', name], () => getHistory(name!), {
+    enabled: Boolean(enabled && ready && name),
+    onError,
+    onSettled,
+    onSuccess,
+  })
+}
+
+export default useHistory

packages/ensjs-react/src/hooks/useNames.ts

@@ -0,0 +1,25 @@
+import { PublicENS, QueryConfig } from '../types'
+import { useEns } from '../utils/EnsProvider'
+
+import { useCachedQuery } from './useCachedQuery'
+
+type Args = Parameters<PublicENS['getNames']>[0] &
+  QueryConfig<ReturnType<PublicENS['getNames']>, Error>
+
+const useNames = ({
+  onError,
+  onSettled,
+  onSuccess,
+  enabled = true,
+  ...arg0
+}: Args) => {
+  const { ready, getNames } = useEns()
+  return useCachedQuery(['getNames', arg0], () => getNames(arg0), {
+    enabled: Boolean(enabled && ready && arg0.address),
+    onError,
+    onSettled,
+    onSuccess,
+  })
+}
+
+export default useNames