data-v-9033fe72 data-v-0aea98aa本教程提供了在web APP应用程序中将ENS地址转换为ETH地址的最简单的示例。

、

知道方法是值得的。 因为大多数智能合约只接受ETH地址，而不接受ENS地址。

介绍

实现这一点的简单答案是，用户只需要从子图中查询数据。

有多种转换ENS地址：的方法

使用日本航空公司

使用这个库转换过ENS地址。 但是，它不适用于layer2上的APP应用程序，因此我不展示这样做的方法。

2 :使用ens提供的去中心化子图

这是最可靠的方法。 因为它是中心化的。 但是，当我在ENS discord上询问时，他们说不用这个。 另外，每次用户在APP上查询这个子图时，都要花——美元，所以不是免费的。 我想ENS计划让每个人都使用这个子图，我可能错了。 我不知道他们要等什么。

3 :使用ens提供的中心化子图

该子图免费使用，也是巴黎高等师范学院推荐给人们使用的。 这是我教你这里的使用方法。

项目设置

首先，在本地克隆repo。 接下来，安装所有依赖关系并运行本地服务器。 要检查localhost，必须在页面上显示输入。 输入有效的ENS地址后，有效性和ETH地址将在浏览器控制台中注册，以验证转换。

解释

因为你已经有了所有的代码，所以我用本教程的其余部分来说明它是如何线性工作的。

在主页上有输入(src/pages/index.tsx )。 输入后，将设置输入地址状态变量。

每当此状态变量发生变化时，这里的useENSAddress hook都会检测到：

打开React hook文件(src /组件/用户访问地址. ts )。 可以看到你在使用中的useEffect的hook。 此useEffect的依赖关系列表包含输入地址参数。 这样，每当inputAddress发生更改时，都会调用useEffect主体(通过用户输入)。

useEffect () : any={ . }，[输入地址]

那么，调用useEffect的主体会发生什么呢？ 大多数情况下，会调用run方法。

run方法调用其他方法来设置ETH地址。 因为是调用栈的下一个方法，所以让我们检查一下那个方法。

打开src/stores/ens存储区. ts 其中有queryENSForETHAddress方法。

首先，对传入的值是否为ENS地址进行软件检查。

接下来，查询由HTTP_GRAPHQL_ENDPOINT定义的子图。 为了得到我们想要的数据，有必要制作graphql查询。 这就是getQueryENSForETHAddress方法的作用。

现在转移到那个方法。 正在查询子图以获取接收到的ENS地址的数据。

如果想知道我是怎么想这个查询的，需要对thegraph和graphql的工作有更多的了解。 基本上，每个子图都有一个游乐园，一直摆弄到获得所需的数据为止。

例如，在playground中，可以通过输入查询并按播放键来查看返回的数据。

现在，如果返回到queryENSForETHAddress，您将看到数据存储在result变量中。

return语句的基本含义是if有效地址in，返回地址…其他，返回0。 我还注意到返回的数据被getQueryENSForETHAddress所采用。

一旦返回，您就可以向下钻取到useEffect中的useENSAddress.ts文件并设置ethAddress状态变量。

然后返回三个值：

return [永久地址，16！=0，以太地址，is加载]

第一个值指示传入的值是否有效。 第二个值是从子图中获取的ETH地址。 第三个值指示这些值当前是否已加载。

差不多就是这样了。 此过程完成后，将这些值记录在主页的控制台上。

我知道如何将第1层和第2层的ENS地址转换为ETH地址。

来源： https://媒体.com /连接通讯/热转换-能源-地址到以太网地址- JS-251 c 6209 c 208