ENS Logo
Connectkit

Quickstart

Hey there 👋, this is the quickstart guide. If you want to learn the process checkout everything about ENS in dApps.

This quickstart guide assumes you have a basic understanding of react, ethers, wagmi, tailwindcss, and web3.

Setup

npm install connectkit wagmi viem

Showing the User Profile

The below codesnippet demonstrates how you can create a basic UserProfile section that shows the users ENS name and avatar. The snippet leverages the useAccount, useEnsName, and useEnsAvatar hooks from wagmi.

luc.eth 0x123...456
import { useAccount, useEnsName, useEnsAvatar } from 'wagmi';
import { formatAddress } from 'ens-tools';

export const UserProfile: FC = () => {
    const { address } = useAccount();
    const { data: ensName } = useEnsName({
        address,
    });
    const { data: ensAvatar } = useEnsAvatar({
        address,
    });

    return (
        <div className="flex items-center gap-2">
            <img
                src={ensAvatar || 'https://v3x.space/ens-docs/pfp.webp'}
                className="w-8 h-8 rounded-full"
            />
            <div className="flex flex-col gap-0 leading-3 pr-10">
                {ensName && <span className="font-bold">{ensName}</span>}
                <span>{formatAddress(address)}</span>
            </div>
        </div>
    );
};

Name Lookups

Find user
0x225...c3B5

Still not sure?

Try reading the regular docs instead.

Everything about ENS in dAppsLearn how to use ENS in your dApp, including how to Name and Avatars, lookuping up names, and how to use names in your smart contracts.