How to get the address and all the information about an ENS name using Wagmi

We are going to learn how to get the address and all the available information like the avatar, personal information or social URLs about an ENS name using Wagmi.

In this tutorial, we are going to learn how to get the address and all the available information like the avatar, personal information or social URLs about an ENS name using Wagmi.

Here are a few examples of what you can do:

import {
  useEnsResolver,
  useEnsName,
  useEnsAvatar,
  useEnsAddress
} from 'wagmi'

const ensName = "vitalik.eth"
const ensAddress = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"

export function GetENSNameInfo() {

  // Get the address of an ENS name
  const {
    data: address,
    error: addressError,
    isLoading: addressLoading
  } = useEnsAddress({
    name: ensName
  })
  
  // Get the ENS name for an address
  const {
    data: name,
    error: nameError,
    isLoading: nameLoading
  } = useEnsName({
    address: ensAddress
  })
  
  // Get the avatar of an ENS name (the link to an image or NFT)
  const {
    data: avatar,
    error: avatarError,
    isLoading: avatarLoading
  } = useEnsAvatar({
    addressOrName: ensName
  })
  
  // Get the resolver of an ENS name (an object with all the available information about an ENS name)
  const {
    data: resolver,
    error: resolverError,
    isLoading: resolverLoading
  } = useEnsResolver({
    name: ensName
  })
  
  if (addressLoading || nameLoading || avatarLoading || resolverLoading) {
    return <p>Loading data...</p>
  }
  
  if (addressError || nameError || avatarError || resolverError) {
    return <p>Failed to fetch data</p>
  }
  
  return (
    <div>
      <p>The address of the name {ensName} is {address}</p>
      <p>The ENS name of the address {ensAddress} is {name}</p>
      <p>The avatar of the name {ensName} is:</p>
      <img src={avatar} alt={`avatar of ${ensName}`} />
      <p>The resolver for the name {ensName}:</p>
      <p>{JSON.stringify(resolver)}</p>
    </div>
  )
}

Now let's talk about these hooks in details

How to get the address of an ENS name

First, we're going to see how to get the address of an ENS name using the useEnsAddress hook.

This hook takes in parameter a configuration object in which you can pass a name property which contains an ENS name.

Check out the documentation to see all the properties you can pass to that object.

That hook returns an object that contains a data property which is a string that contains the address of the ENS name you passed in the parameters. The data property will be null if the ENS name has no owner.

It also returns an error property if the ENS name could not be fetched and it has an isLoading property that is true when fetching the address of the ENS name and false otherwise.

Here is an example:

import { useEnsAddress } from 'wagmi'

export function GetENSAddress() {

  // Get the address of an ENS name
  const { data, error, isLoading } = useEnsAddress({
    name: "vitalik.eth"
  })
  
  if (isLoading) return <p>Loading data...</p>
  if (error) return <p>Failed to fetch data</p>
  
  return (
    <div>
      <p>The address of the name vitalik.eth is {data}</p>
    </div>
  )
}

How to get an ENS name from an address

To get an ENS name from an Ethereum address, we use the useEnsName hook.

That hooks takes in parameter an object in which you can pass an address property which is the address you want to find the ENS name of (if it exists).

Just like the useEnsAddress hook, it returns an object with a data, error and isLoading property.

If there is no ENS name for the address you passed in the parameters, the data returned will be null. If it failed to fetch the ENS name for the address you passed, error will contain the error that was thrown. And while the ENS name is being fetched, isLoading will be true.

Check out the documentation to see all the options you can pass to that hook and all the return values.

Here is an example:

import { useEnsName } from 'wagmi'

const ensAddress = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"

export function GetENSNameFromAddress() {

  // Get an ENS name for an address
  const { data, error, isLoading } = useEnsName({
    address: ensAddress
  })
  
  if (isLoading) return <p>Loading data...</p>
  if (error) return <p>Failed to fetch data</p>
  
  return (
    <div>
      <p>The address {ensAddress} owns this ENS name: {data}</p>
    </div>
  )
}

