🐛 bugs and so many contexts and so many conflicts

ui/assets/animation/loading.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":31.0000012626559,"w":500,"h":500,"nm":"Loading ","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":5,"ty":4,"nm":"Rectangle_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[250,157.375,0],"to":[15.448,15.438,0],"ti":[0.031,-0.052,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[342.688,250,0],"to":[-0.059,0.098,0],"ti":[15.448,-15.427,0]},{"t":30.0000012219251,"s":[250,342.563,0]}],"ix":2},"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.38823529411764707,0.6941176470588235,0.9372549019607843,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-125,-107],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Rectangle_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[342.688,250,0],"to":[0.052,-0.073,0],"ti":[-0.01,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[250,342.563,0],"to":[0.104,0,0],"ti":[0.198,-0.073,0]},{"t":30.0000012219251,"s":[157.313,250,0]}],"ix":2},"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3843137254901961,0.47843137254901963,0.8784313725490196,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-125,-107],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Rectangle_3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[250,342.563,0],"to":[0.052,0.198,0],"ti":[0.04,-0.012,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[157.313,250,0],"to":[-0.492,0.145,0],"ti":[0.052,-0.563,0]},{"t":30.0000012219251,"s":[250,157.375,0]}],"ix":2},"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.38823529411764707,0.6941176470588235,0.9372549019607843,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-125,-107],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Rectangle_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[157.313,250,0],"to":[15.448,-15.438,0],"ti":[-0.079,0.525,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[250,157.375,0],"to":[0.019,-0.125,0],"ti":[-15.448,-15.438,0]},{"t":30.0000012219251,"s":[342.688,250,0]}],"ix":2},"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3843137254901961,0.47843137254901963,0.8784313725490196,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-125,-107],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0}],"markers":[]}

ui/components/Layout.tsx

@@ -14,6 +14,8 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 import { AuthContext } from "@/context/AuthContext";
 import AuthButton from "./AuthButton";
+import LottieAnimation from "./Lottie";
+import loadingAnimation from "../assets/animation/loading.json";
 // import { useSigner } from "wagmi";
 
 const { Title } = Typography;
@@ -24,7 +26,8 @@ interface IProp {
 }
 
 const CustomLayout = ({ children }: IProp) => {
-  const { authState, signIn, signOut, db } = useContext(AuthContext);
+  const { authState, signIn, signOut, db, isSignedInMetamask } =
+    useContext(AuthContext);
   const [currLevel, setCurrLevel] = React.useState(undefined);
   const [loading, setLoading] = React.useState(false);
 
@@ -148,7 +151,7 @@ const CustomLayout = ({ children }: IProp) => {
       // return data?.level;
       console.log("Data: ", data);
       setCurrLevel(data.level);
-      setLoading(false);
+      setTimeout(() => setLoading(false), 1000);
     };
 
     getNFTFromID();
@@ -168,39 +171,49 @@ const CustomLayout = ({ children }: IProp) => {
           }}
         >
           <Link href="/">
-            <Title style={{ color: "white", marginTop: 8 }} level={2}>
+            <Title style={{ color: "white", marginTop: 30 }} level={2}>
               DTender
             </Title>
           </Link>
           <div
             style={{
               display: "flex",
               alignItems: "center",
-              width: "30%",
+              width: "20%",
               justifyContent: "space-evenly",
             }}
           >
             <AuthButton authState={authState} signIn={signIn} />
