What is Web3? A hands-on tutorial to experience the internet of the future

Enrico Bottazzi
11 min readFeb 4, 2022

--

I always struggle to explain web3 to my friends and colleagues. When explaining web3, I intentionally avoid talking about meaningless NFTs or tokens going to the moon overnight because I think that the technology behind it is much more powerful than the financial speculations. The problem is that when I try to explain concepts such as decentralization, it is difficult for my interlocutor to figure out concrete use-cases. Decentralization is not something that matters to final users, what they look for is real use-cases.

This tutorial is gonna walk you through how web3 allows for a unique digital identity. The tutorial is designed to provide first-hand experience as opposed to abstract descriptions and philosophical jargon.

First of all: no real money is involved in this tutorial. Everything will take place within the Ropsten test network, which is the equivalent of Ethereum but made for developers to experiment with their protocols and test the security before exposing it to real-world risks of the Ethereum Mainnet. The ETH you’ll use is the testing equivalent of real ETH and have no value.

Second: the tutorial is by no means technical and doesn’t require any previous knowledge of the theme.

This tutorial is gonna walk you through how to set up your first wallet, get an ENS name, and interact with different platforms in 8 simple steps. The only requirement to start this tutorial is to have a Chrome or Brave browser. If so, you are ready to go. The best way to get to the end of the tutorial is by following along each step with the related Youtube video.

So, without further ado, let’s jump into web3.

1. Create a Metamask wallet
2. Set your wallet to the Ropsten network
3. Go and get yourself a name!
4. Transfer tokens to other accounts
5. Bring your identity around
6. What just happened (Conceptual)?
7. What just happened (Technical)?
8. Is that the only and main blockchain use-case?
9. What’s next?

1. Create a Metamask wallet

The first thing you need to have is a Metamask wallet installed in your browser. MetaMask is a browser extension designed to make accessing Ethereum’s ecosystem easier.

  • Open this link with your Chrome or Brave browser to start
  • Click Add to chrome

Once confirmed, a new tab will open automatically. Follow the procedure:

  • Create a new wallet
  • Set a password
  • Get your recovery phrase and confirm it.

The secret recovery phrase is really important, so it should be kept in a secure place and not be shared with anyone. That’s the reason why I kept that part blurred in the video tutorial. Even if we are gonna use test ETH you may want to use this same wallet as your Mainnet wallet in the future. So keep your secret phrase safe and never expose it!

Your screen if you have followed the guide correctly

If your screen looks something like this, it means that you have successfully set up an Ethereum wallet. Let’s take a step back to understand what Metamask is. Metamask is a wallet. We usually associate a wallet as a means to carry money (or cryptocurrencies in this case), but that’s too reductive. In web3, a wallet represents your digital identity and it will be the tool you are gonna use for any interaction with Ethereum.

Right now your identity is represented by the 0x… number (0x6D84148637eb488dDE06b18D41a49648D3C4E934 in my case). That’s your address and that’s how other actors are gonna recognize that a certain action is done by you and not by someone else.

I know it makes little sense right now; it may seem, again, just philosophical jargon. That’s why this experience is designed with a learn-by-doing approach. Hopefully, by the end of this article, you’ll get a better sense of what web3 identity means and why a wallet is so important.

2. Set your wallet to the Ropsten network

Here’s the important piece, right now your wallet is set to Mainnet as you can see on the top right of your wallet, but without real ETH you are virtually not able to do anything. So let’s now switch to the Ropsten test network.

  • Click on the logo next to Ethereum Mainnet
  • Go to settings -> advanced
  • Enable show test network
  • From the default, view click on Ethereum Mainnet and choose Ropsten test network from the drop-down menu

Now you are now connected to the Ropsten test network.

But your wallet is still empty! you need to have some test ETH before starting.

  • Open Metamask and copy and paste your address (0x…) by clicking on it
  • Paste your address inside the following website: https://faucet.egorfine.com to get Ropsten ETH.

