JS Mastery – Web 3.0 Blockchain


Updated Mar 14th, 2022

Gifs on the blockchain

Solidity & React

Hosting on hostinger?

Vite to initilize

Tailwind: utility classes. Easily get things like glassmorphism. To

Initial code needed for smart contract

Front end in client folder

Navbar.js functional component, Footer, Loader, Services, Transactions, Welcome

Index.js allows to import into one .js file and import that into App.js file

Control + w shortcut to close files in VSCode

@23 mins: Import CSS files

Uses react-icons

Download zip folder for images folder. Some animated svgs and png files.

Tailwind docs to search for properties

Install all dependencies: react-icons and ethers

Note: I like the gradients in the header

Navbar comp

Separate list item for login button

Navbar for mobile devices

State to toggle menu with conditional render with onclick functions

toggleMenu && ()

Essentially two navbars with one always hidden depending on state

@39 min : welcome comp

Headline, text, button, list with rounded corners

Credit card looking Card with glassmorphism for right hand side of Welcome component.

Mentioned tools leverages for gradients

@60mins : in tailwindconfig.js extend for our own media query

@104 mins : Blockchain part of application

Hardhat.org. test smart contract. Npx hardhat


Run npx hardhat npx, greeter contract

Solidity extension for syntax highlighter

Delete default greeter contract for “transactional” contract

Solidity language a mix of a few languages but looks like plain English.

Need a license and choose version

Need to define type when declaring variables

Create event named Transfer()

@77 – emit Transfer event

34 lines of code for contract

To deploy smart contract: in scripts folder rename to runMain and make async/await

Need some eth for gas

Ropsten faucet to get some test Ethereum.

Can take 30 seconds to a few hours

Need a wallet I’d so go to metamask by adding chrome extension

Create wallet. Watch video to see you get 12 secret words.

Will get congrats message.

Show/hide test networks, change from Ethereum to ropsten test Ethereum.

Alchemyapi.io will help us deploy app.

View key (get http and websocket) and grab http key

Hardhat-waffle to run tests. Hardhat.config.js file

Export private key from metamask and paste in.

To deploy go to terminal and run npx hardhat run scripts/deploy.js

Copy from terminal address it was deployed to.

Copy Abi (not api) and import into util/constants file

You will see you spent some fake eth on gas fees.

Connect contract to front end by cd in terminal

Create new context folder so we can connect to contract

Import ethers i

Import contact ABI and contact address

Import transaction provider into main.Jsx and wrap the context provider

In the welcome component, we use the transaction provider.

Create a new function to check if wallet is connected.

Leverage useEffect to call function

@104 min : in transaction context file, connect Wallet function.

I’m welcome component we call that connect Wallet function which can now connect to meta mask

@110min : sendTransaction function

Set formData

Create handleChange function to setFormData

@121 eth-converter.com, in send transaction function.

ParseEther utility function from ether package

Need to store transaction on the blockchain

Needs address amount function

Transaction hash.

@129 we did it. We transferred ether.


@132 serviceCard component. Again love the background gradient.


@138? Transactions component

@158 developers.giphy.com, create a new app. Get API key. Create new .env file and paste in API key without quotes.

Fetch image with custom hook


Retrieve Transaction on Our Network

Check if transactions exist.

Local storage.

Then get all transactions.

Inside of check if wallet is connected then call get All transactions function.

10 the the 18th power to get real ethereum value. Values are hexadecimal. Exponents are double asterisk.

Verify Everything Works


Deploy to Hostinger

Run the build command

Deployed version under the dist folder.