frontendFile

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home/Home";
import About from "./components/Help/About1";
import Resume from "./components/catalog/ResumeNew";
import ScrollToTop from "./components/ScrollToTop";
import "bootstrap/dist/css/bootstrap.min.css";
import abi from "./artifacts/contracts/Flights.sol/Flights.json";
const ethers = require('ethers');

function App() {
  const [state, setState] = useState({
    address: null,
    provider: null,
    signer: null,
    contract: null
  });

  const connectWallet = async () => {
    const contractAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
    const contractabi = abi.abi;

    try {
      // Check if MetaMask or another Ethereum wallet is installed and connected
      if (typeof window.ethereum === 'undefined') {
        console.error("Please install MetaMask or another Ethereum wallet.");
        return;
      }

      // Check if MetaMask is connected
      const isConnected = await window.ethereum._metamask.isUnlocked();
      if (!isConnected) {
        console.error("Please unlock MetaMask or connect your Ethereum wallet.");
        return;
      }

      // Requesting accounts from MetaMask
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      const account = accounts[0];

      // Creating provider, signer, and contract instances
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      const contract = new ethers.Contract(contractAddress, contractabi, signer);

      // Update the state with the obtained values
      setState({ address, provider, signer, contract });
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    connectWallet();
  }, []);

  console.log(state);

  return (
    <Router>
      <div className="App">
        <Navbar />
        <ScrollToTop />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/help" element={<About />} />
          <Route path="/catalog" element={<Resume />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;