Skip to content

Commit

Permalink
Grammar cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
kay-is authored Jan 11, 2022
1 parent 2ff18f9 commit 463bbe3
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 100 deletions.
74 changes: 36 additions & 38 deletions 00-connect-to-blockchain.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<h1>0. Connecting to the Blockchain</h1>

<p>
This tutorial will start from zero, which means that the first lessons don't require you to
install anything. No wallet, no dev environment; you just need your browser and basic JavaScript
skills.
This tutorial will start from zero, which means that the first lessons don't require you to install
anything. You don't need a wallet or dev environment; you just need your browser and basic
JavaScript skills.
</p>

<blockquote>
Expand All @@ -23,23 +23,22 @@ <h1>0. Connecting to the Blockchain</h1>
<h2>Connection Modes</h2>

<p>
Coming from Web2, you probably know how to load your data from storage into a frontend. You
connect to some kind of backend via an HTTP API, and this API, in turn, loads data from storage
like a database.
Coming from Web2, you probably know how to load your data from storage into a frontend. You connect
to a backend via an HTTP API, and this API, in turn, loads data from storage like a database.
</p>

<p>
The same is true for Web3. If you don't have a crypto wallet, you need some kind of HTTP API to
connect to a blockchain network. This API is called a gateway. It accepts requests from a browser
via HTTP and routes them to a blockchain network. This connection mode can only be used to read data
from a blockchain.
The same is true for Web3. If you don't have a crypto wallet, you need an HTTP API to connect to a
blockchain network. This API is called a gateway. It accepts requests from a browser via HTTP and
routes them to a blockchain network. You can only read data from the blockchain with this connection
mode.
</p>

<p>
If you have a crypto wallet, you can make it accessible with a browser extension for a frontend.
In the case of Ethereum, such an extension will inject a global <code>ethereum</code> object into
your frontend that can be used to interact with the wallet. This connection mode can be used to
read and write data, like sending transactions.
If you have a crypto wallet, you can make it accessible with a browser extension for a frontend. In
the case of Ethereum, such an extension will inject a global <code>ethereum</code> object into your
frontend that you can use to interact with your wallet. You can use this connection mode to read and
write blockchain data, like sending transactions.
</p>

<p>
Expand All @@ -59,20 +58,20 @@ <h2>Connection Modes</h2>
</figure>

<p>
In this tutorial, we will start with the read-only connection mode. You don't have to
install anything for the first few lessons!
In this tutorial, you will start with the read-only connection mode. You don't have to install
anything for the first few lessons!
</p>

<h2>Using Ethers.js</h2>

<p>
<a href="https://docs.ethers.io/v5/">Ethers.js</a> is a library that helps with connecting to the
Ethereum network. When using Ethers.js, we don't have to care if we connect directly via an HTTP
gateway or use a wallet extension. After a connection is established, we can call the same
Ethereum network. When using Ethers.js, you don't have to care if you connect directly via an HTTP
gateway or use a wallet extension. After you establish a connection, you can call the same
functions.
</p>

<p>Figure 2 shows how Ethers.js is layered between your frontend and the Ethereum network.</p>
<p>Figure 2 shows how Ethers.js fits between your frontend and the Ethereum network.</p>

<figure>
<img src="images/blockchain-connection-ethersjs.png" />
Expand All @@ -82,7 +81,7 @@ <h2>Using Ethers.js</h2>
</figure>

<p>
Ethers.js comes in the form of an ES-module on the NPM package registry. This means, we can
Ethers.js comes in the form of an ES-module on the NPM package registry. This means, you can
<code>import</code> it directly in the browser from <a href="https://unpkg.com/">the Unpkg CDN</a>.
</p>

Expand All @@ -100,17 +99,18 @@ <h2>Connecting to the Ethereum Network</h2>

<p>
You can create such an provider by calling the <code>getDefaultProvider</code> method of the
<code>ethers</code> object we imported before.
<code>ethers</code> object you imported before.
</p>

<blockquote>
<b>Note:</b> This tutorial features an interactive editor. Here you can write JavaScript code and execute it with
the press of a button. The Ethers.js library is imported for you and you can use <code>await</code>
for asynchronous requests. It also has a <code>print</code> function you can use for debugging.
<b>Note:</b> This tutorial features an interactive editor. Here you can write JavaScript code and
execute it with the press of a button. The Ethers.js library is imported for you and you can us
<code>await</code> for asynchronous requests. It also has a <code>print</code> function you can use
for debugging.
</blockquote>

