Add initial web3 configs

lib/atoms/.gitkeep

@@ -0,0 +1 @@
+All atoms shoul be created in this folder

lib/hooks/.gitkeep

@@ -0,0 +1 @@
+All reusable hooks should be created under this folder

lib/web3/actions.ts

@@ -0,0 +1,14 @@
+import Web3Service from "./service";
+
+class Web3Actions {
+  public async connectWallet() {
+    const web3Instance = new Web3Service();
+    const signer = await web3Instance.connect();
+
+    console.log(signer);
+  }
+}
+
+const web3Actions = new Web3Actions();
+
+export default web3Actions;

lib/web3/index.ts

@@ -1,28 +1,4 @@
-import { ethers } from "ethers";
-import { TChain } from "../../types/chains";
-import { CHAINS_ENV } from "../config/chains";
-import NFTABI from "../web3/abis/NFT.json";
-class Web3Instance {
-  public provider;
+import web3Actions from "./actions";
+import Web3Service from "./service";
 
-  constructor() {
-    this.provider = new ethers.providers.JsonRpcProvider(
-      CHAINS_ENV.polygon.nodeRPC
-    );
-  }
-
-  public contract(chain: TChain = "polygon") {
-    const network = this.getChainByName(chain);
-    return new ethers.Contract(
-      network.mintContractAddress,
-      NFTABI,
-      this.provider
-    );
-  }
-
-  public getChainByName(chain: TChain = "polygon") {
-    return CHAINS_ENV[chain];
-  }
-}
-
-export default Web3Instance;
+export { Web3Service, web3Actions };

lib/web3/service.ts

@@ -0,0 +1,47 @@
+import { ethers } from "ethers";
+import { TChain } from "../../types/chains";
+import { CHAINS_ENV } from "../config/chains";
+import NFTABI from "./abis/NFT.json";
+
+class Web3Service {
+  public provider;
+
+  constructor() {
+    //  Initial implementation of connecting to the blockchain with an hardcoded chain
+    this.provider = new ethers.providers.JsonRpcProvider(
+      CHAINS_ENV.polygon.nodeRPC
+    );
+  }
+
+  public contract(chain: TChain = "polygon") {
+    const network = this.getChainByName(chain);
+    return new ethers.Contract(
+      network.mintContractAddress,
+      NFTABI,
+      this.provider
+    );
+  }
+
+  public getChainByName(chain: TChain = "polygon") {
+    return CHAINS_ENV[chain];
+  }
+
+  /**
+   * Hey folks, this is just the initial way of connecting wallet with support to MetaMask.
+   * It should be improved to support other wallets.
+   * @returns signer - The currently connected user
+   */
+  public async connect() {
+    if (window && !window?.ethereum)
+      return new Error("Browser does not support Web3");
+
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+
+    await provider.send("eth_requestAccounts", []);
+
+    const signer = provider.getSigner();
+    return signer;
+  }
+}
+
+export default Web3Service;

pages/index.tsx

@@ -1,6 +1,7 @@
 import { Button } from "antd";
 import type { NextPage } from "next";
 import Head from "next/head";
+import { web3Actions } from "../lib/web3";
 
 const Home: NextPage = () => {
   return (
@@ -13,7 +14,9 @@ const Home: NextPage = () => {
 
       <div className="h-full flex flex-col justify-center items-center">
         <h1 className="text-white text-4xl mb-4">ONGAMA NFT MARKET</h1>
-        <Button className="text-white">Ant Design And Tailwind</Button>
+        <Button className="text-white" onClick={web3Actions.connectWallet}>
+          Connect Wallet
+        </Button>
       </div>
     </div>
   );

polyfill.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    ethereum: any;
+  }
+}