Skip to content

Instantly share code, notes, and snippets.

@adilanchian
Last active Oct 24, 2021
Embed
What would you like to do?
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
}
@letsgitcracking

This comment has been minimized.

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