/scaffold-eth

πŸ— forkable Ethereum dev stack focused on fast product iterations

Primary LanguageJavaScript

πŸ— scaffold-eth

TL;DR: fork this repo for an Ethereum dev stack focused on fast product iteration


πŸ— scaffold-eth is a stack of existing tools including πŸ‘·β€β™€οΈ Buidler and πŸ“¦ create-eth-app

Its super power is interating on smart contracts as you build your frontend.

It's great for building decentralized applications on Ethereum.


yarn install

yarn start

yarn run chain

yarn run deploy

πŸ” Edit your smart contract YourContract.sol in packages/buidler/contracts

πŸ“ Edit your frontend App.jsx in packages/react-app/src

πŸ“± Open http://localhost:3000 to see the app


⏱ Quickstart: πŸ”¬ Smart Contract Sandbox

Learn how to quickly iterate on a smart contract app using the <Contract /> component.


Join the telegram support chat πŸ’¬ to ask questions and find others building with πŸ— scaffold-eth!


splash


Tutorial 1: πŸ›  Programming Decentralized Money

Learn the basics of πŸ— scaffold-eth and building on Ethereum. πŸ‘·β€β™‚οΈ Buidler, πŸ“¦ create-eth-app, πŸ”₯ hot reloading smart contracts, πŸ›° providers, πŸ”— hooks, πŸŽ› components, and building a decentralized application. πŸŽ₯ Guided Tutorial


Tutorial 2: 🏡 The Token

Learn about tokens. [coming soon] What is a token? Why is it cool? How can I deploy one? Exotic mechanisms? (todo)


Tutorial 3: βš–οΈ Minimum Viable Decentralized Exchange

Learn the basics of Automated Market Makers like πŸ¦„ Uniswap. Learn how πŸ’°Reserves affect the πŸ“‰ price, βš–οΈ trading, and πŸ’¦ slippage from low liqudity.

πŸƒβ€β™€οΈ SpeedRun πŸ“Ή


Tutorial 4: πŸš€ Connecting ETH to IPFS

Build a simple IPFS application in πŸ— scaffold-eth to learn more about distributed file storage and content addressing. πŸŽ₯ Live Tutorial


Tutorial 5: ⛽️GSN and Meta Transactions

Learn about to provide your users with better UX by abstracting away gas fees and blockchain mechanics. (todo)


Tutorial 6: πŸ›° Decentralized Deployment

Learn how to deploy your smart contract to a production blockchain. Then deploy your applicaton to Surge, S3, and IPFS. Finally, register an ENS and point it at the decentralized content! πŸŽ₯ Live Tutorial


built with πŸ— scaffold-eth:

πŸ‘©β€πŸŽ¨ Nifty Ink

Paintings come to life as you "ink" new creations and trade them on Ethereum. A deep dive into πŸ–Ό NFTs, 🐳 OpenSea, πŸ– react-canvas-draw, 🎨 react-color, and πŸ›¬ onboarding user experience.

πŸƒβ€β™‚οΈ SpeedRun πŸ“Ή (TODO)

πŸ’Ύ Source Code


πŸ—³ Personal Token Voting

Poll your holders! Build an example emoji voting system with πŸ— scaffold-eth. πŸ” Cryptographically signed votes but tracked off-chain with πŸ“‘ Zapier and πŸ“‘ Google Sheets.

πŸƒβ€β™‚οΈ SpeedRun πŸ“Ή

πŸ’Ύ Source Code


πŸŒ’ xmoon.exchange

Exchange Reddit MOONs for ETH or DAI through xDAI. Learn about different πŸ›° providers and how πŸŒ‰ bridges can connect different chains with different security models.

πŸƒβ€β™‚οΈ SpeedRun πŸ“Ή

πŸ’Ύ Source Code


Obituary.space

Remember someone permanently on the blockchain. Write an obituary and upload a photo of a person and their memory will be encoded on the blockchain, forever.

