A Tour of Web 3: Ethereum & Smart Contracts with Solidity



4 hours, 57 minutes CC
A Tour of Web 3: Ethereum & Smart Contracts with Solidity

Course Description

Web 3 (DApp) applications could change the development landscape. Learn to create and deploy smart contracts on Ethereum with Solidity. Then communicate from them to Node.js and browsers. You'll tackle challenging concepts such as memory layout, delegate calls, and fallback functions. Lastly, implement the diamond pattern, allowing you to create smart contracts of arbitrary size.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: February 10, 2022

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 9 minutes
  • Introduction
    ThePrimeagen begins the course with a brief overview of Ethereum and a walkthrough of the course outline. The course will start with a basic "hello world" example and then pick up the pace with a lot of coding examples and the exploring of different types of contracts.

Getting Our Feet Wet

Section Duration: 1 hour, 4 minutes

Solidity Fundamentals

Section Duration: 1 hour, 6 minutes
  • Counter Contract
    ThePrimeagen creates a counter contract as well as a deploy script. Unlike the hello world example, this contract changes state. The change in state creates a new block and triggers a gas fee.
  • View Methods vs. Transactional Methods
    ThePrimeagen modifies the contract so there are separate methods for viewing the count and mutating the count. This best-practice allows method calls to occur without gas fees or verification across the blockchain. Working with larger numbers than JavaScript can support is also covered in this segment.
  • Display Contract Count on Website
    ThePrimeagen refactors the website to display the count using the new view method and adds an increment button. The contract's address is moved into an environment variable to make it more reusable.
  • Signers & Waiting for Transactions
    ThePrimeagen adds a signer to the application which provides state-changing privileges. A signer is required because a provider only specifies how the contract can be accessessed and cannot change state. Since a transaction is asynchronous, the application needs to wait until the transaction is complete before updating the UI. Debugging NONCE errors is also covered in this segment.
  • Contract Events
    ThePrimeagen adds a CounterInc event to the contract. When the counter is updated, the event is emitted. Any connected clients will have the event pushed to them. Additional filters like the address of the sender can be included as well.
  • Alchemy Test Network
    ThePrimeagen demonstrates how Alchemy is used to deploy the contract to a live test network. In this case, the test network is Rinkeby. An Alchemy API endpoint is specified in the hardhat.config.ts file. MetaMask then needs an authorized account for Rinkeby.
  • Gas Overview
    ThePrimeagen explains that the term "gas" refers to the transaction cost. The wei is the fundamental unit of ether. The gwei, or Gigawei is the typical measurement for gas.
  • Gas Reporter
    ThePrimeagen demonstrates how to use the hardhat-gas-reporter module to estimate gas fees for a contract. The module is included in the hardhat config file. After the contract is created, a test script is written to call methods in the contract. The gas report is displayed in the console.

The Game

Section Duration: 1 hour, 21 minutes

Diamond Pattern

Section Duration: 1 hour, 13 minutes
  • Diamond Pattern Fallbacks
    ThePrimeagen explains how the Diamond Pattern helps address contracts that are too large and scenarios where a contract needs to be updated. An external fallback method is created to handle any calls to methods that do not exist. In order for the fallback to work, non-existent methods should be defined in an interface.
  • Diamond Pattern Delegate Calls
    ThePrimeagen creates a delegate function that can call a method in another contract using the context of the current contract. This is similar to using the call() method in JavaScript. The data remains in the diamond contract and the external address does not change.
  • Diamond Pattern Storage Overview
    ThePrimeagen demonstrates how memory is stored within the diamond pattern. Solidity attempts to pack bits as tight as possible. They will be added to storage in the order they are declared. Variables will share adjacent slots if they are small enough.
  • Diamond Pattern App Storage
    ThePrimeagen creates an AppStorage struct to act as a common location for storing application data. The only issue with this storage solution is it has the potential to write into an already allocated storage block. The solution is to use assembly to select a random storage location.
  • Diamond Contract Walkthrough
    ThePrimeagen clones a repository containing a diamond pattern template and walks through a more complex use case. Within the diamond pattern, a facet refers to a contract within the diamond. When a facet is cut, it is either added, removed, or changed. An init method is used to initialize a contract with the diamond's storage location rather than the individual contracts storage location.
  • Replacing Functions from the Diamond
    ThePrimeagen replaces a function in contract A with a new return value. After the replacement, the function can still be called at the same address by using the diamond. If a function is removed, it can still be called using the diamond but an error will be thrown indicating the function no longer exists.
  • Q&A
    ThePrimeagen answers questions about mutability in the blockchain, deploying new contracts, alternatives to the diamond pattern, and the public nature of code on the block chain.

Wrapping Up

Section Duration: 2 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now