-
-
Save adilanchian/71890bf4fcd8f78e94c77cf694b24659 to your computer and use it in GitHub Desktop.
| 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 | |
| } |
Send me a wave... thanks
https://waveportal-send-a-wave.pondeiebimo.repl.co/
You can send me a wave :)
https://eth-smart-contract.lucidsamuel.repl.co/
Please send me a wave...let's build together...
https://waveportal-starter-project.xaki85.repl.co/
hello guys, please send me a wave. thanks.
https://waveatme.brycehuang.repl.co/
Hi folks, this is my website: https://buildspace-waveportal.paulo1407.repl.co/
I'm going to wave all sites posted here!!!
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.
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)
Please wave at me :)
https://waveportal-starter-project.ical10.repl.co/
anyone else having trouble getting the front end to talk to a Goerli smart contract? what's the problem?
hi
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 !
You are bossman
@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
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
@sparrow313 make sure you are connected to the same network that the contract is deployed