scaffold-eth

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

austintgriffith/scaffold-eth
starsStars 460
forksForks 189
watchersWatchers 460
current-versionCurrent version testy
total-releasesTotal releases 1
open_issues_countOpen issues 21
dateFirst release 2020-05-04
dateLatest release 2020-05-04
updateLast update 2020-12-23

quickstart

git clone https://github.com/austintgriffith/scaffold-eth.git your-next-dapp

cd your-next-dapp
yarn install
yarn start

in a second terminal window:

yarn chain

in a third terminal window:

yarn deploy

๐Ÿ” Edit your smart contract YourContract.sol in packages/hardhat/contracts

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

๐Ÿ“ฑ Open http://localhost:3000 to see the app

๐Ÿ“š Keep Solidity globals and units

With everything up your dev environment starts looking something like this:

React dev server, HardHat blockchain, deploy terminal, code IDE, and frontend browser.


๐Ÿ” You can yarn run deploy any time and get a fresh new contract in the frontend:


๐Ÿ’ต. Each browser has an account in the top right and you can use the faucet (bottom left) to get โ›ฝ๏ธ testnet eth for gas:


๐Ÿ”จ Once you have funds, you can call setPurpose on your contract and "write" to the purpose storage:


Look for the HardHat console.log() output in the yarn run chain terminal:


๐Ÿ‘จโ€๐Ÿซ Maybe start super simple and add a counter uint8 public count = 1;

โฌ‡๏ธ Then a function dec() public {} that does a count = count - 1;


๐Ÿ”ฌ What happens when you subtract 1 from 0? Try it out in the app to see what happens!

๐Ÿšฝ UNDERFLOW!

๐Ÿงซ You can iterate and learn as you go. Test your assumptions!


๐Ÿ’ต Send testnet ETH between browsers or even on an instantwallet.io selecting localhost:


๐Ÿ” Global variables like msg.sender and msg.value are cryptographically backed and can be used to make rules

๐Ÿ“ Keep this cheat sheet handy

โณ Maybe we could use block.timestamp or block.number to track time in our contract

๐Ÿ” Or maybe keep track of an address public owner; then make a rule like require( msg.sender == owner ); for an important function

๐Ÿงพ Maybe create a smart contract that keeps track of a mapping ( address => uint256 ) public balance;

๐Ÿฆ It could be like a decentralized bank that you function deposit() public payable {} and withdraw()

๐Ÿ“Ÿ Events are really handy for signaling to the frontend. Read more about events here.

๐Ÿ“ฒ Spend some time in App.jsx in packages/react-app/src and learn about the ๐Ÿ›ฐ Providers

โš ๏ธ Big numbers are stored as objects: formatEther and parseEther (ethers.js) will help with WEI->ETH and ETH->WEI.

๐Ÿงณ The single page (searchable) ethers.js docs are pretty great too.

๐Ÿœ The UI framework Ant Design has a bunch of great components.

๐Ÿ“ƒ Check the console log for your app to see some extra output from hooks like useContractReader and useEventListener.

๐Ÿ— You'll notice the <Contract /> component that displays the dynamic form as scaffolding for interacting with your contract.

๐Ÿ”ฒ Try making a <Button/> that calls writeContracts.YourContract.setPurpose("๐Ÿ‘‹ Hello World") to explore how your UI might work...

๐Ÿ’ฌ Wrap the call to writeContracts with a tx() helper that uses BlockNative's Notify.js.

๐Ÿงฌ Next learn about structs in Solidity.

๐Ÿ—ณ Maybe an make an array YourStructName[] public proposals; that could call be voted on with function vote() public {}

๐Ÿ”ญ Your dev environment is perfect for testing assumptions and learning by prototyping.

๐Ÿ“ Next learn about the fallback function

๐Ÿ’ธ Maybe add a receive() external payable {} so your contract will accept ETH?

๐Ÿš OH! Programming decentralized money! ๐Ÿ˜Ž So rad!

๐Ÿ›ฐ Ready to deploy to a testnet? Change the defaultNetwork in packages/hardhat/hardhat.config.js

๐Ÿ” Generate a deploy account with yarn generate and view it with yarn account

๐Ÿ”‘ Create wallet links to your app with yarn wallet and yarn fundedwallet

๐Ÿ‘ฉโ€๐ŸŽ“ You can "graduate" from ๐Ÿ— scaffold-eth and start using ๐Ÿ‘ท

( You will probably want to take some of the ๐Ÿ”— eth-hooks )

๐Ÿš€ Good luck!


๐Ÿ”ฌ Smart Contract Sandbox

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


Join the telegram ๐Ÿ— scaffold-eth!



๐ŸŽฅ. ๐Ÿ— scaffold-eth introduction on youtube for the EEA.


๐Ÿ›  Programming Decentralized Money

Learn the basics of ๐Ÿ— scaffold-eth and building on Ethereum. ๐Ÿ‘ทโ€โ™‚๏ธ HardHat, ๐Ÿ“ฆ create-eth-app, ๐Ÿ”ฅ hot reloading smart contracts, ๐Ÿ›ฐ providers, ๐Ÿ”— hooks, ๐ŸŽ› components, and building a decentralized application. ๐ŸŽฅ Guided Tutorial


โš–๏ธ 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.

๐Ÿ“น


๐Ÿš€ Connecting ETH to IPFS

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


๐Ÿ›ฐ 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


๐Ÿ“ก Using The Graph 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


๐Ÿง™โ€โ™‚๏ธ Instant Wallet

An instant wallet running on xDAI insired by xdai.io.

๐Ÿ’พ 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.

๐Ÿ“น

๐Ÿ’พ 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.

๐Ÿ“น

๐Ÿ’พ 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.


^^^ โ› PR your ๐Ÿ— scaffold-eth project in above!!! ^^^



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/hardhat/contracts

๐Ÿคก There is a spelling error in packages/hardhat/contracts/SmartContractWallet.sol!

๐Ÿค” Can you fix it and deploy the contract locally?

โ˜ข๏ธ Warning: It is very important that you find SmartContractWallet.sol in packages/hardhat/contracts because there are other contract folders and it can get confusing.

๐Ÿ”ฌTest your contracts by editing myTest.js in packages/hardhat/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 ๐Ÿ‘ทHardHat by editing hardhat.config.js in packages/hardhat


โœจ The โœจ



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

๐Ÿ“š RTFM: Check out Solidity globals and units

๐Ÿš€ Good luck, and go get 'em!


Uniswap).

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

injectedProvider: your personal burner-provider on page load)


๐Ÿœ buttons, etc.


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


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
);

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}/>


๐Ÿ–‹ <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}
/>



๐Ÿ‘ค <Account />: Allows your users to start with an Ethereum address on page load but upgrade to a more secure, injected provider, using

<Account
  address={address}
  setAddress={setAddress}
  localProvider={localProvider}
  injectedProvider={injectedProvider}
  setInjectedProvider={setInjectedProvider}
  dollarMultiplier={price}
/>

๐Ÿ’ก 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} />

๐Ÿ’ก 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!


๐Ÿ›  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 -- ๐ŸŽฅ speed run tutorial video

โ›ฝ๏ธ GSN -- See Nifty.ink!