Building Full Stack dApps with React, Ethers.js, Solidity, and Hardhat
Updated on September 11 2022
In this tutorial, you'll learn a ...
For further actions, you may consider blocking this person and/or reporting abuse
Any idea why
getBalance
in App.js would throwsendCoins
works fine.Here's the deploy output:
And here's my App.js:
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner(); // remove this
const contract = new ethers.Contract(tokenAddress, Token.abi, signer); // replace signer with provider
signing is not required here!
Signing is required.
I faced the same issue too and figured it out. First, make sure you've selected the right MetaMask network. If you deployed to a local node, make sure the selected MetaMask network on your browser is Localhost: 8545. If you deployed to ropsten, make sure you've selected Ropsten Test Network. Secondly, each time you successfully deploy your contract, make sure you correctly copy and reference the generated contract address if you intend to interact with the newly deployed contract without errors. Just like @richardmelko advised, make sure that your tokenAddress is pointing the Token contract address you copied after deployment.
Hey, not sure why you would run into that, did you figure it out?
I am running into the same issue
It worked when I called
balanceOf
insidedeploy.js
, just not when calling fromApp.js
Stuck with the same issue. After some deep dive into hardhat docs finally, I've found the cause.
It looks like instead
should be
@dabit3 could you please correct it?
It still ain't working for me, even after making this change
Not sure if this will help but I had the same error while working on my own project. I used this blog post as a starting point and my code is slightly different but I was also getting this error on a read-only transaction. The code was working the day before and I was really consued.
After some failed googling, I saw that metamask was still pointing to mainnet (I had switched away from localhost to mainnet later that day). After switching back to localhost things just started working!
Not sure if this will help your particular issue but thought I'd post this here if someone else is also googling this error. Hopes this helps someone out there!
I had this error after switching to live test nets then back to local host. The error originates from these line of code in your react components.
const greeterAddress = "{address that you copied in from the local node instance}"
const tokenAddress = "{address that you copied in from the local node instance}"
If you're deploying on Ropsten for example, you will need to manually update this line of code, changing the address to the deployed address that hardhat will supply in the terminal after successfully deploying. So when switching from local to test net, this line needs to be changed!
Hi Horace, I was getting this same error - my issue was that I had re-deployed my contracts and their addresses had changed, so I had to copy-paste the new addresses to the top of App.js.
Nice run Nader – thanks for this.
I am a newbie in Ethereum and I got this error after make some tx with the same account:
Nonce too high. Expected nonce to be 0 but got 4. Note that transactions can't be queued when automining.
If you got this, I figured that there is a limit (I think it's 4 per block) on the number transactions the same address can have on the transaction pool, so just by adding another account in metamask works again :)
Good call out. You can also go to advanced settings and reset the account which will fix this as well.
Hi Nader,
Likewise, thanks for this great post. I had the same issue and did resolve it using the methods above. Could you elaborate further on the problem here? Is this just a quirk for the hardhat local network or is this something related to ethereum in general?
Thanks in advance.
I believe it has something to do with the nonce being out of sync, but I don't know a lot more than that.
If you have this problem at the beginning:
**Is because you're using an account address instead of the contract address that was prompted in the terminal when you deployed it.
I usually get that when I put in a signer instead of the signer's address. The basic idea is that you're putting in something other than a hex address, so the compiler's first thought is that it must be an ENS address (ENS addresses are a way to attach a url-like identifier to an address, like
vitalik.eth
).or if you leave "your-contract-address" as I forgot to change the const :)
Looks like any string (if it isn't a contract address) assume it's an ens domain.
thank you Nader
I will consider this as my first step to blockchain domain
all the best
Great run though, thank you. Do you have any particular reason for preferring hardhat over ganache / truffle? I think the latter is probably more popular (?), not of course that is any reason to prefer it. I hadn't heard of hardhat previously, so will give it a whirl.
I too prefer ethers to web3; I liked the documentation more. Often with these choices though, you just have to choose and go. Otherwise you can spend your entire time choosing rather than actually coding...
I think either are good choices, but after talking with a few people in the space and hearing that some projects like Aave, Decentraland, PoolTogether, Synthetix, and others were now using it I decided to go with Hardhat.
Hmmm, interesting. I will defo take a look next time.
I am a long-time truffle user but planning to switch over hardhat for a couple of reasons. In hardhat, you have support for multiple solidity compilers simultaneously, it's really helpful say if you have a 0.5 and 0.8 contract in the same codebase. Truffle will refuse to compile and you have to perform some hacks to make it work. Hardhat also has this nice collection of extensions like: console.log, auto compile & deployment while solidity code changes, etc. which are super useful while developing. I also found some minor problems in the truffle development chain like they set a hard block limit which is lesser than the main net limit which may result in your transaction being reverted.
console.log would be very useful...
This is such a great run-through on such a complex topic. I was aware of a lot of these tools but never leveraged them because of how dense the docs and content usually are. I am looking forward to learning more about this space from you. Keep it up!
Thanks Brian, happy to hear this 🙏
I went to the faucet site, but it contains a certificate error. Maybe that faucet is no longer valid?
If you continue to the site it returns the following JSON response.
I'm going to try out the one mentioned here
The Ropsten Ethereum Faucet said I was spamming, so I just ended up using this one instead -- faucet.dimensions.network/
Looks like the test faucet in the tutorial is working again. I guess they updated their certificate. 😎
Wow. This is the best full-stack dApp tutorial I've seen. I wish I had this a few months ago (before I already learned it). The only thing I think is really missing for a starter tutorial (in a future post maybe?) is to touch on ERC standards. But really, well done.
Thanks Horace, I now plan on updating this with more info based on feedback I've received and also doing a part two that goes into more depth, I appreciate your feedback 🙏
Can't wait for it. Thanks Nader. One more question tho. I'm a backend dev with Node.js and I'd love to get started with blockchain how and what resources should I get started with. Thanks
👏 check out npmjs.com/package/@symfoni/hardhat...
I used NextJS as the React framework, added some styling and refactored the code a bit.
Check it out: react-eth.netlify.app/
All of the code for this is on GitHub also.
The token on that extends the ERC20 standard, and I ran into some issues here. Since there are 18 decimal places for the token I would try to transfer something like
500 * 10 ** 18
and would get an overflow error.To resolve this I just had to put it into a JavaScript BigInt like so:
const wholeTokens = BigInt(amount * 10 ** 18)
Hope this helps someone!
Help! I got stuck at this step:
After I import private key, I got the following error message:
Expected private key to be an Uint8Array with length 32
I have the same error... Have you found a solution yet?
Maybe you copied this contract address,
you should choose one from these 20 accounts' keys
I am doing this project in typescript, when I run "npx hardhat node" it throws an error saying
What am I missing here ?
Also ran into this issue.
create-react-app
Typescript template had created atsconfig
file for me, that had"module": "esnext"
. Changing it to"module": "commonjs"
ended up fixing the issue for me.I also ran into this with typescript for hardhat. Did you ever find a solution?
Update:
just found a fix:
update the hardhat.config.ts file with
"module": "commonjs"
I wrote a blog post "How to make a fullstack dapp with React, Hardhat and Ethers js" following this.
You will have the React frontend examaple along with it.
I'm getting this error. Source "hardhat/console.sol" not found: File import callback not supported And when I do npx hardhat compile it says there's nothing to compile. Any idea how to fix this?
hi have you figured it out? I'm getting the same error too
ethereum.stackexchange.com/questio...
This was great -- really enjoyed the walkthrough.
I'm running into an issue where the deployed contract addresses have already been used previously. What's a straightforward way to force the contract to deploy to another address? I tried changing the solidity files slightly and re-compiling them, but no luck.
I did the same thing and no luck as well. Tried restarting the node and the contracts were deployed to the same address.
Thanks for the perfectly detailed introduction to dapp development!
How do you feel about the hardhat-react plugin? Is that something that could be included in this guide? npmjs.com/package/@symfoni/hardhat...
It autogenerates typed React hooks integrated into the Hardhat smart contract watch pipeline and gives you hot reloading while developing contracts
So symfoni makes it easier to connect the back-end dapp code (eg. the smart contract) to the front-end? So for example, wanted to make a website the will result in exchanging an NFT for ether, symfoni would make it easier?
That's right. Symfoni, together with Hardhat, does all the heavy lifting and repetitive tasks for you.
This is n awesome tutorial, thanks!
I am stuck while trying to set the greeting, I have this error in my console:
Object { code: -32603, message: "Error: [ethjs-query] while formatting outputs from RPC '{\"value\":{\"code\":-32603,\"data\":{\"code\":-32602,\"message\":\"Trying to send an incompatible EIP-155 transaction, signed for another chain.\"}}}'" }
and this in my terminal:
eth_blockNumber (2)
eth_sendRawTransaction
Trying to send an incompatible EIP-155 transaction, signed for another chain.
Can anybody help?
Thanks!
Verify your
hardhat.config.js
, in my case my issue was a typo aroundnetwork
I had this error too, I resolved it by connecting my meta mask, you'll see the connect button on meta mask click on it.
I'm going through the post building things out and when I compiled via
npx hardhat compile
, I had a look at the outputted JSON and it got me thinking about ASTs and then I discovered AST Explorer support Solidity for anyone interested.It also got me thinking that you could probably write codemods for Solidity files. Anyways, small brainfart lol.
Almost a year old and this is still the best tutorial out there, IMO.
But I am stuck in a VERY frustrating aspect. When I run:
npx hardhat run scripts/deploy.js --network localhost
It returns with no error, but also no console output, and no console output on the terminal with the hardhart node running.
I don't know what to do, I can't find an answer online.
Has anyone encounter this frustrating problem.
I am new to this, but have been at it for several months with different projects and i think I got the basics down.
But this one is stumping me ! :(
I am running on a Linux machine on AWS.
Same here actually. Execution just stops on getContractFactory, no output, try/catch doesn't help, no info on the web - just your comment. JS works just fine, TS has such unexpected undebuggable issues
UPD: ok, as usual it turned out to be a simple missing await but one level higher that I've forgotten to look at :)
When I run the React server to test the greeting, the "Fetch greeting" button does not prompt Metamask to sign. The "Set greeting" also does not prompt MM.
I've started the tutorial from scratch three times with the same result.
What could I have done incorrectly?
I ran into the same issue - you'll just need to reconnect MetaMask: ethereum.stackexchange.com/questio...
Maybe you need to keep "npx hardhat node" running when you are using react-app. If I don't keep it running, there will be no sign in a moment, after that, errors happen.
This is the problem of my newspaper. Why is it like this? Can it solve this problem? I have followed the steps in the tutorial and refactored it several times. The errors are the same. thank you
./src/App.js
Module not found: Can't resolve './artifacts/contracts/Greeter.sol/Greeter.json' in '/Users/liuminghui/Desktop/react/react-dapp/src'
Verify your hardhat.config.js, in my case my issue was a typo in paths :D
Thank you for this well done tutorial. I've done a few tutorial dapps from Dapp University's guides. Those all use Ganache, so it was cool finding this one that used Hardhat. Hardhat feels more streamlined and easier to use.
I look forward to going through your other blockchain tutorials.
When I import the token. I add the "Token contract address" and then it auto populates the "Token symbol" with "NDT". I click "Add custom token" and then on the next view I select "Import tokens":
But then it doesn't show in the assets. I tried reseting Metamask and restarting the browser. The "Get Balance" and "Send Coins" buttons work as expected.
As of today, this article is still amazing.
Just managed to complete this guide and feel super confident with using the docs now that I know how to work around the baiscs.
Thank you so much for this guide my dude! I been bouncing through so many docs and trying to do it all on my own.
Having this guide helped out a lot!
Much thanks!
Hi all, any thoughts on the following error? Happening when first trying to set the greeting.
Error: Transaction reverted: function selector was not recognized and there's no fallback function
at Greeter. (contracts/Greeter.sol:6)
Thought I would jump into the web3 world with what seemed like a popular tutorial, but sadly not making it very far.
I am getting the same issue. Have you been able to resolve this?
Nope. I moved on, although I would like to revisit if someone knows what to do. Maybe I'll learn enough with other tutorials to unblock myself here. Will comment if I figure it out.
Is it just me, or are none of the ropsten faucets working at the moment? Should I adjust and just switch test networks, or what should i do? Thanks. :)
Will improvise on a new branch until I figure it out lol...
To anyone receiving an error when importing "hardhat/console.sol" in VS code.. this error is caused by the solidity extension in VS code (version 0.0.136). In order to fix the error, simply go to your extensions manager in VS code, click on the solidity extension (should be Juan Blanco), click the down-arrow on the "uninstall" button, click "install another version", and then click 0.0.135.
After restarting your VS code application, the error should be gone. Anything Blockchain explains it in the video below.
youtube.com/watch?v=5qTdQNCMwk8
Such a good 'Hello world' introduction to fullstack Ethereum development.
I'm looking forward to trying out CryptoZombies to get the hang of Solidity, and going through the docs for Hardhat and ethers.js.
The Ropsten Ethereum Faucet said I was spamming, so I just ended up using this one instead -- faucet.dimensions.network/
Hi, I ran through the first half of the tutorial (the localhost example greeter) yesterday and stopped. Today, the imported metamask wallet shows some coins (DANK and MATIC) in the wallet. This might be a very silly question since the localhost server that it was connected to is not even running anymore, so now metamask has the network set to ethereum mainnet. So apologies if my question makes no sense. But I clicked on the coins, and then read after some googling that this is commonly how metamask scams work !!! (random stuff appearing in a wallet). Can anyone explain why this happens with the test wallet?
Thanks! And thank you Nader for the great tutorial!
So I really enjoyed the Video that goes with this and I also copied in some of the Code from above, when I couldn't get mine to run BUT THIS TUTORIAL FALLS JUST SHORT. We need to see the UI interacting with the Ropsten TestNet. And we don't see that, or I don't. It is is NOT enough just to deploy the Contract to Ropsten.
"Once your contract is deployed you should be able to start interacting with it. You should be now able to view the live contract on Etherscan Ropsten Testnet Explorer" H
Hey, I am running into vulnerability error when I am trying to install
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
Error- found 3089 vulnerabilities (11 low, 968 moderate, 2110 high)
run
npm audit fix
to fix them, ornpm audit
for detailsI tried 'npm audit fix' but still facing same issue.
Hello,
I got this error when I update my app.tsx :
Property 'ethereum' does not exist on type 'Window & typeof globalThis'
And I cannot even compile my code:
Failed to compile.
/workspace/template-typescript-react/src/App.tsx
TypeScript error in /workspace/template-typescript-react/src/App.tsx(15,18):
Property 'ethereum' does not exist on type 'Window & typeof globalThis'. TS2339
I'm working on a running node on gitpod.
Great job!
I am also trying to deploy such full stack react application to fleek, but the problem I have is that artifacts folder is in .gitignore so I do not have access to it like I do in the local environment:
From hardhat docs it is recommended NOT to add that folder as it might get HUGE...
Has someone tried that, maybe ?
any help appreciated;)
~~~~
~~~~~!!!UPDATE!!!!~~~~~~~So, on fleek.co you can actually run 'npx hardhat compile' to create artifact directory for you and make the above import work correctly again, something like this:
With truffle the contract address was inside the artifact file on networks.
Are there something like that on hardhat?
I'm asking that, because it is easier to import the address direct from the json file.
I wasn't able to send myself any test ether using the link provided, but I was able to find another way to get some. If you go to MetaMask for the Ropsten test account and hit the "Buy" button, it will give you the option for a test faucet at the bottom of the panel. You can click that button and it will direct you to a webpage that will let you send some test ether to your account - it even fills in the address for you.
button image
I thank you so very much for this valuable kick-start, Nader!
Is there a way to dynamically grab the contract address? If we hardcode it, won't our application still be pointing at an address even if we change networks? And we don't want that because contract 0xabc... on Ropsten ≠ contract 0xabc on Rinkeby.
This is amazing. Thanks a lot.
Extremely well written. Great job!
Thank you for putting this together. Really easy to follow.
Good one!
Hi,
one question about
...
const transaction = await contract.setGreeting(greeting)
await transaction.wait()
in setGreeting() of App.js
I can understand contract.setGreeting might be asynchronous so it needs to be 'awaited'
But what is transaction.wait() doing? why does it also need to be 'awaited' ?
Great read. I will do some reading on Crypto, etc. then I can give this a go
I also ran into "call revert exception" when calling greet. It was because I had the Ethereum Dapper Legacy chrome extension installed (found out by checking the value of window.ethereum)
Thank you so much for putting this guide together!!
LOVE IT!
Hi everybody,
I followed the instructions thoroughly. Everything is working well except my imported token balance is showing 0. Getting the following error. Hope if someone has the solution.
Really nice, thanks. Easy to follow and informative.
If anyone is interested in using this setup with Vue3/Vite: I've taken this tutorial and made a very simple Vue setup for it :) github.com/HerrBertling/simple-vit...
What operating system do I need to be on to follow this guide?
Nice one! I've been using ganache and truffle, hadn't seen hardhat, I'll be giving this one a shot!
Amazing post, a good first approach into one technical implementation of ethereum
Any reason why clicking on fetchGreeting or getBalance wouldn't output anything on the console but the other two functions would? Thank you!
Fetting this error for executing "npm start"
Failed to compile.
./src/App.js
Module not found: Can't resolve './artifacts/contracts/Greeter.sol/Greeter.json'
New to development.
I am getting errors when i use the import command in terminal to import ABI from the JSON.
Can anyone guide pls
Thanks Nader. The import ABI function - are we to run that from the terminal?
I keep on getting error when I run it from the terminal.
This was great help, thanks!
What solidity extensions do you use for vs code
Cool! This is a really informative article. Thank you
Make sure you install hardhat dependecies as dev-dependencies
use this
npm install --save-dev hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
the Ropsten ETH faucet above didnt work for me, but this one did: faucet.dimensions.network/
For me, the send function appears to be working, but when I fetch the balance the total is not updated.
Is there an alternative to Meta Mask?
Thank you for the content, its really helped
I am having a problem where the metamask wallet is no connecting to the ethers . I cant seem to find where the error is. Please help
Hi, the latest Ethereum test network is Sepolia. As of July 2023, the Ropsten test network has been permanently discontinued
Let's be friends.
Hello Devs,
I got to the root of the tutorial and after running 'npm start'. I encountered the following issues.
Amazing post. Thanks for providing us with such high-quality content!
I know it consumed lot of your time to write this step to step article. And your this article very easy to understand. Thanks for discussing Yes Download in this article.
Hi. Worked my way through the guide in a stream. Great work Nader. Missed the testing part though... Will there be more? youtu.be/xBrPSiapAc8?t=404