feat: connect to remaining

_config.yml

@@ -1 +1 @@
-include: [".well-known"]
+include: [".well-known"]

index.html

@@ -54,7 +54,7 @@
             content="index, follow, max-video-preview:max-video-preview:-1, max-image-preview:max-image-preview:large, max-snippet:max-snippet:-1"
         />
         <title>JellyFish</title>
-        <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
+        <meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
         <link
             href="https://fonts.googleapis.com/css2?family=Roboto-Mono:wght@400;500;700&display=swap"
             rel="stylesheet"

package.json

@@ -24,6 +24,7 @@
         "axios": "^1.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "dayjs": "^1.11.13",
         "embla-carousel-react": "^8.5.2",
         "framer-motion": "^11.15.0",
         "js-cookie": "^3.0.5",

src/App.tsx

@@ -1,12 +1,15 @@
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes";
 import ReactQueryProvider from "./providers/ReactQueryProviders";
+import AuthProvider from "./providers/AuthProvider";
 
 function App() {
     return (
-        <ReactQueryProvider>
-            <RouterProvider router={router} />
-        </ReactQueryProvider>
+        <AuthProvider>
+            <ReactQueryProvider>
+                <RouterProvider router={router} />
+            </ReactQueryProvider>
+        </AuthProvider>
     );
 }
 

src/components/common/ProtectedRoute.tsx

@@ -0,0 +1,8 @@
+import { useAuth } from "@/providers/AuthProvider";
+import { Navigate, Outlet } from "react-router-dom";
+
+export function ProtectedRoute() {
+    const { isAuthenticated } = useAuth();
+
+    return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
+}

src/components/pages/Dashboard/index.tsx

@@ -5,6 +5,7 @@
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Skeleton } from "@/components/ui/skeleton";
+import { getRemaningFormattedTime } from "@/utils/dayjs";
 
 const Dashboard = () => {
     const { profile, pubKey } = useProfileStore(state => state);
@@ -31,7 +32,7 @@
     });
 
     useEffect(() => {
         getRemainingQuery.refetch();
     }, [token]);
 
     useEffect(() => {
@@ -70,8 +71,7 @@
                         ) : (
                             <>
                                 <p className="flex-1 text-[#ACCDF2] font-roboto-mono text-2xl sm:text-3xl md:text-4xl lg:text-[36px]">
-                                    {remaring ?? 0} day{remaring > 1 ? "s" : ""}{" "}
-                                    remain until the subscription is finished
+                                    {getRemaningFormattedTime(remaring)}
                                 </p>
 
                                 <Link

src/components/pages/Home/HeroSection.tsx

@@ -43,4 +43,4 @@
     );
 };
 
-export default HeroSection;
+export default HeroSection;

src/data/alert.ts

@@ -4,4 +4,4 @@
     linkText: "",
     link: "",
     show: false,
-};
+};

src/layout/dashboard-layout/DashboardSidebar.tsx

@@ -1,13 +1,15 @@
 import { Button } from "@/components/ui/Button";
 import SidebarItem from "./SidebarItem";
-import { ChevronLeft, ChevronRight, HomeIcon } from "lucide-react";
+import { ChevronLeft, ChevronRight, HomeIcon, LogOutIcon } from "lucide-react";
 import { JellyFishIcon } from "@/assets/icons/nav/JellyFishIcon";
 import { Link } from "react-router-dom";
 import { useDashboardSidebar } from "./DashboardSidebarContext";
 import AuthenticationAction from "./../layout/AuthenticationActions";
+import { useAuth } from "@/providers/AuthProvider";
 
 const DashboardSidebar = () => {
     const { isCollapsed, toggleCollapse } = useDashboardSidebar();
+    const { logout } = useAuth();
 
     return (
         <>
@@ -54,10 +56,23 @@ const DashboardSidebar = () => {
                 </div>
 
                 {/* Sidebar Footer */}
-                <div className="p-4 border-t border-gray-700 md:hidden">
-                    <div className="flex items-center gap-2 cursor-pointer">
+                <div className="p-4 border-t border-gray-700 ">
+                    <div className="flex items-center gap-2 mb-4 cursor-pointer md:hidden">
                         <AuthenticationAction isCollapsed={isCollapsed} />
                     </div>
+
+                    <Button
+                        className="w-full text-red-700 "
+                        onClick={() => {
+                            if (logout) logout();
+                        }}
+                    >
+                        <SidebarItem
+                            icon={<LogOutIcon className="w-5 h-5 " />}
+                            label="Log Out"
+                            isCollapsed={isCollapsed}
+                        />
+                    </Button>
                 </div>
             </div>
         </>

src/layout/layout/AuthenticationActions.tsx

@@ -9,6 +9,7 @@ import useProfileStore from "@/stores/profile-store";
 import { useQuery } from "@tanstack/react-query";
 
 import { useNip98 } from "nostr-hooks";
+import { useNavigate } from "react-router-dom";
 
 type Props = {
     isCollapsed?: boolean;
@@ -19,12 +20,13 @@ type TProfileGetOutput = {
 };
 
 const AuthenticationButton: React.FC<Props> = ({ isCollapsed }) => {
+    const navigate = useNavigate();
     const { loginWithExtension } = useLogin();
     const { activeUser } = useActiveUser();
     const { getToken } = useNip98();
 
     // Get and Set pubKey from profile store
-    const { pubKey, profile, setToken, setPubKey, setProfile } =
+    const { pubKey, profile, setToken, setPubKey, setProfile, setIsLoggedIn } =
         useProfileStore(state => state);
 
     // Get Profile Api
@@ -74,6 +76,10 @@ const AuthenticationButton: React.FC<Props> = ({ isCollapsed }) => {
         }
     };
 
+    const handleNavigateToDashboard = () => {
+        navigate("/dashboard");
+    };
+
     useEffect(() => {
         if (pubKey) {
             getProfileQuery.refetch();
@@ -87,12 +93,6 @@ const AuthenticationButton: React.FC<Props> = ({ isCollapsed }) => {
     }, [getProfileQuery.isFetched]);
 
     useEffect(() => {
-        console.log(
-            "LOGIN USER",
-            activeUser,
-            pubKey,
-            activeUser?.pubkey && activeUser?.pubkey !== pubKey,
-        );
         if (activeUser?.pubkey && activeUser?.pubkey !== pubKey) {
             setPubKey(activeUser?.pubkey);
             getToken({
@@ -103,6 +103,8 @@ const AuthenticationButton: React.FC<Props> = ({ isCollapsed }) => {
             })
                 .then(token => {
                     setToken(token);
+                    setIsLoggedIn(true);
+                    handleNavigateToDashboard();
                 })
                 .catch(err => {
                     console.error("Error get token: ", err);
@@ -123,26 +125,35 @@ const AuthenticationButton: React.FC<Props> = ({ isCollapsed }) => {
         return (
             <>
                 {isCollapsed ? (
-                    <Avatar className="w-8 h-8" title="John Doe">
+                    <Avatar
+                        className="w-8 h-8"
+                        title={profile?.display_name ?? pubKey?.substring(0, 6)}
+                        onClick={() => handleNavigateToDashboard()}
+                    >
                         <AvatarImage
                             src={
                                 profile?.picture ??
-                                "/images/avatar-paceholder.png"
+                                "/images/avatar-paceholder1.png"
                             }
                             alt="User Avatar"
                         />
-                        <AvatarFallback>User name</AvatarFallback>
+                        <AvatarFallback>
+                            {" "}
+                            {profile?.display_name ?? pubKey?.substring(0, 6)}
+                        </AvatarFallback>
                     </Avatar>
                 ) : (
                     <Button
                         variant="outline"
                         className="justify-start min-w-[100px] w-full h-12 rounded-full"
+                        onClick={() => handleNavigateToDashboard()}
+                        title={profile?.display_name ?? pubKey?.substring(0, 6)}
                     >
                         <Avatar className="w-8 h-8 shrink-0">
                             <AvatarImage
                                 src={
                                     profile?.picture ??
-                                    "/images/avatar-paceholder.png"
+                                    "/images/avatar-paceholder1.png"
                                 }
                                 alt="User Avatar"
                             />

src/providers/AuthProvider.tsx

@@ -0,0 +1,33 @@
+import useProfileStore from "@/stores/profile-store";
+import React, { createContext, PropsWithChildren, useContext } from "react";
+
+const AuthContext = createContext<{
+    isAuthenticated: boolean;
+    logout?: () => void;
+}>({ isAuthenticated: false });
+
+type Props = PropsWithChildren;
+
+export function useAuth() {
+    return useContext(AuthContext);
+}
+
+const AuthProvider: React.FC<Props> = ({ children }) => {
+    const { isLoggedIn, setToken, setPubKey, setProfile, setIsLoggedIn } =
+        useProfileStore(state => state);
+
+    const logout = () => {
+        setPubKey(undefined);
+        setProfile(undefined);
+        setToken(undefined);
+        setIsLoggedIn(false);
+    };
+
+    return (
+        <AuthContext.Provider value={{ isAuthenticated: !!isLoggedIn, logout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export default AuthProvider;

src/routes/index.tsx

@@ -10,6 +10,7 @@ import SellRelay from "@/components/pages/SellRelay";
 import NpubEditForm from "@/components/pages/Dashboard/Edit";
 import DashboardLayout from "@/layout/dashboard-layout";
 import Maintanance from "@/components/pages/Maintanance";
+import { ProtectedRoute } from "@/components/common/ProtectedRoute";
 
 export const router = createBrowserRouter([
     {
@@ -43,16 +44,21 @@ export const router = createBrowserRouter([
         ],
     },
     {
-        path: "dashboard",
-        element: <DashboardLayout />,
+        element: <ProtectedRoute />,
         children: [
             {
-                path: "",
-                element: <Dashboard />,
-            },
-            {
-                path: "edit/:id",
-                element: <NpubEditForm />,
+                path: "dashboard",
+                element: <DashboardLayout />,
+                children: [
+                    {
+                        path: "",
+                        element: <Dashboard />,
+                    },
+                    {
+                        path: "edit/:id",
+                        element: <NpubEditForm />,
+                    },
+                ],
             },
         ],
     },

src/stores/profile-store.tsx

@@ -8,13 +8,15 @@ type TProfile = {
 
 type State = {
     pubKey?: string;
+    isLoggedIn?: boolean;
     profile?: TProfile;
     token?: string;
 };
 
 type Actions = {
-    setPubKey: (pubKey: string) => void;
-    setProfile: (picture: TProfile) => void;
+    setPubKey: (pubKey?: string) => void;
+    setProfile: (picture?: TProfile) => void;
+    setIsLoggedIn: (isLoggedIn?: boolean) => void;
     setToken: (token?: string) => void;
 };
 
@@ -23,8 +25,9 @@ type Store = State & Actions;
 const useProfileStore = create(
     persist<Store>(
         set => ({
-            setPubKey: (pubKey: string) => set({ pubKey }),
+            setPubKey: (pubKey?: string) => set({ pubKey }),
             setProfile: (profile?: TProfile) => set({ profile }),
+            setIsLoggedIn: (isLoggedIn?: boolean) => set({ isLoggedIn }),
             setToken: (token?: string) => set({ token }),
         }),
         {

src/utils/dayjs.ts

@@ -0,0 +1,28 @@
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+
+dayjs.extend(duration);
+
+const getRemaningFormattedTime = (timestamp: number) => {
+    if (timestamp <= 0) return "The subscription has ended.";
+
+    const now = dayjs();
+    const targetDate = dayjs(timestamp);
+
+    if (targetDate.isBefore(now) || targetDate.isSame(now))
+        return "The subscription has ended.";
+
+    const diff = dayjs.duration(targetDate.diff(now));
+
+    const years = diff.years();
+    const months = diff.months();
+    const days = diff.days();
+    const hours = diff.hours();
+    const minutes = diff.minutes();
+
+    const remaningTime = `${years} year${years > 1 ? "s" : ""} ${months} month${months > 1 ? "s" : ""} ${days} day${days > 1 ? "s" : ""} ${hours} hour${hours > 1 ? "s" : ""} ${minutes} min${minutes > 1 ? "s" : ""}`;
+
+    return `${remaningTime} remain until the subscription is finished`;
+};
+
+export { getRemaningFormattedTime };