Solution: Creating a React Component

import Web3 from "web3";
import {useEffect, useRef, useState,} from "react";
export default function Home() {
  const web3 = useRef(null);
  const [hasWalletWarning, setHasWalletWarning] = useState(false);
  const [currentAccount, setCurrentAccount] = useState(null);
  const connectWallet = async () => {
    if (!checkIfWalletIsConnected()) {
      return;
    }
    try {
      const { ethereum } = window;
      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });
      console.log("Connected", accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };
  const checkIfWalletIsConnected = () => {
    return Boolean(window.ethereum);
    };
  function MainButton({
    onClick,disabled,label,
    }) {
    return (
      <button onClick={onClick} disabled={disabled}>
        <span>{label}</span>
      </button>
    );
  }
  useEffect(() => {
    const hasWallet = checkIfWalletIsConnected();
    setHasWalletWarning(!hasWallet);
    }, []);
  useEffect(() => {
    if (web3.current) {
      return;
      }
    if (!checkIfWalletIsConnected()) {
      return;
      }
    web3.current = new Web3(window.ethereum);
    web3.current.eth
      .getBlock("latest")
      .then((block) => console.log(block));
      }, []);
  return (
    <div>
    <main>
      {!currentAccount && (
        <div>
          <MainButton onClick={connectWallet}
          label={"Connect Wallet"}/>
        </div>
        )}
}