forked from kay-is/web3-from-zero
-
Notifications
You must be signed in to change notification settings - Fork 0
/
01-read-address-data.html
239 lines (199 loc) · 8.31 KB
/
01-read-address-data.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<link rel="stylesheet" href="boilerplate/style.css" />
<script type="module" src="boilerplate/editor.js"></script>
<title>Web3 From Zero - Lesson 1</title>
<h1>1. Reading Address Data</h1>
<p>
Addresses are the bread and butter of blockchain networks. What IPs are for the Internet,
addresses are for the blockchain. Addresses point to smart contracts and externally owned
accounts (EOAs).
</p>
<p>
An address number of the length of 20 bytes build from a public key and is usually shown as 40 hex
digits. They look something like this <code>0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045</code>.
</p>
<blockquote>
<b>Note: </b>An address is used to send and receive data or money, in the form of tokens. Your
money is gone when you send tokens to the wrong address because of a fault. Always check you have
the correct address. <b>No one can help you to get your money back!</b>
</blockquote>
<p>
An EOA is an address controlled by a private/public key pair owner from outside the Ethereum
network; thus, the name <b>externally</b> owned account. Usually, you use a crypto-wallet to
manage keys and addresses.
</p>
<p>
A smart contract is software running on the nodes (computers) that make up the blockchain network.
The owner of a smart contract can be another smart contract or an EOA. That's why a smart contract
isn't externally owned.
</p>
<p>
These addresses, both smart contracts and EOAs, have data tied to them. The Ethereum blockchain
stores this data, and you can read and write it if you have the right permissions. In this lesson,
you will just read data. As you can see in Figure 1, you can't write on the blockchain without a
crypto-wallet.
</p>
<figure>
<img src="images/blockchain-connection-ethersjs.png" />
<figcaption>
Figure 1: Blockchain connection with Ethers.js
</figcaption>
</figure>
<h2>Reading the Transaction Count of an Address</h2>
<p>
To read data, you need an Ethers.js provider but also an address. Let's start with the transaction
(TX) count. It's a simple number stored on the blockchain for every address that was part of such
a TX. Ethereum adds 1 to the number if another TX with that address happens.
</p>
<p>
Ethers.js providers offer a <code>getTransactionCount</code> method that returns a promise that
resolves to a TX count, so you have to <code>await</code> it.
</p>
<p>
Try it out in the editor! Call the method and <code>print</code> its output. The method expects an
address as <code>string</code> argument, so here a few you can use:
</p>
<ul>
<li>
Developer DAO NFT Smart Contract:<br>
<code>0xdd00Cc906B93419814443Bb913949d503B3DF3c4</code>
</li>
<li>
GitCoin MultiSig Smart Contract:<br>
<code>0xde21f729137c5af1b01d73af1dc21effa2b8a0d6</code>
</li>
<li>
Vitalik Buterin EOA:<br>
<code>0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045</code>
</li>
</ul>
<code-editor>
const address = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
const provider = ethers.getDefaultProvider()
// Write your code here!
<p>
const transactionCount = await provider.getTransactionCount(address)
print(transactionCount)
</p>
</code-editor>
<h2>Reading the Balance at an Address</h2>
<p>
Reading the balance of an address is a bit harder than reading the TX count.
</p>
<p>
Smart contracts and EOAs, have an Ether balance, the native money or the <b>native token</b> of
the Ethereum network. Ether is what you have to pay to do TXs on the Ethereum network.
</p>
<p>
Using a provider's <code>getBalance</code> method, you can read the Ether balance of an address.
Again, this method returns a promise, so you have to <code>await</code> it.
</p>
<p>
Try it out in the editor! Call the method and <code>print</code> its output. The method expects an
address as <code>string</code> argument, so here a few you can use:
</p>
<ul>
<li>
Developer DAO NFT Smart Contract:<br>
<code>0xdd00Cc906B93419814443Bb913949d503B3DF3c4</code>
</li>
<li>
GitCoin MultiSig Smart Contract:<br>
<code>0xde21f729137c5af1b01d73af1dc21effa2b8a0d6</code>
</li>
<li>
Vitalik Buterin EOA:<br>
<code>0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045</code>
</li>
</ul>
<code-editor>
const provider = ethers.getDefaultProvider()
// Write your code here!
<p>
const balance = await provider.getBalance(
"0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
)
print(balance)
</p>
</code-editor>
<p>
We got the balance, but why does it look like that?
</p>
<h2>The BigNumber Type</h2>
<p>
Ethers.js wrapped the balance in its own <code>BigNumber</code> type, because the number can be
too big for JavaScript's <code>Number</code> type to store. You have to change the balance to a
<code>string</code> with the right number of decimal points to display it in a clear way.
</p>
<p>
One of the biggest things that make Ethereum different from JavaScript are number types. For a
long time, every number was of type <code>Number</code> in JavaScript, which is a double-precision
(64bit) floating-point . Every number <b>was</b> stored like that, because some time ago it got a
new number type called
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt" target="_blank">
<code>BigInt</code></a> for very large integer numbers.
</p>
<p>
Everything is an integer number in Solidity, the language used to make smart contracts for
Ethereum. Solidity is concerned with money, and floating-point has problems that can cost you
money, so they went for integer numbers only. Solidity always stores numbers as integers, and the
most used type is <code>uint256</code> (also known as <code>uint</code>) which can store 78
decimal digits. JavaScript's <code>Number</code> type can only store 16 digits.
</p>
<p>
Tokens can have more than 16 digits, so they're too big for <code>Number</code>. Addresses are
also stored as integers and are 20 byte big (40 hex digits). 20 byte are 160 bit, so they don't
fit into the 64 bit <code>Number</code> type either. That's why you use a <code>String</code> to
store addresses in JavaScript.
</p>
<p>
Since Ethers.js wants to keep working with older browsers that don't support <code>BigInt</code>,
they made their own integer type called <code>BigNumber</code>. It comes with
<a href="https://docs.ethers.io/v5/api/utils/bignumber/#BigNumber--methods" target="_blank">
methods for basic arithmetics</a>, but can also be converted to <code>String</code> or
<code>BigInt</code> when needed.
</p>
<h2>Converting to a Readable Format</h2>
<p>
The last exercise gave you a <code>BigNumber</code> object that isn't easy to understand. While
it's enough to work with the value inside of our code, you should change it to a
<code>String</code> before you show it to a user.
</p>
<p>
To do so, you can use
<a href="https://docs.ethers.io/v5/api/utils/display-logic/#display-logic--functions"> utility
functions</a> Ethers.js includes. The <code>formatUnits</code> function will automatically convert
a <code>BigNumber</code> to a <code>string</code> with the right decimal points. Which is handy to
display a balance to a user.
</p>
<p>
Try to convert the <code>BigNumber</code> to a <code>string</code> and <code>print</code> it!
</p>
<p>
The <code>formatUnits</code> function can be found in the <code>ethers.utils</code> object. This
time it returns the output right away, so no <code>await</code> needed.
</p>
<code-editor>
const address = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
const provider = ethers.getDefaultProvider()
const balance = await provider.getBalance(address)
// Write your code here!
<p>
const readableBalance = ethers.utils.formatUnits(balance) + " ETH"
print(readableBalance)
</p>
</code-editor>
<h2>Conclusion</h2>
<p>
In this lesson, you learned that addresses are the heart of the Ethereum blockchain and point to
externally owned accounts and smart contracts.
</p>
<p>
Addresses are 160 bits or 20 bytes integer numbers usually shown as 40 hex digits, and JavaScript
can't store them in its <code>Number</code> type because it's only 8 bytes big. The same is true
for token balances, which can have more than the 16 digits a <code>Number</code> could store.
</p>
<p>
In <a href="02-connect-to-contracts.html">the next lesson</a>, you will learn how to use smart
contracts from the frontend.
</p>