A Frontend Developer’s Guide to Web3

Rate this content

There is a lot of hype and interest around diving into the Web3 space, and it can be hard to manage the information overload and the emphasis on learning new languages to work on smart contracts. Many developers in the frontend space ask, “How much of this new information do I need to transition into web3?” The truth is as a React developer, the skills I know are essential in web3. Let’s add some context around how to leverage those existing skills to succeed in this new space.

In this talk, we’re going to explore how to build the correct context and the technologies to understand to help you dive into web3 as a front-end developer. We’ll go over popular packages like Ethers, which can be used in React applications to interact with wallets and existing smart contracts. We will also explore how you can leverage your Javascript skills to build full-stack dApps using managed services like Moralis and Thirdweb.

Let’s demystify some of the concepts in web3 and leverage our existing skills to start building.

22 min
21 Jun, 2022

AI Generated Video Summary

This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.

1. Introduction to Web 3 and Smart Contracts

Short description:

Welcome to my talk on Web 3. I'll cover smart contracts, connecting to the blockchain, fetching data, and tools for Web3 development. I'm Rahat, a developer advocate at Polygon, and I'll be discussing our carbon-negative blockchain. Smart contracts are the code of the blockchain, written in languages like Solidity. EVM chains, like Ethereum and Polygon, are compatible. Deployment involves bytecode compilation.

Welcome, everyone, to my talk, a front-end developer's guide to Web 3. Really excited to be here at React Summit, talking a little bit about Web 3 and giving you an introduction to it. Here's a high-level agenda of what we're going to be going through today.

We're going to be talking about what Smart Contracts are, going over how to develop them, we're going to talk about how to connect to the blockchain, talk about things like wallets and RPC endpoints. We'll go over that in a bit. Don't worry. We'll look at how to actually fetch data from the blockchain, and some really dope tools that you can use to build with, into the Web3 rabbit hole as I have.

A little bit about me. My name is Rahat. I'm a developer advocate at Polygon. Previously, I've been a front-end developer as well as a freelance Solidity engineer. Overall, I'm an indie hacker, a Web3 enthusiast, and these are places you can find me, Twitter, LinkedIn, GitHub, if you ever want to look at some code examples of some of the things that we talk about during this talk.

Polygon, which is the company that I work for, we're specifically going to be talking about one of our products, which is a proof-of-stake blockchain. One of our popular offers, this is pretty much our most popular offering. It is a carbon-negative blockchain. We're striving to be completely climate positive, uses about 99% less energy than Ethereum or other blockchains. It's a great way to start diving into the Web3 space without having to worry as much about energy wasting and usage that comes up with a lot of the other blockchains that are out there.

But going to the actual main crux of our talk, smart contracts. Smart contracts are essentially the code of the blockchain. It's just a file, contains some code, some instructions for what your app or your DApp, which is a decentralized application, needs to do when it's deployed onto the blockchain. How do we write smart contracts? What do we need to know about them? The languages that smart contracts are generally written in include Solidity, Rust, Viper, or Go. I'm going to be talking mainly about EVM chains during this talk. EVM means Ethereum Virtual Machine, meaning everything that we talk about, all of the code that we do review and go over, are all compatible with the Ethereum blockchain. Our blockchain, Polygon, is also compatible with Ethereum, so anything you learn on that side of things is one-to-one compatible on Polygon. Although Solidity is generally the most popular use language, another popular one is Viper. So, definitely if you to smart contract development, those are some good languages to know. Now, let's say you've written your smart contract, you've written some Solidity code, you want to actually get that out onto the blockchain. Deployment takes a few different steps. First, you need bytecode. Bytecode is essentially machine-readable code that is compiled from Solidity.

2. Smart Contract Development and Interactions

Short description:

Solidity is a high-level language compiled into bytecode for the Ethereum virtual machine. Gas fees are paid to transact on the blockchain, with some coins burned and others given to miners or validators. Deployment scripts and Ethereum nodes are essential for smart contract development. Polygon uses validators instead of miners, and services like Alchemy and Infera provide access to Ethereum nodes. Interactions occur through wallets like MetaMask, which can connect to different blockchains.

