Blockchain in UI— is it easy to transfer skills from frontend to web3?

When it comes to web3 development, it is commonly said that frontend developers are extremely lucky. Especially in tech Twitter, big accounts announced that as a frontend developer it is super easy to transform skills into web3 dev.

Is it true? Let’s check it.

Agenda:

• Intro,
• Tools,
• Web3.js,
• Ethers.js,
• How to apply blockchain data on frontend?
• Conclusion

Tools

When it comes to visualize smart contract data on UI, there are few great solutions to do it. However, most of dapps use two of them:

• web3.js,
• ethers.js.

Web3.js

This library allows to interact with local or remote blockchain by sending requests and receiving JSON data. It is super helpful in UI development, all what is need to add some style.

Moreover, library makes it extremely easy to send assets on chosen wallet address. It can be directly implemented in combination of inputs and buttons. One input collect address, second one amount of holdings and button just runs on click sending function.

Ethers.js

Both of the included tools are ethereum JavaScript libraries, which allows to interact with blockchain. However there are few differences between them:

• Ethers.js is created by Rick Moore,
• Web3.js is developed by ethereum foundation, what makes it more supported.
• key management in ethers gives more flexibility to developers, the node is separated into wallet and provider. Wallet holds keys and sign transactions and provider handles connection to ecosystem and runs transactions.
• Web3.js key management is made like there is always local node which handles keys storing and connecting to the network.

How to apply blockchain visualization?

Following steps are made for web3.js

npm i web3

Install web3.js package with npm or yarn

https://mainnet.infura.io/YOUR_INFURA_API_KEY

Use Infura to access ethereum node and required data. Sign up and get api credentials.

Next steps are covering how to check balance of a wallet

cont Web3 = require(‘web3’);

import dependencies to use them in project.

const rpcURL = ‘https://mainnet.infura.io/YOUR_INFURA_API_KEY’;

create variable which will store rpc url

const address = ‘0xb794f5ea0ba39494ce839613fffba74279579269’;

create variable which stores address of a wallet

web3.eth.getBalance(address, (err, wei) => {

balance = web3.utils.fromWei(wei, ‘ether’)

});

Conclusion

Above code lines are creating function which returns balance of a wallet, just with web3.js library. Hope that this example presented how easy it is and how frontend skills can be easy transformed in web3.