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:
This quickstart guide assumes you have a basic understanding of react, ethers, wagmi, tailwindcss, and web3.
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
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 });
const { data: avatar } = useEnsAvatar({ name });
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 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 })
const { data: ethereum } = useEnsAddress({ name, coinType: 60 });
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)
}
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.