Install ENS Components

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState, type ReactNode } from 'react';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';
import { injected } from 'wagmi/connectors';

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

export function Providers({ children }: { children: ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

'use client';

import { EnsNameRegistrationForm } from '@thenamespace/ens-components';
import { useConnect } from 'wagmi';
import { injected } from 'wagmi/connectors';

export default function RegisterPage() {
  const { connect } = useConnect();

  return (
    <EnsNameRegistrationForm
      avatarUploadDomain="app.example.com"
      onConnectWallet={() => connect({ connector: injected() })}
    />
  );
}