DEV Community

The Complete Guide to Full Stack Ethereum and EVM Development

Nader Dabit on April 09, 2021

Building Full Stack dApps with React, Ethers.js, Solidity, and Hardhat Updated on September 11 2022 In this tutorial, you'll learn a ...

Read full post

Horace Nelson • Apr 14 '21

Any idea why getBalance in App.js would throw

Error: call revert exception (method="balanceOf(address)", errorSignature=null, errorArgs=[null], reason=null, code=CALL_EXCEPTION, version=abi/5.1.0)

sendCoins works fine.

Horace Nelson • Apr 14 '21 • Edited

Here's the deploy output:

Starting: scripts/deploy.js --network localhost
Deploying contracts with the account: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
Deploying a Greeter with greeting: Hello, World!
Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
Token deployed to: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512

And here's my App.js:

import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers'
import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'
import Token from './artifacts/contracts/Token.sol/Token.json'
const greeterAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3"
const tokenAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"

function App() {
  const [greeting, setGreetingValue] = useState()
  const [userAccount, setUserAccount] = useState()
  const [amount, setAmount] = useState()

  async function requestAccount() {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  }

  async function fetchGreeting() {
    if (typeof window.ethereum !== 'undefined') {
      const provider = new ethers.providers.Web3Provider(window.ethereum)
      console.log({ provider })
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
      try {
        const data = await contract.greet()
        console.log('data: ', data)
      } catch (err) {
        console.log("Error: ", err)
      }
    }    
  }

  async function getBalance() {
    if (typeof window.ethereum !== 'undefined') {
      const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })
      console.log({ account }) // outputs { account: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266" }
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner()
      const contract = new ethers.Contract(tokenAddress, Token.abi, signer)

      // THIS THROWS
      contract.balanceOf(account)
        .then(data => {
          console.log("data: ", data.toString())
        })
    }
  }

  async function setGreeting() {
    if (!greeting) return
    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      console.log({ provider })
      const signer = provider.getSigner()
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)
      const transaction = await contract.setGreeting(greeting)
      await transaction.wait()
      fetchGreeting()
    }
  }

  async function sendCoins() {
    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner()
      const contract = new ethers.Contract(tokenAddress, Token.abi, signer)
      contract.transfer(userAccount, amount).then(data => console.log({ data }))
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={fetchGreeting}>Fetch Greeting</button>
        <button onClick={setGreeting}>Set Greeting</button>
        <input onChange={e => setGreetingValue(e.target.value)} placeholder="Set greeting" />

        <br />
        <button onClick={getBalance}>Get Balance</button>
        <button onClick={sendCoins}>Send Coins</button>
        <input onChange={e => setUserAccount(e.target.value)} placeholder="Account ID" />
        <input onChange={e => setAmount(e.target.value)} placeholder="Amount" />
      </header>
    </div>
  );
}

export default App;

Simranjeet Singh • Jul 15 '21

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!

Jamiebones • Sep 19 '21

Signing is required.

Dav • Aug 11 '21 • Edited

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.

Nader Dabit • Apr 14 '21

Hey, not sure why you would run into that, did you figure it out?

Dominic Wong • Apr 19 '21

I am running into the same issue

Dominic Wong • Apr 19 '21

It worked when I called balanceOf inside deploy.js, just not when calling from App.js

Nikolay • Apr 26 '21

Stuck with the same issue. After some deep dive into hardhat docs finally, I've found the cause.
It looks like instead

npx run scripts/deploy.js --network localhost

should be

npx run hardhat scripts/deploy.js --network localhost

@dabit3 could you please correct it?

Himika Prabhat • Aug 14 '22

It still ain't working for me, even after making this change

Niroshan Sooriyakumar • Apr 22 '21 • Edited

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!

Richard Melkonian • May 30 '21

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!

Gautham 🌶 • Apr 19 '21

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.

Nico • Apr 10 '21

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 :)

Nader Dabit • Apr 11 '21

Good call out. You can also go to advanced settings and reset the account which will fix this as well.

lpatipat • Jun 20 '21

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.

Nader Dabit • Jun 20 '21

I believe it has something to do with the nonce being out of sync, but I don't know a lot more than that.

Emanuel • Apr 11 '21 • Edited

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.

