text: import React, { useEffect, useState } from "react";
  import { ethers } from "ethers";
  import './App.css';
  import waveportal from "./utils/WavePortal.json";
  
  export default function App() {
  
    const [ currentAccount, setCurrentAccount ] = useState("");
    const [ currentNetwork, setCurrentNetwork ] = useState("");
    const [ waves, setWaves ] = useState(0);
    const [ allWaves, setAllWaves ] = useState([]);
    const [ transacting, setTransacting ] = useState(false);
    const [ message, setMessage ] = useState("");
  
    const contractAddress = '0x94FA5d2EAb39C801B41cEFCE27262C5bF2af7b66';
    const contractABI = waveportal.abi;
  
    useEffect(() => {
      checkIfWalletIsConnected();
    }, []);
  
    useEffect(() => {
      getChainData();
      getAllWaves();
    });
  
    useEffect(() => {
      checkCurrentNetwork();
    }, [currentNetwork]);
  
    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 authroized account:", account);
          setCurrentAccount(account);
        } else {
          console.log("No authorized account found");
        }
      } catch (error) {
        console.log("Error:", 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:", error);
      }
    }
  
    const checkCurrentNetwork = async () => {
      try {
        const { ethereum } = window;
        if (ethereum) {
          const provider = new ethers.providers.Web3Provider(ethereum);
          const network = await provider.getNetwork();
          setCurrentNetwork(network.chainId);
  
          window.ethereum.on("chainChanged", (chainId) => {
            setCurrentNetwork(chainId);
          });
  
        } else {
          console.log("No ethereum object found");
        }
      } catch (error) {
        console.log("Error:", error);
      }
    }
  
    const getChainData = 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();
          setWaves(count.toNumber());
        } else {
          console.log("No ethereum object found");
        }
      } catch (error) {
        console.log("Error:", 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());
          setWaves(count.toNumber());
  
          const waveTxn = await wavePortalContract.wave(message, { gasLimit: 300000});
          setMessage("");
          console.log("Mining...", waveTxn.hash);
          setTransacting(true);
  
          await waveTxn.wait();
          console.log("Mined -- ", waveTxn.hash);
          setTransacting(false);
          count = await wavePortalContract.getTotalWaves();
          console.log("Retrieved total wave count...", count.toNumber());
          setWaves(count.toNumber());
        } else {
          console.log("No ethereum object found");
        }
      } catch (error) {
        console.log("Error:", error);
      }
    }
  
    const getAllWaves = 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);
  
          const waves = await wavePortalContract.getAllWaves();
  
          let wavesCleaned = [];
          waves.forEach(wave => {
            wavesCleaned.push({
              address: wave.waver,
              timestamp: new Date(wave.timestamp * 1000),
              message: wave.message
            });
          });
  
          setAllWaves(wavesCleaned);
        } else {
          console.log("No ethereum object found");
        }
      } catch (error) {
        console.log("Error:", error);
      }
    }
  
    useEffect(() => {
      let wavePortalContract;
      
      const onNewWave = (from, timestamp, message) => {
        console.log('NewWave', from, timestamp, message);
        setAllWaves(prevState => [
          ...prevState,
          {
            address: from,
            timestamp: new Date(timestamp * 1000),
            message: message
          },
        ]);
      };
  
      if (window.ethereum) {
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const signer = provider.getSigner();
  
        wavePortalContract = new ethers.Contract(contractAddress, contractABI, signer);
        wavePortalContract.on('NewWave', onNewWave);
      }
  
      return () => {
        if (wavePortalContract) {
          wavePortalContract.removeListener('NewWave', onNewWave);
        }
      };
    }, [contractABI]);
    
    return (
      <div className="mainContainer">
        <div className="dataContainer">
          <header className="site-header">
            <div class="title"><span role="img" aria-label="wave emoji">👋</span> Wave Portal <span role="img" aria-label="wave label">🌊</span></div>
            <div class="wave-count">Total Waves: { waves }</div>
          </header>
  
          <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.agNLBHT1jL57d5uVGH-d5wAAAA%26pid%3DApi&f=1" alt="zebra sunglasses" className="zebra-sunglasses" />
  
          <div className="bio">
            Hi, I'm Robert Hall. I'm a developer working in the event tech industry.
          </div>
  
          <div className="message-input">
            <label for="message">
              <textarea id="message" placeholder="Enter a message to wave" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
            </label>
          </div>
  
          <button disabled={transacting || currentNetwork !== 4} className="waveButton" onClick={wave}>
            { !transacting ? 'Wave at Me' : 'Transacting. Please wait...' }
          </button>
  
          { currentNetwork !==  4 && <div className="chain">Please connect to the Rinkeby Network</div> }
  
          {!currentAccount && (
            <button className="waveButton" onClick={connectWallet}>
              Connect Wallet <span role="img" aria-label="wallet emoji">👛</span>
            </button>
          )}
  
          { allWaves.map((wave, index) => {
            return (
              <div key={index} className="wave-card">
                <p><span className="card-label">Address:</span> {wave.address}</p>
                <p><span className="card-label">Time:</span> {wave.timestamp.toString()}</p>
                <p><span className="card-label">Message:</span> {wave.message}</p>
              </div>)
          }) }  
  
  
        </div>
      </div>
    );
  }
  