DEV Community

Cover image for The Complete Guide to Full Stack Ethereum and EVM Development

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 ...
Collapse
 
horaceshmorace profile image
Horace Nelson

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.

Collapse
 
horaceshmorace profile image
Horace Nelson • 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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
smrnjeet222 profile image
Simranjeet Singh


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!

Thread Thread
 
jamiescript profile image
Jamiebones

Signing is required.

Collapse
 
sprtd profile image
Dav • 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.

Collapse
 
dabit3 profile image
Nader Dabit

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

Thread Thread
 
dominicwong profile image
Dominic Wong

I am running into the same issue

Thread Thread
 
dominicwong profile image
Dominic Wong

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

Thread Thread
 
enemycnt profile image
Nikolay

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
Enter fullscreen mode Exit fullscreen mode

should be

npx run hardhat scripts/deploy.js --network localhost
Enter fullscreen mode Exit fullscreen mode

@dabit3 could you please correct it?

Thread Thread
 
himikap profile image
Himika Prabhat

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

Collapse
 
niroshans profile image
Niroshan Sooriyakumar • 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!

Collapse
 
richardmelko profile image
Richard Melkonian

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!

Collapse
 
gautham profile image
Gautham 🌶

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.

Collapse
 
nmassi profile image
Nico

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

Collapse
 
dabit3 profile image
Nader Dabit

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

Collapse
 
lpatipat profile image
lpatipat

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.

Thread Thread
 
dabit3 profile image
Nader Dabit

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

Collapse
 
