kidme

Posted on Dec 29, 2021

Buildspace Project: Build a web 3 app … My notes

#web3 #javascript #solidity #buildspace

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

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:

useEffect gets 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:

ether repo

ether documentation/ contract

ether documentation/ signer