Ethereum in your browser – a web3.js introduction

Ethereum in your browser – a web3.js introduction

Brief look at the blockchain

The blockchain is the base of all cryptocurrencies. It’s like a huge stone wall where all of the crypto transactions are stored. It’s a list of records (blocks) which are linked together using cryptography. The blockchains used by cryptocurrencies are open to the public.

blockchain ethereum

Each block contains:

  • A cryptographic hash which links it to the previous block.
  • A timestamp
  • Transaction data

It’s considered almost unhackable. The more users it has, the more computing power the hacker needs to break the security. It requires more than the 50% of all users’ computing power, which is impossible if there are enough users.

What is web3.js?

Web3.js is the connection between today’s browsers and the ethereum blockchain. It’s a collection of libraries, which allow interaction with a local or remote ethereum node. It is still an initiative, but looks to be the next pioneer movement and cutting edge technology in the very next chapter of the Internet, so stay tuned. (wink)

Using MetaMask as a Web3.js provider

To implement Web3 into our modern browsers we need some help, since up to this date it did not reach 1.0.0 version, we need a middle man. To bridge the gap we used a web3 provider called MetaMask, which is a browser plugin where you can connect to the ethereum blockchain.

web3.js ethereum blockchain browser metamask

MetaMask currently supports Chrome, Firefox, Opera and Brave (sorry Edge users…). By downloading the plugin, users can create an account, and by creating one, they get a wallett address where people can reach them through the blockchain.

Metamask allows access to the Main Ethereum Network, the Ropsen, Kovan and Rinkberry test networks, and users can even create their own local network (which we won’t discuss in this article).

There is a chance that in the near future decentralised browsers will rise above today’s browsers and fill the void between the average user and the Web3 world.

Sending a transaction

To send a transaction we have to build up our process of using the web3.js library. It uses promises, which means we can write functions returning promises and chaining them after another, thus creating building blocks for our purposes (yes, we build blocks and chain them, just to add to the confusion). Our solution will show this through functions of a service written in an Angular app.

As always, we initialise first. There are a few thing to check:

  • Do we have Metamask installed?
    • If we do, let’s instantiate our provider object. We can set a default account, so we don’t have to always run through our accounts array.
  • Is Metamask activated? (This is how Metamask phrases login.)
  • Is the user on the network we want it to be?
    • We can get ourselves serious trouble and face-palming confusion, if we send transactions on the wrong network. Luckily, we can check that too.

After we’ve ensured everything is ready, we can send our first transaction. This block must be chained after one that sends a response containing two required information: where we want to send our money and how much. In exchange, we get an identifier for our successful transaction called transactionHash.

How to connect to smart contract

It is not a coincidence web3.js is built on Ethereum and not on an other cryptocurrency. The idea of smart contracts changed the Blockchain landscape for good, so it is pretty obvious for web3.js to support them. Connecting to a smart contract is not even a bit more difficult than sending a transaction.

For a successful connection we need two things (here we go again): the address of the contract and its interface definition. The first one is a simple hash address we all grew to love in the Blockchain world. The second one is called an ABI. It is a strongly typed description which defines the use of the contract (if your head echoes the word “API” you are not far from the truth). In our case we handle it as a variable simply imported into our service. If we have these we can make our next building block, passing on a working instance of the connected service.

Cons of using this technology

Version mismatches

Since this technology is pretty much in early alpha, users and developers should expect pretty frequent version updates and breaking changes. Web2 is an almost 20-year-old technology while today’s concepts of web3 are just a few years old.

People are used to paying by credit card by now but most of them don’t even know what cryptocurrency is, so you can’t really force them to make an ethereum wallet. Adaptation needs time.

Error handling

With web3, error handling is an even greater pain than before. We need to make 6 transformations to it before the messages sent are compatible with JSON.

And to add insult to injury we can never really tell if we handled all the errors MetaMask can throw us, because of the frequent updates. A fallback message is a nice solution, but nobody really wants a “Something went wrong” message to pop up in their shipped code.

metamask smart contracts web browser web 3 js

Bonus: using Metamask for authentication

We have a webapp with Metamask support. We are authenticated in the plugin. We are not authenticated on our site. Would be nice connecting the two, isn’t it?

One of the gems of using web3.js is that we can sign any data with our key (public address), proving it is truly us using it. So if we get a nonce token from our backend, sign it and send it back for checking, we can authenticate ourselves without the use of any password-something combo. Here is our promise-block and the usage:

And this is how Metamask handles it:

metamask ethereum web2js browser

Conclusion

You can see by now that this technology still has a few kinks to solve. All things aside, Web3 is the future of the Internet, it’s just not ready for the limelight yet. But if you are interested in being on the frontline of a revolution, it can be a very promising and exciting time for you. Blockchain technology can be the phenomenon, that changes our perspective like the Internet did many years ago, and Web3 is this change, projected to the Internet.


Wanari is an 18-year-old custom software development company. Our tech stack is based on the JVM. We use modern Java and Scala on the backend. We use Angular on the frontend, we’ve indulged in Blockchain and we have a native mobile application development team in-house for both iOS & Android. We always keep an eye out for new technologies and interesting projects. To learn more, check out our entire development team!

Gábor Nagy

Gábor Nagy

Frontend Developer at Wanari
"Started learning electrical engineering. Then went bartending. Now I'm here."

Latest posts by Gábor Nagy (see all)
Krisztián Martinkovics

Krisztián Martinkovics

Frontend Developer at Wanari
As a Frontend Developer, I can align content in the middle. Sometimes.

Latest posts by Krisztián Martinkovics (see all)