Small Intro
Hi I’m David a Full stack developer, looking to transition from Web2 → Web3 👾
- I’ve been in tech for 3-4 years now
- Self taught Fullstack dev, I love the ability to make complete end to end solutions
- Studied some CS in college and have been exposed to a lot of different languages but my favorite is javascript
This is my first exposure programming ANYTHING web 3
Here are my notes for the BuildSpace tutorial: Build a Web3 App with Solidity + Ethereum Smart Contracts tutorial
ENS → kidme.eth
twitter -> @SAINt_KIDME
Tools
Buildspace Project: Build a web 3 app … My notes
- Hardhat + ?? dependencies
- Tool used for testing Smart Contracts
- Solidity
.sol- Language similar to Java, EVN breaks it down to binary I believe
- replit ( link )
- online programming environment
- using it for our frontend, done in React
Keep in mind these are my notes while doing the tutorial, they are meant to display what stood out to me and nothing more. My intent is not to replace the tutorial only to help make sense of what we are doing, even though the tutorial does a good job of this. I am still learning, not a Web 3 dev… yet.
Tip:
Keep track of the address in an organized manner. With blockchain tech there is a lot of deploying and keeping track of things on the Rinkeby test net.
Getting Started
Lesson: Get your local Ethereum networking running
Hardhat → a fake local ETH network, with fake money 💸
Lesson: 👩💻 Write your first smart contract in Solidity
In IDE (VSCode) look up Solidity to have your theme coloring in this programming language as well. This helps a lot.
WavePortal.sol → Smart Contract
- This is what gets compiled into instructions for the EVM (Ethereum Virtual Machine)
- I knew smart contracts got broken into byte code or something
- This was looked up for this post
ONE THING TO NOTE HERE: DON’T GET FARZA SAD I encourage everyone to do all steps and participate in this tutorial end to end
Lesson: Compile contract locally and run it 🔥
Nice the contract is done now we are trying to run it.
(Keep in mind these are my initial notes and my first experience working with smart contracts and blockchain in general. Writing this blog is also supposed to help me cement these concepts.)
run.js:
- Does this also mean deploy local version??
Nice tutorial goes through it line by line! ☺️
Lines:
- Grabs our contract and when compiled make the necessary files we need for the EVM
- Looks like this might be overkill since this is creating an entire local blockchain for this one contract
- deploys…. nice
This section provides some nice insight into hardhat
Lesson: Store 👋 data on….. . . . .
The biggest thing I wanted to focus on here was to show how similar Solidity is to something a lot more people are familiar with… java
More on Solidity variables:
Solidity variables documentation
I feel like the tutorial does a good job about explaining what is being done.
run.js
One thing to point out that hre (hardhat) is providing us with [owner, randomPerson] values.
Nice! we waved to ourselves.. Note: In order to deploy something to the blockchain we need to have a wallet address. Also looking at the console it shows what is happening
With this we are now waving to another wallet!!! 👋
Lesson: Deploy locally….👀 start building the website
This lesson is important. Now introducing deploying our contract and interacting with it. This script npx hardhat node creates a local blockchain that stays alive.
deploy.js:
After running another hardhat script in a separate window, we are finally given an address for our contract. This makes it easy for our site to locate this contract.
The receipts: 👀
After this part I was super excited! This new tech can be intimidating but we have accomplished a lot!!
Section 2
Lesson: Setup a basic react app, setup Metamask
This part was a bit weird for me as Metamask is not used as my main wallet. However, I feel like Metamask is so seamless it makes it a strong candidate as a development wallet.
What I was trying to do was to import this project, host it on Vercel and connect it to my mobile, wallet. That turned own to be quite the bump in the road that I just didn’t want to deal with.
I recommend just using Metamask and the Replit page they provided, that journey was pretty seem less.
Lesson: 📤 Deploy smart contract to a real testnet
this looks cool → Alchemy
- Looks incredibly impressive, has a full suite of dev tools and features
🚰 Rinkeby and it’s fake ETH money was a roadblock I couldn’t get around through the main channels. HOWEVER the discord has a channel #faucet-request, that is the easiest and fastest way I was able to get some development ETH.
Now once that contract is deployed this should live on Rinkeby public test network 🤯🤯
Lesson: Connect our wallet to our web app 🌅
In React ..App.jsx:
-
useEffectgets called anytime the state of the second parameter changes, in this case we are using it to be called once the page is rendered - If not familiar with React, it is a good choice for a frontend framework
going through tutorial…. Alot is being added
- We now have state
- Connect to the users wallet
- Also check if we are have been given permission to use this wallet
- Just in general try, catch blocks are good development practices
Lesson: Call the our deployed smart contract…
Back in React ..App.jsx:
- contractAddress: Where this contract is in the Rinkeby testnet.
- told you save all addresses when developing smart contracts
- contactAbi: For the site to know how to interact with our contract, the abi comes from the artifacts we moved over
- signer: validates a proper signer is interacting with contract (I believe)
- Added some useful links to the bottom of the doc :)
Here’s a thing I learned from now developing on web 3!
If you need to retest website, the connection to Metamask does effect the state of our site. If needing to retest these are the steps.
- Open Metamask extension
- Setting ( 3 dots on the right of the account )
- Click the trash can near the correct repl project
- Something like this …xxxx.id.repl.co
- If you delete the wrong one it will just kind of sign you out of that site
Lesson: 📦 Storing messages from users on the blockchain
Tasks
- Update Smart Contract (WavePortal.sol)
- Test in run.js
- Re-deploy (deploy.js)
- Update new info on frontend
WavePortal.sol
- Added an event
- Added struct (Similar to js object?)
- Created array to hold Wave structs
- Wave now has a message
- This pushes our new wave to our wave array
- This means we store who waved, what did they say and when
- emit NewWave → triggers an event in Solidity
- new function getAllWaves() returns our fancy new array of Wave structs
run.js:
- deploy contract up top
- get all waves > Remember contracts on the blockchain are immutable, lose all contract data when we redeploy
A small thing I noticed was that our smart contract was able to handle emojis 🥳 so use them up!
Lesson: Fund contract, set a prize …. .. send users ETH Ξ 💸
Take some time on this section, there is a lot to unpack
WavePortal.sol:
- Check to see if contract has enough funds
- (bool success, )
- success if we sent the money
- If it failed return “Failed to withdraw money ….. “
- require();
- this is an important function
- It means we are able to cancel a transaction if certain criteria isn’t met
run.js some new parts:
const waveContract = await waveContractFactory.deploy({ value: hre.ethers.utils.parseEther("0.1"), });
- ⭐️ This is the deployment of our contact and with 0.1 ETH at that
-
hre.ethers.provider.getBalance(waveContract.address)- Gets balance of our contract
- Notice if we want to log our current balance you have to use
utils.formatEther(currentBalance) - Our wave now can handle a message in it!
waveContract.wave("A message!");
Lesson: Randomly pick a winner
This is where developing on the block chain gets tricky. How do we implement randomness in something that is both immutable and public? …… take some time to guess 👀 I did …. I guessed wrong but still tried.
Not sure if Solidity has built in library but a util for randomness would be nice
Lots of stuff happening here but now we know moving forward when developing smart contracts, dealing with randomness will have its own set of unique challenges.
Going through the tutorial …. ….
Notice in function wave there is a new require section with its own parameters
require( lastWavedAt[msg.sender] + 15 minutes < block.timestamp, "Wait 15m" );
Cancels transaction if that parameter does not pass
Lesson: Finalize and celebrate! 🎨
Another thing we are adding is a gas limit to ease the friction in using our new web 3 app, is it safe to call this a dapp?
Really cool that it goes through emits/events and also points out how to add it in the code
- the second useEffect now updates the UI any time it notices a new emitter event happening on the Smart Contract
- This allows for our UI to keep up with the contract on the blockchain
And that is it! Congratulations 🎉
I did run into issues when going through this tutorial, the trick is to kinda stick with it and be resourceful. I found that these new concepts are abit tough however it is pretty easy to relate them to things we already do in tech.
I do want to say thank you for taking the time in reading this and good luck on the journey.
Links on documentation:
Top comments (1)
I absolutely love all your images here. Just draws you in!!!! So cool!