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 ornull
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 ownerror
: the error thrown while trying to fetch the ENS avatar if it failed,null
otherwiseisLoading
:true
while fetching the avatar andfalse
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 nameaddress
: The address of that ENS namegetAvatar
: 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
, andlinkage
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-encodinggetText
: 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 ornull
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