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

ConnectKit

by Family

Try it!

Rainbowkit

by Rainbow

Try it!

Web3Modalv2

by WalletConnect

Try it!

Add to your dApp

This quickstart guide assumes you have a basic understanding of React.

Installation

Terminal

npm install wagmi viem @tanstack/react-query

Showing the User Profile

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

nick.eth0x0000...0000

jefflau.eth0x0000...0000

vitalik.eth0x0000...0000

import { useAccount, useEnsAvatar, useEnsName } from 'wagmi'
 
export const EnsProfile = () => {
  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} className="h-8 w-8 rounded-full" />
      <div className="flex flex-col leading-none">
        <span className="font-semibold">{name}</span>
        <span className="text-grey text-sm">{address}</span>
      </div>
    </div>
  )
}

Text Record Lookups

nick.eth

Key	Value

TextRecords.tsx

import { useEnsAvatar } from 'wagmi'
 
import { UseEnsTextsProps, useEnsTexts } from '../hooks/useEnsTexts'
import { Table } from './ui/Table'
 
export const TextRecords = ({ name, keys }: UseEnsTextsProps) => {
  const { data: avatar } = useEnsAvatar({ name, chainId: 1 })
  const { data: texts } = useEnsTexts({ name, keys })
 
  return (
    <>
      <div className="mb-4 flex items-center gap-2">
        <img
          src={avatar || '/img/fallback-avatar.svg'}
          className="h-8 w-8 rounded"
        />
        <span className="font-semibold">{name}</span>
      </div>
 
      <Table
        columns={['Key', 'Value']}
        rows={texts?.map(({ key, value }) => [key, value]) || []}
      />
    </>
  )
}

Address Record Lookups

While ENS resolution always starts from Ethereum L1, you can store addresses for other chains in ENS records.

gregskril.eth

CoinType	Address

AddressRecords.tsx

import { useEnsAvatar } from 'wagmi'
 
import { UseEnsAddressesProps, useEnsAddresses } from '../hooks/useEnsAddresses'
import { Table } from './ui/Table'
 
export const AddressRecords = ({ name, coinTypes }: UseEnsAddressesProps) => {
  const { data: avatar } = useEnsAvatar({ name, chainId: 1 })
  const { data: addresses } = useEnsAddresses({ name, coinTypes })
 
  return (
    <>
      <div className="mb-4 flex items-center gap-2">
        <img
          src={avatar || '/img/fallback-avatar.svg'}
          className="h-8 w-8 rounded"
        />
        <span className="font-semibold">{name}</span>
      </div>
 
      <Table
        columns={['CoinType', 'Address']}
        rows={
          addresses?.map(({ coinType, address }) => [coinType, address]) || []
        }
      />
    </>
  )
}