Etherum nói riêng cũng như các nền tảng blockchain, tiền mã hóa khác nói riêng vẫn chưa thực sự phổ biến với người dùng phổ thông. Lý do một phần là do công nghệ blockchain hay crypto currency đang còn rất mới, một phần nữa là nó chưa thực sự thân thiện với người dùng (địa chỉ ví dài, khó nhớ, backup private key,…). Ethereum Name Service (ENS) ra đời nhằm giải quyết phần nào vấn đề kể trên, mapping những địa chỉ ví dài loằng nhoằng thành một cái tên ngắn gọn dễ nhớ hơn.
1. Giới thiệu
Ethereum Name Service hiểu đơn giản là một dịch vụ tên miền phân tán trên nền tảng Ethereum. Chức năng của ENS tương tự như DNS (mapping các địa chỉ IP thành các tên miền dễ nhớ hơn). Giống như DNS, ENS triển khai trên một hệ thống tên miền phân cấp gồm các tên miền (domains) và tên miền con (subdomains), chủ sở hữu của 1 tên miền có toàn quyền kiểm soát tên miền con (subdomains). Ví dụ như tên miền .eth
, tên miền con sẽ là foo.eth
, bar.eth
….
Logic của ENS được thể hiện trong smart contract ENS và được deploy lên mạng Ethereum (hoặc các mạng thử nghiệm). Nếu ở ứng dụng đầu cuối dùng thư viện ethereum-ens , nó sẽ tự động detect mạng và sử dụng ENS trên mạng đó.
2. Kiến trúc
ENS có 2 phần chính:
ENS registry là một smart contract chứa danh sách các domains, subdomains. Mỗi domains hay subdomains đều lưu trữ 3 thông tin sau:
- Địa chỉ owner của domain hay subdomains
- Địa chỉ resolver của domain hay subdomains
- Thời hạn của domains
Owner của một domains có quyền:
- Chỉ định resolvers and thời hạn của domains
- Chuyển quyền sở hữu domains cho địa chỉ khác
- Thay đổi owner của subdomains
Các bạn có thể xem source code của ENS Registry contract tại đây
Resolvers đơn giản là nơi thực hiện việc chuyển đổi domains
=> address
và trả lại address
ứng với domains cho người dùng.
Quy trình gồm 2 bước như hình trên:
- B1: Ứng dụng hỏi địa chỉ của resolvers của domains
foo.eth
bằng các gọi hàmresolvers
. Registry sẽ trả về địa chỉ của resolvers tương ứng - B2: Ứng dụng gọi đến resolvers để lấy địa chỉ ứng với domains
foo.eth
3. Tích hợp ENS vào Dapp
ENS Libraries
Hỗ trợ ENS hỗ trợ nhiều thư viện với các ngôn ngữ khác nhau. Phổ biến nhất vẫn là Javascript.
- ethereum-ens, maintained bởi ENS developers
- ethjs-ens
- ethers.js
- web3.js
Chỉ có thư viện ethereum-ens được hỗ trợ chính thức bởi đội ngũ developer của ENS có đầy đủ các tính năng. Các thư viện khác ít nhiều bị hạn chế ở một số điểm.
web3.js không hộ trợ việc tạo domain, chuyển đổi chủ domain (transferring ownership) hay là thay đổi resolvers (updating resolvers).
ethjs-ens chỉ hỗ trợ việc forward và phân giải tên ENS domain.
Tương tự như ethjs-ens là ethers.js.
Tạo một ENS domain
Tạo domain trên mainnet Ethereum sẽ mất ETH nên chúng ta tạo mới domain trên testnet. Ở đây tôi chọn mạng Rinkeby. Quá trình tạo 1 domain gồm 3 bước.
Sau khi tạo thành công, hiển thị lên các thông tin cơ bản của domain.
Working with ENS
Trước khi bạn có thể bắt đầu tương tác với ENS, chúng ta sẽ cần có được một tham chiếu đến ENS registry.
1 2 3 4 5 6 | <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> |
1 2 3 4 5 6 7 | <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> |
Kết quả trả về khi dùng web3-js như sau:
1 2 3 4 5 6 7 8 | 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> |
Phân giải ENS domain thành địa chỉ
1 2 3 | <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> |
1 2 3 | <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> |
Ví dụ với web3-js:
1 2 3 4 5 | 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">></span> <span class="token number">0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359</span> |
Phân giải địa chỉ thành ENS domain
1 2 3 4 5 6 7 8 | <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> |
Quản lý domain name
Thay đổi owner của domain
1 2 3 | <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> |
Tạo subdomains
1 2 3 | <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> |
4. Demo
Ở phần này, chúng ta sẽ viết một Dapp đơn giản có chức năng:
- Gửi ETH cho tài khoản khác qua address thông thường
- Gửi ETH cho tài khoản khác thông qua ENS domain name
Khởi tạo thư mục và cài đặt các package cần thiết
1 2 3 | npx create-react-app demo-ens <span class="token function">cd</span> demno-ens |
1 2 | yarn add ethereum-ens web3 antd --save-dev |
GetWeb3
1 2 3 4 5 | <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 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <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">=></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> |
Viết Component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <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">=></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">=></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">=></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">=></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">=></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"><</span>div className<span class="token operator">=</span><span class="token string">'App'</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">'App-header'</span><span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>Input <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>Input <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>Checkbox<span class="token operator">></span>Use <span class="token constant">ENS</span> Domain<span class="token operator"><</span><span class="token operator">/</span>Checkbox<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</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">></span> Send <span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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> |
- Có 2 ô input cho người dùng nhập
address
và sốether
cần gửi - Check box
Use ENS Domain
giúp người dùng tùy chọn có gửi qua ENS Domain hay không ? - Nếu gửi qua ENS Domain thì thư viện
ethereum-ens
sẽ phân giải domain và trả về địa chỉ trên mạng, sau đó gửi ether qua web3 như bình thường.
Chúng ta thử gửi 0.00001 ether đến tên miền conglt.eth
Gửi thành công
Lưu ý: