fix: only show user info in navbar if using alby backend

getAlby · Dec 25, 2023 · 6bf2a4c · 6bf2a4c
1 parent 6d241b9
commit 6bf2a4c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 34 deletions.
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -1,19 +1,19 @@
 import { Outlet } from "react-router-dom";
 import { useUser } from "../context/UserContext";
 
-
 function Navbar() {
-  const { logout } = useUser()
+  const { info, logout } = useUser();
   return (
     <>
       <div className="bg-gray-50 dark:bg-surface-00dp">
-        <div
-          className="bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 mb-6"
-        >
+        <div className="bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 mb-6">
           <nav className="container max-w-screen-lg mx-auto px-4 lg:px-0 py-3">
             <div className="flex justify-between items-center">
               <div className="flex items-center space-x-12">
-                <a href="/" className="font-headline text-[20px] dark:text-white">
+                <a
+                  href="/"
+                  className="font-headline text-[20px] dark:text-white"
+                >
                   <img
                     alt="NWC Logo"
                     className="w-8 inline"
@@ -38,31 +38,57 @@ function Navbar() {
                   </a>
                 </div>
               </div>
-              <div className="flex items-center relative">
-                <p className="text-gray-400 dark:text-gray-400 text-xs font-medium sm:text-base cursor-pointer select-none " id="dropdown-menu">
-                  {/* {user.email} */}
-                  <img
-                    id="caret"
-                    className="inline cursor-pointer w-4 ml-2"
-                    src="/public/images/caret.svg"
-                  />
-                </p>
-                  <div className="font-medium flex flex-col px-4 w-40 logout absolute right mt-25 justify-left cursor-pointer rounded-lg border border-gray-200 dark:border-gray-200 text-center bg-white dark:bg-surface-01dp shadow" id="dropdown">
-                    <a className="md:hidden flex items-center justify-left  py-2 text-gray-400 dark:text-gray-400" href="/about">
-                      <img className="inline cursor-pointer w-4 mr-3" src="/public/images/about.svg" alt="about-svg" /><p className="font-normal">About</p>
+              {info?.backendType === "ALBY" && (
+                <div className="flex items-center relative">
+                  <p
+                    className="text-gray-400 dark:text-gray-400 text-xs font-medium sm:text-base cursor-pointer select-none "
+                    id="dropdown-menu"
+                  >
+                    {/* {user.email} */}
+                    <img
+                      id="caret"
+                      className="inline cursor-pointer w-4 ml-2"
+                      src="/public/images/caret.svg"
+                    />
+                  </p>
+
+                  <div
+                    className="font-medium flex flex-col px-4 w-40 logout absolute right mt-25 justify-left cursor-pointer rounded-lg border border-gray-200 dark:border-gray-200 text-center bg-white dark:bg-surface-01dp shadow"
+                    id="dropdown"
+                  >
+                    <a
+                      className="md:hidden flex items-center justify-left  py-2 text-gray-400 dark:text-gray-400"
+                      href="/about"
+                    >
+                      <img
+                        className="inline cursor-pointer w-4 mr-3"
+                        src="/public/images/about.svg"
+                        alt="about-svg"
+                      />
+                      <p className="font-normal">About</p>
                     </a>
-                    <div className="flex items-center justify-left py-2 text-red-500" onClick={logout}>
-                      <img className="inline cursor-pointer w-4 mr-3" src="/public/images/logout.svg" alt="logout-svg" /><p className="font-normal">Logout</p>
+
+                    <div
+                      className="flex items-center justify-left py-2 text-red-500"
+                      onClick={logout}
+                    >
+                      <img
+                        className="inline cursor-pointer w-4 mr-3"
+                        src="/public/images/logout.svg"
+                        alt="logout-svg"
+                      />
+                      <p className="font-normal">Logout</p>
                     </div>
                   </div>
-              </div>
+                </div>
+              )}
             </div>
           </nav>
         </div>
       </div>
-      <Outlet/>
+      <Outlet />
     </>
-  )
+  );
 }
 
 export default Navbar;
diff --git a/frontend/src/screens/Login.tsx b/frontend/src/screens/Login.tsx
@@ -1,19 +1,19 @@
 import { useNavigate } from "react-router-dom";
 import { useUser } from "../context/UserContext";
 import { useEffect } from "react";
-import nwcLogo from "../assets/nwc-logo.svg"
+import nwcLogo from "../assets/nwc-logo.svg";
 
 function Login() {
-  const { info } = useUser()
-  const navigate = useNavigate()
+  const { info } = useUser();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (info?.user) {
-      navigate('/');
+      navigate("/");
     }
   }, [navigate, info?.user]);
 
-  return(
+  return (
     <div className="text-center">
       <img
         alt="Nostr Wallet Connect logo"
@@ -32,8 +32,11 @@ function Login() {
       </h2>
 
       <p className="my-8">
-        <a className=" inline-flex cursor-pointer items-center justify-center rounded-md transition-all px-10 py-4 text-black bg-gradient-to-r from-[#ffde6e] to-[#f8c455]" href="/alby/auth">
-        {/* style="background: linear-gradient(180deg, #ffde6e 63.72%, #f8c455 95.24%);" */}
+        <a
+          className=" inline-flex cursor-pointer items-center justify-center rounded-md transition-all px-10 py-4 text-black bg-gradient-to-r from-[#ffde6e] to-[#f8c455]"
+          href="/alby/auth"
+        >
+          {/* style="background: linear-gradient(180deg, #ffde6e 63.72%, #f8c455 95.24%);" */}
           <img
             src="/public/images/alby-head.svg"
             width="400"
@@ -43,12 +46,14 @@ function Login() {
           Log in with Alby Account
         </a>
       </p>
-    
+
       <p>
-        <a href="/about" className="text-purple-700 dark:text-purple-400">How does it work?</a>
+        <a href="/about" className="text-purple-700 dark:text-purple-400">
+          How does it work?
+        </a>
       </p>
     </div>
-  )
+  );
 }
 
-export default Login;
+export default Login;