Tutorial | how to convert an ens address to an eth address in a web application

Published on 3 Days ago   53 views   0 Comments  

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.

ใ€

Knowing what to do is valuable because most smart contracts only accept eth addresses, not ENS addresses.


introduce


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

There are several ways to convert an ens address:

1: Use ens.js

I used this library to translate ENS addresses. However, it doesn't apply to applications located in layer2, so I won't show how to operate in 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 ENS discord, they said not to use this. In addition, you spend money every time a user queries this subgraph on your application - so it's not free. I think ENS plans to tell everyone to use this subgraph, but I may be wrong. I'm not sure what they'll wait for.

3: Use the centralized subgraph provided by ENS

This subgraph is free to use and is recommended by Paris higher normal college. This is how I will teach you to use it here.


Project settings


First, clone 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 that the validity and eth address are logging in in the browser console and confirm the conversion.


explain


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

There is an input on the home page (SRC / pages / index. TSX). When entering, it sets the inputaddress state variable.

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

Now open the file of react hook (SRC / components / useensaddress. TS). You can see that it uses the hook of useeffect inside. The list of dependencies for this useeffect has an inputaddress parameter. This causes the useeffect body to be called every time the inputaddress changes (through user input).

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

So what happens when the body of useeffect is called? Almost everything happens when the run method is called.

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

Open Src / stores / ensstore.ts. Inside is the queryensforethaddress method.

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

It then queries by HTTP_ GRAPHQL_ Subgraph defined by endpoint. In order to get the data we want, we need to create a graphql query. This is what the getqueryensforethaddress method does.

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

If you want to know how I figured out how to create this query, you need more knowledge about the work of graph and graphql. Basically, each subgraph has an amusement park, and I've been playing with it until I get the data I need.

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

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

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 data returned is 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 record these values to the console on the home page.

Now you know how to convert the ENS addresses of layer 1 and layer 2 into eth addresses.

Source๏ผš https://medium.com/coinmonks/how-to-convert-ens-address-to-eth-address-in-js-251c6209c208


Generic placeholder image
Promote your coin to 10k unique users daily
contact us PM Twitter
597 views   0 Comments   8/26/2021
552 views   0 Comments   8/26/2021
549 views   0 Comments   8/25/2021
507 views   0 Comments   8/27/2021
464 views   0 Comments   8/26/2021
457 views   0 Comments   8/26/2021
435 views   0 Comments   8/26/2021
423 views   0 Comments   8/28/2021
415 views   0 Comments   8/28/2021