news 2026/5/6 16:12:28

web3-react终极ENS集成指南：5步实现去中心化域名解析

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
web3-react终极ENS集成指南：5步实现去中心化域名解析

web3-react终极ENS集成指南：5步实现去中心化域名解析

【免费下载链接】web3-reactA simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps项目地址: https://gitcode.com/gh_mirrors/we/web3-react

web3-react是一个简单、可扩展性强且依赖最小化的框架，专为构建现代以太坊dApps而设计。通过web3-react，开发者可以轻松集成各种钱包和区块链功能，打造流畅的去中心化应用体验。

一、了解ENS：以太坊域名系统基础

以太坊域名系统（ENS）是一个去中心化的域名服务，它将复杂的以太坊地址映射为易于记忆的域名，如"alice.eth"。这一系统不仅提升了用户体验，还为dApp开发提供了更多可能性。

ENS的核心优势在于：

  • 简化地址使用：用户无需记忆冗长的42位以太坊地址
  • 跨应用兼容：几乎所有主流以太坊钱包和dApp都支持ENS
  • 去中心化管理：域名所有权由智能合约保障，无需中心化机构

二、准备工作：web3-react环境搭建

在开始集成ENS之前，确保你的开发环境已满足以下要求：

  1. 安装Node.js：推荐使用v14.0.0或更高版本
  2. 克隆项目仓库：
    git clone https://gitcode.com/gh_mirrors/we/web3-react
  3. 安装依赖：
    cd web3-react && yarn install

web3-react的核心包位于packages/core/目录，其中包含了构建dApp所需的基础组件和钩子函数。

三、第一步：安装必要的依赖包

集成ENS功能需要安装两个关键包：@ethersproject/contracts和@ensdomains/ens-contracts。在项目根目录执行以下命令：

yarn add @ethersproject/contracts @ensdomains/ens-contracts

这些包提供了与ENS智能合约交互的必要工具和类型定义。

四、第二步：创建ENS解析工具函数

在项目中创建一个ENS工具函数文件，建议放在example/utils.ts中：

import { ethers } from 'ethers'; import { ENS } from '@ensdomains/ens-contracts'; // ENS合约地址（主网） const ENS_CONTRACT_ADDRESS = '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'; export async function resolveENSName(provider: ethers.providers.Provider, name: string): Promise<string | null> { try { const ensContract = new ethers.Contract(ENS_CONTRACT_ADDRESS, ENS.abi, provider); return await ensContract.resolver(name); } catch (error) { console.error('ENS resolution error:', error); return null; } } export async function reverseResolveAddress(provider: ethers.providers.Provider, address: string): Promise<string | null> { try { return await provider.lookupAddress(address); } catch (error) { console.error('Reverse ENS resolution error:', error); return null; } }

这些函数封装了ENS域名解析和地址反向解析的核心逻辑。

五、第三步：集成web3-react hooks

web3-react提供了强大的hooks系统，让你可以轻松访问以太坊 provider。编辑example/components/Accounts.tsx文件，添加ENS解析功能：

import { useWeb3React } from '@web3-react/core'; import { resolveENSName } from '../utils'; function Accounts() { const { account, library } = useWeb3React(); const [ensName, setEnsName] = useState<string | null>(null); useEffect(() => { if (account && library) { resolveENSName(library, account).then(name => { setEnsName(name); }); } }, [account, library]); return ( <div> <h3>当前账户</h3> {ensName ? ( <p>{ensName} ({account})</p> ) : ( <p>{account}</p> )} </div> ); }

这段代码使用useWeb3Reacthook获取当前连接的账户和provider，然后解析对应的ENS名称。

六、第四步：实现域名输入组件

创建一个ENS域名输入组件，让用户可以通过域名而不是地址进行交互。在example/components/目录下创建ENSInput.tsx：

import { useState } from 'react'; import { useWeb3React } from '@web3-react/core'; import { resolveENSName } from '../utils'; function ENSInput() { const { library } = useWeb3React(); const [domain, setDomain] = useState(''); const [address, setAddress] = useState(''); const [loading, setLoading] = useState(false); const handleResolve = async () => { if (!domain || !library) return; setLoading(true); const resolvedAddress = await resolveENSName(library, domain); setAddress(resolvedAddress || '解析失败'); setLoading(false); }; return ( <div className="ens-input"> <input type="text" value={domain} onChange={(e) => setDomain(e.target.value)} placeholder="输入ENS域名，如alice.eth" /> <button onClick={handleResolve} disabled={loading}> {loading ? '解析中...' : '解析域名'} </button> {address && <p>解析结果: {address}</p>} </div> ); } export default ENSInput;

