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
Hardhat.config.js
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.
Etherscan.
@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
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.
Confirm
Run the build command
Deployed version under the dist folder.