conect client to wallet

client/src/App.js

@@ -1,13 +1,46 @@
 import "./App.css";
+import {} from "ethers";
+import { useEffect, useState } from "react";
+import { withEth } from "./lib/eth";
 
 function App() {
+  const [currentAccount, setCurrentAccount] = useState("");
+
+  const checkIfWalletConnected = withEth(async (ethereum) => {
+    const accounts = await ethereum.request({ method: "eth_accounts" });
+    if (accounts.length !== 0) {
+      console.log(`Found authorized account ${accounts[0]}`);
+      setCurrentAccount(accounts[0]);
+    }
+  });
+
+  const connectWallet = withEth(async (ethereum) => {
+    const accounts = await ethereum.request({ method: "eth_requestAccounts" });
+    console.log(`connected to ${accounts[0]}`);
+    setCurrentAccount(accounts[0]);
+  });
+
+  const mintNFT = withEth(async (ethereum) => {});
+
+  useEffect(() => {
+    checkIfWalletConnected();
+  }, []);
+
   return (
     <div className="App">
       <div className="container">
         <div className="header-container">
           <p className="header gradient-text">EpicNFTs Collection</p>
           <p className="sub-text">Each unique. Each beautiful. Discover your NFT today.</p>
-          <button className="cta-button connect-wallet-button">Connect with Wallet</button>
+          {currentAccount ? (
+            <button onClick={mintNFT} className="cta-button mint-button">
+              Mint your EpicNFT
+            </button>
+          ) : (
+            <button className="cta-button connect-wallet-button" onClick={connectWallet}>
+              Connect with Wallet
+            </button>
+          )}
         </div>
       </div>
     </div>

client/src/index.js

@@ -3,13 +3,10 @@ import ReactDOM from "react-dom";
 import reportWebVitals from "./reportWebVitals";
 import App from "./App";
 import "./index.css";
-import { MantineProvider } from "@mantine/core";
 
 ReactDOM.render(
   <React.StrictMode>
-    <MantineProvider>
-      <App />
-    </MantineProvider>
+    <App />
   </React.StrictMode>,
   document.getElementById("root")
 );

client/src/lib/eth.js

@@ -0,0 +1,16 @@
+const getEth = () => {
+  const { ethereum } = window;
+  if (!ethereum) {
+    alert("Wallet not detected. Make sure you have Metamask extension installed and activated.");
+  }
+  return ethereum;
+};
+
+export const withEth = (f) => async (props) => {
+  try {
+    const ethereum = getEth();
+    await f(ethereum, props);
+  } catch (error) {
+    console.error(error);
+  }
+};