Auth mgmt

Signed-off-by: Omkar Phansopkar <omkarphansopkar@gmail.com>

Author: OmkarPh

src/apis/Contract.js

@@ -16,12 +16,12 @@ export const web3 = new Web3(Web3.givenProvider);
 
 const Contract = new web3.eth.Contract(ContractABI, contractAddress);
 
-console.log("Web3", web3);
-console.log("Contract address: ", contractAddress);
-console.log("Contract deployment: ", contractDeploymentTxLink);
-console.log("ABI: \n", ContractABI);
-console.log("Contract: \n", Contract);
-console.log("Contract methods:", Contract.methods);
+// console.log("Web3", web3);
+// console.log("Contract address: ", contractAddress);
+// console.log("Contract deployment: ", contractDeploymentTxLink);
+// console.log("ABI: \n", ContractABI);
+// console.log("Contract: \n", Contract);
+// console.log("Contract methods:", Contract.methods);
 
 if(typeof window != 'undefined'){
     window.Contract = Contract;

src/components/Loader/Loader.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const Spin = keyframes`
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+`
+
+const Spinner = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  border: 3px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 3px solid #1977F2;
+  width: ${(props) => props.size ? props.size : "18px"};
+  height: ${(props) => props.size ? props.size : "18px"};
+  -webkit-animation: ${Spin} 1s linear infinite;
+  animation: ${Spin} 1s linear infinite;
+`
+
+const Loader = ({size}) => {
+  return (
+    <div className='w-10 h-10 flex justify-center' >
+      <Spinner size={size} />
+    </div>
+  )
+}
+
+export default Loader

src/components/Navbar/Navbar.jsx

@@ -1,16 +1,54 @@
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { toast } from "react-toastify";
+import { useMetamaskAuth } from "../../auth/authConfig";
+import { LANDING_PAGE, ONBOARDING_ROUTE } from "../../constants/routes";
 
 const Navbar = () => {
+  const { connect, isLoggedIn, metaState, isProcessingLogin } = useMetamaskAuth();
+  const router = useRouter();
+
+  function disconnect() {
+    // Not sure how to do this yet :/
+    toast("Disconnected 🚧", { type: "error" });
+}
 
   return (
-    <div className="flex flex-row items-center w-[100%] h-[55px] px-[50px] box-border border-b-[1.2px] font-inter text-[24px] border-[#E1E1E1] text-black cursor-pointer">
+    <div className="flex flex-row items-center w-[100%] h-[55px] px-[50px] box-border border-b-[1.2px] font-inter text-[24px] border-[#E1E1E1] bg-[#12131A] text-white cursor-pointer">
       <div className="h-[30px] w-[30px] bg-yellow-200 mr-[15px]"></div>
-      <span>DeFi</span>
+      <Link href={LANDING_PAGE}>AppName</Link>
+
       <div className="flex flex-row gap-x-[60px] ml-auto text-[14px] font-medium font-inter text-white">
-        Connect
+        {!isProcessingLogin ? (
+          isLoggedIn ? (
+            <button
+              className="bg-white py-[8px] px-[24px] rounded-lg text-gray-600"
+              onClick={disconnect}
+            >
+              Disconnect
+            </button>
+          ) : metaState?.isConnected ? (
+            <Link
+              href={ONBOARDING_ROUTE}
+              className="bg-green-700 py-[8px] px-[24px] rounded-lg text-white"
+              onClick={connect}
+            >
+              Complete Registration
+            </Link>
+          ) : (
+            <button
+              className="bg-blue py-[8px] px-[24px] rounded-lg text-white"
+              onClick={connect}
+            >
+              Connect
+            </button>
+          )
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );
 };
 
-export default Navbar;
+export default Navbar;

src/constants/routes.js

@@ -0,0 +1,7 @@
+export const LANDING_PAGE = '/';
+export const NEW_COMER = LANDING_PAGE;
+
+export const ONBOARDING_ROUTE = 'registration';
+export const JUST_LOGGED_IN = 'dashboard'
+
+export const DASHBOARD = 'dashboard'

src/constants/routes.ts

@@ -3,18 +3,59 @@ import 'regenerator-runtime/runtime';
 import { useRouter } from "next/router";
 import { toast, ToastContainer } from "react-toastify";
 
+import { JUST_LOGGED_IN, ONBOARDING_ROUTE } from "../constants/routes";
+import { MetamaskAuthProvider } from "../auth/authConfig";
+import Navbar from "../components/Navbar/Navbar";
+
 import "./styles/globals.css";
 import "react-toastify/dist/ReactToastify.css";
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import Navbar from "../components/Navbar/Navbar";
+import { getProfile } from "../apis/user";
 
 export default function App({ Component, pageProps }) {
   const { push } = useRouter();
   // const {} = useToast();
 
+  const TestProps = {
+    hasAccount: (address) => {
+      return new Promise((resolve, reject) => {
+        console.log(`Checking if ${address} has an account ....`);
+        
+        getProfile(address)
+          .then(profile => {
+            console.log("Profile", profile);
+            resolve({
+              loggedIn: true,
+              profile: {
+                name: profile.name,
+                address: profile.walletAddress,
+              }
+            });
+          })
+          .catch(err => {
+            console.log(err);
+            resolve({
+              loggedIn: false,
+              profile: null
+            });
+          });
+      });
+    },
+    onConnected: () => {
+      // Redirect to onboarding page here
+      push(ONBOARDING_ROUTE);
+    },
+    onLoggedIn: () => {
+      push(JUST_LOGGED_IN);
+    },
+    onCancelledConnection: () => {
+      toast("Connection request cancelled !", { type: "error" });
+    }
+  };
+
   return (
     <>
       <Head>
@@ -23,8 +64,10 @@ export default function App({ Component, pageProps }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Navbar />
-      <Component {...pageProps} />
+      <MetamaskAuthProvider {...TestProps}>
+        <Navbar />
+        <Component {...pageProps} />
+      </MetamaskAuthProvider>
       <ToastContainer />
     </>
   );

src/pages/_app.jsx

@@ -1,7 +1,15 @@
+import { useMetamaskAuth, withAuthenticatedRoute } from "../auth/authConfig";
 import DashLeft from "../components/DashLeft/DashLeft"
 import DashRight from "../components/DashRight/DashRight"
+import Loader from "../components/Loader/Loader";
 
 const Dashboard = () => {
+    const { profile, isProcessingLogin } = useMetamaskAuth();
+    
+    // if(isProcessingLogin || !profile){
+    //     return <Loader size='80px' />
+    // }
+    
     return (
         <div className="flex flex-row h-[calc(100vh-55px)] bg-[#12131A]">
             <div className="w-[40%]">
@@ -16,4 +24,5 @@ const Dashboard = () => {
     )
 }
 
-export default Dashboard
+export default Dashboard
+// export default withAuthenticatedRoute(Dashboard);

src/pages/dashboard.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import Head from "next/head";
+import { useMetamaskAuth, withAuthenticatedRoute } from "../auth/authConfig";
+import { CallerFn, SenderFn } from "../apis/factory";
+import { toast } from "react-toastify";
+
+const Dashboard = () => {
+  const { isLoggedIn, isProcessingLogin, profile, refreshAuthStatus } = useMetamaskAuth();
+
+  useEffect(() => {
+    if(!profile)  return;
+    fetchPosts();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profile]);
+
+  function deleteAccount(){
+    localStorage.removeItem(profile.address);
+    refreshAuthStatus();
+  }
+
+  return (
+    <div className="p-4">
+      <Head>
+        <title>Dashboard</title>
+      </Head>
+      <div>
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+
+        {isProcessingLogin ? (
+          <>Loading ....</>
+        ) : (
+          isLoggedIn &&
+          profile && (
+            <div>
+              Logged in as {profile.name} <br />
+              Role: {profile.role} <br/>
+              @ {profile.address}
+
+              <br/>
+              <br/>
+              <br/>
+              <button className="bg-red-500 py-[8px] px-[24px] rounded-lg text-white" onClick={deleteAccount}>
+                Delete my account
+              </button>
+              <br/>
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default withAuthenticatedRoute(Dashboard);

src/pages/dashtest.jsx

@@ -22,7 +22,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx"
-  ],
+, "src/constants/routes.js"  ],
   "exclude": [
     "node_modules"
   ]