Introducing Ethereum Name Service: Blockchain’s DNS

Monday, 11/05/2020

Tram Ho

Etherum in particular as well as blockchain platforms, other cryptocurrencies in particular are not really popular with ordinary users. The reason is partly because blockchain technology or crypto currency is still very new, partly because it is not really user friendly (long wallet address, hard to remember, backup private key, …). The Ethereum Name Service (ENS) was created to solve this problem, mapping long wallet addresses into a short name that is easier to remember.

1. Introduction

The Ethereum Name Service is simply a distributed domain service on the Ethereum platform. The ENS function is similar to DNS (mapping IP addresses to more memorable domains). Like DNS, ENS deploys on a hierarchical domain system of domains and subdomains, the owner of a domain has full control over subdomains. For example, domain .eth , subdomain will be foo.eth , bar.eth ….

The logic of ENS is shown in the smart contract ENS and deployed to the Ethereum network (or test networks). If the terminal application uses the ethereum-ens library, it will automatically detect the network and use ENS on that network.

2. Architecture

ENS has 2 main parts:

The ENS registry is a smart contract that contains lists of domains and subdomains. Each domain or subdomains store the following 3 information:

The owner address of the domain or subdomains
Address resolver of domain or subdomains
Term of domains

The owner of a domain has the right:

Specify the resolvers and duration of the domains
Transfer domain ownership to another address
Change owner of subdomains

You can see the source code of ENS Registry contract here

Resolvers is simply the place to perform the domains => address conversion and return the address corresponding to the domain for the user.

The process consists of 2 steps as shown above:

B1: The application asks for the address of resolvers of domains foo.eth by calling resolvers . The registry will return the address of the corresponding resolvers
B2: The application calls resolvers to get the address corresponding to the foo.eth domains

3. Integrating ENS into Dapp

ENS Libraries

ENS support supports many libraries with different languages. The most popular is still Javascript.

ethereum-ens , maintained by ENS developers
ethjs-ens
ethers.js
web3.js

Only the ethereum-ens library is officially supported by the full ENS developer team. Other libraries are more or less restricted at some point.

web3.js does not support creating domains, transferring domain owners (transferring ownership) or changing resolvers (updating resolvers).

ethjs-ens only supports forward and name resolution of ENS domain.

Similar to ethjs-ens is ethers.js .

Create an ENS domain

Creating a domain on the mainnet Ethereum will lose ETH so we create a new domain on the testnet. Here I choose Rinkeby’s network. The process of creating a domain consists of 3 steps.

After successful creation, display the basic information of the domain.

Working with ENS

Before you can start interacting with ENS, we will need to get a reference to the ENS registry.

<span class="token comment">// ethereum-ens</span>
<span class="token keyword">let</span> <span class="token constant">ENS</span> <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'ethereum-ens'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">let</span> accounts <span class="token operator">=</span> ethereum <span class="token punctuation">.</span> <span class="token function">enable</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">let</span> ens <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ENS</span> <span class="token punctuation">(</span> ethereum <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// ethereum-ens

let ENS = require ( 'ethereum-ens' ) ;

let accounts = ethereum . enable ( ) ;

let ens = new ENS ( ethereum ) ;

<span class="token comment">// web3-js</span>
<span class="token keyword">let</span> Web3 <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"web3"</span> <span class="token punctuation">)</span>

<span class="token keyword">let</span> accounts <span class="token operator">=</span> ethereum <span class="token punctuation">.</span> <span class="token function">enable</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">let</span> web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span> <span class="token punctuation">(</span> ethereum <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">let</span> ens <span class="token operator">=</span> web3 <span class="token punctuation">.</span> eth <span class="token punctuation">.</span> ens <span class="token punctuation">;</span>

// web3-js

let Web3 = require ( "web3" )

let web3 = new Web3 ( ethereum ) ;

let ens = web3 . eth . ens ;

The results returned using web3-js are as follows:

