Tutorial: How to convert an ENS address to an ETH address in a web application

In this tutorial, I will show you the simplest example I can think of, how to convert an ENS address to an ETH address in a web application.

Tutorial: How to convert an ENS address to an ETH address in a web application

,

Knowing how to do it is valuable because most smart contracts only accept ETH addresses, not ENS addresses.

introduce

The simple answer to how to do this is that the user only needs to query the data from the subgraph.

There are multiple ways to convert an ENS address:

1: Use ENS.js

I have used this library to convert ENS addresses. However, it does not apply to applications located in layer2, so I will not show how to do it this way.

2: Use the decentralized subgraph provided by ENS

This is the most reliable method because it is decentralized. However, when I asked in the ENS discord, they said not to use this. In addition, every time a user queries this subgraph on your application, you have to spend money-so it is not free. I think the ENS plan tells everyone to use this subgraph, but I may be wrong and I am not sure what they will wait for.

3: Use the centralized subgraph provided by ENS

This sub-picture is free to use, and it is recommended by the École Normale Supérieure in Paris. This is how I will teach how to use it here.

Project settings

First, clone the repo locally. Then, install all dependencies and run the local server. If you want to check localhost, you should see an input on the page. If you enter a valid ENS address, you will see the validity and ETH address are being logged in the browser console to confirm the conversion.

explain

Now that you have all the code, I will use the remainder of this tutorial to explain how it works linearly.

There is an input on the home page (src/pages/index.tsx). When inputting, it sets the inputAddress state variable.

Tutorial: How to convert an ENS address to an ETH address in a web application

Whenever this state variable changes, it will be detected by the useENSAddress hook here:

Tutorial: How to convert an ENS address to an ETH address in a web application

Now open the React hook file (src/components/useENSAddress.ts). You can see that it uses the useEffect hook inside. There is an inputAddress parameter in the dependency list of useEffect. This will cause the useEffect body to be called every time the inputAddress changes (via user input).

useEffect((): any => { …body code here… }, [inputAddress])

So what happens when the body of useEffect is called? Almost all that happens is that the run method is called.

Tutorial: How to convert an ENS address to an ETH address in a web application

The run method sets the ETH address by calling other methods. Let’s check that method, because it is the next one in the call stack.

Open src/stores/ensStore.ts. Inside is the queryENSForETHAddress method.

Tutorial: How to convert an ENS address to an ETH address in a web application

First, it performs a soft check to see if the value passed in is an ENS address.

Then, it queries the subgraph defined by HTTP_GRAPHQL_ENDPOINT. In order to get the data we want, we need to create a graphql query. This is what the getQueryENSForETHAddress method does.

Now turn to that method. It is querying the subgraph to get the data of the incoming ENS address.

Tutorial: How to convert an ENS address to an ETH address in a web application

If you want to know how I figured out how to create this query, then you need more knowledge about the work of thegraph and graphql. Basically, each subgraph has a playground, and I have been fiddling with it until I get the data I need.

For example, in the playground, you can enter a query and then press the play button to view the returned data.

Now, if you return to queryENSForETHAddress, you can see that the data is stored in the result variable:

Tutorial: How to convert an ENS address to an ETH address in a web application

The basic meaning of the return statement is, if valid ENS address passed in, return the ETH address…otherwise, return 0. You will also notice that the returned data comes from getQueryENSForETHAddress.

Once it returns, it can be traced back to the useENSAddress.ts file in useEffect and set the ethAddress state variable.

Then, three values ​​are returned:

return [parseInt(ethAddress, 16) !== 0, ethAddress, isLoading]

The first value indicates whether the value passed in is valid. The second value is the ETH address retrieved from the subgraph. The third value indicates whether these values ​​are currently being loaded.

That’s almost it. After completing this process, I logged these values ​​to the console on the home page.

Now you know how to convert the ENS addresses of the first and second layers to ETH addresses.

Posted by:CoinYuppie,Reprinted with attribution to:https://coinyuppie.com/tutorial-how-to-convert-an-ens-address-to-an-eth-address-in-a-web-application/
Coinyuppie is an open information publishing platform, all information provided is not related to the views and positions of coinyuppie, and does not constitute any investment and financial advice. Users are expected to carefully screen and prevent risks.

Leave a Reply