](https://github.com/austintgriffith/scaffold-eth#-smart-contract-sandbox)
Learn how to [quickly iterate on a smart contract app](https://github.com/austintgriffith/scaffold-eth#-smart-contract-sandbox) using the \ component.
---
Join the telegram [support chat π¬](https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA) to ask questions and find others building with π scaffold-eth!
---
[](https://www.youtube.com/watch?v=ShJZf5lsXiM&feature=youtu.be&t=19)
---
π₯. [Watch the long form π scaffold-eth introduction on youtube for the EEA](https://youtu.be/_yRX8Qi75OE?t=289).
[](https://youtu.be/_yRX8Qi75OE?t=289)
---
[
Tutorial 1: π Programming Decentralized Money
](https://medium.com/@austin_48503/programming-decentralized-money-300bacec3a4f)
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](https://youtu.be/7rq3TPL-tgI)
---
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)
---
[
](https://medium.com/@austin_48503/%EF%B8%8F-minimum-viable-exchange-d84f30bd0c90)
Learn the basics of Automated Market Makers like π¦ Uniswap. Learn how π°Reserves affect the π price, βοΈ trading, and π¦ slippage from low liqudity.
[πββοΈ SpeedRun πΉ](https://youtu.be/eP5w6Ger1EQ)
---
[
Tutorial 4: π Connecting ETH to IPFS
](https://medium.com/@austin_48503/tl-dr-scaffold-eth-ipfs-20fa35b11c35)
Build a simple IPFS application in π scaffold-eth to learn more about distributed file storage and content addressing.
[π₯ Live Tutorial](https://youtu.be/vqrLr5eOjLo?t=342)
---
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
](https://medium.com/@austin_48503/decentralized-deployment-7d975c9d5016)
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](https://youtu.be/vqrLr5eOjLo?t=1350)
---
](https://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 ](https://github.com/austintgriffith/scaffold-eth/tree/nifty-ink-dev)
---
[
π§ββοΈ Instant Wallet
](https://instantwallet.io)
An instant wallet running on xDAI insired by [xdai.io](https://xdai.io).
[πΎ Source Code ](https://github.com/austintgriffith/scaffold-eth/tree/instantwallet-dev-session)
---
[
π³ Personal Token Voting
](https://medium.com/@austin_48503/personal-token-voting-73b44a598d8e)
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 πΉ ](https://youtu.be/Q5zgxcQtwWI)
[πΎ Source Code ](https://github.com/austintgriffith/scaffold-eth/tree/emoji-vote-dev)
---
[
π xmoon.exchange
](https://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 πΉ ](https://www.youtube.com/watch?v=_ikHSyThDiA)
[πΎ Source Code ](https://github.com/austintgriffith/scaffold-eth/tree/xmoon-dev)
---
[
Obituary.space
](https://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!!! ^^^
---
[
𧫠Building on Ethereum in 2020 (research)
](https://medium.com/@austin_48503/building-on-ethereum-in-2020-dca52eda5f00)
---
## β± Original Quickstart with TODO List:
First, you'll need [NodeJS>=10](https://nodejs.org/en/download/) plus [Yarn](https://classic.yarnpkg.com/en/docs/install/) and [Git](https://git-scm.com/downloads) installed.
πΎ install:
```bash
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](https://developer.apple.com/download/more/) to fix the warning.)
---
π frontend
```bash
yarn start
```
π Edit your frontend `App.jsx` in `packages/react-app/src` and open http://localhost:3000
---
β blockchain
```bash
yarn run chain
```
**Note**: You'll need to run this command in a new terminal window
> π [Use this eth.build](https://eth.build/build#1a21b864c6bcdb901070b64965fae825cdfc11b1915d74f058f00b114a8c129a) to double-check your local chain and account balances
---
βοΈ Compile your contracts:
```bash
yarn run compile
```
π’ Deploy your contracts to the frontend:
```bash
yarn run deploy
```
π _Watch_ for changes then compile, deploy, and hot reload the frontend:
```bash
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?
> β’οΈ **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`:
```bash
yarn run test
```
π List your local accounts:
```bash
yarn run accounts
```
π° Check account balance:
```bash
yarn run balance **YOUR-ADDRESS**
```
πΈ Send ETH:
```bash
yarn run send --from 0 --amount 0.5 --to **YOUR-ADDRESS**
```
> π§ Configure π·[Buidler](https://buidler.dev/config/) by editing `buidler.config.js` in `packages/buidler`
---
β¨ The [BuidlerEVM](https://buidler.dev/buidler-evm/) provides _stack traces_ and _console.log_ debugging for our contracts β¨
---
## πββοΈ Speedrun (π₯ 7 min):
[](https://youtu.be/eUAc2FtC0_s)
---
## π¬ Smart Contract Sandbox:
πΎ install:
```bash
git clone https://github.com/austintgriffith/scaffold-eth.git smart-contract-sandbox
cd smart-contract-sandbox
yarn install
```
βοΈ start
```bash
#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 \ will hot reload to give you access to new variables and functions:
π½ [Video Guide](https://youtu.be/ShJZf5lsXiM?t=34)
π RTFM: Check out [solidity by example](https://solidity-by-example.org) and check out the [Solidity globals and units](https://solidity.readthedocs.io/en/v0.4.24/units-and-global-variables.html)
π Good luck, and go get 'em!
---
## π Web3 Providers:
The frontend has three different providers that provide different levels of access to different chains:
`mainnetProvider`: (read only) [Infura](https://infura.io/) connection to main [Ethereum](https://ethereum.org/developers/) network (and contracts already deployed like [DAI](https://etherscan.io/address/0x6b175474e89094c44da98b954eedeac495271d0f#code) or [Uniswap](https://etherscan.io/address/0x2a1530c4c41db0b0b2bb646cb5eb1a67b7158667)).
`localProvider`: local [Buidler](https://buidler.dev/) accounts, used to read from _your_ contracts (`.env` file points you at testnet or mainnet)
`injectedProvider`: your personal [MetaMask](https://metamask.io/download.html), [WalletConnect](https://walletconnect.org/apps) via [Argent](https://www.argent.xyz/), or other injected wallet (generates [burner-provider](https://www.npmjs.com/package/burner-provider) on page load)
---
π [Ant.design](https://ant.design/components/button/) is the UI library with components like the [grids](https://ant.design/components/grid/), [menus](https://ant.design/components/menu/), [dates](https://ant.design/components/date-picker/), [times](https://ant.design/components/time-picker/), [buttons](https://ant.design/components/button/), 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](https://www.blocknative.com/notify) library to track our testnet and mainnet transactions.
```js
const tx = Transactor(props.injectedProvider, props.gasPrice);
```
Then you can use the `tx()` function to send funds and write to your smart contracts:
```js
tx({
to: readContracts[contractName].address,
value: parseEther("0.001"),
});
```
```js
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](https://www.blocknative.com/notify)
---
## π 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
```jsx
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
```js
const localBalance = useBalance(address, localProvider);
```
`useBlockNumber(provider,[pollTime])`: get current block number from a provider
```js
const blockNumber = useBlockNumber(props.provider);
```
`useGasPrice([speed])`: gets current "fast" price from [ethgasstation](https://ethgasstation.info)
```js
const gasPrice = useGasPrice();
```
`useExchangePrice(mainnetProvider, [pollTime])`: gets current price of Ethereum on the Uniswap exchange
```js
const price = useExchangePrice(mainnetProvider);
```
`useContractLoader(provider)`: loads your smart contract interface
```js
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
```js
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
```js
const ownerUpdates = useEventListener(
readContracts,
contractName,
"UpdateOwner",
props.localProvider,
1
);
```
---
## π¦ Components:
Your commonly used React Ethereum components located in `packages/react-app/src/`:
π¬ ``: A simple display for an Ethereum address that uses a [Blockie](https://www.npmjs.com/package/ethereum-blockies), lets you copy, and links to [Etherescan](https://etherscan.io/).
```jsx
```
π ``: An input box you control with useState for an Ethereum address that uses a [Blockie](https://www.npmjs.com/package/ethereum-blockies) and ENS lookup/display.
```jsx
const [ address, setAddress ] = useState("")
{
setAddress(address)
}}
/>
```
TODO GIF
π΅ ``: Displays the balance of an address in either dollars or decimal.
```jsx
```
π€ ``: Allows your users to start with an Ethereum address on page load but upgrade to a more secure, injected provider, using [Web3Modal](https://web3modal.com/). It will track your `address` and `localProvider` in your app's state:
```jsx
const [address, setAddress] = useState();
const [injectedProvider, setInjectedProvider] = useState();
const price = useExchangePrice(mainnetProvider);
```
```jsx
```
> π‘ **Notice**: the `` component will call `setAddress` and `setInjectedProvider` for you.
> β’οΈ **Warning**: You will need to update the configuration for `Web3Modal` to use _your_ [Infura Id](https://infura.io/login)
π‘ ``: You can choose to display the provider connection status to your users with:
```jsx
```
> π‘ **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`
> π Run [this eth.build](https://eth.build/build#32f1ecd6d90518387f2f34c47176bf67fdf55c855bff39f85de08d76696b850f) with your contract address to ask it who its owner is.
---
π OpenZeppelin Contracts -- TODO
You can import any of the [OpenZeppelin contracts](https://github.com/OpenZeppelin/openzeppelin-contracts/tree/master/contracts):
```jsx
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:
```bash
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:
```bash
yarn run build
# ship it!
yarn run surge
OR
yarn run s3
OR
yarn run ipfs
```