Skip to content

Instantly share code, notes, and snippets.

@adilanchian
Last active March 15, 2023 09:32
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 18 You must be signed in to fork a gist
  • Save adilanchian/71890bf4fcd8f78e94c77cf694b24659 to your computer and use it in GitHub Desktop.
Save adilanchian/71890bf4fcd8f78e94c77cf694b24659 to your computer and use it in GitHub Desktop.
Section 3: Build web3 app that connects to our wallet and talks to our WaveContract
import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import './App.css';
import abi from './utils/WavePortal.json';
const App = () => {
const [currentAccount, setCurrentAccount] = useState("");
/**
* Create a varaible here that holds the contract address after you deploy!
*/
const contractAddress = "0xd5f08a0ae197482FA808cE84E00E97d940dBD26E";
const contractABI = abi.abi;
const checkIfWalletIsConnected = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
console.log("Make sure you have metamask!");
return;
} else {
console.log("We have the ethereum object", ethereum);
}
const accounts = await ethereum.request({ method: 'eth_accounts' });
if (accounts.length !== 0) {
const account = accounts[0];
console.log("Found an authorized account:", account);
setCurrentAccount(account)
} else {
console.log("No authorized account found")
}
} catch (error) {
console.log(error);
}
}
const connectWallet = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
alert("Get MetaMask!");
return;
}
const accounts = await ethereum.request({ method: "eth_requestAccounts" });
console.log("Connected", accounts[0]);
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error)
}
}
const wave = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const wavePortalContract = new ethers.Contract(contractAddress, contractABI, signer);
let count = await wavePortalContract.getTotalWaves();
console.log("Retrieved total wave count...", count.toNumber());
const waveTxn = await wavePortalContract.wave();
console.log("Mining...", waveTxn.hash);
await waveTxn.wait();
console.log("Mined -- ", waveTxn.hash);
count = await wavePortalContract.getTotalWaves();
console.log("Retrieved total wave count...", count.toNumber());
} else {
console.log("Ethereum object doesn't exist!");
}
} catch (error) {
console.log(error)
}
}
useEffect(() => {
checkIfWalletIsConnected();
}, [])
return (
<div className="mainContainer">
<div className="dataContainer">
<div className="header">
👋 Hey there!
</div>
<div className="bio">
I am farza and I worked on self-driving cars so that's pretty cool right? Connect your Ethereum wallet and wave at me!
</div>
<button className="waveButton" onClick={wave}>
Wave at Me
</button>
{!currentAccount && (
<button className="waveButton" onClick={connectWallet}>
Connect Wallet
</button>
)}
</div>
</div>
);
}
export default App
require('@nomiclabs/hardhat-waffle');
module.export = {
solidity: '0.8.0',
networks: {
rinkeby: {
url: 'YOUR ALCHEMY_API_URL',
accounts: ['YOUR_PRIVATE_RINKEBY_ACCOUNT_KEY'],
},
},
};
{
YOUR_ABI_CONTENT_GOES_HERE
}
@Piagiven
Copy link

Piagiven commented Jan 1, 2022

lol

@anipaul2
Copy link

Hey the console.log(error) part is missing ";"?? Am i wrong or right?

@letsgitcracking
Copy link

letsgitcracking commented Jan 29, 2022

@anipaul2 the code still works as it's within a code block however feel free to update it and post updated gist link in this thread. Tag @adilanchian as well

@anipaul2
Copy link

@letsgitcracking Ik but using semicolon looks cleaner and the automatic system of inserting semi colon is js is horrible. some might get even confused.

@srikanthkulkarni765
Copy link

can you please add a code for progress bar when mining is in progress

@anipaul2
Copy link

@srikanthkulkarni765 You should try that because that's the HTML and CSS and you should know that

Copy link

ghost commented Feb 28, 2022

perfetct.
plz wave to me on https://wavehealer.vercel.app

@bill95196
Copy link

@clever-web
Copy link

can you please share the code for progress bar when mining is in progress

@decodde
Copy link

decodde commented May 8, 2022

Would you wave to me?

https://waveportal-starter-project-1.taowei1.repl.co

You didnt add your abi.
Fix it by
abi = abi.abi;

@sparrow313
Copy link

Error: call revert exception (method="getTotalWaves()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)
at Logger.makeError (index.ts:225:28)
at Logger.throwError (index.ts:237:20)
at Interface.decodeFunctionResult (interface.ts:425:23)
at Contract. (index.ts:392:44)
at Generator.next ()
at fulfilled (index.ts:1:1)

@guillenery
Copy link

@sparrow313 make sure you are connected to the same network that the contract is deployed

@Ebimo21
Copy link

Ebimo21 commented Jun 7, 2022

@LucidSamuel
Copy link

@zaki-siddiqui
Copy link

Please send me a wave...let's build together...
https://waveportal-starter-project.xaki85.repl.co/

@bryceehuang
Copy link

hello guys, please send me a wave. thanks.
https://waveatme.brycehuang.repl.co/

@GravelCoin
Copy link

Hi folks, this is my website: https://buildspace-waveportal.paulo1407.repl.co/

I'm going to wave all sites posted here!!!

@clever-web
Copy link

clever-web commented Jul 18, 2022 via email

@MarceloTorales
Copy link

Hi guys !!! Here is my website https://waveportal-starter-project.marcelotorales.repl.co/ ! Wave at me !! and by the way, i don't know a lot of css or html, but want to do the progress bar also.

@paryguesswhat
Copy link

i got this comment: Error: call revert exception (method="getTotalWaves()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)
at Logger.makeError (index.ts:225:28)
at Logger.throwError (index.ts:237:20)
at Interface.decodeFunctionResult (interface.ts:425:23)
at Contract. (index.ts:392:44)
at Generator.next ()
at fulfilled (_version.ts:1:24)

@ical10
Copy link

ical10 commented Sep 20, 2022

@NpappaG
Copy link

NpappaG commented Oct 10, 2022

anyone else having trouble getting the front end to talk to a Goerli smart contract? what's the problem?

@clever-web
Copy link

hi

@berrodriquez26
Copy link

i got this comment: Error: call revert exception (method="getTotalWaves()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0) at Logger.makeError (index.ts:225:28) at Logger.throwError (index.ts:237:20) at Interface.decodeFunctionResult (interface.ts:425:23) at Contract. (index.ts:392:44) at Generator.next () at fulfilled (_version.ts:1:24)

You guys need to change metamask network, to goerli, and it will work !

@TopSGW
Copy link

TopSGW commented Nov 9, 2022

You are bossman

@liusu0310
Copy link

@kriss39
Copy link

kriss39 commented Dec 12, 2022

@sparrow313 make sure you are connected to the same network that the contract is deployed

i have same error too, i connected same network but it is not worked

@Mahakal0123
Copy link

i got this comment: Error: call revert exception (method="getTotalWaves()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0) at Logger.makeError (index.ts:225:28) at Logger.throwError (index.ts:237:20) at Interface.decodeFunctionResult (interface.ts:425:23) at Contract. (index.ts:392:44) at Generator.next () at fulfilled (_version.ts:1:24)

You guys need to change metamask network, to goerli, and it will work !

I did but then also it is not working

@TopSGW
Copy link

TopSGW commented Mar 15, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment