Register .eth names

​

Example

'use client';

import { EnsNameRegistrationForm } from '@thenamespace/ens-components';

export function RegisterName({ onConnect }: { onConnect: () => void }) {
  return (
    <EnsNameRegistrationForm
      name="alice"
      avatarUploadDomain="app.example.com"
      onConnectWallet={onConnect}
      onRegistrationSuccess={(result) => {
        // registrationCost is the USDC or DAI price. total covers only ETH network fees.
        console.log(result.registrationCost, result.expiryDate);
      }}
    />
  );
}

​

How the flow works

1. The user types a label. The form checks availability with the ENSv2 registrar and shows the price.
2. The user picks a duration in years or with a calendar date. The minimum is 28 days.
3. The user can add records, an avatar, and a header image before registering.
4. The form sends the commit transaction, waits the registrar’s minimum commitment age, then sends the register transaction. If the page reloads during the wait, the commitment resumes.
5. Each owner gets their own PermissionedResolver. On the owner’s first registration it’s deployed as an extra step in the same flow, and records set during registration are written to it.

​

Props

​

Success data

​

Related

• Let users extend a name with NameRenewForm.
• Edit records after registration with EnsRecordsForm.