How to get the avatar of an ENS name

To get the avatar of an ENS name, we use the useEnsAvatar hook which takes in parameter an object with a addressOrName property in which you can either pass the ENS name of which you want to get the avatar or the address of that ENS name.

Like the other hooks it returns an object with the following properties (among others):

  • data: the URL of the avatar image or null if the ENS name or address has no avatar. It will either return the URL of the avatar that the user configured or the URL of an NFT they own
  • error: the error thrown while trying to fetch the ENS avatar if it failed, null otherwise
  • isLoading: true while fetching the avatar and false otherwise

Check out the documentation to get all the information about the arguments and return values of that hook.

Here is an example:

import { useEnsAvatar } from 'wagmi'

const ensName = "vitalik.eth"

export function GetENSAvatar() {
  
  // Get the avatar of an ENS name (the link to an image or NFT)
  const { data, error, isLoading } = useEnsAvatar({
    addressOrName: ensName
  })
  
  if (isLoading) {
    return <p>Loading data...</p>
  }
  
  if (error) {
    return <p>Failed to fetch avatar</p>
  }
  
  return (
    <div>
      <p>The avatar of the name {ensName} is:</p>
      <img src={avatar} alt={`avatar of ${ensName}`} />
    </div>
  )
}

How to get all the information about an ENS name using the resolver

To get all the information about an ENS name, we can get the resolver and read all the properties of the resolver or call the functions inside the resolver to get data.

The useEnsResolver hook takes in parameter an object in which you can pass an ENS name in the name property. It returns an object with a data property containing the ENS resolver or null if the name or address doesn't exist.

It also has the error and isLoading properties like the other hooks. Check out the documentation to get more information about that hook.

The resolver that the data property contains will have the following properties:

  • name: The ENS name
  • address: The address of that ENS name
  • getAvatar: an asynchronous function to get the URL of the avatar. It can either be an image (or GIF) that the owner has set or an NFT that is owned by the address of that ENS name.
    The returned object has 2 properties, url, and linkage which is an array that explains all the steps that the function went through to get the URL.
  • getAddress: an asynchronous function to get the address of the ENS name for the blockchain passed in parameters (Ethereum by default).
    In the parameters you can pass a blockchain ID of the blockchain you want to get the address for. Check out this list to see all the blockchain IDs you can pass: https://eips.ethereum.org/EIPS/eip-2304#address-encoding
  • getText: an asynchronous function to get the personal information of an ENS name. It's only the data that the owner decided to share. It takes in parameter a key from this list and it returns the data for that key or null if there is no data.
    For example, if you pass "email" it will return the email of the ENS name if the owner decided to share it. You can also get the social media URLs of the owner of the ENS name.
  • getContentHash: an asynchronous function to get the hash of the content that the owner uploaded on protocols like IPFS or Swarm and decided to share. More information about the content hash here: https://eips.ethereum.org/EIPS/eip-1577

Check out the documentation to see everything about the ENS resolver type.

import { useEnsResolver } from 'wagmi'

const ensName = "vitalik.eth"

export function GetENSResolver() {
  const [email, setEmail] = useState()

  // Get the resolver of an ENS name (an object with all the available information about an ENS name)
  const { data, error, isLoading } = useEnsResolver({
    name: ensName
  })
  
  useEffect(() => {
    async function getEmail() {
        if (!data) return
        const ensEmail = await data.getText("email")
        setEmail(ensEmail)
    }
    
    getEmail()
  }, [data])
  
  if (isLoading) {
    return <p>Loading data...</p>
  }
  
  if (error) {
    return <p>Failed to fetch data</p>
  }
  
  return (
    <div>
      <p>The email of the ENS name: {email}</p>
      <p>The resolver for the name {ensName}:</p>
      <p>{JSON.stringify(resolver)}</p>
    </div>
  )
}

And that's it 🎉

Thank you for reading this article