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

@@ -10,27 +10,22 @@ import {
 // Initialize Gaia hub permissions for the user
 const appConfig = new AppConfig(["store_write", "publish_data"]);
 
-// Set this to true if you want to use Mainnet
-// Using a boolean helps to switch the entire application to mainnet
-// or testnet with only changing a single value
-const isNetworkMainnet = true;
-
 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 (isNetworkMainnet) return new StacksMainnet();
+  if (process.env.IS_NETWORK_MAINNET === "true") return new StacksMainnet();
   else return new StacksTestnet();
 }
 
 export function getMyStxAddress(): string {
-  if (isNetworkMainnet) return getUserData().profile.stxAddress.mainnet;
-  else return getUserData().profile.stxAddress.testnet;
+  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 (isNetworkMainnet) return "mainnet";
+  if (process.env.IS_NETWORK_MAINNET === "true") return "mainnet";
   else return "testnet";
 }
 
@@ -61,6 +56,9 @@ export function authenticate(): void {
         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);
@@ -85,11 +83,8 @@ export function authenticate(): void {
           // TODO: any error handling such as the contract or the function doesn't exist
           console.log(error.message);
         });
+      */
     },
     userSession: userSession,
   });
-}
-
-export function getUserData() {
-  return userSession.loadUserData();
-}
+}