🏗 Nifty League

🏄‍♂️ Quick Start

Prerequisites: Node lts/fermium plus Yarn and Git

define your target network and api keys in your env files:

Check packages/hardhat/.sample.env and packages/react-app/.sample.env

install and start your 👷‍ Hardhat chain:

yarn && yarn chain

in a second terminal window, start your 📱 frontend:

yarn start

Note: if you want to run subgraph locally skip to the next step

in a third terminal, deploy your contracts

yarn deploy

---

If you wish to turn on Subgraph for our characters and wallet pages:

in a third terminal window, make sure Docker is open and spin up a local graph node:

yarn clean-graph-node # if you need to clean up previous data
yarn graph-run-node

once GraphQL WebSocket is live, in a fourth terminal window, 🛰 create and deploy your local subgraph and contracts:

yarn graph-create-local
yarn deploy-and-graph-local

---

🔏 Edit your smart contracts in packages/hardhat/contracts

📝 Edit your frontend in packages/react-app/src

💼 Edit your deployment scripts in packages/hardhat/deploy

🛰 Edit your subgraph in packages/subgraph/src

📱 Open http://localhost:3000 to see the app

📡 Open http://localhost:8000/subgraphs/name/nifty-league/graphql to run queries

👾 Debug contract transactions on tenderly https://dashboard.tenderly.co/contract/rinkeby/<CONTRACT_ADDRESS>

---

📡 Deploying Subgraph

make sure .env files point to your target network

deploy contracts to update subgraph configs if needed:

yarn deploy

authorize deploy key if not done already:

cd packages/subgraph/
graph auth

You will be prompted to select a product and enter a deploy key which you can get here: https://thegraph.com/studio/subgraph. Make sure the subgraph-studio option is selected.

generate and build the subgraph:

yarn graph-ship

deploy the subgraph:

cd packages/subgraph/
graph deploy nifty-league

You will be prompted to select a product and version. Make sure the subgraph-studio product option is selected and then grab the version from the specVersion in packages/subgraph/subgraph.yaml

---

TypeScript

We use TypeScript for our React app and plan on converting the remaining hardhat app soon as well!

Read the ts-migrate docs for help migrating files or temporarily ignoring problem types

example command:

cd packages/react-app/
npm run ts-migrate -- migrate .

To help convert our contract ABIs for type checking we use Typechain.
This plugin overrides the hardhat compile task and automatically generates new Typechain artifacts on each compilation at react-app/src/@types/contracts

For additional resources learning TypeScript check out the typescript-cheatsheets/react and the typescript-book!

---

📚 Documentation

Documentation, tutorials, challenges, and many more resources, visit: docs.scaffoldeth.io

🔭 Learning Solidity

📕 Read the docs: https://docs.soliditylang.org

📚 Go through each topic from solidity by example

• Primitive Data Types
• Mappings
• Structs
• Modifiers
• Events
• Inheritance
• Payable
• Fallback

📧 Learn the Solidity globals and units

🗒️ Read through the Ethers API docs for common web3 commands you'll need

📝 Check out this Guide to Full Stack Eth Development which uses our exact stack only without TypeScript :p

💬 Support Chat

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

---

🎛 Any web3 dev environment is complex, that's why 🏗 Scaffold-ETH comes with everything you need, already working together:

• Hardhat for your local blockchain, deploying, and testing smart contracts.
• React for building a frontend, using many useful pre-made components and hooks.
• Ant for your UI. (You can easily changed to another library you prefer)
• S3 / IPFS for publishing your app.
• Tenderly / The Graph / Etherscan / Infura / Blocknative for infrastructure.
• Support for L2 / Sidechains like Optimism and Arbitrum.

---