Intro into Scaffold-ETH-2

5 min readDec 11, 2023

--

Photo by Jievani Weerasinghe on Unsplash

If you head over to the Scaffold-ETH-2 (SE-2) website, you will find that SE-2 is described as a way to: “Debug and refine your smart contracts with a live-updating frontend — Experiment with Solidity using a frontend that adapts to your smart contract.”

This does little to explain how smooth and easy SE-2 actually feels … right out-of-the-box. Don’t take my word for it. Let me show you.

At a Glance

When you first hit your localhost and attempt to connect a wallet, you will see that you have access to a “Burner Wallet” out of the list of Wallet Providers:

🔥The Burner Wallet

The Burner Wallet makes developing and testing blockchain apps much easier, because you can use multiple wallets (at a time), and you can use a Local Faucet (that is now) right there on your webpage:

Grab funds from the Local Faucet via small button on right.

If you click on the ETH, you can view it in Dollars.

Bottom-Left of your webpage, you will see more ways to use your Local Faucet.

Testing with Multiple Wallets

This is very easy to do with SE-2, simply open up a new Private Window from the browser-instance you are on:

New Window on the right side has a fresh Burner Wallet.

You can also open a different browser to get even more Burner Wallets involved:

Here I have two separate Mozilla windows (top 2), as well as a Brave window (bottom) open (3 different Burner Wallets are displayed).

The Block Explorer

The Block Explorer is like having your very own Etherscan built into your localhost. You can search local transactions by Hash or Address. This is very useful when you need to see the details of your test transactions.

Debug Contracts

This is one of my favorite parts of SE-2.

When you deploy your contract, SE-2 is doing some magic to help you work with (and visualize) your Smart Contract. You will be able to see live-updating values from your contract variables, you will also see your read functions, and you will be able to write from here, as well.

Read

Write

Note that I can see the details for what this function is expecting … all from my frontend.

More Details

A look at the contract’s details as well as its public variables.

✅Your Contract Reloads Automatically

Worried about making changes to your contract? Don’t be. Once you re-deploy, your Debug Contracts page will reflect any changes you have made. Note that your Block Explorer will also be emptied out.

Smart Contract Interactions

SE-2 goes beyond simply making testing easier. Reading, writing, and listening to/from contracts is quick and iterative, because SE-2 offers some really slick wrappers (these custom🪝React Hooks) around Wagmi. These will be something I dive deeper into here. But, a sneak-peek shows how simple writing to your contract becomes:

const { writeAsync, isLoading, isMining } =
useScaffoldContractWrite({
  contractName: "YourContract",
  functionName: "setPurpose",
  args: ["The value to set"],
  blockConfirmation: 1,
  onBlockConfirmation: (txnReceipt) => {
    console.log("Transaction blockHash",  txnReceipt.blockHash);
  }
});

All the web3 components you need

I don’t know about you … but as a developer, I typically lose a lot of time tinkering with HTML/CSS (because that isn’t my primary focus). Can I do it? Sure. I’m just slower than a full-time web designer. If you are like me, you appreciate anything and anyone that makes life a little easier when it comes to HTML/CSS.

Check out these components. Between these pre-built components and the fact that SE-2 comes with DaisyUI … you shouldn’t have to get too bogged down with look/feel (even for those with minimal Tailwind experience, you should have enough examples to copy/pasta your frontend elements together).

Ready to get started?

Official Site
GitHub
Docs

There are multiple packages that you could use to start building with, but before you do, it is helpful to understand the SE-2 workflow a bit…

You’re going to be developing with 3 terminals opened (at least). One runs your local hardhat network, another terminal starts your NextJS app, and the third will be used to deploy/re-deploy your contracts. The first two terminals will be taken-over. Then — after you deploy — you can work, test, re-deploy from that third terminal.

Prerequisites

Before you begin, you need to install the following tools:

Quick-Start

git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install

First Terminal

yarn chain

Second Terminal

yarn start

Third Terminal

yarn deploy

Ready for more SE-2?

Become a member of The BuidlGuidl by Completing Quests

Still want to learn more? In the next post, I will break down the project we will build and the iterations we will work through to make it all happen…

V1 — Crowd Funds
V2 — Multisig Crowd Funds (on-chain)
V3 — Multisig Crowd Funds (using a Subgraph)

Keep following along with this blog here.