emanuel_hodl profile image
Emanuel • 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)```


Enter fullscreen mode Exit fullscreen mode
Collapse
 
wschwab profile image
wschwab

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

Collapse
 
nmassi profile image
Nico • 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.

Collapse
 
mayassalman profile image
mayas salman

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

Collapse
 
preciouschicken profile image
Precious Chicken

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

Collapse
 
dabit3 profile image
Nader Dabit

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.

Collapse
 
preciouschicken profile image
Precious Chicken

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

Collapse
 
kniraj profile image
Niraj Kamdar • 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.

Collapse
 
preciouschicken profile image
Precious Chicken

console.log would be very useful...

Collapse
 
bdougieyo profile image
Brian Douglas

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!

Collapse
 
dabit3 profile image
Nader Dabit

Thanks Brian, happy to hear this 🙏

Collapse
 
nickytonline profile image
Nick Taylor

I went to the faucet site, but it contains a certificate error. Maybe that faucet is no longer valid?

Ropsten Faucet Site has an invalid certificate

If you continue to the site it returns the following JSON response.

{
  code: "ResourceNotFound",
  message: "/ does not exist"
}
Enter fullscreen mode Exit fullscreen mode

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/

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
horaceshmorace profile image
Horace Nelson • 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.

Collapse
 
dabit3 profile image
Nader Dabit

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 🙏

Collapse
 
thasquirrie profile image
Zulu™#July25th

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

Collapse
 
robertosnap profile image
RobertoSnap
Collapse
 
arielbk profile image
arielbk

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!

Collapse
 
tanyeun profile image
tanyeun • 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

Expected private key to be an Uint8Array with length 32

Collapse
 
lhultqvist profile image
Lucas

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

Collapse
 
ockhamsrazor profile image
OckhamsRazor • Edited

Maybe you copied this contract address,

you should choose one from these 20 accounts' keys

Collapse
 
chiranz profile image
Chiranjibi Poudyal

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'
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mmatila profile image
Manu Matila

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.

Collapse
 
lpatipat profile image
lpatipat

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

Collapse
 
lpatipat profile image
lpatipat

Update:

just found a fix:

update the hardhat.config.ts file with

"module": "commonjs"

Collapse
 
steadylearner profile image
Steadylearner • 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.

cover

Collapse
 
iamjasonlevin profile image
Jason LΞvin

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?

Collapse
 
colnnn profile image
Colnnn

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

Collapse
 
palodean profile image
PaloDean
Collapse
 
brianfakhoury profile image
Brian Fakhoury

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.

Collapse
 
dominicwong profile image
Dominic Wong

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

Collapse
 
ramvi profile image
Jon Ramvi

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

Collapse
 
elm3nt0r profile image
elm3nt0r

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?

Collapse
 
ramvi profile image
Jon Ramvi

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

Collapse
 
nicebardo profile image
niceBardo

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!

Collapse
 
a_regularjeff profile image
Jeff • Edited

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

Collapse
 
charles_lukes profile image
Son DotCom 🥑💙

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.

Collapse
 
nickytonline profile image
Nick Taylor

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.

A Solidity file in AST Explorer

It also got me thinking that you could probably write codemods for Solidity files. Anyways, small brainfart lol.

Collapse
 
fwalker profile image
Francine Walker

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.

Collapse
 
drinkius profile image
Alexander Telegin • 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 :)

Collapse
 
tangonan profile image
Tango (he/him)

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?

Collapse
 
codybreene profile image
Cody Breene

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

Collapse
 
ockhamsrazor profile image
OckhamsRazor • 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.

Collapse
 
pureblack profile image
Pure Black

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'

img

Collapse
 
braifz profile image
Braian Fernandez

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

Collapse
 
camerenisonfire profile image
Cameren Dolecheck

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.

Collapse
 
currenthandle profile image
Casey Siebel • 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":

Image description

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.

Image description

Collapse
 
cleveroscar profile image
Oscar Ortiz

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!

Collapse
 
deer26 profile image
deer

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.

Collapse
 
jyt profile image
JT

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

Collapse
 
deer26 profile image
deer

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.

Collapse
 
ithinkobjects profile image
Marlon

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

Collapse
 
greent3 profile image
greent3

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

Collapse
 
arielbk profile image
arielbk

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.

Collapse
 
tysonwynne_ profile image
Tyson Wynne

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

Collapse
 
lucawrabetz profile image
Luca Wrabetz

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!

Collapse
 
hamishandrewmc1 profile image
Hamish Andrew McDougall

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

Collapse
 
atish_kadam_f9074b3182262 profile image
Atish Kadam

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.

Collapse
 
kacemlight profile image
Kacem AIT OUAL

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() {
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
huudyy profile image
PabloHoudini • 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'; 
Enter fullscreen mode Exit fullscreen mode

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:
alt text

Collapse
 
ricardo85x profile image
Ricardo T

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.

Collapse
 
mwarger profile image
Mat Warger

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

Collapse
 
pschulzk profile image
Philip Viktor Schulz-Klingauf

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

Collapse
 
steveplace68 profile image
StevePlace68

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.

Collapse
 
alejandrowebdev profile image
Ale

This is amazing. Thanks a lot.

Collapse
 
d4mr profile image
Prithvish Baidya

Extremely well written. Great job!

Collapse
 
safoo profile image
Sarfaraz Rydhan

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

Collapse
 
muzammilaalpha profile image
muzammilaalpha

Good one!

Collapse
 
zoiecheng profile image
Zoie Cheng

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

Collapse
 
parkerproject profile image
Parker

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

Collapse
 
arcticmatt profile image
Matt Lim

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)

Collapse
 
katya_pavlopoulos profile image
Katya Pavlopoulos

Thank you so much for putting this guide together!!

Collapse
 
pollock profile image
Tristan Pollock

LOVE IT!

Collapse
 
maruf037 profile image
Md. Maruf Hossain • 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.
dapp error

Collapse
 
jsur profile image
Julius Suominen

Really nice, thanks. Easy to follow and informative.

Collapse
 
herrsiering profile image
Markus Siering

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

Collapse
 
jon_williams_c87c26a95516 profile image
Jon Williams

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

Collapse
 
odoenet profile image
Rene Rubalcava

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

Collapse
 
metashaker profile image
emilianopb92

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

Collapse
 
rodri profile image
rodri

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

Collapse
 
ani578 profile image
The ZEROth Particle

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'

Collapse
 
blackraven profile image
Black Raven

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

Collapse
 
blackraven profile image
Black Raven

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.

Collapse
 
meekaphro profile image
Quentin

This was great help, thanks!

Collapse
 
angelsandoval1 profile image
AngelSandoval1

What solidity extensions do you use for vs code

Collapse
 
filatovv profile image
Yuri Filatov

Cool! This is a really informative article. Thank you

Collapse
 
nishant670 profile image
Nishant Munjal

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

Collapse
 
jlb profile image
logan

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

Collapse
 
codybreene profile image
Cody Breene

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

Collapse
 
vrunishkajo profile image
vrunishkajo

Is there an alternative to Meta Mask?

Collapse
 
kisese profile image
Brian Kisese

Thank you for the content, its really helped

Collapse
 
fautendy profile image
Fau • 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

Collapse
 
allenray456 profile image
Allen Ray

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

Collapse
 
justinejade30 profile image
Justine Jade 3.0

Let's be friends.

Collapse
 
josephani profile image
Joseph Ani • Edited

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

Collapse
 
clytax profile image
Clytax

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

Collapse
 
passionate32271 profile image
passionateplayer

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.

Collapse
 
tochman profile image
Thomas Ochman

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