web3 <span class="token punctuation">.</span> eth <span class="token punctuation">.</span> ens <span class="token punctuation">.</span> registry <span class="token punctuation">;</span>
<span class="token punctuation">{</span>
    ens <span class="token punctuation">:</span> <span class="token constant">ENS</span> <span class="token punctuation">,</span>
    contract <span class="token punctuation">:</span> Contract <span class="token punctuation">,</span>
    owner <span class="token punctuation">:</span> <span class="token function">Function</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token punctuation">,</span>
    resolve <span class="token punctuation">:</span> <span class="token function">Function</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

web3 . eth . ens . registry ;

{

ens : ENS ,

contract : Contract ,

owner : Function ( name ) ,

resolve : Function ( name )

}

Decode ENS domain into address

<span class="token comment">// ethereum-ens</span>
<span class="token keyword">let</span> address <span class="token operator">=</span> <span class="token keyword">await</span> ens <span class="token punctuation">.</span> <span class="token function">resolver</span> <span class="token punctuation">(</span> <span class="token string">'sunblockchain.eth'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addr</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// ethereum-ens

let address = await ens . resolver ( 'sunblockchain.eth' ) . addr ( ) ;

<span class="token comment">// web3-js</span>
<span class="token keyword">let</span> address <span class="token operator">=</span> ens <span class="token punctuation">.</span> <span class="token function">getAddress</span> <span class="token punctuation">(</span> <span class="token string">'sunblockchain.eth'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// web3-js

let address = ens . getAddress ( 'sunblockchain.eth' ) ;

Example with web3-js:

web3 <span class="token punctuation">.</span> eth <span class="token punctuation">.</span> ens <span class="token punctuation">.</span> <span class="token function">getAddress</span> <span class="token punctuation">(</span> <span class="token string">'sunblockchain.eth'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> address <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> address <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>
<span class="token operator">&gt;</span> <span class="token number">0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359</span>

web3 . eth . ens . getAddress ( 'sunblockchain.eth' ) . then ( function ( address ) {

console . log ( address ) ;

} )

> 0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359

Address resolution to ENS domain

<span class="token comment">// ethereum-ens</span>
<span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">'0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359'</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token keyword">await</span> ens <span class="token punctuation">.</span> <span class="token function">reverse</span> <span class="token punctuation">(</span> address <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
<span class="token comment">// Check to be sure the reverse record is correct.</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> address <span class="token operator">!=</span> <span class="token keyword">await</span> ens <span class="token punctuation">.</span> <span class="token function">resolver</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addr</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// ethereum-ens

const address = '0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359' ;

var name = await ens . reverse ( address ) . name ( )

// Check to be sure the reverse record is correct.

if ( address != await ens . resolver ( name ) . addr ( ) ) {

name = null ;

}

Domain name management

Change domain owner

<span class="token comment">// ethereum-ens</span>
<span class="token keyword">await</span> ens <span class="token punctuation">.</span> <span class="token function">setOwner</span> <span class="token punctuation">(</span> <span class="token string">'alice.eth'</span> <span class="token punctuation">,</span> <span class="token string">'0xE5d05238D35D22A2DC50ff98EFebaddc937FD8dB'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">from</span> <span class="token punctuation">:</span> <span class="token string">'0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// ethereum-ens

await ens . setOwner ( 'alice.eth' , '0xE5d05238D35D22A2DC50ff98EFebaddc937FD8dB' , { from : '0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359' } ) ;

Create subdomains

<span class="token comment">// ethereum-ens</span>
<span class="token keyword">await</span> ens <span class="token punctuation">.</span> <span class="token function">setSubnodeOwner</span> <span class="token punctuation">(</span> <span class="token string">'conglt.sunblockchain.eth'</span> <span class="token punctuation">,</span> <span class="token string">'0xE5d05238D35D22A2DC50ff98EFebaddc937FD8dB'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">from</span> <span class="token punctuation">:</span> <span class="token string">'0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// ethereum-ens

await ens . setSubnodeOwner ( 'conglt.sunblockchain.eth' , '0xE5d05238D35D22A2DC50ff98EFebaddc937FD8dB' , { from : '0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359' } ) ;

4. Demo

In this section, we will write a simple Dapp that functions:

Send ETH to another account via regular address
Send ETH to another account via ENS domain name

Initialize the directory and install the necessary packages

npx create-react-app demo-ens
<span class="token function">cd</span> demno-ens

npx create-react-app demo-ens

cd demno-ens

yarn add ethereum-ens web3 antd --save-dev

1 2	yarn add ethereum-ens web3 antd --save-dev

GetWeb3

<span class="token function">cd</span> src
<span class="token function">mkdir</span> ultils
<span class="token function">cd</span> ultils
<span class="token function">touch</span> getWeb3.js

cd src

mkdir ultils

cd ultils

touch getWeb3.js

<span class="token comment">// getWeb3.js</span>

<span class="token keyword">import</span> Web3 <span class="token keyword">from</span> <span class="token string">'web3'</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> getWeb3 <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// Wait for loading completion to avoid race conditions with web3 injection timing.</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span> window <span class="token punctuation">.</span> ethereum <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span> <span class="token punctuation">(</span> window <span class="token punctuation">.</span> ethereum <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token comment">// Request account access if needed</span>
      <span class="token keyword">await</span> window <span class="token punctuation">.</span> ethereum <span class="token punctuation">.</span> <span class="token function">enable</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token comment">// Acccounts now exposed</span>

      <span class="token keyword">return</span> web3 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// Legacy dapp browsers...</span>
  <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> window <span class="token punctuation">.</span> web3 <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// Use Mist/MetaMask's provider.</span>
    <span class="token keyword">const</span> web3 <span class="token operator">=</span> window <span class="token punctuation">.</span> web3 <span class="token punctuation">;</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Injected web3 detected.'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">return</span> web3 <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// Fallback to localhost; use dev console port by default...</span>
  <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> provider <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3 <span class="token punctuation">.</span> providers <span class="token punctuation">.</span> HttpProvider</span> <span class="token punctuation">(</span> <span class="token string">'http://127.0.0.1:9545'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span> <span class="token punctuation">(</span> provider <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'No web3 instance injected, using Local web3.'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">return</span> web3 <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> getWeb3 <span class="token punctuation">;</span>

// getWeb3.js

import Web3 from 'web3' ;

const getWeb3 = async ( ) => {

// Wait for loading completion to avoid race conditions with web3 injection timing.

if ( window . ethereum ) {

const web3 = new Web3 ( window . ethereum ) ;

try {

// Request account access if needed

await window . ethereum . enable ( ) ;

// Acccounts now exposed

return web3 ;

} catch ( error ) {

console . error ( error ) ;

}

// Legacy dapp browsers...

else if ( window . web3 ) {

// Use Mist/MetaMask's provider.

const web3 = window . web3 ;

console . log ( 'Injected web3 detected.' ) ;

return web3 ;

}

// Fallback to localhost; use dev console port by default...

else {

const provider = new Web3 . providers . HttpProvider ( 'http://127.0.0.1:9545' ) ;

const web3 = new Web3 ( provider ) ;

console . log ( 'No web3 instance injected, using Local web3.' ) ;

return web3 ;

}

} ;

export default getWeb3 ;

Writing Component

<span class="token comment">// App.js</span>

<span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'./App.css'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> getWeb3 <span class="token keyword">from</span> <span class="token string">'./ultils/getWeb3'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">,</span> Input <span class="token punctuation">,</span> Button <span class="token punctuation">,</span> Checkbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'antd/dist/antd.css'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token constant">ENS</span> <span class="token keyword">from</span> <span class="token string">'ethereum-ens'</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>
  labelCol <span class="token punctuation">:</span> <span class="token punctuation">{</span> span <span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  wrapperCol <span class="token punctuation">:</span> <span class="token punctuation">{</span> span <span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> tailLayout <span class="token operator">=</span> <span class="token punctuation">{</span>
  wrapperCol <span class="token punctuation">:</span> <span class="token punctuation">{</span> offset <span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">,</span> span <span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token function-variable function">connectWeb3</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      window <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'load'</span> <span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">getWeb3</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">;</span>
    <span class="token function">connectWeb3</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">const</span> onFinish <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> values <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> web3 <span class="token operator">=</span> window <span class="token punctuation">.</span> web3 <span class="token punctuation">;</span>

    <span class="token keyword">let</span> myAccount <span class="token operator">=</span> web3 <span class="token punctuation">.</span> currentProvider <span class="token punctuation">.</span> selectedAddress <span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span> values <span class="token punctuation">.</span> ens <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> ens <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ENS</span> <span class="token punctuation">(</span> web3 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">let</span> address <span class="token operator">=</span> <span class="token keyword">await</span> ens <span class="token punctuation">.</span> <span class="token function">resolver</span> <span class="token punctuation">(</span> values <span class="token punctuation">.</span> address <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addr</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> address <span class="token punctuation">)</span> <span class="token punctuation">;</span>

        <span class="token keyword">await</span> web3 <span class="token punctuation">.</span> eth <span class="token punctuation">.</span> <span class="token function">sendTransaction</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
          <span class="token keyword">from</span> <span class="token punctuation">:</span> myAccount <span class="token punctuation">,</span>
          to <span class="token punctuation">:</span> address <span class="token punctuation">,</span>
          value <span class="token punctuation">:</span> values <span class="token punctuation">.</span> value <span class="token operator">*</span> <span class="token number">1000000000000000000</span> <span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Success'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">await</span> web3 <span class="token punctuation">.</span> eth <span class="token punctuation">.</span> <span class="token function">sendTransaction</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
          <span class="token keyword">from</span> <span class="token punctuation">:</span> myAccount <span class="token punctuation">,</span>
          to <span class="token punctuation">:</span> values <span class="token punctuation">.</span> address <span class="token punctuation">,</span>
          value <span class="token punctuation">:</span> values <span class="token punctuation">.</span> value <span class="token operator">*</span> <span class="token number">1000000000000000000</span> <span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Success'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>

  <span class="token keyword">const</span> <span class="token function-variable function">onFinishFailed</span> <span class="token operator">=</span> <span class="token punctuation">(</span> errorInfo <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Failed:'</span> <span class="token punctuation">,</span> errorInfo <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span> div className <span class="token operator">=</span> <span class="token string">'App'</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> div className <span class="token operator">=</span> <span class="token string">'App-header'</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> Form
          <span class="token punctuation">{</span> <span class="token operator">...</span> layout <span class="token punctuation">}</span>
          name <span class="token operator">=</span> <span class="token string">'basic'</span>
          initialValues <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> remember <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
          onFinish <span class="token operator">=</span> <span class="token punctuation">{</span> onFinish <span class="token punctuation">}</span>
          onFinishFailed <span class="token operator">=</span> <span class="token punctuation">{</span> onFinishFailed <span class="token punctuation">}</span>
        <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> Form <span class="token punctuation">.</span> Item
            label <span class="token operator">=</span> <span class="token string">'Address'</span>
            name <span class="token operator">=</span> <span class="token string">'address'</span>
            rules <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> required <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> message <span class="token punctuation">:</span> <span class="token string">'Please input your address!'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span>
          <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> Input <span class="token operator">/</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Item <span class="token operator">&gt;</span>

          <span class="token operator">&lt;</span> Form <span class="token punctuation">.</span> Item
            label <span class="token operator">=</span> <span class="token string">'ETH'</span>
            name <span class="token operator">=</span> <span class="token string">'value'</span>
            rules <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> required <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> message <span class="token punctuation">:</span> <span class="token string">'Please input your value!'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span>
          <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> Input <span class="token operator">/</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Item <span class="token operator">&gt;</span>

          <span class="token operator">&lt;</span> Form <span class="token punctuation">.</span> Item <span class="token punctuation">{</span> <span class="token operator">...</span> tailLayout <span class="token punctuation">}</span> name <span class="token operator">=</span> <span class="token string">'ens'</span> valuePropName <span class="token operator">=</span> <span class="token string">'checked'</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> Checkbox <span class="token operator">&gt;</span> Use <span class="token constant">ENS</span> Domain <span class="token operator">&lt;</span> <span class="token operator">/</span> Checkbox <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Item <span class="token operator">&gt;</span>

          <span class="token operator">&lt;</span> Form <span class="token punctuation">.</span> Item <span class="token punctuation">{</span> <span class="token operator">...</span> tailLayout <span class="token punctuation">}</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> Button type <span class="token operator">=</span> <span class="token string">'primary'</span> htmlType <span class="token operator">=</span> <span class="token string">'submit'</span> <span class="token operator">&gt;</span>
              Send
            <span class="token operator">&lt;</span> <span class="token operator">/</span> Button <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Item <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> Form <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> App <span class="token punctuation">;</span>

100

101

102

103

104

105

106

107

108

109

110

111

// App.js

import React , { useEffect } from 'react' ;

import './App.css' ;

import getWeb3 from './ultils/getWeb3' ;

import { Form , Input , Button , Checkbox } from 'antd' ;

import 'antd/dist/antd.css' ;

import ENS from 'ethereum-ens' ;

const layout = {

labelCol : { span : 8 } ,

wrapperCol : { span : 16 } ,

} ;

const tailLayout = {

wrapperCol : { offset : 8 , span : 16 } ,

} ;

function App ( ) {

useEffect ( ( ) => {

const connectWeb3 = ( ) => {

window . addEventListener ( 'load' , async ( ) => {

getWeb3 ( ) ;

} ) ;

} ;

connectWeb3 ( ) ;

} ) ;

const onFinish = async ( values ) => {

let web3 = window . web3 ;

let myAccount = web3 . currentProvider . selectedAddress ;

if ( values . ens ) {

try {

let ens = new ENS ( web3 ) ;

let address = await ens . resolver ( values . address ) . addr ( ) ;

await web3 . eth . sendTransaction ( {

from : myAccount ,

to : address ,

value : values . value * 1000000000000000000 ,

} ) ;

console . log ( 'Success' ) ;

console . log ( error ) ;

}

} else {

try {

from : myAccount ,

to : values . address ,

} ) ;

}

} ;

const onFinishFailed = ( errorInfo ) => {

console . log ( 'Failed:' , errorInfo ) ;

} ;

return (

< div className = 'App' >

< div className = 'App-header' >

< Form

{ ... layout }

name = 'basic'

initialValues = { { remember : true } }

onFinish = { onFinish }

onFinishFailed = { onFinishFailed }

>

< Form . Item

label = 'Address'

name = 'address'

rules = { [ { required : true , message : 'Please input your address!' } ] }

>

< Input / >

< / Form . Item >

< Form . Item

label = 'ETH'

name = 'value'

rules = { [ { required : true , message : 'Please input your value!' } ] }

>

< Input / >

< / Form . Item >

< Form . Item { ... tailLayout } name = 'ens' valuePropName = 'checked' >

< Checkbox > Use ENS Domain < / Checkbox >

< / Form . Item >

< Button type = 'primary' htmlType = 'submit' >

Send

< / Button >

< / Form . Item >

< / Form >

< / div >

) ;

}

export default App ;

There are 2 input boxes for the user to enter the address and ether number to send
Check box Use ENS Domain help users optionally sent via ENS Domain or not?
If sent through the ENS Domain , the ethereum-ens library will resolve the domain and return the address on the network, then send the ether via web3 as usual.

We try sending 0.00001 ether to the domain conglt.eth

Submitted successfully

Note :

You can refer to the full source code on Github
The demo is deployed on Surge

References

https://docs.ens.domains/

Share the news now

Source : Viblo

Introducing Ethereum Name Service: Blockchain’s DNS

1. Introduction

2. Architecture

3. Integrating ENS into Dapp

ENS Libraries

Create an ENS domain

Working with ENS

Decode ENS domain into address

Address resolution to ENS domain

Domain name management

Change domain owner

Create subdomains

4. Demo

Initialize the directory and install the necessary packages

GetWeb3

Writing Component

References

Asked why he only has experience in service and real estate but dares to switch to car production, CEO VinFast has an unexpected answer.

Learning ChatGPT, Chinese company Baidu will launch its own AI chatbot in March

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers