ENS Components

A growing collection of production-ready React components, hooks, and contract actions for integrating ENS v2 into React applications.

ENS v2 support is currently limited to the Sepolia testnet configuration. The "mainnet" network value is reserved but is not implemented yet.

Features

• Complete resolver, commit, wait, approve, register, and primary-name flow
• Complete ERC-20 name renewal flow
• Permission-aware ENS profile record editor
• Configured payment-token selection with resumable state
• Dialog and inline registration presentations
• TanStack Query hooks for availability, pricing, profiles, and payment status
• Framework-independent actions returning neverthrow results
• Resumable registration flow

Installation

Install the package and its Web3 peers:

npm install @thenamespace/ens-components-v2 @tanstack/react-query@^5 viem@^2.55.0 wagmi@^2.19.5

The package requires React and React DOM 19.2.7 or later, TanStack Query 5, Viem 2.55 or later, and Wagmi 2.19.5 or later. Tailwind CSS is not required in the consuming application.

Styles

Import the precompiled package stylesheet once at the application root:

@import "@thenamespace/ens-components-v2/styles.css";

The stylesheet contains the compiled UI Kit styles and every utility used by ENS Components. No Tailwind installation, configuration, or source scanning is required.

Package exports

Import components, providers, data, and shared helpers from the package root:

import { EnsProvider, NameRegistration } from "@thenamespace/ens-components-v2";

Use the dedicated entry points for actions, query hooks, and icons:

import { prepareNameAvailabilityRead } from "@thenamespace/ens-components-v2/actions";
import { useNameAvailability } from "@thenamespace/ens-components-v2/hooks";
import { getAddressIcon } from "@thenamespace/ens-components-v2/icons";

Actions, hooks, and icons are not re-exported from the package root.

Providers

Hooks and components require Wagmi, TanStack Query, and EnsProvider:

"use client";

import type { ReactNode } from "react";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { EnsProvider } from "@thenamespace/ens-components-v2";
import { createConfig, http, WagmiProvider } from "wagmi";
import { sepolia } from "wagmi/chains";
import { injected } from "wagmi/connectors";

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [sepolia],
  connectors: [injected()],
  transports: {
    [sepolia.id]: http(),
  },
});

export function Providers({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <EnsProvider config={{ network: "testnet" }}>{children}</EnsProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Your application must also provide a wallet connection interface.

Use the same built-in configuration with direct actions:

import { getEnsNetworkConfiguration } from "@thenamespace/ens-components-v2";

const { chain, contracts } = getEnsNetworkConfiguration("testnet");

Name registration

Render the complete registration flow as a dialog:

import { NameRegistration } from "@thenamespace/ens-components-v2";

export function RegisterName() {
  return <NameRegistration />;
}

Use the inline presentation when the flow should remain in the page layout:

<NameRegistration
  presentation="inline"
  messages={{
    searchTitle: "Claim your onchain identity",
  }}
/>

See NameRegistration for customization, lifecycle events, defaults, and flow behavior.

Name renewal

Render the renewal flow as a dialog:

import { NameRenewal } from "@thenamespace/ens-components-v2";

export function RenewName() {
  return <NameRenewal defaultLabel="vitalik" />;
}

Use presentation="inline" to place the flow directly in a page. See NameRenewal for duration controls, lifecycle events, slots, and messages.

Profile records

Render the permission-aware profile editor:

import { NameProfileEditor, emptyNameProfileFormValues } from "@thenamespace/ens-components-v2";

<NameProfileEditor initialRecords={emptyNameProfileFormValues} name="example.eth" />;

The application supplies the initial record snapshot. The component discovers the resolver, checks the connected account's ENS v2 record permissions, reviews changes, and submits one atomic resolver multicall. See NameProfileEditor.

Documentation

Components

• NameRegistration
• NameRenewal
• NameProfileEditor
• TransactionProgress

Providers

• EnsProvider

Hooks

Registration

• useNameAvailability
• useNamePrice
• useRegistrationPaymentStatus
• useCommitmentStatus
• useCommitName
• useRegisterName

Renewal

• useNameRenewalPrice
• useNameRenewalPaymentStatus
• useRenewName

Resolver and profile

• useNameProfile
• useNameRecords
• useNameProfilePermissions
• useNameResolver
• useResolverCapabilities
• useDeployPermissionedResolver
• useUpdateNameProfileRecords
• useSetAddressRecord
• useSetPrimaryName

Payments and transactions

• useApprovePaymentToken
• useWalletCapabilities
• useExecuteContractWrites
• useContractWritesStatus

Icons

• ENS icons and icon resolvers

Actions

• readCommitmentStatus
• readNameAvailability
• readNameProfileDiscovery
• readNameProfilePermissions
• readNameRecords
• readNameRegistrationPaymentStatus
• readNameRegistrationPrice
• readNameRenewalPaymentStatus
• readNameRenewalPrice
• readNameResolver
• readPermissionedResolverSupport
• readPermissionedResolverVerification
• approvePaymentToken
• commitName
• deployPermissionedResolver
• registerName
• renewName
• setAddressRecord
• setL1PrimaryName
• setL2PrimaryName
• updateNameProfileRecords
• Contract Reads
• GraphQL Reads
• Contract Writes
• Contract Write Status
• executeContractWrites
• supportsAtomicBatchCalls