Error:  Error: network does not support ENS (operation="ENS", network="unknown", code=UNSUPPORTED_OPERATION, version=providers/5.1.0)
    at Logger.makeError (index.ts:205)
    at Logger.throwError (index.ts:217)
    at Web3Provider.<anonymous> (base-provider.ts:1407)
    at Generator.next (<anonymous>)
    at fulfilled (base-provider.ts:2)```

wschwab • Apr 12 '21

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

Nico • Apr 11 '21 • Edited

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.

mayas salman • Apr 9 '21

thank you Nader
I will consider this as my first step to blockchain domain
all the best

Precious Chicken • Apr 10 '21

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

Nader Dabit • Apr 11 '21

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.

Precious Chicken • Apr 11 '21

Hmmm, interesting. I will defo take a look next time.

Niraj Kamdar • May 5 '21 • Edited

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.

Precious Chicken • May 14 '21

console.log would be very useful...

Brian Douglas • Apr 11 '21

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!

Nader Dabit • Apr 11 '21

Thanks Brian, happy to hear this 🙏

Nick Taylor • Aug 9 '21

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.

{
  code: "ResourceNotFound",
  message: "/ does not exist"
}

I'm going to try out the one mentioned here

Tyson Wynne • May 29

The Ropsten Ethereum Faucet said I was spamming, so I just ended up using this one instead -- faucet.dimensions.network/

Nick Taylor • Aug 22 '21

Looks like the test faucet in the tutorial is working again. I guess they updated their certificate. 😎

Horace Nelson • Apr 10 '21 • Edited

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.

Nader Dabit • Apr 11 '21

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 🙏

Zulu™#July25th • Apr 15 '21

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

RobertoSnap • Apr 10 '21

👏 check out npmjs.com/package/@symfoni/hardhat...

arielbk • Dec 18 '21

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!

tanyeun • Dec 5 '21 • Edited

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

Lucas • Jan 11 '22

I have the same error... Have you found a solution yet?

OckhamsRazor • Feb 5 '22 • Edited

Maybe you copied this contract address,

you should choose one from these 20 accounts' keys

Chiranjibi Poudyal • May 23 '21

I am doing this project in typescript, when I run "npx hardhat node" it throws an error saying

An unexpected error occurred:

/home/chiranz/programming/blockchain/smartcontracts/tutorials/react-dapp/hardhat.config.ts:12
export default config;

SyntaxError: Unexpected token 'export'

What am I missing here ?

import { HardhatUserConfig } from "hardhat/types";
const config: HardhatUserConfig = {
  solidity: {
    compilers: [{ version: "0.8.3", settings: {} }],
  },
  paths: { artifacts: "./src/artifacts" },
  networks: {
    hardhat: {
      chainId: 1337,
    },
  },
};

export default config;

Manu Matila • May 25 '22

Also ran into this issue. create-react-app Typescript template had created a tsconfig file for me, that had "module": "esnext". Changing it to "module": "commonjs" ended up fixing the issue for me.

lpatipat • Jul 1 '21

I also ran into this with typescript for hardhat. Did you ever find a solution?

lpatipat • Jul 1 '21

Update:

just found a fix:

update the hardhat.config.ts file with

"module": "commonjs"

Steadylearner • May 26 '21 • Edited

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.

Jason LΞvin • Oct 30 '21

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?

Colnnn • Nov 1 '21

hi have you figured it out? I'm getting the same error too

PaloDean • Nov 27 '21

ethereum.stackexchange.com/questio...

Brian Fakhoury • Apr 12 '21

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.

Dominic Wong • Apr 19 '21

I did the same thing and no luck as well. Tried restarting the node and the contracts were deployed to the same address.

Jon Ramvi • Apr 12 '21

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

elm3nt0r • Apr 24 '21

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?

Jon Ramvi • Apr 24 '21

That's right. Symfoni, together with Hardhat, does all the heavy lifting and repetitive tasks for you.

niceBardo • Apr 20 '21

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!

Jeff • May 16 '21 • Edited

Verify your hardhat.config.js, in my case my issue was a typo around network

Son DotCom 🥑💙 • Apr 21 '21

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.

Nick Taylor • Aug 9 '21

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.

Francine Walker • Jan 14 '22

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.

Alexander Telegin • Mar 11 '22 • Edited

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 :)

Tango (he/him) • Dec 15 '21

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?

Cody Breene • Jan 1 '22

I ran into the same issue - you'll just need to reconnect MetaMask: ethereum.stackexchange.com/questio...

OckhamsRazor • Feb 5 '22 • Edited

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.

Pure Black • Aug 6 '21

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'

Braian Fernandez • Nov 17 '21

Verify your hardhat.config.js, in my case my issue was a typo in paths :D

Cameren Dolecheck • May 5 '21

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.

Casey Siebel • Feb 3 '23 • Edited

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.

Oscar Ortiz • May 22 '22

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!

deer • May 9 '22

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.

JT • May 12 '22

I am getting the same issue. Have you been able to resolve this?

deer • May 13 '22

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.

WZRD • Apr 6 '22

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

greent3 • Jan 19 '22

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

arielbk • Dec 15 '21

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.

Tyson Wynne • May 29 '21

The Ropsten Ethereum Faucet said I was spamming, so I just ended up using this one instead -- faucet.dimensions.network/

Luca Wrabetz • Oct 12 '21

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!

Hamish Andrew McDougall • Oct 10 '21

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

Atish Kadam • Sep 29 '21

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, or npm audit for details
I tried 'npm audit fix' but still facing same issue.

Kacem AIT OUAL • Sep 17 '21

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

13 |   // request access to the user's MetaMask account
14 |   async function requestAccount() {

15 | await window.ethereum.request({ method: 'eth_requestAccounts' });
| ^
16 | }
17 |
18 | // call the smart contract, read the current greeting value

I'm working on a running node on gitpod.

PabloHoudini • Jun 11 '21 • Edited

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:

import Election from '../../artifacts/contracts/Election.sol/Election.json';

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:

Ricardo T • Jun 10 '21

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.

Mat Warger • May 30 '21

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

Philip Viktor Schulz-Klingauf • Sep 22 '21

I thank you so very much for this valuable kick-start, Nader!

StevePlace68 • May 24 '22

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.

Ale • Apr 10 '21

This is amazing. Thanks a lot.

Prithvish Baidya • Apr 9 '21

Extremely well written. Great job!

Sarfaraz Rydhan • Apr 10 '21

Thank you for putting this together. Really easy to follow.

muzammilaalpha • Apr 10 '21

Good one!

Zoie Cheng • May 26 '22

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' ?

Parker • Apr 10 '21

Great read. I will do some reading on Crypto, etc. then I can give this a go

Matt Lim • Aug 10 '21

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)

Katya Pavlopoulos • Apr 24 '21

Thank you so much for putting this guide together!!

Tristan Pollock • Apr 9 '21

LOVE IT!

Md. Maruf Hossain • May 17 '22 • Edited

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.

Julius Suominen • May 26 '21

Really nice, thanks. Easy to follow and informative.

Markus Siering • May 20 '21

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

Jon Williams • Nov 9 '21

What operating system do I need to be on to follow this guide?

Rene Rubalcava • Apr 11 '21

Nice one! I've been using ganache and truffle, hadn't seen hardhat, I'll be giving this one a shot!

emilianopb92 • Apr 10 '21

Amazing post, a good first approach into one technical implementation of ethereum

rodri • Sep 28 '21

Any reason why clicking on fetchGreeting or getBalance wouldn't output anything on the console but the other two functions would? Thank you!

The ZEROth Particle • Jul 23 '21

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'

Black Raven • Jul 18 '21

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

Black Raven • Jul 18 '21

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.

Quentin • Jun 27 '21

This was great help, thanks!

AngelSandoval1 • Jun 10 '21

What solidity extensions do you use for vs code

Yuri Filatov • Apr 13 '21

Cool! This is a really informative article. Thank you

Nishant Munjal • Dec 11 '21

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

logan • Nov 30 '21

the Ropsten ETH faucet above didnt work for me, but this one did: faucet.dimensions.network/

Cody Breene • Jan 2 '22

For me, the send function appears to be working, but when I fetch the balance the total is not updated.

vrunishkajo • Nov 25 '21

Is there an alternative to Meta Mask?

Brian Kisese • Jan 14 '22

Thank you for the content, its really helped

Fau • Apr 22 '21 • Edited

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

Allen Ray • Jul 14 '23

Hi, the latest Ethereum test network is Sepolia. As of July 2023, the Ropsten test network has been permanently discontinued

Justine Jade 3.0 • Apr 6 '22

Let's be friends.

Joseph Ani • Jan 20 '22 • Edited

Hello Devs,
I got to the root of the tutorial and after running 'npm start'. I encountered the following issues.

Clytax • Feb 15 '22

Amazing post. Thanks for providing us with such high-quality content!

passionateplayer • Sep 7 '23

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.

Thomas Ochman • Apr 12 '21

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