Getting started with Web3 Frontend Development: A Quick & Dirty Guide

Developing for web3 might sound crazy, but frontend devs are very well positioned to get in on the action. There are so many 6 figure frontend dev jobs and it’s so little work to transition into web3.

An Introduction to decentralized app (dApp) Development

Much of dapp development is really on the front-end. You don’t even need to know much about smart contract development to get going. You only need to be familiar with the libraries and infrastructure necessary to prepare your app for blockchain access.

Imagine building a decentralized financial application utilizing DeFi protocols. As a front-end dev, your mission is to identify which contracts you need to access. This process doesn't require writing any code for the smart contracts themselves.

You can just think of smart contracts as apps hosted on the blockchain and you want to access their functions via APIs. Instead of a URL, you receive a smart contract address. And instead of using tools like Axios to call APIs, you use something called Ethers.js.

Utilizing Ethers.js for Smart Contract Interaction

Ethers.js enables interaction with a smart contract. After instantiating an object representing the smart contract, you can access its functions seamlessly. An example is as follows:

console.log(await walletContract.getBalance())

In this example, a smart contract wallet contains a function called getBalance.

To reach this point where you can access functions on a smart contract with one line of JavaScript code, you utilize ethers.Contract to instantiate the smart contract.

import {ethers} from 'ethers';

const walletContract = new ethers.Contract(
        deployedWalletAddress,
        WalletArtifact.abi,
        signer
    );

Here, you're importing 'ethers' and passing in three elements into ethers.Contract:

1. The address of the already deployed contract on the blockchain
2. The Application Binary Interface (ABI), which is a JSON file that outlines interaction with the smart contract (e.g., function names, parameter types)
3. A signer - an ethers object that contains the URL of the RPC endpoint, which sends your requests to a blockchain node

Acquiring the Address and the ABI

If you're collaborating with a team, the address and ABI will likely be provided.

When working independently, the contract address can be found on the documentation site of whoever wrote the smart contracts, along with a detailed explanation of the available functions.

You can also obtain the ABI from a block explorer website using the smart contract address. For instance, if you look up the address 0xe0d7427a900828d553A6579C842d76926a73433e on polygonscan.com, you'll find the contract code on the "Contract" page. Scroll down, and you'll find the "Contract ABI", which can be copied and saved as a JSON or JS file.

Setting Up the Signer

To set up the signer, use the following code:

const signer = provider.getSigner();

The signer is necessary for accessing write functions in the smart contract.

If you only need read functions from a smart contract, you can use the provider instead of the signer. Setting up the provider involves using Metamask:

import {ethers} from 'ethers';
import { Web3Provider } from '@ethersproject/providers';

if (typeof window.ethereum !== 'undefined') {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
} else {
    // MetaMask is not available, handle accordingly
    alert('Install metamask from the Chrome webstore');
}

The above code allows users to interact with smart contracts through their Metamask wallet. Once these steps are complete, you can treat any smart contract function as a module or an API. If write operations are required, use the signer when creating an instance of the smart contract in your frontend code. For read-only functions, use the provider.

Final Remarks

While Ethereum is the most prominent blockchain, numerous others like Binance chain, Polygon, Arbitrum are either aimed at scaling Ethereum or function independently. However, from a frontend developer's perspective, this doesn't matter as these are all Ethereum Virtual Machine (EVM) compatible. So, if your code works for Ethereum, it'll function for these chains as well.

Using Ethers.js is the rawest, most traditional way. There are libraries that make some aspects of front end web3 development easier. Wagmi is a great example. It contains all sorts of react hooks to do things like check balance of an ERC20 token, see account details and even one for performing a write operation in a smart contract called useContractWrite. But getting that set up still requires you to provide an address and ABI.

Even though you can get started quickly, it's still beneficial to study smart contracts at your own pace. A deeper understanding will aid in designing better apps, as there are some aspects of Web3 development that are not so intuitive. For example, many ERC20 token operations require 2 transactions even though they seem like simple operations. As a front-end dev, it’ll take very little time to get up to speed.

Comments

[parth51199]

What are some of the most popular libraries and frameworks for Web3 frontend development?

[ali kim]

wagmi.sh is popular as it creates a react hook for every blockchain interaction you need.

Similarly, ThirdWeb.com has their own flavor of that: thirdweb React SDK. They provide many UI components as well. Don't know why they're not as popular.