Solidity is a very high-level language, meaning it has the code, but it needs to be really compiled down to something that the Ethereum virtual machine can read. And that's what this bytecode is.

Next thing you need to know is what gas is. Gas, not like what you would use at the pumps, but gas fees associated to blockchain developments include essentially a fee that you need to pay in order to transact with the blockchain. This fee is comprised of like a base fee that may get burned, so a certain amount of coins or tokens on that blockchain might get burned during this transaction. And then a certain amount of it is given to what are called miners or validators. And these are folks who have nodes or computers that essentially keep track of the blockchain, have copies of it, and are validating transactions to be added to the overall blockchain.

Next, you need a deployment script. A deployment script can be taken from environments like HardHat and Truffle, both of which are tools for creating like environments for deploying, testing, and essentially creating your smart contracts on your local machine. Finally, you need an Ethereum node. Ethereum nodes is just basically a computer that has a copy of the Ethereum blockchain on it. Think of the Ethereum blockchain as this gigantic database. The node essentially houses a lot of all the information that is on that blockchain. You have everything on what's called a distributed network. There's nodes and computers all over the world keeping track of validating transactions and they together form the consensus of what the blockchain data is.

Polygon works very similarly in this case. We have several nodes all across the world and rather than using folks like miners who mine these transactions, we have validators who validate it. Next, there are services like Alchemy and Infera which can help you with accessing an Ethereum node. Not everyone can run their own Ethereum node or Polygon node on their own computers. These services are essentially providing you with endpoints or RPC or what's called a remote procedure call endpoints that allow you to interact with Ethereum and that allow you to interact with Polygon as well. Finally, let's talk about interactions. Interactions usually happen with a wallet. Wallets are usually inside of your browser. I'm going to show you right now a what's called a MetaMask wallet, which is an in-browser wallet. I have a little bit of Ethan here, but I can switch between different networks. I'm going to switch to the Polygon testnet just to showcase this is the Polygon network. You can have access to different blockchains via this wallet. The wallets all interact using an RPC endpoint, so they have their own built-in endpoints from services like Inferior and Alchemy. But for now, let's go ahead and break down what some of these interactions are. I showed you a little bit about wallets, which is that MetaMask wallet I popped up here.

3. Interacting with Blockchain Wallets

Short description:

Wallets ask for user consent to access and connect to the blockchain. They are used for conducting transactions and interacting with Web3 applications. RPC endpoints and block explorers are useful for read-only interactions and debugging. Interacting with blockchain wallets involves accessing the Ethereum object in the window and retrieving the associated account and address. A common connect wallet pattern involves using the handle wallet connect function in a useEffect hook, but this practice should be avoided due to security concerns and poor user experience.

What wallets really do is ask for user consent for actually accessing their wallet and connecting to the blockchain. Many of the different interactions that you need to do require sometimes some type of transaction fee. Usually this is some type of mutation that needs to be done on the blockchain, or sometimes there's a signature required from you to prove your identity, to prove that you're the one using your wallet. This is all done through a wallet like MetaMask or through hardware wallets like the one you see here from Ledger. These are great for when users need to conduct transactions like minting or buying an NFT, transferring tokens, anything that requires interaction between you and the blockchain or you and some other folks who are using Web3 applications.

The other type of interaction is just a read only type of interaction, so RPC endpoints, like we mentioned before. These are endpoints given to us by a Node provider. These are great for dApps that only have read transactions, like a block explorer. Block explorers will give you essentially a UI that acts as a full ledger for looking through transactions, for looking through the history of those transactions, for looking through any failed transactions that you might have. So when you're trying to figure out what's going on, what's debugging certain calls in your application, you can look at block explorers to see, so what happened during this call? Why was it rejected? Why didn't it go through? These are great for debugging.