<p>
The first example is already written to show you how things work. Just press the <b>Execute</b>
The first example is already complete to show you how things work. Just press the <b>Execute</b>
button and check the result.
</p>

Expand Down Expand Up @@ -140,30 +140,28 @@ <h2>Connecting to the Ethereum Network</h2>
</code-editor>

<p>
If everything went correctly, we see the block data in the results. This is all very blockchain-y
information that doesn't tell us anything interesting yet. At least, we see that the connection
worked and something came back!
If everything went correctly, you see the block data in the results. This data is all
blockchain-specific information that doesn't tell us anything interesting yet. At least, you see
that the connection worked and something came back!
</p>

<p>
The Ethers.js library comes pre-configured with a public HTTP gateway that can be used for free to
read data from the Ethereum blockchain. This gateway has a request frequency limit, so it can
happen that you don't get a response if you send too many requests. But for this
tutorial, it should be enough.
The Ethers.js library comes pre-configured with a public HTTP gateway you can use for free to read
data from the Ethereum blockchain. This gateway has a request frequency limit, so it can happen that
you don't get a response if you send too many requests. But for this tutorial, it should be enough.
</p>

<h2>Conclusion</h2>
<p>
We learned the differences between a Web2 and a Web3 backend in this lesson. How both rely on HTTP
APIs. These APIs are called gateways in Web3 because they are the gateway into the blockchain
network.
In this lesson, you learned the differences between a Web2 and a Web3 backend. How both rely on HTTP
APIs. We call these APIs gateways in Web3 because they are the gateway into the blockchain network.
</p>

<p>
We also learned how to connect to such a blockchain network with the help of the Ethers.js library.
We didn't have to install anything, just call a few methods and see what happens.
You also learned how to connect to such a blockchain network with the help of the Ethers.js library.
You didn't have to install anything, just call a few methods and see what happens.
</p>

<p>
In <a href="01-read-address-data.html">the next lesson</a> we will learn how to read address data.
In <a href="01-read-address-data.html">the next lesson</a> you will learn how to read address data.
</p>
89 changes: 44 additions & 45 deletions 01-read-address-data.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@
<h1>1. Reading Address Data</h1>

<p>
Addresses form the core of blockchains. What IPs are for the Internet are addresses for the
Addresses form the core of blockchains. What IPs are for the Internet address are for the
blockchain. Smart contracts and externally owned accounts, short EOAs, are the targets of those
addresses.
</p>

<p>
An address is 20 byte number derived from a public key and is usually displayed as 40 hex
digits. They look something like this <code>0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045</code>.
More on that later.
An address is 20 byte number derived from a public key and is usually displayed as 40 hex digits.
They look something like this <code>0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045</code>. More on
that later.
</p>

<blockquote>
<b>Note: </b>An address is used to send and receive data or funds. This means, when you send tokens to an wrong
address, because of a typo, the money is gone. So always make save you have the correct address.
<b>Note: </b>An address is used to send and receive data or funds. The money is gone when you send
tokens to the wrong address because of a typo. So always save you have the correct address.
<b>Nobody can recover you from such an error!</b>
</blockquote>

Expand All @@ -30,16 +30,16 @@ <h1>1. Reading Address Data</h1>
</p>

<p>
An EOA is an address controlled by a private/public key pair owner, from outside of the Ethereum
network, thus the name <b>externally</b> owned account. Usually Wallet software is used to manage
EOA keys and addresses.
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 wallet software to
manage EOA keys and addresses.
</p>

<p>
These addresses, both smart contracts and EOAs, have data associated with them. This data is
stored on Ethereum's blockchain and we can read and write it, if we have the right permissions.
In this lesson we will just read data. As we can see in Figure 1, we can't write on the blockchain
without a wallet.
These addresses, both smart contracts and EOAs, have data associated with them. The Ethereum
blockchain stores this data, and you can read and write it if you have the correct 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 wallet.
</p>

<figure>
Expand All @@ -53,14 +53,14 @@ <h1>1. Reading Address Data</h1>
<h2>Reading the Transaction Count of an Address</h2>

<p>
To read data, we need a provider, but also a target address. Let's start with the transaction (TX)
count. It's a simple numeric value stored on the chain for every address that was part in such a
TX. It gets incremented by 1 if another TX with that address happens.
To read data, you need an Ethers.js provider but also a target address. Let's start with the
transaction (TX) count. It's a simple numeric value stored on the chain for every address that was
part of such a TX. It gets incremented by 1 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 we have to <code>await</code> it.
resolves to a TX count, so you have to <code>await</code> it.
</p>

<p>
Expand Down Expand Up @@ -100,13 +100,13 @@ <h2>Reading the Balance at an Address</h2>
</p>

<p>
Both, smart contracts and EOAs, have an Ether balance, the native currency, or more precisely
the <b>native token</b>, of the Ethereum network. Ether's primary use-case is paying for TX fees
on the Ethereum network.
Both, smart contracts and EOAs, have an Ether balance, the native currency, or more precisely, the
<b>native token</b> of the Ethereum network. Ether's primary use-case is paying for TX fees on the
Ethereum network.
</p>

<p>
Using a provider's <code>getBalance</code> method, we can read the Ether balance of an address.
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>

Expand Down Expand Up @@ -149,8 +149,8 @@ <h2>The BigNumber Type</h2>

<p>
Ethers.js packaged the balance with its own <code>BigNumber</code> type, because the value is too
big for JavaScript's <code>Number</code> type to store. We have to convert the balance to a string
with the right amount of decimal points to display it in a human readable way.
big for JavaScript's <code>Number</code> type to store. You have to convert the balance to a string
with the right amount of decimal points to display it in a human-readable way.
</p>

<p>
Expand All @@ -163,19 +163,19 @@ <h2>The BigNumber Type</h2>
</p>

<p>
In Solidity, the programming language to develop smart contracts for Ethereum, everything is an
integer. Solidity is mainly concerned with payment, and floating point values have some quirks
Everything is an integer in Solidity, the programming language to develop smart contracts for
Ethereum. Solidity is mainly concerned with payment, and floating-point values have some quirks
that can cost you money, so they opted for going integer only. Solidity always stores numbers as
integers, and the most common type is <code>uint256</code> (alisas <code>uint</code>) which can
integers, and the most common type is <code>uint256</code> (alias <code>uint</code>) which can
store 78 decimal digits. In comparison, 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 we use a <code>String</code> to store
addresses in JavaScript.
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>
Expand All @@ -189,17 +189,17 @@ <h2>The BigNumber Type</h2>
<h2>Converting to a Readable Format</h2>

<p>
The result of the last exercise yielded a <code>BigNumber</code> object that isn't easily human
readable. While it's enough to work with the value inside of our code, we should convert it to a
<code>String</code> before we display it to a user.
The last exercise yielded a <code>BigNumber</code> object that isn't easily human-readable. While
it's enough to work with the value inside of our code, you should convert it to a
<code>String</code> before you show it to a user.
</p>

<p>
To do so, we 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.
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>
Expand All @@ -225,18 +225,17 @@ <h2>Converting to a Readable Format</h2>
<h2>Conclusion</h2>

<p>
In this lesson, we learned that addresses are the fundamet of the Ethereum blockchain and that
externally owned accounts and smart contracts are the targed of those addresses.
In this lesson, you learned that addresses are the fundament of the Ethereum blockchain and that
externally owned accounts and smart contracts are the targets of those addresses.
</p>

<p>
Addresses are 160 bits, or 20 bytes, integers which are usually displayed as 40 hex
digits and JavaScript can't store themn in its native <code>Number</code> type, because it's only
8 bytes big. Same goes for token balances, which can have more than the 16 digits a
<code>Number</code> could store.
Addresses are 160 bits or 20 bytes, integers usually displayed as 40 hex digits, and JavaScript
can't store them in its native <code>Number</code> type because it's only 8 bytes big. The same
goes for token balances, which can have more than 16 digits a <code>Number</code> could store.
</p>

<p>
In <a href="02-connect-to-contracts.html">the next lesson</a>, we will learn how to interact with
In <a href="02-connect-to-contracts.html">the next lesson</a>, you will learn how to interact with
smart contracts.
</p>
Loading

0 comments on commit 463bbe3

Please sign in to comment.