Wallet auth

packages/ui/.env.development

@@ -0,0 +1 @@
+IS_NETWORK_MAINNET="true";

packages/ui/components/Drawer.tsx

@@ -18,6 +18,7 @@ interface DrawerProps {
   expanded?: boolean;
   handleCloseClick?: () => void;
   closeDrawer: () => void;
+  handleLogout?: () => void;
 }
 
 function Drawer({
@@ -26,6 +27,7 @@ function Drawer({
   expanded,
   handleCloseClick,
   closeDrawer,
+  handleLogout
 }: DrawerProps) {
   return (
     <div
@@ -75,8 +77,9 @@ function Drawer({
         </NavLink>
         <NavLink
           icon={<ExitToAppIcon className={styles.navIcon} />}
-          href="/logout"
+          href="#"
           closeDrawer={closeDrawer}
+          handleLogout={handleLogout}
         >
           Log out
         </NavLink>

packages/ui/components/MainNav.tsx

@@ -2,19 +2,33 @@ import React from "react";
 
 import styles from "./MainNav.module.css";
 import Drawer from "./Drawer";
+import { userSession } from "./auth";
 
 interface MainNavProps {
   children: React.ReactNode;
   className?: string;
 }
 
 function MainNav({ children, className }: MainNavProps) {
+
+  const handleLogout = () => {
+    // Sign the user out
+    userSession.signUserOut();
+
+    // TODO: Redirect the user to the home/landing page
+    window.location.href = "/login";
+  }
+
   return (
     <div className={styles.contentContainer}>
       {/* Need to provide closeDrawer since it's a required prop for nested components
        even though it's not used in our destkop nav. This way we avoid adding conditional
        logic to the NavLink component*/}
-      <Drawer className={className} closeDrawer={() => {}} />
+      <Drawer
+        className={className}
+        closeDrawer={() => {}}
+        handleLogout={handleLogout}
+      />
       <main className={styles.mainContent}>{children}</main>
     </div>
   );

packages/ui/components/MainNavMobile.tsx

@@ -8,6 +8,7 @@ import styles from "./MainNavMobile.module.css";
 import transitionStyles from "./transitions.module.css";
 import Drawer from "./Drawer";
 import { useRef } from "react";
+import { userSession } from "./auth";
 
 interface MainNavMobileProps {
   children: React.ReactNode;
@@ -22,6 +23,14 @@ function MainNavMobile({ children }: MainNavMobileProps) {
     }
   };
 
+  const handleLogout = () => {
+    // Sign the user out
+    userSession.signUserOut();
+
+    // TODO: Redirect the user to the home/landing page
+    window.location.href = "/login";
+  }
+
   const ref = useRef(null);
   useClickAway(ref, () => {
     setExpanded(false);
@@ -63,6 +72,7 @@ function MainNavMobile({ children }: MainNavMobileProps) {
           expanded={expanded}
           handleCloseClick={() => setExpanded(false)}
           closeDrawer={closeDrawer}
+          handleLogout={handleLogout}
         />
       </CSSTransition>
     </div>

packages/ui/components/NavLink.tsx

@@ -7,14 +7,24 @@ interface NavLinkProps {
   icon: React.ReactElement;
   href: string;
   closeDrawer: () => void;
+  handleLogout?: () => void;
   children: React.ReactNode;
 }
 
-function NavLink({ icon, href, closeDrawer, children }: NavLinkProps) {
+function NavLink({ icon, href, closeDrawer, handleLogout, children }: NavLinkProps) {
+
+  const handleClick = () => {
+    closeDrawer();
+
+    // If the handleLogout function is passed then call it
+    if(handleLogout)
+      handleLogout();
+  }
+
   return (
     <div className={styles.subNavDiv}>
       <Link href={href}>
-        <a className={styles.navLink} onClick={closeDrawer}>
+        <a className={styles.navLink} onClick={handleClick}>
           {icon}
           {children}
         </a>

packages/ui/components/auth.tsx

@@ -0,0 +1,90 @@
+import { AppConfig, UserSession, showConnect } from "@stacks/connect";
+// import { Storage } from '@stacks/storage';
+import { StacksMainnet, StacksTestnet } from "@stacks/network";
+import {
+  callReadOnlyFunction,
+  cvToJSON,
+  standardPrincipalCV,
+} from "@stacks/transactions";
+
+// Initialize Gaia hub permissions for the user
+const appConfig = new AppConfig(["store_write", "publish_data"]);
+
+export const userSession = new UserSession({ appConfig });
+// export const storage = new Storage({ userSession });
+
+// Return the network type object for the current network in use
+export function networkType() {
+  if (process.env.IS_NETWORK_MAINNET === "true") return new StacksMainnet();
+  else return new StacksTestnet();
+}
+
+export function getMyStxAddress(): string {
+  if (process.env.IS_NETWORK_MAINNET === "true") return userSession.loadUserData().profile.stxAddress.mainnet;
+  else return userSession.loadUserData().profile.stxAddress.testnet;
+}
+
+export function getNetworkName(): string {
+  if (process.env.IS_NETWORK_MAINNET === "true") return "mainnet";
+  else return "testnet";
+}
+
+export function authenticate(): void {
+  showConnect({
+    appDetails: {
+      name: "daoOS",
+      // TODO: add daoOS logo over here
+      icon: "../public/favicon.ico",
+    },
+    redirectTo: "/",
+    onFinish: () => {
+      // TODO: Enter miami vice's contract address
+      const contractAddress: string = "SP98329831323123";
+      // TODO: Enter miami vice's contract name
+      const contractName: string = "miami-vice-v1";
+
+      const functionName: string = "is-dao-member";
+      const stxAddress: string = getMyStxAddress();
+      const principalArg = standardPrincipalCV(stxAddress);
+
+      const options = {
+        contractAddress,
+        contractName,
+        functionName,
+        functionArgs: [principalArg],
+        network: networkType(),
+        senderAddress: stxAddress,
+      };
+
+      // TODO: Remove this multiline comment when the testnet contract is deployed
+      //       and resolve the rest of the TODO in this comment block
+      /*
+      callReadOnlyFunction(options)
+        .then((clarityValue) => {
+          const jsonValue = cvToJSON(clarityValue);
+
+          // TODO: check that the right type is compared
+          if (jsonValue.type === "(response bool)") {
+            // TODO: console log and check whether the right argument is used as boolean
+            const isMember: boolean = jsonValue.value["is-member"].value;
+
+            if (isMember) {
+              // Allow access to the miami dashboard
+              // TODO: add redirect to miami dashboard
+              window.location.replace(window.location.origin + "/");
+            } else {
+              // Deny access
+              // TODO: add redirect to register page
+              window.location.replace(window.location.origin + "/register");
+            }
+          }
+        })
+        .catch((error) => {
+          // TODO: any error handling such as the contract or the function doesn't exist
+          console.log(error.message);
+        });
+      */
+    },
+    userSession: userSession,
+  });
+}