https://github.com/scaffold-eth/buidlguidl.com
(OLD) The home of the Buidl Guidl 🏰
https://github.com/scaffold-eth/buidlguidl.com
Last synced: about 2 months ago
JSON representation
(OLD) The home of the Buidl Guidl 🏰
- Host: GitHub
- URL: https://github.com/scaffold-eth/buidlguidl.com
- Owner: scaffold-eth
- License: mit
- Created: 2021-11-12T23:05:56.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T16:46:31.000Z (about 2 years ago)
- Last Synced: 2025-03-25T09:49:26.412Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 15.5 MB
- Stars: 7
- Watchers: 6
- Forks: 8
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🏗 scaffold-eth
> is everything you need to get started building decentralized applications on Ethereum! 🚀
---
#### [ 🏃♀️ Quick Start ](https://github.com/austintgriffith/scaffold-eth#%EF%B8%8F-quick-start)
#### [ 🔭 Learning Solidity ](https://github.com/austintgriffith/scaffold-eth#-learning-solidity)
#### [ 📡 Deploy ](https://github.com/austintgriffith/scaffold-eth#-deploy)
#### [ 📺 Frontend](https://github.com/austintgriffith/scaffold-eth#-frontend)
- [ 🛰 Providers ](https://github.com/austintgriffith/scaffold-eth#-providers)
- [ 🖇 Hooks ](https://github.com/austintgriffith/scaffold-eth#-hooks)
- [ 📦 Components ](https://github.com/austintgriffith/scaffold-eth#-components)
- [ 🖲 UI Library ](https://github.com/austintgriffith/scaffold-eth#-ui-library)
- [ ⛑ Helpers ](https://github.com/austintgriffith/scaffold-eth#-helpers)
- [ 🎚 Extras ](https://github.com/austintgriffith/scaffold-eth#-extras)
- [ 🛳 Ship it! ](https://github.com/austintgriffith/scaffold-eth#-ship-it)
#### [ 🚩 Challenges ](https://github.com/austintgriffith/scaffold-eth#-challenges)
- [ 🥩 Staking App](https://github.com/austintgriffith/scaffold-eth/tree/challenge-1-decentralized-staking)
- [ 🏵 Token Vendor ](https://github.com/austintgriffith/scaffold-eth/tree/challenge-2-token-vendor)
#### [ 👩💻 Examples & Tutorials ](https://github.com/austintgriffith/scaffold-eth#-examples-and-tutorials)
- [ 🎟 Simple NFT ](https://github.com/austintgriffith/scaffold-eth/tree/simple-nft-example)
#### [ Built with 🏗 scaffold-eth ](https://github.com/austintgriffith/scaffold-eth#-built-with--scaffold-eth)
- [ 🎨 Nifty.ink ](https://nifty.ink) ([code](https://github.com/austintgriffith/scaffold-eth/tree/nifty-ink-dev))
- [ 🧑🎤PunkWallet.io ](https://punkwallet.io/) ([code](https://github.com/austintgriffith/scaffold-eth/tree/punk-wallet))
#### [🌉 Infrastructure ](https://github.com/austintgriffith/scaffold-eth#-infrastructure)
- [ 🛰 The Graph ](https://github.com/austintgriffith/scaffold-eth#-using-the-graph)
- [ 🔬 Tenderly ](https://github.com/austintgriffith/scaffold-eth#-using-tenderly)
- [ 🌐 Etherscan ](https://github.com/austintgriffith/scaffold-eth#-etherscan)
- [ 🔶 Infura ](https://github.com/austintgriffith/scaffold-eth#-using-infura)
- 🟪 [ Blocknative ](https://github.com/austintgriffith/scaffold-eth#-blocknative)
|- [ 📠 Legacy Content ](https://github.com/austintgriffith/scaffold-eth#-legacy-content) - | - [ 💬 Support Chat ](https://github.com/austintgriffith/scaffold-eth#-support-chat) -|
[](https://gitpod.io/#https://github.com/austintgriffith/scaffold-eth)
---
[](https://youtu.be/33gnKe7ttCc?t=477)
---
---
---
# 🏃♀️ Quick Start
required: [Node](https://nodejs.org/dist/latest-v12.x/) plus [Yarn](https://classic.yarnpkg.com/en/docs/install/) and [Git](https://git-scm.com/downloads)
```bash
git clone https://github.com/austintgriffith/scaffold-eth.git
cd scaffold-eth
```
```bash
yarn install
```
```bash
yarn start
```
> in a second terminal window:
```bash
cd scaffold-eth
yarn chain
```
> in a third terminal window:
```bash
cd scaffold-eth
yarn deploy
```
🔏 Edit your smart contract `YourContract.sol` in `packages/hardhat/contracts`
📝 Edit your frontend `App.jsx` in `packages/react-app/src`
💼 Edit your deployment script `deploy.js` in `packages/hardhat/scripts`
📱 Open http://localhost:3000 to see the app
🏗 scaffold-eth is a hackthon stack for quick product prototyping on Ethereum.
👩🔬 This scaffolding leverages state of the art tooling from the ecosystem.
🧪 It is a free standing dapp so you can learn by making small changes.
> *After installing*, your dev environment should look like this:
> React dev server, HardHat blockchain, deploy terminal, code IDE, and frontend browser.
✏️ Make small changes to `YourContract.sol` and watch your app auto update!
🔁 You can `yarn 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](https://hardhat.org) console.log() output in the `yarn chain` terminal:
> ⚗️ Spend some time tinkering with `YourContract.sol`
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
# 🔭 Learning Solidity
📕 Read the docs: https://docs.soliditylang.org
📚 Go through each topic from [solidity by example](https://solidity-by-example.org) editing `YourContract.sol` in **🏗 scaffold-eth**
- [Primitive Data Types](https://solidity-by-example.org/primitives/)
- [Mappings](https://solidity-by-example.org/mapping/)
- [Structs](https://solidity-by-example.org/structs/)
- [Modifiers](https://solidity-by-example.org/function-modifier/)
- [Events](https://solidity-by-example.org/events/)
- [Inheritance](https://solidity-by-example.org/inheritance/)
- [Payable](https://solidity-by-example.org/payable/)
- [Fallback](https://solidity-by-example.org/fallback/)
📧 Learn all the [Solidity globals and units](https://solidity.readthedocs.io/en/v0.6.6/units-and-global-variables.html)
👨🏫 Start super simple with 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!?! (🚑 [Solidity >0.8.0](https://docs.soliditylang.org/en/v0.8.0/) will catch this!)
🧫 You can iterate and learn as you go. Test your assumptions!
🔐 Global variables like `msg.sender` and `msg.value` are cryptographically backed and can be used to make rules
📝 Keep this [cheat sheet](https://solidity.readthedocs.io/en/v0.7.0/cheatsheet.html?highlight=global#global-variables) 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.](https://solidity-by-example.org/0.6/events/)
📲 Spend some time in `App.jsx` in `packages/react-app/src` and learn about the 🛰 [Providers](https://github.com/austintgriffith/scaffold-eth#-web3-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](https://docs.ethers.io/v5/single-page/) are pretty great too.
🐜 The UI framework `Ant Design` has a [bunch of great components](https://ant.design/components/overview/).
📃 Check the console log for your app to see some extra output from hooks like `useContractReader` and `useEventListener`.
🏗 You'll notice the `` component that displays the dynamic form as scaffolding for interacting with your contract.
🔲 Try making a `` 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](https://www.blocknative.com/notify).
🧬 Next learn about [structs](https://solidity-by-example.org/0.6/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](https://solidity-by-example.org/0.6/fallback/)
💸 Maybe add a `receive() external payable {}` so your contract will accept ETH?
🚁 OH! Programming decentralized money! 😎 So rad!
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
# 📡 Deploy
🛰 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`
💵 Fund your deployer account (pro tip: use an [instant wallet](https://instantwallet.io) to send funds to the QR code from `yarn account`)
> Deploy your contract:
```bash
yarn deploy
```
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
# 📺 Frontend
> Edit your frontend `App.jsx` in `packages/react-app/src`
📡 Make sure your `targetNetwork` is the same as 👷♀️ HardHat's `defaultNetwork` (where you deployed your contracts).
🤡 Adjust your debugging settings as needed:
---
## 🔏 Providers:
Providers are your connections to different blockchains.
The frontend has three different providers that provide different levels of access to different chains:
`mainnetProvider`: (read only) [Alchemy](https://alchemyapi.io/) or [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 [HardHat](https://hardhat.org) 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)
---
## 🖇 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)
}}
/>
```
💵 ``: 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.
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
## 🖲 UI Library
🐜 [Ant.design](https://ant.design/components/button/) is a fantastic 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)
---
## 🎚 Extras:
🔑 Create wallet links to your app with `yarn wallet` and `yarn fundedwallet`
⬇️ Installing a new package to your frontend? You need to `cd packages/react-app` and then `yarn add PACKAGE`
⬇️ Installing a new package to your backend? You need to `cd packages/harthat` and then `yarn add PACKAGE`
---
## 🛳 Ship it!
You can deploy your app with:
```bash
# packge up the static site:
yarn build
# ship it!
yarn surge
OR
yarn s3
OR
yarn ipfs
```
🚀 Good luck!
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
## 🚩 Challenges
1. [ 🥩 Decentralized Staking App ](https://github.com/austintgriffith/scaffold-eth/tree/challenge-1-decentralized-staking)
2. [ 🏵 Token Vendor ](https://github.com/austintgriffith/scaffold-eth/tree/challenge-2-token-vendor)
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
## 📡 Examples and Tutorials
(todo: insert all the cool active branches)
| [ tenderly ](https://github.com/austintgriffith/scaffold-eth/tree/tenderly) |
| --- |
| [ simple-nft-example ](https://github.com/austintgriffith/scaffold-eth/tree/simple-nft-example) |
^^^ ⛏ PR your 🏗 scaffold-eth branch!!! 🙏🙏🙏 ^^^
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
# 🔨 Built with 🏗 scaffold-eth:
[
👩🎨 Nifty Ink
](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)
^^^ ⛏ PLEASE PR your 🏗 scaffold-eth project in above!!! 🙏🙏🙏 ^^^
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
# 📟 Infrastructure
---
## 🛰 Using The Graph
[
](https://youtu.be/T5ylzOTkn-Q)
[ 🎥 here is another Graph speed run tutorial video ](https://youtu.be/T5ylzOTkn-Q)
---
## 🔬 Using Tenderly
[Tenderly](https://tenderly.co) is a platform for monitoring, alerting and trouble-shooting smart contracts. They also have a hardhat plugin and CLI tool that can be helpful for local development!
Hardhat Tenderly [announcement blog](https://blog.tenderly.co/level-up-your-smart-contract-productivity-using-hardhat-and-tenderly/) for reference.
### Verifying contracts on Tenderly
scaffold-eth includes the hardhat-tenderly plugin. When deploying to any of the following networks:
```
["kovan","goerli","mainnet","rinkeby","ropsten","matic","mumbai","xDai","POA"]
```
You can verify contracts as part of the `deploy.js` script. We have created a `tenderlyVerify()` helper function, which takes your contract name and its deployed address:
```
await tenderlyVerify(
{contractName: "YourContract",
contractAddress: yourContract.address
})
```
Make sure your target network is present in the hardhat networks config, then either update the default network in `hardhat.config.js` to your network of choice or run:
```
yarn deploy --network NETWORK_OF_CHOICE
```
Once verified, they will then be available to view on Tenderly!
[](https://www.youtube.com/watch?v=c04rrld1IiE&t=47s)
#### Exporting local Transactions
One of Tenderly's best features for builders is the ability to [upload local transactions](https://dashboard.tenderly.co/tx/main/0xb8f28a9cace2bdf6d10809b477c9c83e81ce1a1b2f75f35ddd19690bbc6612aa/local-transactions) so that you can use all of Tenderly's tools for analysis and debugging. You will need to create a [tenderly account](https://tenderly.co/) if you haven't already.
Exporting local transactions can be done using the [Tenderly CLI](https://github.com/tenderly/tenderly-cli). Installing the Tenderly CLI:
```
brew tap tenderly/tenderly
brew install tenderly
```
_See alternative installation steps [here](https://github.com/tenderly/tenderly-cli#installation)_
You need to log in and configure for your local chain (including any forking information) - this can be done from any directory, but it probably makes sense to do under `/packages/hardhat` to ensure that local contracts are also uploaded with the local transaction (see more below!)
```
cd packages/hardhat
tenderly login
tenderly export init
```
You can then take transaction hashes from your local chain and run the following from the `packages/hardhat` directory:
```
tenderly export
```
Which will upload them to tenderly.co/dashboard!
Tenderly also allows users to debug smart contracts deployed to a local fork of some network (see `yarn fork`). To let Tenderly know that we are dealing with a fork, run the following command:
```
tenderly export init
```
CLI will ask you for your network's name and whether you are forking a public network. After choosing the right fork, your exporting will look something like this:
```
tenderly export --export-network
```
Note that `tenderly.yaml` file stores information about all networks that you initialized for exporting transactions. There can be multiple of them in a single file. You only need the `--export-network` if you have more than one network in your tenderly.yaml config!
**A quick note on local contracts:** if your local contracts are persisted in a place that Tenderly can find them, then they will also be uploaded as part of the local transaction `export`, which is one of the freshest features! We have added a call to `tenderly.persistArtifacts()` as part of the scaffold-eth deploy() script, which stores the contracts & meta-information in a `deployments` folder, so this should work out of the box.
Another pitfall when dealing with a local network (fork or not) is that you will not see the transaction hash if it fails. This happens because the hardhat detects an error while `eth_estimateGas` is executed. To prevent such behaviour, you can skip this estimation by passing a `gasLimit` override when making a call - an example of this is demonstrated in the `FunctionForm.jsx` file of the Contract component:
```
let overrides = {}
// Uncomment the next line if you want to skip the gas estimation for each transaction
// overrides.gasLimit = hexlify(1200000);
const returned = await tx(contractFunction(...args, overrides));
```
**One gotcha** - Tenderly does not (currently) support yarn workspaces, so any imported solidity contracts need to be local to `packages/hardhat` for your contracts to be exported. You can achieve this by using [`nohoist`](https://classic.yarnpkg.com/blog/2018/02/15/nohoist/) - this has been done for `hardhat` so that we can export `console.sol` - see the top-level `package.json` to see how!
```
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/hardhat",
"**/hardhat/**"
]
}
```
---
## 🌐 Etherscan
Hardhat has a truly wonderful [`hardhat-etherscan` plugin](https://www.npmjs.com/package/@nomiclabs/hardhat-etherscan) that takes care of contract verification after deployment. You need to add the following to your `hardhat.config.js` imports:
```
require("@nomiclabs/hardhat-etherscan");
```
Then add your etherscan API key to the module.exports:
```
etherscan: {
// Your API key for Etherscan
// Obtain one at https://etherscan.io/
apiKey: "YOUR-API-KEY-HERE"
}
```
Verifying is simple, assuming you are verifying a contract that you have just deployed from your hardhat setup - you just need to run the verify script, passing constructor arguments as an array if necessary (there is an example commented out in the `deploy.js`):
```
await run("verify:verify", {
address: yourContract.address,
// constructorArguments: args // If your contract has constructor arguments, you can pass them as an array
})
```
You only have to pass the contract because the plugin figures out which of the locally compiled contracts is the right one to verify. Pretty cool stuff!
---
## 🔶 Using Infura
You will need to update the `constants.js` in `packages/react-app/src` with [your own Infura ID](https://infura.io).
---
## 🟪 Blocknative
> update the `BLOCKNATIVE_DAPPID` in `packages/react-app/src/constants.js` with [your own Blocknative DappID](https://docs.blocknative.com/notify)
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---
---
## 📠 Legacy Content
[
🧫 Building on Ethereum in 2020 (research for this repo)
](https://medium.com/@austin_48503/building-on-ethereum-in-2020-dca52eda5f00)
[](https://www.youtube.com/watch?v=ShJZf5lsXiM&feature=youtu.be&t=19)
---
[
Tutorial 1: 🛠 Programming Decentralized Money
](https://medium.com/@austin_48503/programming-decentralized-money-300bacec3a4f)
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](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)
---
[
Tutorial 3: ⚖️ Minimum Viable Decentralized Exchange
](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 liquidity.
[🏃♀️ 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)
---
## 💬 Support Chat
Join the telegram [support chat 💬](https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA) to ask questions and find others building with 🏗 scaffold-eth!
---
===================================================== [⏫ back to the top ⏫](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)
---