Skip to content

Latest commit

 

History

History
128 lines (73 loc) · 3.51 KB

README.md

File metadata and controls

128 lines (73 loc) · 3.51 KB
Raw

AmazingWeb3-NFTStake-Mint-FrontEnd

🤩🥳This repo contains all the files to follow along and implement the Amazing Web3 Front End Design using React + CSS and Bootstrap.

** THE FILES ATTACHED TO THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY **

** NOT FINANCIAL ADVISE **

** USE IT AT YOUR OWN RISK** **I'M NOT RESPONSIBLE FOR ANY USE, ISSUES ETC.. **

Please follow instructions for the video tutorial you are watching.

############################################################

VIDEO PART 2 Front end Design CSS - Bootstrap

  1. Install Dependencies:

npm i [email protected]

npm i react-bootstrap

npm i sf-font

Go to Part2-Design Folder in this Repo

2- Replace files in your React project with the files attached, then start server " npm run start "

############################################################

VIDEO PART 3 HTML Debug and API AXIOS React Config

Go to Part3-API-HTML-Fixed Folder in this Repo

2- Stop React server, Replace files in your React project with the files attached, then start server " npm run start "

############################################################

VIDEO PART 4 Optimize React JS ABI JSON Import

Go to Part4-ABI-Config-Import Folder in this Repo

2- Stop React server, Replace files in your React project with the files attached, then start server " npm run start "

############################################################

VIDEO PART 5 Advanced ReactJS Async Connect Function

Stop React App, then install dependencies

npm i web3modal

npm i @walletconnect/web3-provider

npm i walletlink

npm i web3

Fix Webpack limitation for Web3js: https://www.youtube.com/watch?v=IHrcFo1MX60

then go to Part5-AdvJS-ConnectButton Folder in this Repo: Replace App.js in your React project with the file attached, then start server " npm run start "

############################################################

VIDEO PART 6 Advanced NFT Mint App with Confirmation

1- Deploy NFT SmartContract Attached in Part6 Folder

2- Stop React server.

3- Follow Video and update contract address in config.js accordingly.

4- Install Alchemy API module for React. Make sure you have an Alchemy account and add the info required.

npm i @alch/alchemy-web3

Watch Alchemy EIP-1559 integration video if you need to review the steps. Use Alchemy API to transact with EIP-1559: https://www.youtube.com/watch?v=7AvKzJMQlI8

5- Replace app.js with the one provided in Part6 folder.

6- Start server "npm run start"

############################################################

VIDEO PART 7 Final Video UseState and UseEffect - ReactHooks

1- Deploy smart contracts located in:

https://github.com/net2devcrypto/N2D-Contracts

2- Stop React server.

3- Replace public folder in react with the one in the part7 folder in this repo.

4- Replace the files on the "src" folder in your React project with the ones in part7 folder in this repo.

5- Update config.js with all your particular information:

  • Your Staking Smart Contract Address
  • Your NFT Collection Smart Contract Address
  • Your Polygonscan API Key
  • Your Moralis API Key
  • Your Alchemy API Key

6- Replace any other information regarding the mainnet you are using accordingly. In App.js and nft.js replace infura provider ID's for web3Modal provider. Update to the mainnet you are using (if applicable).

7- Start server "npm run start"

############################################################

** THE FILES ATTACHED TO THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY **

** NOT FINANCIAL ADVISE **

** USE IT AT YOUR OWN RISK** **I'M NOT RESPONSIBLE FOR ANY USE, ISSUES ETC.. **