Project Demo

https://www.youtube.com/watch?v=awLyddyao3g&feature=youtu.be

🏗 Scaffold-Eth Typescript

Features

This is the typescript repo of scaffold-eth. Use scaffold-eth-typescript with:

• A react frontend running with nextjs or vite.
• Solidity toolkit of hardhat or foundry
• It has the a command line system that allows you to choose a react frontend or solidity toolkit

Quick Start

Fork or clone the repo

• You can use the use the template link: scaffold-eth-typescript template
• You can clone the repo with git

  git clone https://github.com/scaffold-eth/scaffold-eth-typescript.git

Starting the App

Running the app

1. install your dependencies, open a new command prompt

   yarn install

2. Create a default scaffold.config.json configuration file

   yarn create-config

3. start a local hardhat node (chain)

   yarn chain

4. Run the app, open a new command prompt terminal

   # in a new terminal
   # compile your contracts
   yarn compile
   # deploy your hardhat contracts
   yarn deploy
   # start the react app (vite)
   yarn start

5. Open http://localhost:3000 to see your front end

Configuration

Scaffold uses scaffold.config.json as a configuration file located in /packages/common/scaffold.config.json. You can create the config file by running the command yarn create-config.

Command line help

use `-h` with any command for help.  e.g. yarn set-react -h

Configure react and solidity toolkit

You can change the configuration file to pick different frontends and solidity toolkits.

yarn set-react `nextjs` or `vite`
yarn set-solidity `hardhat` or `foundry`

Target network

Set your targetNetwork in the config. This is the network the solidity toolkit is deploying against.

Set your availableNetworks in the config. This is the networks the frontend is available in.

You can configure it from the config file or from command line.

yarn set-network -h
yarn set-network 'localhost' 'localhost, mainnet'

More commands

You can see all the other commands by using yarn scaffold

Solidity Tookits Details

Hardhat

Everything will be installed with yarn install.

You can use hardhat with right context using

yarn hardhat

Foundry

Make sure you install foundry

1. Make sure you install foundry first. Use curl -L https://foundry.paradigm.xyz | bash to install foundryup

   You can see more details here. https://book.getfoundry.sh/getting-started/installation

2. Run yarn install:foundry to install or update foundry in the right folder. It will also run forge install automatically with the right context.

You can use foundry commands with the right context

yarn forge
yarn anvil
yarn cast

Directories

The directories that you'll use are:

packages/solidity-ts/

And one of either:
packages/vite-app-ts/
packages/next-app-ts/

More Info

Other commands

# rebuild all contracts, incase of inconsistent state
yarn contracts:clean
yarn contracts:build
# run hardhat commands for the workspace, or see all tasks
yarn hardhat 'xxx'
# run forge, anvil or
yarn forge
yarn anvil
yarn cast

Other folders

# for subgraph checkout README.md in following directories
packages/subgraph/
packages/services/

Guides

Everything you need to build on Ethereum! 🚀 Quickly experiment with Solidity using a frontend that adapts to your smart contract:

• 🔏 Edit your smart contract YourContract.sol in packages/solidity-ts/contracts
• 📝 Edit your frontend MainPage.tsx in packages/vite-app-ts/src
• 💼 Edit your deployment scripts in packages/solidity-ts/deploy/hardhat-deploy
• 📱 Open http://localhost:3000 to see the app
• 👷🏽‍♂️ run yarn hardhat to get a list of all the tasks. Run yarn hardhat taskname to run the task.

---

Documentation

Check out eth-hooks docs for example of how to use hooks

Video Tutorials

Tutorial using the CLI

• Scaffold-eth-typescript Tutorial: Foundry, NextJS, CLI

Eth-hooks v4 & scaffold-eth-typescript overview

• Getting Started with eth-hooks and scaffold-eth-typescript
• eth-hooks v4

🏃💨 Speedrun Ethereum

Register as a builder here and start on some of the challenges and build a portfolio.

🏁 Make sure to click on the typescript tab!

---

Extra!

💬 Support Chat

Join the telegram support chat 💬 to ask questions and find others building with 🏗 scaffold-eth!

🛠 Buidl

Check out

• Typescript challenges
• Typescript examples
• Vanilla JS active branches
• Join/fund the 🏰 BuidlGuidl!

🙏🏽 Support us!

Please check out our Gitcoin grant too!