Merge remote-tracking branch 'origin/moralis-login'

frontend/package.json

@@ -35,11 +35,13 @@
     "events": "^3.3.0",
     "express": "4.17.2",
     "formik": "^2.2.9",
+    "moralis": "^1.5.11",
     "nodemon": "^2.0.15",
     "process": "^0.11.10",
     "react": "^17.0.2",
     "react-datepicker": "^4.7.0",
     "react-dom": "^17.0.2",
+    "react-moralis": "^1.3.5",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
     "serve-static": "^1.14.2",

frontend/src/client/components/Navbar.tsx

@@ -1,21 +1,48 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
-import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName, Connector } from 'wagmi'
-import { InjectedConnector } from 'wagmi/connectors/injected'
+import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName, Connector } from "wagmi";
+import { InjectedConnector } from "wagmi/connectors/injected";
 import nerpLogo from "../../../static/nerpLogoWhite.png";
+import { useMoralis } from "react-moralis";
 
 export const Navbar = () => {
   const { data: accountData } = useAccount();
-  const { data: ensName } = useEnsName({ address: accountData?.address })
+  const { data: ensName } = useEnsName({ address: accountData?.address });
   const { connect, connectors, error, isConnecting, pendingConnector } = useConnect();
   const { disconnect } = useDisconnect();
 
+  const { authenticate, isAuthenticated, isAuthenticating, user, account, logout } = useMoralis();
+  useEffect(() => {
+    if (isAuthenticated) {
+      // add your logic here
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated]);
+
+  const login = async () => {
+    if (!isAuthenticated) {
+      await authenticate({ signingMessage: "Log into N3RP" })
+        .then(function (user) {
+          console.log("logged in user:", user);
+          console.log(user!.get("ethAddress"));
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    }
+  };
+
+  const logOut = async () => {
+    await logout();
+    console.log("logged out");
+  };
+
   return (
     <header className={"justify-center items-center bg-indigo-400 w-full"}>
       <div className="container flex flex-wrap justify-between items-center mx-auto">
         <div className="">
           <Link to="/">
-           <img src={nerpLogo} className="h-40 inline" alt="logo" />
+            <img src={nerpLogo} className="h-40 inline" alt="logo" />
           </Link>
         </div>
         <div className="flex">
@@ -34,40 +61,44 @@ export const Navbar = () => {
 
           {/* Wallet connection. */}
           {error && <div>error.message</div>}
-          {accountData
-            ? <>
-                <div className="text-black font-bold py-2 pl-4 pr-10">
-                  {ensName
-                  ? <div>{ensName}</div>
-                  : <div>{accountData.address?.substring(0, 8)}...</div>
-                  }
-                </div>
-                <div>
-                  <button
-                    className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
-                    onClick={() => disconnect()}
-                  >
-                    Disconnect
-                  </button>
-                </div>
-              </>
-            /* All the connection buttons (only show the ones that are ready to be used). */
-            : <div>
-              {connectors.filter((connector) => connector.ready).map((connector) => (
+          {accountData ? (
+            <>
+              <div className="text-black font-bold py-2 pl-4 pr-10">
+                {ensName ? <div>{ensName}</div> : <div>{accountData.address?.substring(0, 8)}...</div>}
+              </div>
+              <div>
                 <button
                   className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
-                  key={connector.id}
-                  onClick={() => connect(connector)}
+                  onClick={() => {
+                    disconnect();
+                    logOut();
+                  }}
                 >
-                  {connector.name}
-                  {!connector.ready && ' (unsupported)'}
-                  {isConnecting &&
-                    connector.id === pendingConnector?.id &&
-                    ' (connecting)'}
+                  Disconnect
                 </button>
-              ))}
+              </div>
+            </>
+          ) : (
+            /* All the connection buttons (only show the ones that are ready to be used). */
+            <div>
+              {connectors
+                .filter(connector => connector.ready)
+                .map(connector => (
+                  <button
+                    className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
+                    key={connector.id}
+                    onClick={() => {
+                      connect(connector);
+                      login();
+                    }}
+                  >
+                    {connector.name}
+                    {!connector.ready && " (unsupported)"}
+                    {isConnecting && connector.id === pendingConnector?.id && " (connecting)"}
+                  </button>
+                ))}
             </div>
-          }
+          )}
         </div>
       </div>
     </header>

frontend/src/client/entry-client.tsx

@@ -3,12 +3,18 @@ import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import { App } from "./App";
 import "./index.css";
+import { MoralisProvider } from "react-moralis";
 
 ReactDOM.hydrate(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <MoralisProvider
+      serverUrl="https://9soacisxu22u.usemoralis.com:2053/server"
+      appId="fqMyf2nTsjNW99WTHFmm5GwkXq3skEXNtxRqfSqP"
+    >
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </MoralisProvider>
   </React.StrictMode>,
   document.getElementById("app"),
 );