smartcontractkit/full-blockchain-solidity-course-js
A UI-focused entry in TopGit's GitHub warehouse: smartcontractkit/full-blockchain-solidity-course-js, 14.0k stars, Frontend. Learn Blockchain, Solidity, and Full Stack Web3 Development with Javascript
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Snapshot
Top contributors
Show top contributors
Update: Head to Cyfrin Updraft
ℹ️ Important: This repo is no longer actively maintained as there have been changes in Hardhat tooling. The video is out of sync with the code, and you can still follow along with the video, but you will likely need to troubleshoot the changes in the tooling and dependencies. Note also that best practices have evolved since this video was made.
If you'd like to continue your training with more up-to-date material, you can take a look at Cyfrin Updraft. That content is developed with love by Patrick & Cyfrin <3. However note that Cyfrin Updraft training uses Foundry, not Hardhat, so there will be tooling changes involved.
Web3, Full Stack Solidity, Smart Contract & Blockchain - Beginner to Expert ULTIMATE Course | Javascript Edition
Welcome to the repository for the Ultimate Web3, Full Stack Solidity, and Smart Contract - Beginner to Expert Full Course | Javascript Edition FreeCodeCamp Course!
Link to video: https://www.youtube.com/watch?v=gyMwXuJrbJQ
All code references have both a javascript and a typescript edition.
Recommended Testnet: Sepolia
We have updated the repos to work with Sepolia due to Rinkeby and Kovan being sunset, and Goerli being a disaster. Let us know if any of the changes break stuff!
Testnet Faucets
Main Faucet: https://faucets.chain.link Backup Faucet: https://sepoliafaucet.com/
⚠️ All code associated with this course is for demo purposes only. They have not been audited and should not be considered production ready. Please use at your own risk.
Resources For This Course
Questions
- Github Discussions
- Ask questions and chat about the course here!
- Stack Exchange Ethereum
- Great place for asking technical questions about Ethereum
- StackOverflow
- Great place for asking technical questions overall
Table of Contents
Resources
- Testnet Faucets
- Resources For This Course
- Questions
- Table of Contents
Lesson 0: The Edge of the Rabbit Hole
- Welcome to the course!
- Best Practices
Lesson 1: Blockchain Basics
- What is a Blockchain? What does a blockchain do?
- The Purpose Of Smart Contracts
- Other Blockchain Benefits
- What have Smart Contracts done so far?
- Making Your First Transaction
- Gas I: Introduction to Gas
- How Do Blockchains Work?
- Signing Transactions
- Gas II
- High-Level Blockchain Fundamentals
Lesson 2: Welcome to Remix! Simple Storage
- Introduction
- Setting Up Your First Contract
- Basic Solidity: Types
- Basic Solidity: Functions
- Basic Solidity: Arrays & Structs
- Basic Solidity: Compiler Errors and Warnings
- Memory, Storage, Calldata (Intro)
- Mappings
- Deploying your First Contract
- The EVM & A Recap of Lesson 2
Lesson 3: Remix Storage Factory
- Introduction
- Basic Solidity: Importing Contracts into other Contracts
- Basic Solidity: Interacting with other Contracts
- Basic Solidity: Inheritance & Overrides
- Lesson 3 Recap
Lesson 4: Remix Fund Me
- Introduction
- Sending ETH Through a Function & Reverts
- Chainlink & Oracles
- Review of Sending ETH and working with Chainlink
- Interfaces & Price Feeds
- Importing from GitHub & NPM
- Floating Point Math in Solidity
- Basic Solidity: Arrays & Structs II
- Review of Interfacs, Importing from GitHub, & Math in Solidity
- Libraries
- SafeMath, Overflow Checking, and the "unchecked" keywork
- Basic Solidity: For Loop
- Basic Solidity: Resetting an Array
- Sending ETH from a Contract
- Basic Solidity: Constructor
- Basic Solidity: Modifiers
- Testnet Demo
- Advanced Solidity
- Immutable & Constant
- Custom Errors
- Receive & Fallback Functions
- Lesson 4 Recap
Lesson 5: Ethers.js Simple Storage
- Effective Debugging Strategies & Getting Help
- How to Debug Anything Video
- Installation & Setup
- Mac & Linux Setup
- Windows Setup
- Gitpod
- Local Development Introduction
- Optional Javascript Crash Courses
- Tiny Javascript Refresher
- Asynchronous Programming in Javascript
- Compiling our Solidity
- Ganache & Networks
- Introduction to Ethers.js
- A Note on the await Keyword
- Adding Transaction Overrides
- Transaction Receipts
- Sending a "raw" Transaction in Ethersjs
- Interacting with Contracts in Ethersjs
- Environment Variables
- Better Private Key Management
- Optional Prettier Formatting
- Deploying to a Testnet or a Mainnet
- Verifying on Block Explorers from the UI
- Alchemy Dashboard & The Mempool
- Lesson 5 Recap
- Typescript Ethers Simple Storage
Lesson 6: Hardhat Simple Storage
- Introduction
- Hardhat Setup
- Troubleshooting Hardaht Setup
- Hardhat Setup Continued
- Deploying SimpleStorage from Hardhat
- Networks in Hardhat
- Programatic Verification
- Interacting with Contracts in Hardhat
- Artifacts Troubleshooting
- Custom Hardhat Tasks
- Hardhat Localhost Node
- The Hardhat Console
- Hardhat Tests
- Hardhat Gas Reporter
- Solidity Coverage
- Hardhat Waffle
- Lesson 6 Recap
- Typescript Hardhat Simple Storage
Lesson 7: Hardhat Fund Me
- Introduction
- Hardhat Setup - Fund Me
- Linting
- Hardhat Setup - Fund Me - Continued
- Importing from NPM
- Hardhat Deploy
- Mocking
- Utils Folder
- Testnet Demo - Hardhat Fund Me
- Solidity Style Guide
- Testing Fund Me
- Breakpoints & Debugging
- Gas III:
- console.log & Debugging
- Testing Fund Me II
- Storage in Solidity
- Gas Optimizations using Storage Knowledge
- Solidity Chainlink Style Guide
- Storage Review
- Staging Tests
- Running Scripts on a Local Node
- Adding Scripts to your package.json
- Pushing to GitHub
- 🐸🐦 Tweet Me (add your repo in)!
Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
- Introduction
- How Websites work with Web3 Wallets
- HTML Setup
- Connecting HTML to Metamask
- Javascript in it's own file
- ES6 vs Nodejs
- Sending a transaction from a Website
- Resetting an Account in Metamask
- Listening for Events and Completed Transactions
- Input Forms
- Reading from the Blockchain
- Withdraw Function
- Lesson 8 Recap
- Optional Links
Lesson 9: Hardhat Smart Contract Lottery
- Introduction
- Hardhat Setup - Smart Contract Lottery
- Raffle.sol Setup
- Introduction to Events
- Events in Raffle.sol
- Introduction to Chainlink VRF
- Sub-Lesson: Chainlink VRF
- Implementing Chainlink VRF - Introduction
- Hardhat Shorthand
- Implementing Chainlink VRF - The Request
- Implementing Chainlink VRF - The FulFill
- Modulo
- Introduction to Chainlink Keepers
- Implementing Chainlink Keepers - checkUpkeep
- Enums
- Implementing Chainlink Keepers - checkUpkeep continued
- Implementing Chainlink Keepers - performUpkeep
- Code Cleanup
- Deploying Raffle.sol
- Mock Chainlink VRF Coordinator
- Continued
- Raffle.sol Unit Tests
- Testing Events & Chai Matchers
- Continued I
- Hardhat Methods & Time Travel
- Continued II
- Callstatic
- Continued III
- Massive Promise Test
- Continued IV
- Raffle.sol Staging Tests
- Testing on a Testnet
- Recommended LINK amounts for Sepolia Staging Test:
- Conclusion
- Typescript - Smart Contract Lottery
Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)
- Introduction
- Optional Sub-Lesson: Full Stack Development & Other Libraries
- NextJS Setup
- Manual Header I
- React Hooks
- Manual Header II
- useEffect Hook
- Local Storage
- isWeb3EnabledLoading
- web3uikit
- Introduction to Calling Functions in Nextjs
- Automatic Constant Value UI Updater
- runContractFunction
- useState
- Calling Functions in NextJS
- useNotification
- Reading & Displaying Contract Data
- A Note about
onSuccess - A Challenge to You
- Tailwind & Styling
- Introduction to Hosting your Site
- IPFS
- Hosting on IPFS
- Hosting on IPFS & Filecoin using Fleek
- Filecoin Overview
- Lesson 10 Recap
Lesson 11: Hardhat Starter Kit
Lesson 12: Hardhat ERC20s
- What is an ERC? What is an EIP?
- What is an ERC20?
- Manually Creating an ERC20 Token
- Creating an ERC20 Token with Openzeppelin
- Lesson 12 Recap
Lesson 13: Hardhat DeFi & Aave
- What is DeFi?
- What is Aave?
- Programatic Borrowing & Lending
- WETH - Wrapped ETH
- Forking Mainnet
- Depositing into Aave
- Borrowing from Aave
- Repaying with Aave
- Visualizing the Transactions
- Lesson 13 Recap
- Happy Bow-Tie Friday with Austin Griffith
- More DeFi Learnings:
Lesson 14: Hardhat NFTs (EVERYTHING you need to know about NFTs)
- What is an NFT?
- Code Overview
- Hardhat Setup
- Basic NFT
- Write Tests
- Random IPFS NFT
- Mapping Chainlink VRF Requests
- Creating Rare NFTs
- Setting the NFT Image
- Setting an NFT Mint Price
- Deploy Script
- Uploading Token Images with Pinata
- Uploading Token URIs (metadata) with Pinata
- Deploying
- Tests
- Dynamic SVG On-Chain NFT
- What is an SVG?
- Initial Code
- Base64 Encoding
- Advanced: EVM Opcodes, Encoding, and Calling
- abi.encode & abi.encodePacked
- Introduction to Encoding Function Calls Directly
- Introduction to Encoding Function Calls Recap
- Encoding Function Calls Directly
- Creating an NFT TokenURI on-Chain
- Making the NFT Dynamic
- Deploy Script
- Deploying the NFTs to a Testnet
- Lesson 14 Recap
Lesson 15: NextJS NFT Marketplace (If you finish this lesson, you are a full-stack MONSTER!)
- Introduction
- Part I: NFT Marketplace Contracts
- Hardhat Setup
- NftMarketplace.sol
- Reentrancy
- NftMarketplace.sol - Continued
- NftMarketplace.sol - Deploy Script
- NftMarketplace.sol - Tests
- NftMarketplace.sol - Scripts
- Part II: Moralis Front End
- What is Moralis?
- NextJS Setup
- Adding Tailwind
- Introduction to Indexing in Web3
- Connecting Moralis to our Local Hardhat Node
- Moralis Event Sync
- Reset Local Chain
- Moralis Cloud Functions
- Practice Resetting the Local Chain
- Moralis Cloud Functions II
- Querying the Moralis Database
- Rendering the NFT Images
- Update Listing Modal
- Buy NFT Listing
- Listing NFTs for Sale
- Part III: TheGraph Front End
- Introduction
- What is The Graph?
- Building a Subgraph
- Deploying our Subgraph
- Reading from The Graph
- Hosting our Dapp
Lesson 16: Hardhat Upgrades
- Upgradeable Smart Contracts Overview
- Types of Upgrades
- Delegatecall
- Small Proxy Example
- Transparent Upgradeable Smart Contract
Lesson 17: Hardhat DAOs
- Introduction
- What is a DAO?
- How to build a DAO
Lesson 18: Security & Auditing
- Introduction
- Slither
- Fuzzing and Eth Security Toolbox
- Closing Thoughts
More Resources
- Congratulations
- Where do I go now?
- Learning More
- Community
- Hackathons
- Where do I go now?
Lesson 0: The Edge of the Rabbit Hole
Welcome to the course!
⌨️ (00:00:00) Lesson 0: Welcome To Blockchain
Best Practices
- Follow the repository: While going through the course be 100% certain to follow along with the github repository. If you run into in an issue check the chronological-updates in the repo.
- Be Active in the community: Ask questions and engage with other developers going through the course in the discussions tab, be sure to go and say hello or gm! This space is different from the other industries, you don't have to be secretive; communicate, network and learn with others :)
- Learn at your own pace: It doesn't matter if it takes you a day, a week, a month or even a year. Progress >>> Perfection
- Take Breaks: You will exhaust your mind and recall less if you go all out and watch the entire course in one sitting. Suggested Strategy every 25 minutes take a 5 min break, and every 2 hours take a longer 30 min break
- Refer to Documentation: Things are constantly being updated, so whenever Patrick opens up some documentation, open it your end and maybe even have the code sample next to you.
Lesson 1: Blockchain Basics
⌨️ (00:09:05) Lesson 1: Blockchain Basics
What is a Blockchain? What does a blockchain do?
- Bitcoin Whitepaper
- Satoshi Nakamoto
- Ethereum Whitepaper
- Vitalik Buterin
- What is a Smart Contract?
- Nick Szabo
- Hybrid Smart Contracts
- Blockchain Oracles
- Terminology
- Web3
- What is a blockchain
The Purpose Of Smart Contracts
⌨️ (00:18:27) The Purpose of Smart Contracts
- 🎥 Original Video
- 🦬 My ETH Denver Talk
- 🍔 McDonalds Scandal
- ⛓ More on the evolution of agreements
- ✍️ What is a Smart Contract?
- 🧱 How does a blockchain work?
- 🔮 Chainlink & Oracles
Other Blockchain Benefits
⌨️ (00:30:41) Other Blockchain Benefits
- Decentralized
- Transparency & Flexibility
- Speed & Efficiency
- Security & Immutability
- Counterparty Risk Removal
- Trust Minimized Agreements
What have Smart Contracts done so far?
⌨️ (00:36:36) What have Smart Contracts done so far?
- DeFi
- Defi Llama
- Why DeFi is Important
- DAOs
- NFTs
Making Your First Transaction
⌨️ (00:39:17) Making Your First Transaction
- Metamask Download Link
- What is a Private Key?
- What is a Secret Phrase?
- Etherscan
- Sepolia Etherscan
- Sepolia Faucet (Check the link token contracts page)
- NOTE: The Chainlink documentation always has the most up to date faucets on their link token contracts page. If the faucet above is broken, check the chainlink documentation for the most up to date faucet.
- OR, use the Sepolia ETH Faucet, just be sure to swap your metamask to Sepolia!
Gas I: Introduction to Gas
⌨️ (00:58:59) Gas I: Introduction to Gas
- Gas and Gas Fees
- Wei, Gwei, and Ether Converter
- ETH Gas Station
How Do Blockchains Work?
⌨️ (01:05:32) How Do Blockchains Work
- What is a hash?
- Blockchain Demo
- Summary
Signing Transactions
⌨️ (01:22:55) Signing Transactions
- Public / Private Keys
- Layer 2 and Rollups
- Decentralized Blockchain Oracles
Gas II
⌨️ (01:30:22) Gas II: Block Rewards & EIP 1559
- Block Rewards
- Advanced Gas
- EIP 1559
- GWEI, WEI, and ETH
- ETH Converter
Gas II Summary
⌨️ (01:36:44) Gas II Summary
- Run Your Own Ethereum Node
High-Level Blockchain Fundamentals
[⌨️ (01:39:32) High-Level Blockchain Fundamentals]https://www.youtube.com/watch?v=gyMwXuJrbJQ&t=5972s()
- Consensus
- Proof of Stake
- Proof of Work
- Nakamoto Consensus
- Ethereum 2 (the merge)
🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed Blockchain Basics! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
Lesson 2: Welcome to Remix! Simple Storage
⌨️ (02:01:16) Lesson 2: Welcome to Remix! Simple Storage
💻 Code: https://github.com/PatrickAlphaC/simple-storage-fcc
Introduction
⌨️ (02:03:05) Introduction
- Remix
- Solidity Documentation
Setting Up Your First Contract
⌨️ (02:05:18) Setting Up Your First Contract
- Versioning
- Take notes in your code!
- What is a software license
- SPDX License
- Compiling
- Contract Declaration
Basic Solidity: Types
⌨️ (02:12:28) Basic Solidity Types
- Types & Declaring Variables
uint256,int256,bool,string,address,bytes32- Solidity Types
- Bits and Bytes
- Default Initializations
- Comments
Basic Solidity: Functions
⌨️ (02:18:40) Basic Solidity Functions
- Functions
- Deploying a Contract
- Smart Contracts have addresses just like our wallets
- Calling a public state-changing Function
- Visibility
- Gas III | An example
- Scope
- View & Pure Functions
Basic Solidity: Arrays & Structs
⌨️ (02:35:30) Basic Solidity Arrays & Structs
- Structs
- Intro to Storage
- Arrays
- Dynamic & Fixed Sized
pusharray function
Basic Solidity: Compiler Errors and Warnings
⌨️ (02:45:35) Basic Solidity Errors & Warnings
- Yellow: Warnings are Ok
- Red: Errors are not Ok
Memory, Storage, Calldata (Intro)
⌨️ (02:46:34) Basic Solidity Memory, Storage, & Calldata (Intro)
- 6 Places you can store and access data
- calldata
- memory
- storage
- code
- logs
- stack
Mappings
⌨️ (02:50:17) Basic Solidity Mappings
- Mappings
Deploying your First Contract
⌨️ (02:53:38) Deploying your First Contract
- A testnet or mainnet
- Connecting Metamask
- Find a faucet here
- See the faucets at the top of this readme!
- Interacting with Deployed Contracts
The EVM & A Recap of Lesson 2
⌨️ (03:03:07) The EVM & A Recap of Lesson 2
- The EVM
Lesson 3: Remix Storage Factory
⌨️ (03:05:34) Lesson 3: Remix Storage Factory
💻 Code: https://github.com/PatrickAlphaC/storage-factory-fcc
Introduction
⌨️ (03:06:06) Introduction
- Factory Pattern
Basic Solidity: Importing Contracts into other Contracts
⌨️ (03:07:29) Importing Contracts into other Contracts
- Composibility
- Solidity new keyword
- Importing Code in solidity
Basic Solidity: Interacting with other Contracts
⌨️ (03:16:36) Interacting with other contracts
- To interact, you always need: ABI + Address
- ABI
Basic Solidity: Inheritance & Overrides
⌨️ (03:25:23) Inheritance & Overrides
- Inheritance
- Override & Virtual Keyword
Lesson 3 Recap
⌨️ (03:30:29) Lesson 3 Recap
Lesson 4: Remix Fund Me
⌨️ (03:31:55) Lesson 4: Remix Fund Me
💻 Code: https://github.com/PatrickAlphaC/fund-me-fcc
Introduction
Sending ETH Through a Function & Reverts
- Fields in a Transaction
- More on v,r,s
- payable
- msg.value & Other global keywords
- require
- revert
Chainlink & Oracles
- What is a blockchain oracle?
- What is the oracle problem?
- Chainlink
- Chainlink Price Feeds (Data Feeds)
- data.chain.link
- Chainlink VRF
- Chainlink Keepers
- Chainlink API Calls
- Importing Tokens into your Metamask
- Request and Receive Chainlink Model
Review of Sending ETH and working with Chainlink
Interfaces & Price Feeds
- Chainlink Price Feeds (Data Feeds)
- Chainlink GitHub
- Interface
Importing from GitHub & NPM
- Chainlink NPM Package
Floating Point Math in Solidity
- tuple
- Floating Point Numbers in Solidity
- Type Casting
- Gas Estimation Failed
- Someone should make an article explaining this error
Basic Solidity: Arrays & Structs II
- msg.sender
Review of Interfaces, Importing from GitHub, & Math in Solidity
Libraries
- Library
- Solidity-by-example Library
SafeMath, Overflow Checking, and the "unchecked" keyword
- Openzeppelin Safemath
- unchecked vs. checked
Basic Solidity: For Loop
- For Loop
/* */is another way to make comments
Basic Solidity: Resetting an Array
Sending ETH from a Contract
- Transfer, Send, Call
- this keyword
Basic Solidity: Constructor
- Constructor
Basic Solidity: Modifiers
- Double equals
- Modifier
Testnet Demo
- Disconnecting Metamask
Advanced Solidity
Immutable & Constant
- Immutable
- Constant
- Current ETH Gas Prices
- Don't stress about gas optimizations! (yet)
- Naming Conventions
- Someone make this!
Custom Errors
- Custom Errors Introduction
Receive & Fallback Functions
- Solidity Docs Special Functions
- Fallback
- Receive
Lesson 4 Recap
🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed Solidity Basics! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
Lesson 5: Ethers.js Simple Storage
⌨️ (05:30:42) Lesson 5: Ethers.js Simple Storage
💻 Code: https://github.com/PatrickAlphaC/ethers-simple-storage-fcc
🧪 Alchemy: https://alchemy.com/?a=673c802981
Effective Debugging Strategies & Getting Help
⌨️ (5:30:46) Effective Debugging Stategies & Getting Help
- Tinker and isolate problem
- For this course, take at LEAST 15 minutes to figure out a bug.
- Google / Web Search the Exact problem
- Go to this GitHub Repo / Discussions
- Ask a question on a Forum like Stack Exchange Ethereum or Stack Overflow
- Format your questions!!
- Use Markdown
How to Debug Anything Video
- Patrick's Original Video
Installation & Setup
- Visual Studio Code
- Crash Course
- NodeJS
- VSCode Keybindings
- Git
- What is a terminal?
Mac & Linux Setup
Windows Setup
- WSL
- When working in WSL, use Linux commands instead of Windows commands
- TroubleShooting
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
⚠️ Please use Gitpod as an absolute last resort
Gitpod
- Gitpod
- If using this, NEVER share a private key with real money on Gitpod
- Ideally you figure out the MacOS, Linux, or Windows install though
Local Development Introduction
CMD + KorCTRL + Kclears the terminalmkdir ethers-simple-storage-fcccode .to open VSCode in a new VSCode window
Optional Javascript Crash Courses
-
NodeJS Course
-
Javascript Course
-
Import your
SimpleStorage.sol -
Solidity + Hardhat VSCode Extension
-
Format your solidity code with:
"[solidity]": {
"editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
},
"[javascript]":{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
In your .vscode/settings.json file.
- Prettier Extension
Tiny Javascript Refresher
- Javascript Tips
Asynchronous Programming in Javascript
- Asynchronous Programming
- async keyword
- Promise in Javascript
- await keyword
Compiling our Solidity
- Yarn Install
- solc-js
yarn add [email protected]
- yarn scripts
Ganache & Networks
- Ganache
- Networks in Metamask
- RPC URL
- Geth
- JSON RPC Spec Playground
Introduction to Ethers.js
- Ethers.js
- prettier-plugin-solidity
A Note on the await Keyword
Adding Transaction Overrides
Transaction Receipts
Sending a "raw" Transaction in Ethers.js
Interacting with Contracts in Ethers.js
- EVM Decompiler
- BigNumber
Environment Variables
- dotenv
- .gitignore
Better Private Key Management
- wallet.encrypt
- THE .ENV PLEDGE
Optional Prettier Formatting
- Prettier
- Best README Template
Deploying to a Testnet or a Mainnet
- Alchemy
- Getting your private key from Metamask
CTRL + Cstops any terminal command
Verifying on Block Explorers from the UI
Alchemy Dashboard & The Mempool
- Special Guest Albert Hu
- Mempool
Lesson 5 Recap
Typescript Ethers Simple Storage
Lesson 6: Hardhat Simple Storage
⌨️ (08:20:17) Lesson 6: Hardhat Simple Storage
💻 Code: https://github.com/PatrickAlphaC/hardhat-simple-storage-fcc
Introduction
⌨️ (08:20:19) Introduction
Hardhat Setup
⌨️ (08:22:47) Hardhat Setup
- Hardhat Documentation
- DevDependencies vs Dependencies
- @ Sign node modules
Troubleshooting Hardhat Setup
⌨️ (08:29:43) Troubleshooting Hardhat Setup
- Special Guest Cami Ramos Garzon
Hardhat Setup Continued
⌨️ (08:31:48) Hardhat Setup Continued
Deploying SimpleStorage from Hardhat
⌨️ (08:33:10) Deploying SimpleStorage from Hardhat
Networks in Hardhat
⌨️ (08:41:44) Networks in Hardhat
- The Hardhat Network
- Hardhat configuration
- Chain ID List
Programmatic Verification
⌨️ (08:51:16) Programmatic Verification
- Etherscan Verify Tutorial
- Etherscan Docs
- Hardhat-Etherscan
- Etherscan API Keys
- Javascript == vs ===
Interacting with Contracts in Hardhat
⌨️ (09:06:37) Interacting with Contracts in Hardhat
Artifacts Troubleshooting
⌨️ (09:09:42) Artifacts Troubleshooting
Custom Hardhat Tasks
⌨️ (09:10:52) Custom Hardhat Tasks
- Hardhat Tasks
- Javascript Arrow Functions
Hardhat Localhost Node
⌨️ (09:18:12) Hardhat Localhost Node
The Hardhat Console
⌨️ (09:23:11) The Hardhat Console
- Hardhat Console
Hardhat Tests
⌨️ (09:26:13) Hardhat Tests
- Hardhat Tests
- Mocha Style Tests
- Chai
- Waffle Tests
Hardhat Gas Reporter
⌨️ (09:38:10) Hardhat Gas Reporter
- Hardhat Gas Reporter
- Coinmarketcap API
Solidity Coverage
⌨️ (09:44:40) Solidity Coverage
- Solidity Coverage
Hardhat Waffle
⌨️ (09:47:02) Hardhat Waffle
- Hardhat-Waffle
Lesson 6 Recap
⌨️ (09:47:37) Lesson 6 Recap
Typescript Hardhat Simple Storage
⌨️ (09:52:15) Typescript Hardhat Simple Storage
- Typechain
yarn add --dev @typechain/ethers-v5 @typechain/hardhat @types/chai @types/node @types/mocha ts-node typechain typescript
Lesson 7: Hardhat Fund Me
⌨️ (10:00:48) Lesson 7: Hardhat Fund Me
💻 Code: https://github.com/PatrickAlphaC/hardhat-fund-me-fcc
Introduction
⌨️ (10:00:50) Introduction
Hardhat Setup - Fund Me
⌨️ (10:03:41) Hardhat Setup - Fund Me
Linting
⌨️ (10:06:20) Linting
- Eslint
- Solhint
- Linting Code
Hardhat Setup - Fund Me - Continued
⌨️ (10:07:47) Hardhat Setup - Fund Me - Continued
Importing from NPM
⌨️ (10:09:38) Importing from NPM
- @chainlink/contracts
Hardhat Deploy
⌨️ (10:10:43) Hardhat Deploy
- Hardhat Deploy
Mocking
⌨️ (10:21:05) Mocking
- Mocking
- Aave Github
- Chainlink Github
- Multiple Versions of Solidity
- Tags in hardhat
Utils Folder
⌨️ (10:52:51) Utils Folder
Testnet Demo - Hardhat Fund Me
⌨️ (10:55:45) Testnet Demo - Hardhat Fund Me
- Hardhat Deploy Block Confirmations
TypeScript
- Code file (TypeScript edition)
- Define blockConfirmations in the
helper-hardhat-config.tsfile instead ofhardhat-config.js.
Solidity Style Guide
⌨️ (11:00:10) Solidity Style Guide
- Style Guide
- NatSpec
Testing Fund Me
⌨️ (11:08:36) Testing Fund Me
- Unit Testing
- Hardhat Deploy Fixtures
- ethers.getContract
- expect
- ethers.utils.parseUnits
- Waffle Chai Matchers
Breakpoints & Debugging
⌨️ (11:30:39) Breakpoints & Debugging
- VSCode Breakpoints
Gas III
⌨️ (11:33:40) Gas III
- Transaction Response
- Transaction Receipt
console.log & Debugging
⌨️ (11:36:35) console.log & Debugging
- Hardhat console.log
Testing Fund Me II
⌨️ (11:37:31) Testing Fund Me II
Storage in Solidity
⌨️ (11:44:34) Storage in Solidity
- Storage Layout
- Purpose of the memory keyword
- getStorageAt
Gas Optimizations using Storage Knowledge
⌨️ (11:52:38) Gas Optimizations using Storage Knowledge
- Opcodes
- Opcodes by Gas
- Opcodes by Gas
- Append
s_to storage variables - Append
i_to immutable variables - Caps lock and underscore constant variables
Solidity Chainlink Style Guide
⌨️ (12:05:29) Solidity Chainlink Style Guide
- Chainlink Solidity Style Guide
Storage Review
⌨️ (12:09:59) Storage Review
Staging Tests
⌨️ (12:11:43) Staging Tests
- Ternary
Running Scripts on a Local Node
⌨️ (12:17:58) Running Scripts on a Local Node
Adding Scripts to your package.json
⌨️ (12:22:00) Adding Scripts to your package.json
Pushing to GitHub
⌨️ (12:25:17) Pushing to GitHub
- Github Quickstart
- What is Git?
- The quickstart that we follow in the video
- Learn about git and GitHub
🐸🐦 Tweet Me (add your repo in)!
Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
⌨️ (12:32:57) Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)
💻 Code: https://github.com/PatrickAlphaC/html-fund-me-fcc
Introduction
How Websites work with Web3 Wallets
- How to Connect your Smart Contracts to Metamask
- 💻 Code from Video: https://github.com/PatrickAlphaC/full-stack-web3-metamask-connectors
- ✍️ Article from Video: https://betterprogramming.pub/everything-you-need-to-know-about-fullstack-web3-94c0f1b18019?sk=a2764bcbdae98bf05e1052931de77982
HTML Setup
- Live Server: ExtensionID: ritwickdey.LiveServer
Connecting HTML to Metamask
- Metamask Docs
Javascript in it's own file
ES6 vs Nodejs
- ES6 vs Nodesjs
- Ethers docs for web browser
- module vs text/javascript
Sending a transaction from a Website
- Web3Provider
- Adding a network to metamask
Resetting an Account in Metamask
MetaMask - RPC Error:
[ethjs-query] while formatting ouputs from RPC '{"value":{"code":-32603,"data":{"code":-32000,"message":"Nonce too high. Expected nonce to be 2 but got 4. Note that transactions can't be queued when automining."}}}'
Listening for Events and Completed Transactions
- provider.once
- Anonymous function
- Javascript Promise
Input Forms
Reading from the Blockchain
Withdraw Function
Lesson 8 Recap
Optional Links:
- Browserify
- Watchify
Lesson 9: Hardhat Smart Contract Lottery
⌨️ (13:41:02) Lesson 9: Hardhat Smart Contract Lottery
💻 Code: https://github.com/PatrickAlphaC/hardhat-smartcontract-lottery-fcc
Introduction
Hardhat Setup - Smart Contract Lottery
⌨️ (13:43:43) Hardhat Setup
- Install dependencies:
yarn add --dev @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers @nomiclabs/hardhat-etherscan @nomiclabs/hardhat-waffle chai ethereum-waffle hardhat hardhat-contract-sizer hardhat-deploy hardhat-gas-reporter prettier prettier-plugin-solidity solhint solidity-coverage dotenv
- Install dependencies (Typescript version):
yarn add --dev @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers @nomiclabs/hardhat-etherscan @nomiclabs/hardhat-waffle chai ethereum-waffle hardhat hardhat-contract-sizer hardhat-deploy hardhat-gas-reporter prettier prettier-plugin-solidity solhint solidity-coverage dotenv @typechain/ethers-v5 @typechain/hardhat @types/chai @types/node ts-node typechain typescript
Raffle.sol Setup
⌨️ (13:46:55) Raffle.sol Setup
- Custom Errors in Solidity
Introduction to Events
⌨️ (13:54:02) Introduction to Events
- Events & Logging Video
- Events & Logging in Hardhat
Events in Raffle.sol
⌨️ (14:00:47) Events in Raffle.sol
Introduction to Chainlink VRF
⌨️ (14:02:30) Introduction to Chainlink VRF
- Special Guest Stephen Fluin
Sub-Lesson: Chainlink VRF
- Chainlink VRFv2 Docs
- Chainlink VRFv2 Walkthrough
- Chainlink Contracts
Implementing Chainlink VRF - Introduction
⌨️ (14:09:53) Implementing Chainlink VRF
Hardhat Shorthand
- Hardhat Shorthand
Implementing Chainlink VRF - The Request
Implementing Chainlink VRF - The FulFill
Modulo
- Modulo
Introduction to Chainlink Keepers
- Chainlink Keepers Docs
- Chainlink Keepers Walkthrough
Implementing Chainlink Keepers - checkUpkeep
Enums
- Enum
Implementing Chainlink Keepers - checkUpkeep continued
- block.timestamp
Implementing Chainlink Keepers - performUpkeep
Code Cleanup
Deploying Raffle.sol
Mock Chainlink VRF Coordinator
Continued
- LINK Token
Raffle.sol Unit Tests
- We use
async functionin the describe blocks at the start, but we correctly take them out later.
Testing Events & Chai Matchers
- Emit Chai Matcher
Continued I
Hardhat Methods & Time Travel
- Make Hardhat do whatever you want it to
- Special debugging hardhat methods
Continued II
Callstatic
- Callstatic
Continued III
Massive Promise Test
Continued IV
Raffle.sol Staging Tests
Testing on a Testnet
Recommended LINK amounts for Sepolia Staging Test:
- Chainlink VRF: 2 LINK
- Chainlink Keepers: 8 LINK
Conclusion
Typescript - Smart Contract Lottery
🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed Hardhat Basics! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)
⌨️ (16:34:07) Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)
💻 Code: https://github.com/PatrickAlphaC/nextjs-smartcontract-lottery-fcc
⚡️⚡️ Live Demo IPFS: ipfs://QmXwACyjcS8tL7UkYwimpqMqW9sKzSHUjE4uSZBSyQVuEH
⚡️⚡️ Live Demo Fleek: https://fancy-dream-3458.on.fleek.co/
Introduction
We move into using NextJS for our front end. NextJS is a React framework for building websites.
Optional Sub-Lesson: Full Stack Development & Other Libraries
- 6 Ways to connect your dapp to a wallet
- NextJS Crash Course
- Other React libraries:
- Web3React
- wagmi
- react-moralis
- useDapp
- Web3Modal
- useMetamask
- Other Full Stack Web3 Templates
- scaffold-eth
- ethereum-boilerplate
- create-eth-app
- React being quite popular
- Why use react?
NextJS Setup
- NextJS Documentation
- NextJS Minimal Ethers Example For Lottery
yarn create next-app .
Manual Header I
- What is a component?
- jsx
- Moralis
- React Moralis
React Hooks
- What is a react hook?
Manual Header II
useEffect Hook
- useEffect Hook
- More on useEffect
- React Context
- useEffect Firing Twice
Local Storage
- Local Storage
isWeb3EnabledLoading
web3uikit
- web3uikit
- web3uikit interactive docs
- web3uikit connect button
Introduction to Calling Functions in Nextjs
- useWeb3Contract
Automatic Constant Value UI Updater
- ethers.utils.FormatTypes
runContractFunction
- Moralis Provider
- useMoralis
- parseInt
useState
- useState Hook
Calling Functions in NextJS
useNotification
- Add
onErrorto all yourrunContractFunctioncalls
Reading & Displaying Contract Data
A Note about onSuccess
onSuccessjust checks to see if MetaMask sends the transaction, not
A Challenge to You
Tailwind & Styling
- Learn CSS
- Tailwindcss
- PostCSS Extension
- Tailwind Extension
- Install Tailwind into NextJS
Introduction to Hosting your Site
⌨️ (18:12:50) Introdunction to Hosting your Site
- Vercel
- Moralis
- Netilfy
- IPFS
IPFS
⌨️ (18:15:14) IPFS
- What is IPFS
- IPFS
Hosting on IPFS
⌨️ (18:18:51) Hosting on IPFS
- IPFS Companion
- Brave Browser
yarn build && yarn next export
Hosting on IPFS & Filecoin using Fleek
⌨️ (18:25:45) Hosting on IPFS & Filecoin using Fleek
- Fleek
Filecoin Overview
⌨️ (18:31:28) Filecoin Overview
- Special Guest Ally Haire
- IPFS URL of Ally's Video
Lesson 10 Recap
Lesson 11: Hardhat Starter Kit
⌨️ (18:51:36) Lesson 11: Hardhat Starter Kit
💻 Code: https://github.com/smartcontractkit/hardhat-starter-kit
Lesson 12: Hardhat ERC20s
⌨️ (18:59:24) Lesson 12: Hardhat ERC20s
💻 Code: https://github.com/PatrickAlphaC/hardhat-erc20-fcc
What is an ERC? What is an EIP?
- What is an EIP?
- EIPs codebase
What is an ERC20?
- Video (using brownie/python)
- EIP-20
- ERC-677
- EIP-777
Manually Creating an ERC20 Token
Creating an ERC20 Token with Openzeppelin
- Openzeppelin
- Openzeppelin Contracts
- Solmate (Openzeppelin alternative)
Lesson 12 Recap
Lesson 13: Hardhat DeFi & Aave
⌨️ (19:16:13) Lesson 13: Hardhat DeFi & Aave
💻 Code: https://github.com/PatrickAlphaC/hardhat-defi-fcc
What is DeFi?
- What is DeFi?
- DefiLlama
What is Aave?
- Aave
- My Previous Aave Video on Shorting Assets
Programmatic Borrowing & Lending
- DAI
- Uniswap
WETH - Wrapped ETH
- WETH Token Sepolia Etherscan
- WETH Token Mainnet
Forking Mainnet
- Mainnet Forking
Depositing into Aave
- Aave V2 Docs
- Aave NPM
Borrowing from Aave
- Aave Borrowing FAQs
- Health Factor
- Aave Risk Parameters
Repaying with Aave
Visualizing the Transactions
- aTokens
Lesson 13 Recap
Happy Bow-Tie Friday with Austin Griffith
- Special Guest Austin Griffith!
- Speed Run Ethereum
More DeFi Learnings:
- Defi-Minimal
- Defi Dad
Lesson 14: Hardhat NFTs (EVERYTHING you need to know about NFTs)
⌨️ (20:28:51) Lesson 14: Hardhat NFTs
💻 Code: https://github.com/PatrickAlphaC/hardhat-nft-fcc
What is an NFT?
- Video
- Optional: All on Chain SVG NFT
- EIP-721
Code Overview
- Opensea Testnet
Hardhat Setup
Basic NFT
Write Tests
- Openzeppelin NFT
Random IPFS NFT
Mapping Chainlink VRF Requests
Creating Rare NFTs
Setting the NFT Image
Setting an NFT Mint Price
Deploy Script
Uploading Token Images with Pinata
- Pinata
- nft.storage
- Pinata NPM
- Pinata Docs
Uploading Token URIs (metadata) with Pinata
Deploying
Tests
Dynamic SVG On-Chain NFT
- Patrick's Original Video
What is an SVG?
- SVG Tutorial
- On-Chain SVG Example
Initial Code
Base64 Encoding
- Base64 Encoding
- Example Encoder
- base64-sol
Advanced: EVM Opcodes, Encoding, and Calling
abi.encode & abi.encodePacked
- abi.encode
- abi.encodePacked Thanks to Alex Roan for his help on this session!
- Example Contract Creation Transaction What REALLY is the ABI?
- EVM Opcodes
- More EVM Opcodes
- Solidity Cheatsheet
- abi.encode vs abi.encodePacked
Introduction to Encoding Function Calls Directly
Introduction to Encoding Function Calls Recap
Encoding Function Calls Directly
- Function Selector
- Function Signature
Creating an NFT TokenURI on-Chain
Making the NFT Dynamic
Deploy Script
Deploying the NFTs to a Testnet
Lesson 14 Recap
Extra credit:
- Deconstructing Solidity
- Knowing and controlling your Smart Contract Address
- From Solidity to byte code
Lesson 15: NextJS NFT Marketplace (If you finish this lesson, you are a full-stack MONSTER!)
⌨️ (23:37:03) Lesson 15: NextJS NFT Marketplace (Full Stack / Front End)
Large Update, please read
Moralis has recently updated to a self-hosted server over their own server. For this, you can do one of the following:
- Learn how to run one yourself
- Follow along to learn the concepts of this more interactive app, without actually coding along
- Skip to the section where we interact with the graph
TL;DR: TheGraph code should work exactly the same as the video, however the Moralis code will not.
💻 Code:
- Backend (Contracts): https://github.com/PatrickAlphaC/hardhat-nft-marketplace-fcc
- Frontend (Moralis Indexer): https://github.com/PatrickAlphaC/nextjs-nft-marketplace-moralis-fcc
- Frontend (TheGraph Indexer): https://github.com/PatrickAlphaC/nextjs-nft-marketplace-thegraph-fcc
- The Graph: https://github.com/PatrickAlphaC/graph-nft-marketplace-fcc
Special thanks to Matt Durkin for help with this section.
Introduction
- Opensea
- Artion
Part I: NFT Marketplace Contracts
Hardhat Setup
NftMarketplace.sol
- Pull Over Push
Reentrancy
- Reentrancy
- Rekt.news
- Openzeppelin NonReentrant
NftMarketplace.sol - Continued
NftMarketplace.sol - Deploy Script
NftMarketplace.sol - Tests
NftMarketplace.sol - Scripts
Part II: Moralis Front End
What is Moralis?
- Special Guest Ivan Liljeqvist
NextJS Setup
- Link NextJS
Adding Tailwind
- Tailwind with NextJS
Introduction to Indexing in Web3
- TheGraph
- Moralis
Connecting Moralis to our Local Hardhat Node
- NextJS Environment Variables
- Reverse Proxy FRP
- Docs
- Trouble Shooting
- Moralis Forum
- Moralis Admin CLI
Moralis Event Sync
- Moralis Add Event Sync From Code
Reset Local Chain
Moralis Cloud Functions
- Moralis Cloud Functions
- Moralis Logging
- Hardhat Network Reference
- Moralis Database only confirms a transaction with a block confirmation - so we need to move blocks on our hardhat local node.
- Moralis Triggers
Practice Resetting the Local Chain
Moralis Cloud Functions II
Querying the Moralis Database
- Moralis Queries
Rendering the NFT Images
- useNFTBalance
- fetch
- next/image
Update Listing Modal
Buy NFT Listing
Listing NFTs for Sale
- web3uikit Form
Part III: TheGraph Front End
Introduction
What is The Graph?
- Special Guest Nader Dabit
Building a Subgraph
- Example Subgraphs
- The Graph Studio
- GraphQL VSCode Extension
- GraphQL
Deploying our Subgraph
- GraphQL Queries
Reading from The Graph
- @apollo/client
- gql
- The Graph Docs
Hosting our Dapp
🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed Front End Basics! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
Lesson 16: Hardhat Upgrades
⌨️ (28:53:11) Lesson 16: Hardhat Upgrades
💻 Code: https://github.com/PatrickAlphaC/hardhat-upgrades-fcc
Upgradable Smart Contracts Overview
- Optional Video
- [Links from Video]
Types of Upgrades
- Parameter
- Social Migrate
- Proxy
- Proxy Gotchas
- Function Collisions
- Storage Collisions
- Metamorphic Upgrades
- Transparent
- UUPS
- Diamond
- Proxy Gotchas
Delegatecall
- delegatecall (solidity-by-example)
- Yul
Small Proxy Example
- EIP 1967
Transparent Upgradable Smart Contract
- Hardhat-deploy Proxies
- Openzeppelin Upgrades Plugin
- Openzeppelin upgrades tutorial
- hardhat deploy upgrades examples
Lesson 17: Hardhat DAOs
⌨️ (29:45:24) Lesson 17: Hardhat DAOs
⬆️ Up-to-date code: https://github.com/PatrickAlphaC/dao-template
💻 Code from video: https://github.com/PatrickAlphaC/hardhat-dao-fcc
Introduction
What is a DAO?
- What is a DAO?
How to build a DAO
- How to build a DAO
- That's Patrick
- PY Code
- Python Video
- Openzeppelin Governance
- Compound Governance
- Contract Wizard
- CastVoteBySig
Lesson 18: Security & Auditing
⌨️ (31:28:32) Lesson 18: Security & Auditing
💻 Code: https://github.com/PatrickAlphaC/hardhat-security-fcc
Introduction
- Readiness Guide
Slither
- Install python
- Slither
- solc-select
- Fuzz testing
Fuzzing and Eth Security Toolbox
- Echidna
- Docker Install
- Eth-Security-ToolBox
Closing Thoughts
- Best Practices
- Attacks
- Oracle Attacks
- Re-entrancy Attacks
- Damn Vulnerable Defi
- Ethernaut
- Some Auditors:
- OpenZeppelin
- SigmaPrime
- Trail of Bits
Congratulations
🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Completed The Course! 🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
Where do I go now?
Learning More
- CryptoZombies
- Patrick Collins
- Dapp University
- ChainShot
- Cami Ramos Garzon
- Albert Hu
- Ivan Liljeqvist
- Ally Haire
- Stephen Fluin
- Eat the Blocks
- Austin Griffith
- Nader Dabit
- Ethereum.org
Community
- Hardhat Discord
- Ethereum Python Community Discord
- Chainlink Discord
- Ethereum Discord
- Reddit ethdev
Hackathons
- CL Hackathon
- ETHGlobal
- ETHIndia
Be sure to check out project grant programs!
And make today an amazing day!
Thank you
Thanks to everyone who is taking, participating in, and working on this course. It's been a passion project and a data dump of everything I've learnt in the web3 space to get you up to speed quickly. Also, a big thank you to Chainlink Labs for encouraging this course to come to light-and to the many Chainlink Labs team members who helped with various assets!
Related repositories
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
A modern runtime for JavaScript and TypeScript.
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
A collection of awesome things regarding React ecosystem
Quick answers
Does smartcontractkit/full-blockchain-solidity-course-js have a project website?
No homepage URL was recorded for smartcontractkit/full-blockchain-solidity-course-js in TopGit's last sync. The README tab above frequently contains screenshots and demo links, or check the repository description on GitHub.
Is smartcontractkit/full-blockchain-solidity-course-js open source?
TopGit's metadata for smartcontractkit/full-blockchain-solidity-course-js does not record a license. Most public repositories on GitHub ARE open source, but the exact terms vary — verify by opening the LICENSE file directly.
What else is in the Frontend space?
smartcontractkit/full-blockchain-solidity-course-js is tracked by TopGit under the Frontend category, alongside 20 GitHub-tagged topics. Trending and Topics pages list peer repositories of comparable stars and language.
What is smartcontractkit/full-blockchain-solidity-course-js?
smartcontractkit/full-blockchain-solidity-course-js (smartcontractkit/full-blockchain-solidity-course-js) is a multi-language project on GitHub. From the project's own README: Learn Blockchain, Solidity, and Full Stack Web3 Development with Javascript
Where do I read more about smartcontractkit/full-blockchain-solidity-course-js?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/smartcontractkit/full-blockchain-solidity-course-js is the definitive source.
Why is smartcontractkit/full-blockchain-solidity-course-js categorized under Frontend?
TopGit places smartcontractkit/full-blockchain-solidity-course-js in the Frontend category based on its GitHub topics and description (tagged: "alchemy", "blockchain", "chainlink"). Categories are assigned from real repository metadata, not editorial guesswork.
Read full README in the tab above.