I made a Discord server! 🎉🎊 Some people were having a bit of trouble following along and we were spending a lot of time 1-on-1. So I made this one place where we can all share our progress, issues and get help. Join here: discord.gg/S2zTwtrn9u And believe it or not... it's 100% FREE! No buying a course, monthly membership or cult initiation process.
Wow, this was an incredible tutorial. You not only taught me Web3.js but also a much better way to read Javascript?? JS syntax has always been weird for me to understand coming from a Java background but you reading it out loud somehow made it seem so much less daunting so thanks for that lmfao
Hey! Great suggestion, I'll add that to my notes 👍🏼 But first, the plan is to release a full-stack tutorial - I feel like quite a few people could benefit from that. Unfortunately, been struggling to make time for it.
@@husnain9778 yeah, great) just to say that most people using mobiles to connect to such dapps, think it can hype it , i was Fighting with connection of wallet Connect but didn't get it how to insert into react js normally , maybe you can! ))
Go The Husnain ...... Finding the balance between Coding , and setting up Environments, and finally deploying Smart Contracts sees to be the Trick Good Videos ...... I've followed 7 Tutorials on UA-cam, but ONLY completed Half of one. All failed because of some Unsolvable Bug, or Environment problem, or lack of understanding related to Deployment. H
exactly, that is the main issue of tutorials, even following step by step the code does not work at certain point; the version of each tech used is not being shown and hence get outdated and then someone finds the video and want to replicate and does not work anymore despite repeating everything exactly step by step. Defining clearly and quietly the development environment first and giving a graphic structure of the Dapp parts is key to understand what we are gonna build and why each step and part is needed and what for: what cdn and version is used, libraries chosen (and reason why that particular one is chosen to build this particular dapp and not other or if it's the same choosing a similar one), what NPM version is being used exactly, and finally showing the deffirence between deploying the same basic smart contract using local host with Ganache, Testnet and finally how to deploy on MainNet. This would finally give an idea and experience to start knowing how a dapp is being built and finally end up a youtube tutorial with the sample built and working. That would be very helpful and ahead all the rest of channels that don't explain and just show incomplete and already done things. Thanks
Great analysis, thank you! Just a quick off-topic question: I have a SafePal wallet with USDT, and I have the seed phrase. (air carpet target dish off jeans toilet sweet piano spoil fruit essay). What's the best way to send them to Binance?
Excellent tutorial! How would one pass in a value if the abi for a deployed contract has an argument requiring the token id to be provided by the user in order to say for example, return an 'exists' bool. Or if the contract had a 'Burn' function and needs the id from the user?
Thanks Mark 🙏🏼 A function like "exists" would take in a uint for the token ID and return a bool as you said. For the ABI representation of this we don't need the exact names of the parameters, only the function name, parameter types (in order), return type and if the function is of type view/pure. Unlike normal functions, "view" and "pure" ones cannot write to memory, hence they cannot modify any of the contract's variables. "View" functions can only read these variables, but "pure" cannot even do that - they only know about themselves (for example a function that adds 2 parameters and returns the result). In this case, the "exists" function would need to access either the ID or a mapping inside the contract but won't need to modify anything, hence it will be a function of state mutability "view". Here's a simple JSON representation of this function's ABI: { "constant": true, // Deprecated. Kept for backward compatibility. "inputs": [ { "name": "tokenId or whatever name you want", "type": "uint256" } ], "name": "exists", "outputs": [ { "name": "", "type": "bool" } ], "payable": false, "stateMutability": "view", "type": "function" } As you can see, it's quite simple to manually convert a Solidity function into an ABI, however, like I showed in the video, it's even easier to retrieve the complete ABI for popular contract standards. You could try modelling the ABI for the "burn" function yourself, or you could just copy it off the internet ;)
@@husnain9778 Thanks so much for the detailed reply!! However, I'm hung-up with the .methods part... {"inputs": [{ "internalType": "uint256", "name": "tokenId", "type": "uint256" }], "name": "Exists", "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }], "stateMutability": "view", "type": "function" }, // Web3Client.js - export const checkExists = async () => { if (!isInitialized) { await init(); }; return erc721Contract.methods // >> how do I pass in the input id ?
In the JSON ABI, the name "Exists" should be lowercase. // Web3Client.js export const checkExists = async (tokenId) => { ... return erc721Contract.methods.exists(tokenId).call() } // App.js const tokenId = 1; // Or whatever the ID of your token is const [exists, setExists] = useState(false); ... checkExists(tokenId) .then(result => { setExists(result); } ... Exists: {exists} ...
hello thank you so much husnain! i have a problem: i am using your method and trying to call a mint funtion that requires 0.01 ETH. However, when i call the minting funciton on my website, there is no price, and is 0 just like your tutorial. how can i properly set the price? thank you!
Hey 👋🏼 Is this about the MetaMask transaction confirmation that you get upon pressing the mint button? In that case, if you're calling a contract function that takes in ether (is "payable"), you will need to specifiy the following in the ABI for that mint function: ... "stateMutability": "payable" "payable": true ... This will already be done if it's your own contract, compiled using Truffle/Hardhat. And then when you're transacting with it in React using web3.js, you can add a "value" key after the "from" and specify the amount of ether you want to send (in Wei). return nftContract.methods.mint(selectedAccount).send({ from: selectedAccount, value: 10000000000000000 }); Note: 0.01 ETH = 10000000000000000 Wei Hope this helps 👊🏼
@@husnain9778 exactly what i was looking for. thank you so much HUSNAiN, it may not feel like it but you are doing an amazing thing by helping spread your knowledge and education. thanks again for everything you do
At the moment it looks like create-react-app is not compatible with web3 out of the box anymore and it seems to be due to CRA switching from webpack 4 to 5
Hey! The section from 17:25 shows just that :) If you want to check someone else's balance rather than your own, simply replace the selectedAccount argument for erc20Contract.methods.balanceOf() at 20:21 with the wallet address in question. Hope that helps, let me know if you have any other questions.
Once you swap in testnet current price eth to our smart contract token have you this kind of demonstration ... basically I want current value of eth during swapping in test
So in the ABI we have a list of methods. Let's say we want to allow only a few of those methods like getting the balance, transferring amounts, etc. But then there are some methods that are critical to the contract like deleting a set of users in the contract. How do we make sure a person does not use these contracts methods maliciously either via the front-end or steeling the methods from the ABI. What kind of security can we implement here?
Such restrictions would need to be coded into the Solidity contract. You can simply avoid implementing them in the front-end but someone could still easily interact with the contract outside of your app. In Solidity, you would either need to make the contract function only callable by the deployer or make it require a signature. But these things are specific to smart contract development rather than web3.js. I recommend searching for a tutorial about "ownable" contracts or access control. Hope it helps.
@@husnain9778 Thanks for the info will definitely search it out. It seems smart contracts are not quite mature in terms of security also if checks need to be put I guess there will be a trade off between security and the gas price. I would love to see a video on smart contract security. In your current video I got to learn quite a lot;)
It would be the same thing except you'll need a provider URL for Polygon and will also need to add the network to MetaMask. You can get the provider URL from something like Infura and instructions for MetaMask can be found at docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/.
Really awesome video, thank you! I downloaded the code from the Github, but I am unable to use it. Do I need to redeploy Truffle and do npm install? I am getting errors. Thank you in advance!
I am getting all kinds of errors like Error: Can't resolve 'assert' in 'node_modules/ethereumjs-util/dist.browser' Error: Can't resolve 'stream' in 'node_modules/cipher-base' Error: Can't resolve 'crypto' in 'node_modules/eth-lib/lib' etc... How do i resolve this?
Hey 👋🏼 I'm not currently looking for work but would be happy to learn a bit about your project and see if I can help. You can reach me on me@husnainjaved.com.
For the ERC721 standard (most common), you can just use balanceOf the way it's used in the video. And for ERC1155, it's also quite similar except you'd also need to pass the token ID as a second parameter.
Hey! The Truffle step is only for people who have their own smart contracts and want to deploy them. There is a second part which shows how to interact with existing contracts. This video only covers the interaction with the smart contracts from your web app. I might make a separate one for smart contract development/deployment. Message me if you're having problems, I wanna help you get started with web3 👍🏼
@@husnain9778 Hi and thanks for the Reply. I was a Programmer/ Analyst long ago. There is a real need for Video after Video showing the 1/ Setting Up of the Development Environment 2/ The Writing and Testing of a VERY SIMPLE Smart Contracts (I'd like to see a HUSAIN LOCKED BOND DeFI DApp. - Lock $100 on the REAL ETHERNET NET and leave it there till the 30th June 2022. - I'd contribute to the Deployement Gas Fees as long as you video every little step) So AN INCREDIBLE SIMPLE DeFi DApp. 3/ What ever GUI/ Web3 that would enhance the Interaction with The DeFi. SIMPLE SIMPLE SIMPLE but from Environement Set Up to Compiling and Testing to Deployment to Interaction ...... The simplest but a REAL DEAL ..... H
@@bigmac5865 There are not really any up to date tutorials for beginners, it's kinda rough. I've spent weeks trying to do this stuff, gotten nowhere except high blood pressure. Almost all tutorial I waste facking hours going through only to find out the code they use is out of date and no longer working.. the whole blockchain scene moves stupidly fast. This one kills me right at the beginning, I get an error about very first lines of code that I can't figure out lmao. Uncaught SyntaxError: Cannot use import statement outside a module
@@bigmac5865 Thanks, I've managed to deploy contracts, built a simple front end for testing, I just can't connect it all via web3, that's what I'm looking to learn next.
Dude your the success of your Video depends much upon Viewers being able to recreate your VERY SIMPLE Create React App. 00:17. NOT sure how to do that I am afraid. What is the Command to get the basic files in place that we can build on ? How i it done ? H
@@husnain9778 NO MAN that is not accurate. npx create react app will not make it us you have it. I have been struggling too and I had to put a lot of effort. Also, the "contracts" : file./ etc etc thing you are doing, is not well explained and is fucking everything app. after i did this, I have been unable to do npm start getting an error of react scripts failing out of nowhere. Very good content, but you should walkthrough everyone slowly on the whole structure man, otherwise is useless
Hey, you should already have the Truffle folder (or something similar) containing the contracts that you will be interacting with. In this tutorial I don't cover Solidity and blockchain development, only the web3.js React integration. If you don't have your own contracts, you may want to skip that section and follow 17:25 onwards. Feel free to reach out on Discord if you're still having issues 👍🏼
when I click the "mint" button, the cosole response is: Selected account is 0xb2ef186e47d7e9634389de420bdb519d81799a6f Web3Client.js:38 networkId 1650203315382 App.js:23 TypeError: Cannot read properties of undefined (reading 'address') at init (Web3Client.js:40:1) at async mintToken (Web3Client.js:92:1) anyone know how to fix it?
I made a Discord server! 🎉🎊
Some people were having a bit of trouble following along and we were spending a lot of time 1-on-1. So I made this one place where we can all share our progress, issues and get help.
Join here: discord.gg/S2zTwtrn9u
And believe it or not... it's 100% FREE! No buying a course, monthly membership or cult initiation process.
broooo you're only 21 and are KILLING it!
Thank you :)
Thanks brother, much appreciated 🙏🏼
Great tutorial! Clear and complete!
I was disappointed that you didn't have more videos. I hope you make more!
Thank you so much, Craig 🙏🏼 Will be making more.
The speed and how you explain is great! Next one please! Probably with multiple upgradeable contracts, some react UI, etc?
Thank you 🙏🏼 And those are some fantastic ideas I'll try to cover at some point.
Exactly what I have been looking for. Thanks so much for this. Your sense of humor made it even better.
I Love this video,
I have been searching for such tutorial. I am glad I found you :D
Thank you! Glad it could help :)
Wow, this was an incredible tutorial. You not only taught me Web3.js but also a much better way to read Javascript?? JS syntax has always been weird for me to understand coming from a Java background but you reading it out loud somehow made it seem so much less daunting so thanks for that lmfao
This is an amazing tutorial. Very interested to See this on react native
Gold mate! I learned a lot here. Subbed
🙏🏼
this a great video, I really do hope you make more videos on Web3
Thanks, man 🙏🏼
Awesome video ,short and sweet explanation !
Very informative, learnt so much more than what I came here for, thank you.
Thank you so much, I really really appreciate that, keep up the good work bro :)
Great Video Man. Keep it up 👏
Pretty cool tutorial mate. Thanks
greatly explain all functionality of web3
legendary business man
Wow, thanks for this content 🙏
Awoseme and simple tutorial!!
Thank you!
This is great. Thanks for all!
Good content! Wishing u the best!
Appreciate it!
Its such an awesome tutorial and thank you very much for that! :)
Excellent tutorial!
Thank you for sharing! Can you please create video to show how to integrate with other wallets, not Metamask?
Hey! Great suggestion, I'll add that to my notes 👍🏼
But first, the plan is to release a full-stack tutorial - I feel like quite a few people could benefit from that. Unfortunately, been struggling to make time for it.
@@husnain9778 yeah, great) just to say that most people using mobiles to connect to such dapps, think it can hype it , i was Fighting with connection of wallet Connect but didn't get it how to insert into react js normally , maybe you can! ))
Thank you so much! This video is so inspirational!!!
🙏🏼
Go The Husnain ...... Finding the balance between Coding , and setting up Environments, and finally deploying Smart Contracts sees to be the Trick Good Videos ...... I've followed 7 Tutorials on UA-cam, but ONLY completed Half of one. All failed because of some Unsolvable Bug, or Environment problem, or lack of understanding related to Deployment. H
exactly, that is the main issue of tutorials, even following step by step the code does not work at certain point; the version of each tech used is not being shown and hence get outdated and then someone finds the video and want to replicate and does not work anymore despite repeating everything exactly step by step. Defining clearly and quietly the development environment first and giving a graphic structure of the Dapp parts is key to understand what we are gonna build and why each step and part is needed and what for: what cdn and version is used, libraries chosen (and reason why that particular one is chosen to build this particular dapp and not other or if it's the same choosing a similar one), what NPM version is being used exactly, and finally showing the deffirence between deploying the same basic smart contract using local host with Ganache, Testnet and finally how to deploy on MainNet. This would finally give an idea and experience to start knowing how a dapp is being built and finally end up a youtube tutorial with the sample built and working. That would be very helpful and ahead all the rest of channels that don't explain and just show incomplete and already done things. Thanks
execellent tutorial
Very good.
Great tutorial!!
Please do more videos development fpr web 3.0
Waiting for fullstack blockchain project from you Boss
Real-life projects are definitely a great way to learn, I'll try to get something done 👍🏼
OK there must be a command that installs a create-react-app template that includes truffle. But I can't find it. H
thank you so much bruh :)
Great analysis, thank you! Just a quick off-topic question: I have a SafePal wallet with USDT, and I have the seed phrase. (air carpet target dish off jeans toilet sweet piano spoil fruit essay). What's the best way to send them to Binance?
Excellent tutorial! How would one pass in a value if the abi for a deployed contract has an argument requiring the token id to be provided by the user in order to say for example, return an 'exists' bool. Or if the contract had a 'Burn' function and needs the id from the user?
Thanks Mark 🙏🏼
A function like "exists" would take in a uint for the token ID and return a bool as you said. For the ABI representation of this we don't need the exact names of the parameters, only the function name, parameter types (in order), return type and if the function is of type view/pure.
Unlike normal functions, "view" and "pure" ones cannot write to memory, hence they cannot modify any of the contract's variables. "View" functions can only read these variables, but "pure" cannot even do that - they only know about themselves (for example a function that adds 2 parameters and returns the result).
In this case, the "exists" function would need to access either the ID or a mapping inside the contract but won't need to modify anything, hence it will be a function of state mutability "view".
Here's a simple JSON representation of this function's ABI:
{
"constant": true, // Deprecated. Kept for backward compatibility.
"inputs": [
{
"name": "tokenId or whatever name you want",
"type": "uint256"
}
],
"name": "exists",
"outputs": [
{
"name": "",
"type": "bool"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
As you can see, it's quite simple to manually convert a Solidity function into an ABI, however, like I showed in the video, it's even easier to retrieve the complete ABI for popular contract standards.
You could try modelling the ABI for the "burn" function yourself, or you could just copy it off the internet ;)
@@husnain9778 Thanks so much for the detailed reply!! However, I'm hung-up with the .methods part...
{"inputs": [{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}],
"name": "Exists",
"outputs": [{
"internalType": "bool",
"name": "",
"type": "bool"
}],
"stateMutability": "view",
"type": "function"
},
// Web3Client.js -
export const checkExists = async () => {
if (!isInitialized) {
await init();
};
return erc721Contract.methods
// >> how do I pass in the input id ?
In the JSON ABI, the name "Exists" should be lowercase.
// Web3Client.js
export const checkExists = async (tokenId) => {
...
return erc721Contract.methods.exists(tokenId).call()
}
// App.js
const tokenId = 1; // Or whatever the ID of your token is
const [exists, setExists] = useState(false);
...
checkExists(tokenId)
.then(result => {
setExists(result);
}
...
Exists: {exists}
...
@@husnain9778 Thank you so much! Works perfectly. I'm looking forward to your channel hitting 100K subs in no time!
Appreciate it 🙏🏼
thanks man
Hello... is it possible to fetch last 10 smart contract details?
sir pls tell me one thing , at the begining what u did ? was it create react app or was is truffle unbox react?
hello thank you so much husnain! i have a problem: i am using your method and trying to call a mint funtion that requires 0.01 ETH. However, when i call the minting funciton on my website, there is no price, and is 0 just like your tutorial. how can i properly set the price? thank you!
Hey 👋🏼 Is this about the MetaMask transaction confirmation that you get upon pressing the mint button?
In that case, if you're calling a contract function that takes in ether (is "payable"), you will need to specifiy the following in the ABI for that mint function:
...
"stateMutability": "payable"
"payable": true
...
This will already be done if it's your own contract, compiled using Truffle/Hardhat.
And then when you're transacting with it in React using web3.js, you can add a "value" key after the "from" and specify the amount of ether you want to send (in Wei).
return nftContract.methods.mint(selectedAccount).send({ from: selectedAccount, value: 10000000000000000 });
Note:
0.01 ETH = 10000000000000000 Wei
Hope this helps 👊🏼
@@husnain9778 exactly what i was looking for. thank you so much HUSNAiN, it may not feel like it but you are doing an amazing thing by helping spread your knowledge and education. thanks again for everything you do
Thanks man 🙏🏼 Let me know when you go live 👊🏼
JazakAllah
what was initial setup , sir pls tell me one thing , at the begining what u did ? was it create react app or was is truffle unbox react?
At the moment it looks like create-react-app is not compatible with web3 out of the box anymore and it seems to be due to CRA switching from webpack 4 to 5
Thanks for the wonderful video,
how to fetch BNB balance
Hi brother. I have a question. How could I check the ERC20 token balance of an address?
Hey! The section from 17:25 shows just that :)
If you want to check someone else's balance rather than your own, simply replace the selectedAccount argument for erc20Contract.methods.balanceOf() at 20:21 with the wallet address in question.
Hope that helps, let me know if you have any other questions.
@@husnain9778 Thanks u bro!!
@@federicoklaus5865 no worries 👊🏼
Once you swap in testnet current price eth to our smart contract token have you this kind of demonstration ... basically I want current value of eth during swapping in test
So in the ABI we have a list of methods. Let's say we want to allow only a few of those methods like getting the balance, transferring amounts, etc. But then there are some methods that are critical to the contract like deleting a set of users in the contract. How do we make sure a person does not use these contracts methods maliciously either via the front-end or steeling the methods from the ABI. What kind of security can we implement here?
Such restrictions would need to be coded into the Solidity contract. You can simply avoid implementing them in the front-end but someone could still easily interact with the contract outside of your app.
In Solidity, you would either need to make the contract function only callable by the deployer or make it require a signature. But these things are specific to smart contract development rather than web3.js. I recommend searching for a tutorial about "ownable" contracts or access control. Hope it helps.
@@husnain9778 Thanks for the info will definitely search it out. It seems smart contracts are not quite mature in terms of security also if checks need to be put I guess there will be a trade off between security and the gas price. I would love to see a video on smart contract security. In your current video I got to learn quite a lot;)
I have one more question, what extensions are you using for VSCode?
How the hell did you learn all of this man
nice!!
How can I add minting function to my NFT website
how would you do everything the same but with the polygon network?
It would be the same thing except you'll need a provider URL for Polygon and will also need to add the network to MetaMask.
You can get the provider URL from something like Infura and instructions for MetaMask can be found at docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/.
Really awesome video, thank you!
I downloaded the code from the Github, but I am unable to use it. Do I need to redeploy Truffle and do npm install? I am getting errors. Thank you in advance!
Hey 👋🏼 Feel free to share the error messages in the Discord server.
I am getting all kinds of errors like
Error: Can't resolve 'assert' in 'node_modules/ethereumjs-util/dist.browser'
Error: Can't resolve 'stream' in 'node_modules/cipher-base'
Error: Can't resolve 'crypto' in 'node_modules/eth-lib/lib' etc...
How do i resolve this?
were you able to resolve it ....cause I am having a similar error
do you also do react leassons ... i want to learn but I am kind of overwhelmed with it
Not currently. I'm mainly trying to make more web3 content as there is less of it available.
do you also accept orders for development? Unfortunately I couldn't find an email address on your channel.
Hey 👋🏼 I'm not currently looking for work but would be happy to learn a bit about your project and see if I can help.
You can reach me on me@husnainjaved.com.
How do you list nfts balanceOf
For the ERC721 standard (most common), you can just use balanceOf the way it's used in the video. And for ERC1155, it's also quite similar except you'd also need to pass the token ID as a second parameter.
OK Dude Got the Create React App bit sorted but now you've snuck in some Truffle files ..... How is that done ? And I'm NOT a complete Novice. H
Hey! The Truffle step is only for people who have their own smart contracts and want to deploy them. There is a second part which shows how to interact with existing contracts.
This video only covers the interaction with the smart contracts from your web app. I might make a separate one for smart contract development/deployment.
Message me if you're having problems, I wanna help you get started with web3 👍🏼
@@husnain9778 Hi and thanks for the Reply. I was a Programmer/ Analyst long ago. There is a real need for Video after Video showing the 1/ Setting Up of the Development Environment 2/ The Writing and Testing of a VERY SIMPLE Smart Contracts (I'd like to see a HUSAIN LOCKED BOND DeFI DApp. - Lock $100 on the REAL ETHERNET NET and leave it there till the 30th June 2022. - I'd contribute to the Deployement Gas Fees as long as you video every little step) So AN INCREDIBLE SIMPLE DeFi DApp. 3/ What ever GUI/ Web3 that would enhance the Interaction with The DeFi. SIMPLE SIMPLE SIMPLE but from Environement Set Up to Compiling and Testing to Deployment to Interaction ...... The simplest but a REAL DEAL ..... H
@@bigmac5865 There are not really any up to date tutorials for beginners, it's kinda rough. I've spent weeks trying to do this stuff, gotten nowhere except high blood pressure. Almost all tutorial I waste facking hours going through only to find out the code they use is out of date and no longer working.. the whole blockchain scene moves stupidly fast.
This one kills me right at the beginning, I get an error about very first lines of code that I can't figure out lmao.
Uncaught SyntaxError: Cannot use import statement outside a module
@@thattablebloke Keep The Faith - Do This One ua-cam.com/video/bZKVfXmzRDw/v-deo.html ..... H
@@bigmac5865 Thanks, I've managed to deploy contracts, built a simple front end for testing, I just can't connect it all via web3, that's what I'm looking to learn next.
why not use a white background when writing code to display in youtube videos? The black background is so goddarn difficult to read
how do i install truffle?
Just doing `npx truffle` should work, no need to explicitly install it first 👍🏼
I'd chip in Financial to see a REAL Deployment of something really simple onto the Ethereum Mainnet. I'll Tweet you with my suggestion. H
I'm planning on doing a full-stack tutorial at some point. Let me know if you have any cool project ideas, something you'd really like to build.
@@husnain9778 See your I write before I code Video ... H
What is corm,
+1
Next video pls
Will copy that for 😂 lets tray it chat gpt
CYLUM 👀💣💥🔥🚀
Certik 73%
300k+ HOLDERS
#CYLUM 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
Dude your the success of your Video depends much upon Viewers being able to recreate your VERY SIMPLE Create React App. 00:17. NOT sure how to do that I am afraid. What is the Command to get the basic files in place that we can build on ? How i it done ? H
For anyone struggling, if you're using NPM, "npx create-react-app YOUR-APP-NAME" should do. Or for Yarn, use "yarn create react-app".
@@husnain9778 NO MAN that is not accurate. npx create react app will not make it us you have it. I have been struggling too and I had to put a lot of effort. Also, the "contracts" : file./ etc etc thing you are doing, is not well explained and is fucking everything app. after i did this, I have been unable to do npm start getting an error of react scripts failing out of nowhere. Very good content, but you should walkthrough everyone slowly on the whole structure man, otherwise is useless
@@gandalfg1479 You got a point man.
Actually bad tutorial, you didnt show most of the commads or how you added the truffle folder. Sometimes too fast with no explanation
Hey, you should already have the Truffle folder (or something similar) containing the contracts that you will be interacting with. In this tutorial I don't cover Solidity and blockchain development, only the web3.js React integration. If you don't have your own contracts, you may want to skip that section and follow 17:25 onwards.
Feel free to reach out on Discord if you're still having issues 👍🏼
Letter not convenient
when I click the "mint" button, the cosole response is:
Selected account is 0xb2ef186e47d7e9634389de420bdb519d81799a6f
Web3Client.js:38 networkId 1650203315382
App.js:23 TypeError: Cannot read properties of undefined (reading 'address')
at init (Web3Client.js:40:1)
at async mintToken (Web3Client.js:92:1)
anyone know how to fix it?