adilanchian · March 15, 2023 09:32 · bill95196 · Mar 30, 2022 · clever-web · Apr 30, 2022
diff --git a/App.js b/App.js
 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
diff --git a/hardhat.config.js b/hardhat.config.js
 require('@nomiclabs/hardhat-waffle');

 module.export = {
  solidity: '0.8.0',
  networks: {
    rinkeby: {
      url: 'YOUR ALCHEMY_API_URL',
      accounts: ['YOUR_PRIVATE_RINKEBY_ACCOUNT_KEY'],
    },
  },
 };
diff --git a/WavePortal.json b/WavePortal.json
 {
  YOUR_ABI_CONTENT_GOES_HERE
 }
	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'],
	},
	},
	};