更新时间:2021-11-24 20:27:01点击:197
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