Let's look at some code and take a look at how do we actually interact with the blockchain wallet edition. On my screen I have a JavaScript function called handle wallet connect. This would generally be attached to something like a button. So, this is an async function, and what I'm doing here is taking the Ethereum object out of the window. Now, you might be like, whoa, Rahat, what do you mean Ethereum object in the window, right? So, the reason I'm able to pull out an Ethereum object from the window is because I'm considering that this person might have a MetaMask wallet like I have set up right here. As long as you have a browser injected wallet like that, that wallet will also inject the Ethereum object into your window. And then from there, just a little bit of boilerplate of accessing the account associated to that wallet and then accessing the address and logging that out. If the Ethereum object doesn't exist, we'll just alert that, hey, there's no wallet detected. The person should have, should go and install MetaMask or something like that, and you can provide a better alert than I did. So, here's a quick demo on how that works. So, on this page, I have this connect wallet button. I hit it, and once that happens, my MetaMask pops up, I hit sign in, and it displays my address on the page. This is essentially half of what you would use for something like sign in with Ethereum, which I'll cover in just a little bit as well.

Now I'm going to talk about another common connect wallet pattern. This is done quite a bit through a lot of decentralized applications where we take that handle wallet connect function, I didn't bother rewriting it here, and put it inside of a use effect and call it right away, specifically on mounting of the actual application. Please do not do this if you ever dive into the Web3 space. What this essentially does is as soon as I land on the website, the website will automatically request that I connect my wallet. This is sort of like the same kind of situation of like you're going to a website, music starts playing, or a video automatically starts playing. Nobody wants to actually have that happen right away. This is a bad security practice and is something that it just leads to bad UX overall in your application, because it removes the ability for the user to give consent.

4. Wallets and Interacting with the Blockchain

Short description:

One of the main things we talked about with wallets is that this is the gateway for a user to consent to using the blockchain for transactions. Going beyond connect wallet, sign in with Ethereum offers a true single sign-on experience. The wallet provides a public and private address, allowing users to access the blockchain, approve transactions, and view their holdings. Interacting with the blockchain involves using RPC endpoints, which provide information about blocks and transactions. This data can be used to build dashboards and block explorers. Smart contract data can be accessed by compiling Solidity code into bytecode.

One of the main things we talked about with wallets is that this is the gateway for a user to consent to using the blockchain to doing certain transactions. This removes that ability. And some folks might say, you can still cancel the transaction, but no, you've got to stop, because if your wallet immediately pops up, you don't have that opportunity to actually go through the application and understand what's going on.

So I mentioned this a little bit, just a couple of slides ago, going beyond connect wallet and using something called sign in with Ethereum. One of my favorite things that have come up out of the Web 3 space is this true single sign on experience, where you can take a wallet, connect it, validate your address, as we looked at before, and then from there do something like connecting to a server as you would normally do for authentication, for actually pulling someone in, creating a user profile for them on your Dapp or application. And the cool thing here is that user profile can travel with them anywhere. They don't need to create a new email or password every single time they go to a new application. They don't need to trust their credentials to a service like sign in with Google or sign in with Facebook. Everything is actually specifically owned by them. That user profile is owned by them through this wallet. And the way that wallet works is that the wallet gives you access through a key value pair, a public address and a private address. The public address is the one we displayed on the page. And then there's a private address that only they have access to that actually allows them access to the blockchain and is what allows them to approve transactions, view their holdings and just access the overall web three space.

So we talked about the wallet side of things, of doing interactions, of like actual user interactions, but how do we interact with the blockchain, RPC and Point Edition? In this case, we may only want to do read only transactions, maybe we want to create our own block Explorer, maybe we want to just display some data in the form of graphs, dashboards, whatever it is. On here, I have this provider. And this provider is something given to us from the ethers package, which is a popular JavaScript package you can use in your front ends. And all you really have to do is just use this method, and enter an RPC endpoint. These RPC endpoints are basically just like a URL, an HTTP endpoint, given to you like the services I mentioned earlier from alchemy and Azure. And this is like a blob of information that you can actually get from the RPC endpoint. So, here, what I'm doing is I'm getting the information about the latest block on the blockchain, and what does that mean? What is the latest block? So, blockchain data is broken up into these blocks, they all have some type of number associated to them, a timestamp, different hashed values, and this is what houses all of the data on this block. So, on this specific block, there's several transactions. There's only one displaying here, this is a timestamp, and just some information about the miner who actually validated this, as well as just additional data like the gas that was used. And this is the information you can use to build out some of those dashboards, some of that information. I'm going to give you a quick demo of something that I built using that blob of data. This is just like a list of like the last 10 blocks on the polygon blockchain, including their block number, their timestamp, and the number of transactions on each of those blocks. You can dive a little bit deeper into that JSON data that's returned from some of these calls, but this is just like a very basic implementation of like what a block explorer might start off as. So cool. But how do we actually fetch data from smart contracts, right? Sure, maybe there's like someone wrote some like developer, smart contract developer wrote a contract for us and that houses some information. How do we access that information? We need a map. So Solidity code, like I mentioned before, gets compiled down to bytecode.