这个组件提供了一个简单的界面，让用户输入ENS域名并获取对应的以太坊地址。

七、第五步：在页面中集成ENS功能

最后，在你的主页面中集成ENS组件。编辑example/pages/index.tsx：

import { Web3ReactProvider } from '@web3-react/core'; import { MetaMask } from '@web3-react/metamask'; import ENSInput from '../components/ENSInput'; import Accounts from '../components/Accounts'; import { getLibrary } from '../utils'; function Home() { const [connectors, setConnectors] = useState([new MetaMask()]); return ( <Web3ReactProvider getLibrary={getLibrary}> <div className="App"> <h1>web3-react ENS集成示例</h1> <Accounts /> <ENSInput /> {/* 其他组件 */} </div> </Web3ReactProvider> ); } export default Home;

八、测试与优化ENS功能

完成集成后，进行全面测试：

  1. 连接钱包：使用MetaMask等支持ENS的钱包
  2. 测试正向解析：输入已知的ENS域名，验证是否能正确解析为地址
  3. 测试反向解析：检查当前连接账户是否显示正确的ENS名称
  4. 处理异常情况：测试无效域名、未注册域名等边界情况

优化建议：

  • 添加缓存机制，避免重复解析相同域名
  • 实现域名自动补全功能，提升用户体验
  • 添加错误处理和用户友好的提示信息

九、总结：web3-react ENS集成的价值

通过本文介绍的五个步骤，你已经成功在web3-react项目中集成了ENS功能。这一集成不仅提升了dApp的用户体验，还展示了web3-react框架的灵活性和可扩展性。

ENS作为以太坊生态系统的重要基础设施，为去中心化应用提供了更友好的用户界面。web3-react则通过简洁的API和强大的抽象，降低了集成这些复杂功能的门槛。

随着区块链技术的发展，ENS和web3-react的结合将在构建下一代去中心化应用中发挥重要作用。

十、进一步学习资源

  • web3-react核心源码：packages/core/src/
  • ENS解析工具函数：example/utils.ts
  • 钱包连接组件：example/components/connectorCards/

【免费下载链接】web3-reactA simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps项目地址: https://gitcode.com/gh_mirrors/we/web3-react

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/5/6 16:12:03

如何快速解密Wii U游戏文件：CDecrypt完整使用指南

如何快速解密Wii U游戏文件&#xff1a;CDecrypt完整使用指南 【免费下载链接】cdecrypt Decrypt Wii U NUS content — Forked from: https://code.google.com/archive/p/cdecrypt/ 项目地址: https://gitcode.com/gh_mirrors/cd/cdecrypt CDecrypt是一款专业的Wii U游…

作者头像 李华
网站建设 2026/5/6 16:12:01

WebP Server Go多格式支持：JPEG、PNG、BMP、SVG、HEIC、NEF全解析

WebP Server Go多格式支持&#xff1a;JPEG、PNG、BMP、SVG、HEIC、NEF全解析 【免费下载链接】webp_server_go Go version of WebP Server. A tool that will serve your JPG/PNG/BMP/SVGs as WebP/AVIF format with compression, on-the-fly. 项目地址: https://gitcode.co…

作者头像 李华
网站建设 2026/5/6 16:09:05

加速医学影像革命：Facebook Research的FastMRI项目深度解析

加速医学影像革命&#xff1a;Facebook Research的FastMRI项目深度解析 【免费下载链接】fastMRI A large-scale dataset of both raw MRI measurements and clinical MRI images. 项目地址: https://gitcode.com/gh_mirrors/fa/fastMRI 磁共振成像&#xff08;MRI&…

作者头像 李华
网站建设 2026/5/6 16:00:29

LLM指令数据集导航与实战：从Awesome清单到高质量微调数据构建

1. 项目概述&#xff1a;为什么我们需要一个“指令数据集”的导航站&#xff1f;如果你最近在折腾大语言模型&#xff08;LLM&#xff09;&#xff0c;无论是想微调一个专属的助手&#xff0c;还是单纯好奇ChatGPT们是如何被“教”出来的&#xff0c;那你大概率会碰到一个核心难…

作者头像 李华
网站建设 2026/5/6 16:00:26

AI风险治理终极指南：从伦理隐私到安全框架的完整实践路径

AI风险治理终极指南&#xff1a;从伦理隐私到安全框架的完整实践路径 【免费下载链接】h4cker This repository is maintained by Omar Santos (santosomar) and includes thousands of resources related to ethical hacking, bug bounties, digital forensics and incident r…

作者头像 李华