In a few seconds, you’ll be able to click on the Metamask Fox and see 0.3 ETH in your account!

3. Go and get yourself a name!

The first piece of one’s identity is the name. So let’s go and grab a name for your web3 identity. We are using ENS (Ethereum Name Service). Think of ENS as a nickname generator for the Ethereum network

  • Go to https://ens.domains/
  • Click connect on the top right. A Metamask window comes up asking you to connect with Metamask. Hit Confirm.
  • Go to the search bar and choose the name that you like to be identified with.

It may be your first name, your first name+surname, or any nickname you like. This is gonna be basically your display name for your entire web3 experience. You may find names that are unavailable such as vitalik.eth which is the Ethereum founder, or enricob.eth, which is mine! That’s because these names are uniques. After you find an available name that you like:

  • Click on it
  • Set the registration period (you can set it as long as you want, there’s no need to save money for now)
  • Click request to register and then you will see a Metamask pop-up window.

Let’s take a step back here. This is your first Ethereum transaction and it asks to pay for gas. You can see it as the fuel necessary for your car to travel. In any blockchain, the gas is necessary to compensate the computers that are sacrificing computational power to make sure that every transaction is legit and you are not trying to fool the system. If you don’t pay for gas your transaction cannot be delivered successfully.

  • Click confirm to execute the transaction
  • Wait for the line to go beyond step2, click register

Right now, you will need to pay for the rent you chose earlier + a further gas fee to complete your transaction.

  • Click confirm to execute the transaction.
  • The last thing to do is to click set as primary ENS Name, choose the name from the drop-down menu and click Save.
  • confirm the transaction to execute the action and you are done.

You now have successfully associated an ENS name with your Ethereum account.

4. Transfer tokens to other accounts

One of the simplest actions you can perform in Web3 is transferring assets from account to account.

  • Open your Metamask wallet by clicking on the fox from your browser
  • Click send
  • Input the address you want to send test ETH to.

Right now you may not have anyone to send tokens to. For testing purposes, you can send ETH to vitalik.eth, which is the address of Vitalik Buterin, co-founder of Ethereum.

  • Choose how much you want to transfer (it has to be less than the total amount of ETH inside your wallet)

Here a new transaction request will come up. I decided to transfer 0.15 ETH to vitalik.eth. Looking at the transaction more in detail you can see the amount I’m sending to Vitalik (red box), the gas fee I have to pay to execute the transaction (blue box), and the total amount of ETH that I need to pay (0.15 ETH + gas fee, green box).

  • Press confirm to execute the transaction.

As usual, you will need to pay some gas + the amount you are transferring in order to execute the action.

5. Bring your identity around

Now let’s visit Uniswap. Uniswap is an exchange built on the Ethereum blockchain: it allows users anywhere in the world to trade crypto without an intermediary.

  • Click this link https://app.uniswap.org/#/swap?chain=ropsten (You may need to modify the address by hand because the HTTPS address sets to chain=mainnet by default).
  • When you land on the Uniswap landing page, click on the top right to connect your wallet.
  • Confirm to complete the procedure.

Right now you are able to see your ENS name on the top right and you also see that Uniswap automatically recognized the amount of test ETH held in your wallet.

Once connected to Uniswap, you can now swap your ETH with other tokens, but this is beyond the scope of this tutorial right now.

The important thing to notice here is that you’ve been able to seamlessly move your identity (and the assets associated with your identity) from platform to platform. This works for all the applications built on Ethereum

6. What just happened — Conceptual

Let’s take some time to understand what we just accomplished. We created a wallet and interacted with 2 different platforms (ENS and Uniswap).

The first thing you may have noticed is that you never had to sign up for a platform and do a standard login with a username and password.

So is it such a big deal? If you think about your identity works in the physical world, you always bring it with you, it’s natural! Your name, your clothes, your car, are all part of your identity and you don’t need to get new ones every time you move from place to place. This last piece seems absurd, but it is what happens right now on the internet: by using a different login for every new platform you use you are creating a new piece of identity for each platform.