5. Interacting with Smart Contracts

Short description:

To interact with smart contracts, we use an ABI, a JSON object with instructions on the available functions and their inputs and outputs. JavaScript libraries like ethers allow us to interact with the blockchain using the ABI. We import the necessary dependencies, including the ABI and the address of the deployed contract. This gives us access to the functions defined in the ABI. Mutations, such as attacking a Pokémon, require a small amount of gas to complete on the blockchain. Front-end development in web 3 remains similar to traditional development, with a shift in mindset from HTTP requests to using ABI code and libraries. Mutations incur costs, while read transactions are free. Popular web 3 front-end development tools include ethers, web 3 library, and the WAGMI library.

We need instructions on how to actually traverse that bytecode. So what we need is an ABI, or an Application Binary Interface. This is usually exported out by a Solidity developer, passed on to like a frontend developer. And this is just a JSON object with instructions on like the different types of functions that are available on a smart contract, what input some of those functions need and the types of outputs that they give to you. This is just going to allow JavaScript to use certain libraries to traverse through the blockchain and get the proper information that it needs.

So rather than doing an HTTP request, it's using this ABI, along with a function given to us from a package like ethers, to actually interact with the blockchain itself. So how does this work? First you would import dependencies. This is done, assuming you're looking at a react application. So you're going to import ethers from the ethers library and an ABI that some smart contract developer may have given you. This is an example from a contract that I wrote, where it showcases a little Pokemon battle between two Pokemon.

The next thing is you want the address of the deployed contract. So every single deployed contract, similar to your wallet has its own address. So we need to get the address to see where on the blockchain that contract lives. We supply the ABI, the address of the contract, as well as the Ethereum object into this contract method given to us from ethers. Once we supply all that, we then get access to the actual functions listed out inside of the ABI file. One of those functions here is this attack functionality, where our Pokémon is going to attack each other, and then certain amounts of like HP, or hit points, are going to be taken away. So let's take a look at that in action.

So what's going on here is I decided, okay, I need to attack this Pokémon. I hit use flamethrower. My MetaMask is going to pop up. I'm going to pay a small amount of gas to make sure this transaction goes through on the blockchain, and once it's completed, all of the hit points of the two Pokémon will go down, and all of this is tracked on the blockchain itself.

The main things to really understand here, front-end development in web 3 remains the same. The UI is still built using all the same practices. You don't, as a front-end developer, you don't need to know the deep intricacies of how to build your own smart contracts. You just need to know how to interact with them like we talked about. You go from a shift in mindset from doing HTTP requests to using ABI code and libraries to call the smart contract, and the other main thing to remember is that mutations cost money. Read transactions are free. Mutations will always cost money. Some web 3 front-end development tools that you can definitely dive into and learn more about are the ethers and web 3 library as well as the WAGMI library. WAGMI library provides a lot of react hooks for easily hooking into and transacting with the blockchain.

6. Web3UI and Building on the Blockchain

Short description:

Web3UI is a library with react components and block explorers like PolygonScan and Etherscan. I'll cover these tools in my workshop at React Summit. If you want to learn more about building on the blockchain, check out academy.polygon technology.

Web3UI is an awesome library that gives you a bunch of react components that you can use as well and different block explorers like PolygonScan if you're interacting with a smart contract on the Polygon network or Etherscan if you're interacting with a smart contract on the Ethereum network. These are all tools that I'm going to be touching on as well during my workshop here at React Summit. So if you want to learn more about that, we'll be going into greater detail and overall, if you feel like you want to learn more, you want to check out how to build on the blockchain, how to build on Polygon.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn