diff --git a/packages/react/src/hooks.ts b/packages/react/src/hooks.ts index 36f626e0..a9751524 100644 --- a/packages/react/src/hooks.ts +++ b/packages/react/src/hooks.ts @@ -1,3 +1,4 @@ export { useNamesForAddress } from './hooks/useNamesForAddress.js' export { useEnsAvailable } from './hooks/useEnsAvailable.js' export { useEnsResolverInterfaces } from './hooks/useEnsResolverInterfaces.js' +export { useDecodedName } from './hooks/useDecodedName.js' diff --git a/packages/react/src/hooks/useDecodedName.ts b/packages/react/src/hooks/useDecodedName.ts new file mode 100644 index 00000000..96a169fd --- /dev/null +++ b/packages/react/src/hooks/useDecodedName.ts @@ -0,0 +1,46 @@ +import { useQuery, type UseQueryResult } from '@tanstack/react-query' +import { + getDecodedName, + type GetDecodedNameReturnType, +} from '@ensdomains/ensjs/subgraph' +import type { ParamWithClients } from '../client.js' +import { fallbackQueryClient } from '../query.js' + +export type UseDecodedNameParams = ParamWithClients<{ + name: string + allowIncomplete?: boolean +}> + +/** + * Decode names returned using the subgraph + * + * Performs network request only if the name needs to be decoded, otherwise transparent + * + * @param data - {@link UseDecodedNameParams} + * @returns - {@link GetDecodedNameReturnType} + */ +export const useDecodedName = ( + data: UseDecodedNameParams, +): UseQueryResult => { + const { + name, + allowIncomplete, + client, + queryClient = fallbackQueryClient, + } = data + + return useQuery( + { + queryKey: ['ensjs', 'decoded-subgraph-name', name], + queryFn: async () => { + const result = await getDecodedName(client, { + name, + allowIncomplete, + }) + + return result + }, + }, + queryClient, + ) +}