net2devcrypto/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.

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.. **

amazingweb3-nftstake-mint-frontend's Issues

I'm having another Error when click connect wallet, need help!

App.js:113 Uncaught (in promise) TypeError: Cannot set properties of null (setting 'textContent')
at connectWallet

Thsnk!

ONE DAYS I SEARCH SOLUTION FOR THIS " Array.prototype.map() expects a value to be returned at the end of arrow function" THANKS ANSWER ME SIR

{apicall.map((nft, i) => {
var owner = nft.wallet.toLowerCase();
if (owner.indexOf(nft.holder) !== -1) {
async function stakeit() {
vaultcontract.methods.stake([nft.tokenId]).send({ from: account });
}
return (

<img className="card-img-top" src={nftpng + nft.tokenId + '.png'} alt="" />

Net2Dev Collection NFT #{nft.tokenId}

Status<p style={{ color: "#39FF14", fontWeight: "bold", textShadow: "1px 1px 2px #000000" }}>Ready to Stake

<Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={stakeit}>Stake it

)}})}

Issue with react app - cannot click, ethRequest issue

Receiving this error in the browser console

Uncaught (in promise) TypeError: Cannot create property 'jsonrpc' on string 'eth_requestAccounts'
at l._rpcRequest (inpage.js:1:38191)
at l.sendAsync (inpage.js:1:41936)
at callApi (nft.js:62:1)

Did perhaps something chnage with how it calls to metamask or the account for info? It works when pushed to netlify to select wallet, but then after that nothing is clickable nor can you interact with any of the buttons anymore.

Thanks in advance for any info provided

EDIT: Some more errors, after metamask does connect but then does not show "connected" status

inpage.js:1 Uncaught (in promise) TypeError: Cannot create property 'jsonrpc' on string 'eth_requestAccounts'
at l._rpcRequest (inpage.js:1:38191)
at l.sendAsync (inpage.js:1:41936)
at App.js:109:20
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
App.js:163 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'methods')
at App.js:163:39
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()
at asyncToGenerator.js:21:12
at l (App.js:95:10)
App.js:195 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'methods')
at App.js:195:39
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()
at asyncToGenerator.js:21:12
at p (App.js:95:10)
App.js:160 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'methods')
at App.js:160:14
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()
at asyncToGenerator.js:21:12
at i (App.js:95:10)
2App.js:160 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'methods')
at App.js:160:14
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()
at asyncToGenerator.js:21:12
at onClick (App.js:95:10)
App.js:153 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'methods')
at App.js:153:45
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()
at asyncToGenerator.js:21:12
at s (App.js:95:10)
3App.js:153 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'methods')
at App.js:153:45
at u (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at n (asyncToGenerator.js:3:20)
at c (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise ()
at asyncToGenerator.js:21:12
at onClick (App.js:95:10)

claim/unstake with new Alchemy SDK

Whats up Dev. Can you please update the claim and unstake functions to work with the new Alchemy SDK?

in part 7 I have deployed token contract but where to use that token address no idea?

I'm having issue in nft.js

Line 105:47: Array.prototype.map() expects a value to be returned at the end of arrow function

Could you check that..? thanks!