-            <div>
-              <Image
-                src="https://ipfs.io/ipfs/QmQUFjHvxCGBiCJPog61PLrcXXK66noEEdDF6dXiyV8hcy?filename=logo.png"
-                width={50}
-                height={50}
-              />
-            </div>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <p
-                style={{ color: "white", fontWeight: "600", fontSize: "20px" }}
-              >
-                {currLevel! + 1}
-              </p>
-            </div>
+            {isSignedInMetamask && (
+              <>
+                <div>
+                  <Image
+                    src="https://ipfs.io/ipfs/QmQUFjHvxCGBiCJPog61PLrcXXK66noEEdDF6dXiyV8hcy?filename=logo.png"
+                    width={40}
+                    height={40}
+                    style={{ borderRadius: "50%" }}
+                  />
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <p
+                    style={{
+                      color: "white",
+                      fontWeight: "600",
+                      fontSize: "12px",
+                      marginTop: "12px",
+                    }}
+                  >
+                    Level: {currLevel! + 1}
+                  </p>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </Header>
@@ -235,7 +248,7 @@ const CustomLayout = ({ children }: IProp) => {
       </Layout>
     </Layout>
   ) : (
-    <p style={{ color: "white" }}>LOADING.....</p>
+    <LottieAnimation height={400} width={400} lottieData={loadingAnimation} />
   );
 };
 

ui/context/AuthContext.tsx

@@ -3,9 +3,8 @@ import { Polybase } from "@polybase/client";
 import { ethPersonalSign } from "@polybase/eth";
 import { Auth, AuthState } from "@polybase/auth";
 import { IAuthContextProps, AuthProviderProps } from "@/types/auth.types";
-import { configureChains, useAccount, useConnect } from "wagmi";
+import { configureChains } from "wagmi";
 import { polygonMumbai } from "wagmi/chains";
-import { MetaMaskConnector } from "wagmi/connectors/metaMask";
 import { publicProvider } from "wagmi/providers/public";
 import DTenderContract from "@/contracts/DTender.json";
 import { Contract, ethers } from "ethers";
@@ -34,7 +33,7 @@ export const AuthContext = React.createContext<IAuthContextProps>({
   setOptionToTrue: () => {},
   signer: undefined,
   contract: undefined,
-  db: undefined
+  db: undefined,
 });
 
 const { chains, provider } = configureChains(
@@ -56,21 +55,23 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     if (typeof window !== "undefined") {
       localStorage.setItem("walletAddress", JSON.stringify(authState?.userId));
     }
-    setIsSignedInMetamask(true);
     // @ts-ignore
     const provider = new ethers.providers.Web3Provider(window?.ethereum, "any");
     setProvider(provider);
-    await provider.send("eth_requestAccounts", []);
-    const signer = provider.getSigner();
-    console.log("signer: ", signer);
-    setSigner(signer);
-    setContract(
-      new ethers.Contract(
-        "0x5c876A33570B1202Caf2892ce3D6F53c6c40bEC0",
-        DTenderContract.abi,
-        signer
-      )
-    );
+    if (authState?.userId) {
+      setIsSignedInMetamask(true);
+      await provider.send("eth_requestAccounts", []);
+      const signer = provider.getSigner();
+      console.log("signer: ", signer);
+      setSigner(signer);
+      setContract(
+        new ethers.Contract(
+          "0x5c876A33570B1202Caf2892ce3D6F53c6c40bEC0",
+          DTenderContract.abi,
+          signer
+        )
+      );
+    }
   };
 
   const signOut = async () => {
@@ -92,9 +93,9 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
   };
 
   useEffect(() => {
+    signIn();
     const isCompany = localStorage.getItem("isCompany");
     if (isCompany) setIsCompany(JSON.parse(isCompany));
-    signIn();
   }, []);
 
   useMemo(() => {
@@ -118,7 +119,7 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
         isSignedInMetamask,
         signer,
         contract,
-        db
+        db,
       }}
     >
       {children}

ui/pages/_app.tsx

@@ -1,32 +1,22 @@
 "use client";
 import "antd/dist/reset.css";
 import "@/styles/globals.css";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import type { AppProps } from "next/app";
-import { AuthContext, AuthProvider } from "@/context/AuthContext";
+import { AuthProvider } from "@/context/AuthContext";
 import dynamic from "next/dynamic";
 import { WagmiConfig, configureChains, createClient } from "wagmi";
 import { polygonMumbai } from "wagmi/chains";
 import { publicProvider } from "wagmi/providers/public";
-import { useContractEvent } from "wagmi";
 import { MetaMaskConnector } from "wagmi/connectors/metaMask";
-import DTenderJSON from "@/contracts/DTender.json";
 import Moralis from "moralis";
-import { Modal } from "antd";
-// import { Polybase } from "@polybase/client"
-
-// const db = new Polybase({
-//   defaultNamespace: "pk/0x08965f78c6a549905b66896f5a44b3a3ac27cdd9759057d534a0b9a5bcdf7cb9aa852288826e01a7034716a2f98252500a8e480a40a2be9b6a7cc1df2f4fd9f1/DTender",
-// });
 
 // DISABLED THE SSR FOR THE LAYOUT TO REMOVE THE HYDRATION ERROR
 const CustomLayout = dynamic(
   () => import("@/components/Layout").then((mod) => mod.default),
   { ssr: false }
 );
 export default function App({ Component, pageProps }: AppProps) {
-  const [verificationEvent, setVerificationEvent] = useState<any>(undefined);
-  const { db } = useContext(AuthContext);
   const { chains, provider } = configureChains(
     [polygonMumbai],
     [publicProvider()]
@@ -38,50 +28,18 @@ export default function App({ Component, pageProps }: AppProps) {
     provider,
   });
 
-  useContractEvent({
-    address: `0x5c876A33570B1202Caf2892ce3D6F53c6c40bEC0`,
-    abi: DTenderJSON.abi,
-    eventName: "ProofSubmitted",
-    listener: (event) => {
-      console.log("EVENT: ", event);
-      setVerificationEvent(event);
-    },
-  });
-
   useEffect(() => {
     const startMoralis = async () => {
       await Moralis.start({
         apiKey: process.env.NEXT_PUBLIC_MORALIS_API_KEY,
       });
     };
-    console.log("Moralis Called");
     if (!Moralis.Core.isStarted) startMoralis();
   }, []);
 
-  console.log("wagmiClient: ", wagmiClient);
-
-  const onVerificationOk = async () => {
-    setVerificationEvent(undefined);
-    // polybase addition
-    await db!
-      .collection("VerifiedCompany")
-      .create([
-        localStorage.getItem("walletAddress") as string,
-        localStorage.getItem("walletAddress") as string,
-      ]);
-  };
   return (
     <>
       <WagmiConfig client={wagmiClient}>
-        <Modal
-          title="Verification Successful"
-          open={verificationEvent !== undefined}
-          onOk={onVerificationOk}
-          onCancel={() => setVerificationEvent(undefined)}
-        >
-          You have been successfully verified using the polygon ID zkp proof.
-          Hell yeah!!!!
-        </Modal>
         <AuthProvider>
           <CustomLayout>
             <Component {...pageProps} />