![Obituary.space Demo](https://s3-us-west-2.amazonaws.com/acf-uploads/Ethereum_Transaction_Hash_Txhash_Details__Etherscan_2020-08-10_11-47-24.png | width=400)


^^^ ⛏ PR your πŸ— scaffold-eth project in above!!! ^^^


🧫 Building on Ethereum in 2020 (research)


⏱ Original Quickstart with TODO List:

First, you'll need NodeJS>=10 plus Yarn and Git installed.

πŸ’Ύ install:

git clone https://github.com/austintgriffith/scaffold-eth.git rad-new-dapp

cd rad-new-dapp

git checkout quickstart

yarn install

⌚️ This will take some time. How about a quick tour of the file structure with your favorite code editor?

πŸ’‘ Sometimes the install throws errors like "node-gyp", try the next step even if you see problems.
(You can also download the Apple command line tools to fix the warning.)


πŸŽ› frontend

yarn start

πŸ“ Edit your frontend App.jsx in packages/react-app/src and open http://localhost:3000


β›“ blockchain

yarn run chain

Note: You'll need to run this command in a new terminal window

πŸ›  Use this eth.build to double-check your local chain and account balances


βš™οΈ Compile your contracts:

yarn run compile

🚒 Deploy your contracts to the frontend:

yarn run deploy

πŸ” Watch for changes then compile, deploy, and hot reload the frontend:

yarn run watch

πŸ”₯ Your dapp hot reloads as you build your smart contracts and frontend together πŸ”₯


πŸ“ Edit your smart contract SmartContractWallet.sol in packages/buidler/contracts

🀑 There is a spelling error in packages/buidler/contracts/SmartContractWallet.sol!

πŸ€” Can you fix it and deploy the contract locally?

Deployed Contract

☒️ Warning: It is very important that you find SmartContractWallet.sol in packages/buidler/contracts because there are other contract folders and it can get confusing.

πŸ”¬Test your contracts by editing myTest.js in packages/buidler/contracts:

yarn run test

πŸ— List your local accounts:

yarn run accounts

πŸ’° Check account balance:

yarn run balance **YOUR-ADDRESS**

πŸ’Έ Send ETH:

yarn run send --from 0 --amount 0.5 --to **YOUR-ADDRESS**

πŸ”§ Configure πŸ‘·Buidler by editing buidler.config.js in packages/buidler


✨ The BuidlerEVM provides stack traces and console.log debugging for our contracts ✨


πŸƒβ€β™‚οΈ Speedrun (πŸŽ₯ 7 min):

speedrun


πŸ”¬ Smart Contract Sandbox:

πŸ’Ύ install:

git clone https://github.com/austintgriffith/scaffold-eth.git smart-contract-sandbox

cd smart-contract-sandbox

yarn install

βš™οΈ start

#run in original terminal window:
yarn start
#run in terminal window 2:
yarn run chain
#run in terminal window 3:
yarn run deploy

πŸ” Edit or rename your smart contract YourContract.sol in packages/buidler/contracts

πŸ“ Edit your frontend App.jsx in packages/react-app/src

πŸ“± Open http://localhost:3000 to see the app

☒️ Make sure are running your local chain yarn run chain and your contract is deployed with yarn run deploy

πŸ”₯ Try yarn run watch and as you change your Solidity, your frontend <Contract/> will hot reload to give you access to new variables and functions:

πŸ“½ Video Guide


πŸ” Web3 Providers:

The frontend has three different providers that provide different levels of access to different chains:

mainnetProvider: (read only) Infura connection to main Ethereum network (and contracts already deployed like DAI or Uniswap).

localProvider: local Buidler accounts, used to read from your contracts (.env file points you at testnet or mainnet)

injectedProvider: your personal MetaMask, WalletConnect via Argent, or other injected wallet (generates burner-provider on page load)


🐜 Ant.design is the UI library with components like the grids, menus, dates, times, buttons, etc.


β›‘ Helpers:

Transactor: The transactor returns a tx() function to make running and tracking transactions as simple and standardized as possible. We will bring in BlockNative's Notify library to track our testnet and mainnet transactions.

const tx = Transactor(props.injectedProvider, props.gasPrice);

Then you can use the tx() function to send funds and write to your smart contracts:

tx({
  to: readContracts[contractName].address,
  value: parseEther("0.001"),
});
tx(writeContracts["SmartContractWallet"].updateOwner(newOwner));

☒️ Warning: You will need to update the configuration for react-app/src/helpers/Transactor.js to use your BlockNative dappId


πŸ–‡ Hooks:

Commonly used Ethereum hooks located in packages/react-app/src/:

usePoller(fn, delay): runs a function on app load and then on a custom interval

usePoller(() => {
  //do something cool at start and then every three seconds
}, 3000);

useBalance(address, provider, [pollTime]): poll for the balance of an address from a provider

const localBalance = useBalance(address, localProvider);

useBlockNumber(provider,[pollTime]): get current block number from a provider

const blockNumber = useBlockNumber(props.provider);

useGasPrice([speed]): gets current "fast" price from ethgasstation

const gasPrice = useGasPrice();

useExchangePrice(mainnetProvider, [pollTime]): gets current price of Ethereum on the Uniswap exchange

const price = useExchangePrice(mainnetProvider);

useContractLoader(provider): loads your smart contract interface

const readContracts = useContractLoader(localProvider);
const writeContracts = useContractLoader(injectedProvider);

useContractReader(contracts, contractName, variableName, [pollTime]): reads a variable from your contract and keeps it in the state

const title = useContractReader(props.readContracts, contractName, "title");
const owner = useContractReader(props.readContracts, contractName, "owner");

useEventListener(contracts, contractName, eventName, [provider], [startBlock]): listens for events from a smart contract and keeps them in the state

const ownerUpdates = useEventListener(
  readContracts,
  contractName,
  "UpdateOwner",
  props.localProvider,
  1
);

πŸ“¦ Components:

Your commonly used React Ethereum components located in packages/react-app/src/:


πŸ“¬ <Address />: A simple display for an Ethereum address that uses a Blockie, lets you copy, and links to Etherescan.

  <Address value={address} />
  <Address value={address} size="short" />
  <Address value={address} size="long" blockexplorer="https://blockscout.com/poa/xdai/address/"/>
  <Address value={address} ensProvider={mainnetProvider}/>

ensaddress


πŸ–‹ <AddressInput />: An input box you control with useState for an Ethereum address that uses a Blockie and ENS lookup/display.

  const [ address, setAddress ] = useState("")
  <AddressInput
    value={address}
    ensProvider={props.ensProvider}
    onChange={(address)=>{
      setAddress(address)
    }}
  />

TODO GIF


πŸ’΅ <Balance />: Displays the balance of an address in either dollars or decimal.

<Balance
  address={address}
  provider={injectedProvider}
  dollarMultiplier={price}
/>

balance



πŸ‘€ <Account />: Allows your users to start with an Ethereum address on page load but upgrade to a more secure, injected provider, using Web3Modal. It will track your address and localProvider in your app's state:

const [address, setAddress] = useState();
const [injectedProvider, setInjectedProvider] = useState();
const price = useExchangePrice(mainnetProvider);
<Account
  address={address}
  setAddress={setAddress}
  localProvider={localProvider}
  injectedProvider={injectedProvider}
  setInjectedProvider={setInjectedProvider}
  dollarMultiplier={price}
/>

account

πŸ’‘ Notice: the <Account /> component will call setAddress and setInjectedProvider for you.

☒️ Warning: You will need to update the configuration for Web3Modal to use your Infura Id



πŸ“‘ <Provider />: You can choose to display the provider connection status to your users with:

<Provider name={"mainnet"} provider={mainnetProvider} />
<Provider name={"local"} provider={localProvider} />
<Provider name={"injected"} provider={injectedProvider} />

providere

πŸ’‘ Notice: you will need to check the network id of your injectedProvider compared to your localProvider or mainnetProvider and alert your users if they are on the wrong network!


πŸ“„ Smart Contract Wallet:

πŸ“ Edit your smart contract SmartContractWallet.sol in packages/buidler/contracts

πŸ“ Then edit the SmartContractWallet.js React component in packages/react-app/src

▢️ Run yarn run compile and yarn run deploy or just yarn run watch

smortcontractwallet

πŸ›  Run this eth.build with your contract address to ask it who its owner is.


πŸ“š OpenZeppelin Contracts -- TODO

You can import any of the OpenZeppelin contracts:

import "@openzeppelin/contracts/token/ERC20/IERC20.sol";

πŸ›° The Graph -- TODO

⛽️ GSN -- TODO


πŸ“€ Save to your Git

Create a new repo with the same name as this project and then:

git remote add origin https://github.com/**YOUR_GITHUB_USERNAME**/**YOUR_COOL_PROJECT_NAME**.git
git push -u origin master

πŸ›³ Ship it!

You can deploy your static site and your dapp can go live:

yarn run build

# ship it!

yarn run surge

OR

yarn run s3

OR

yarn run ipfs