ENS Logo

Quickstart

Hey there 👋, this is the quickstart guide. If you want to learn the process checkout everything about ENS in dApps. If you would rather just clone an example repository checkout these:

Starter Kits

Add to your dApp

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

Installation

Installing Dependencies
npm install connectkit wagmi viem
npm install @rainbow-me/rainbowkit wagmi viem
npm install wagmi viem
npm install ethers
npm install viem
cargo add ethers
go get github.com/wealdtech/go-ens/v3

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.eth0x123...456
Showing the User Profile
import { ConnectButton } from '@rainbow-me/rainbowkit';

// Rainbowkit's ConnectButton includes a built-in user profile!
export const YourApp = () => {
  return <ConnectButton />;
};
import { useAccount, useEnsName, useEnsAvatar } from 'wagmi';
import { formatAddress } from 'ens-tools';

export const YourApp: FC = () => {
    const { address } = useAccount();
    const { data: name } = useEnsName({ address, chainId: 1 });
    const { data: avatar } = useEnsAvatar({ name, chainId: 1 });

    return (
        <div className="flex items-center gap-2">
            <img
                src={avatar || 'https://docs.ens.domains/fallback.svg'}
                className="w-8 h-8 rounded-full"
            />
            <div className="flex flex-col gap-0 leading-3 pr-10">
                {name && <span className="font-bold">{name}</span>}
                <span>{formatAddress(address)}</span>
            </div>
        </div>
    );
};
package main

import (
	"fmt"

	"github.com/ethereum/go-ethereum/ethclient"
	ens "github.com/wealdtech/go-ens/v3"
)

func main() {
	client, _ := ethclient.Dial("https://rpc.ankr.com/eth")

	domain, _ := ens.Normalize("luc.eth")
	resolver, _ := ens.NewResolver(client, domain)
	avatar, _ := resolver.Text("avatar")
	address, _ := resolver.Address()

	fmt.Printf("ENS: %s, Avatar: %s, Address: %s\n", domain, avatar, address.Hex())
	// ENS: luc.eth, Avatar: https://ens.xyz/luc.eth, Address: 0x225f137127d9067788314bc7fcc1f36746a3c3B5
}

Name Lookups

Name Lookup
Lookup a name
import { useAccount, useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi';
import { normalize } from 'viem/ens';
import { formatAddress } from '@ens-tools/format';

export const NameLookup = () => {
    const name = normalize("luc.eth");
    const { data: avatar } = useEnsAvatar({ name, chainId: 1 });
    const { data: ethereum } = useEnsAddress({ name, coinType: 60, chainId: 1 });

    return (
        <div>
			{ethereum && formatAddress(ethereum)}<br />
			{avatar && <img src={avatar} />}
		</div>
    );
};
package main

import (
	"fmt"

	"github.com/ethereum/go-ethereum/ethclient"
	ens "github.com/wealdtech/go-ens/v3"
)

var (
	records = []string{
		"com.twitter",
		"com.reddit",
		"com.github",
		"com.discord",
		"com.linkedin",
		"org.telegram",
		"url",
		"description",
		"avatar",
		"email",
		"location",
	}
)

type EnsName struct {
	name    string
	records map[string]string
	address string
}

func main() {
	client, _ := ethclient.Dial("https://rpc.ankr.com/eth")

	domain, _ := ens.Normalize("luc.eth")
	resolver, _ := ens.NewResolver(client, domain)
	address, _ := resolver.Address()

	name := EnsName{
		name:    domain,
		records: make(map[string]string),
		address: address.Hex(),
	}

	for _, record := range records {
		value, _ := resolver.Text(record)
		name.records[record] = value
	}

	fmt.Println(name)
}

Still not sure?

Try reading the rest of the 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.