And what are the implications of that?

  1. Users cannot easily leave a platform they don’t like (because all their data, relationships, and digital assets are not portable across platforms);
  2. This also works in reverse: Users can lose their data, relationship, and digital assets overnight when a platform like Twitter, Facebook, or YouTube decides to shut down their account;

In web3 user retains complete control over their assets, information, and data. These are stored in a wallet and can be brought into any compatible platform with one simple click: Connect with Metamask.

This is a visual representation of this paradigm shift:

Twitter https://twitter.com/jay_drainjr/status/1479162409080090626?s=20&t=tDR0dsfGUM_BJv6qLvUm6Q

Or, even simpler:

7. What just happened — Technical

Let’s dive into the technology that makes this possible.

Your web3/Ethereum identity is represented by a pair of keys:

  • a private key, which is randomly generated and stored in your wallet, it may look like this
f8f8a2f43c8376ccb0871305060d7b27b0554d2cc72bccf41b2705608452f315
  • and a public key, which is deterministically derived from the private key.
0x001d3f1ef827552ae1114027bd3ecf1f086ba0f9

Think of the public key as similar to a bank account number, and the private key as similar to the secret PIN; it is the latter that provides control over the account, and the former that identifies it to others. The private key must remain secret at all times because revealing it to third parties is equivalent to giving them control over the assets associated with your identity.

The role of the wallet (Metamask in this case) is to help users manage their identity (=public-private key pair) without having to worry about all the complex cryptography behind it.

So remember when you pressed confirm to execute a transaction? At that moment, you are basically inputting your private key + a bunch of data that represents the action you want to perform, in a cryptographic function. The result of this cryptographic operation is commonly known as digital signature.

Source: Openzeppelin

The delay that you experienced when waiting for a transaction to settle is because in the meanwhile there are a lot of computers that are checking if your transaction is valid.

The verification performed by these computers takes the digital signature and the transaction data as input of a cryptographic function. The output of this function is the public key that performed that transaction.

Source: Openzeppelin

In this way, the nodes are able to check if the transaction is valid or not. As all the nodes are aware of the ETH balance associated with a public key, they can verify that the transaction doesn’t involve the transfer of more ETH than the amount available in one’s account.

Note that the verification doesn’t involve the private key at all; that remains private and always in control of the user. However, the verification process determines beyond doubt that the transaction could have only come from someone with a private key that corresponds to a specific public key. This is the “magic” of public-key cryptography.

It’s important to underline that all the operations in Ethereum are executed thanks to these cryptographic technologies, but nowhere there’s sign of encryption which means secret writing. No part of the Ethereum protocol involves encryption; that is to say, all communications with the Ethereum platform and between nodes (including transaction data) are unencrypted and can (necessarily) be read by anyone.

All the transactions and actions we just performed are written on a blockchain and you can check them out on clients such as Etherscan https://ropsten.etherscan.io/.

If you input your address ‘0x…’ or your ENS name ‘name.eth’ in the search bar you will see all the transactions that you performed until now (red box) and all the assets that you own (blue box).

The login for the entire internet is possible because everyone can build an application on Ethereum and benefit from these cryptographic standards, read the assets associated with your identity and write operations on the blockchain that involve these assets.

8. Is this the only and main blockchain use case?

Absolutely not! As Dr. Gavin Wood, co-founder of Ethereum and creator of Polkadot, mentioned here, a blockchain is an ecosystem of a lot of things helping each other to generate the end use-cases.

The magic of blockchain is not in delivering specific use-case really well.

The magic of blockchain relies on the emergent effect of combining multiple applications in an environment where they can form symbiotic relationships building on top of each other and provide a composite solution that no one ever really designed because it was not possible with pre-existing technologies.

9. What’s next?

If you are interested to know more about this fascinating space, join the conversation on Discord here. Start getting to know more about web3 and share your experiences with a community of other rookies!

--

--

Enrico Bottazzi

Powered by @rogerfederer , @macmiller , @davidhockneyart , and @coenbros