Do you want to get into Web 3.0 as a web developer and take the next step on your awesome journey?

Perfect! 🔥

Time for a small introduction to Web 3.0 development with JavaScript and ethers.js!

A thread. ↓
0. What Is ethers.js?

ethers.js is a JavaScript library that allows you to interact with the Ethereum blockchain, as well as its ecosystem.

Simply stated: You can access your wallet, send transactions, and interact with smart contracts through it.
1. Installation

Let's assume that you already have a JavaScript (frontend) project of any kind set up. If not, do that first.

Before you now install ethers, you should get one last prerequisite: MetaMask.
MetaMask is a browser extension that allows you to interface with Ethereum and other blockchains right from your browser.

You can get it at the link below. Install it before you go on. It makes the next steps possible and easier than the alternatives.
The next thing to do is to install ethers into your project by using either npm or yarn.

I use npm in the example below. npm install --save ethers
2. Basic Usage Of ethers.js

You can use ethers.js like you would use any other package you can get through npm.

Import ethers and you have an object at hand that provides the full API you need. import { ethers } from 'ethers';
With the 'ethers' object, you can now get yourself a provider.

The latter is nothing else than an API object that allows you to interact with the blockchain itself.

The provider, in this case, is backed by MetaMask. // Instead of only "provider", you could say "
Ethereum stores its data publicly.

This means that you can access every wallet and see how much currency it has stored.

The only thing you need for this is the address of the wallet. // This will actually return the "wei" the wallet
Before you now jump right into it and try to withdraw every Ether from all wallets you can find:

This does not work.

Without the wallet's private keys, you are not able to transact anything. Sorry!
ethers does, however, allow you to send transactions from your own wallet through MetaMask.

You need a so-called 'signer' that holds your private keys and can sign the transactions for you.

When you already have a provider at hand, you can use it to create your signer. // A signer holds your private keys and enables you to kick-
With that signer, you can now send transactions to whatever wallet you want to.

What you always have to take care of, though, is to send the amount in Wei, and not in ETH itself.

Ethereum does only know Wei, so ethers provides a conversion function for your convenience. const transaction = signer.sendTransaction({     to: 'anothe
And this is how you can interact with Ethereum through ethers on a basic level.

ethers has more APIs than only those to interact with a wallet.

It does also let you interact with tokens which are what altcoins on Ethereum are based on, e.g.
However, how all those APIs can be used will be the topic of other threads or articles.

For now, you have the basic building blocks to go ahead and play with Ethereum-like blockchains.
3. Thread end

That's it for this thread.

I hope you learned something valuable.

If you enjoyed reading this Thread, consider dropping a like, retweet the first tweet, and follow me (@oliverjumpertz) for more content like this.

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Oliver Jumpertz

Oliver Jumpertz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @oliverjumpertz

16 Sep
Do you know what many dApp developers struggle with?

Which data to put on-chain. More data on the chain can drive the cost up. Too much data might render your app unusable. Storing fewer data might not be an option.

Here are some ideas for you to fix this.

A thread. ↓
1. Use A Dedicated Database

This approach will make your dApp into an app.

If you bring in central data storage, you can circumvent the limits of some blockchains, but it doesn't keep the promise of being decentralized.
You can store anything that you can't store on-chain in your database and associate it with a user.

Whenever you need that type of data, you fetch it from your database.
Read 13 tweets
16 Sep
I regularly post visual content about JavaScript. And at the moment, this content is a lot about algorithms.

Now it's time for a collection of many of those visuals for any developer interesting in algorithms with JavaScript!

A thread. ↓
1. Check For Palindrome .
2. Reverse A String .
Read 23 tweets
13 Sep
Do you know what an NFT is?

Some are currently sold for millions, and unknown artists suddenly make a name for themselves and earn hundreds of thousands of dollars.

Let's take a closer look.

A thread. ↓
1. What An NFT Is

Non-fungible tokens (NFTs) are digital assets.

Just imagine a trading card where each card has unique information engraved into it.

No two NFTs are the same and they are thus not interchangeable.
Other than crypto, where one BTC is one, and two BTC are two BTC, two NFTs are one NFT and one NFT.

Just because you have two NFTs of the same type, you cannot sum them up together.
Read 23 tweets
7 Sep
From time to time you read the term Web 3.0. For many of us, however, this term is still mysterious.

Time to shed some light on it and explain what it actually is all about!

A thread. ↓
1. The Web Today

The web as we know it today is actually already Web 2.0.

It is an extension of the original Web (1.0).

In the beginning, the web was meant for websites to provide information and users to consume it.
Web 2.0 changed this and brought the user into the game.

Users started to create the content themselves, while websites became the platform to distribute this new content instead of only consuming information.
Read 26 tweets
26 Aug
I recently posted a lot of visual JavaScript tips, explanations, and algorithm implementations. 💛

Here is a collection of them. 📖

They will definitely help developers of any skill level to learn something new.

A thread. ↓ 38 visual JavaScript tips, explanations, and algorithm imple
1. The Nullish Coalescing Operator .
2. Strict Equality Comparison > Abstract Equality Comparison .
Read 39 tweets
11 Aug
Git is by far the most used source control management tool out there.

It is basially an essential to know. And this justifies knowing a few of the most important git commands you need in your daily work.

Here are 19 that any developer should know.

A thread. ↓ 19 essential git commands for every developer.
1. Initialize a repository

git init is the most basic command.

It initializes a new repository in your current folder and starts the version control flow for your repository. git init
2. Clone a remote repository

You don't necessarily need to create a new repository.

Sometimes you just want to download an existing repository and contribute to it.

This is where git clone comes in. git clone <remoteUrl/>
Read 21 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!