Merge pull request #641 from peanutprotocol/feat/logout

feat: add logout feature + fix layout

src/app/(mobile-ui)/history/page.tsx

@@ -9,14 +9,16 @@ import NavHeader from '@/components/Global/NavHeader'
 import { PEANUT_API_URL } from '@/constants'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { IDashboardItem } from '@/interfaces'
-import { formatAmountWithSignificantDigits, formatDate, printableAddress } from '@/utils'
+import { formatAmountWithSignificantDigits, formatDate, getHeaderTitle, printableAddress } from '@/utils'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
 
 const ITEMS_PER_PAGE = 10
 
 const HistoryPage = () => {
+    const pathname = usePathname()
     const { address } = useWallet()
     const { composeLinkDataArray, fetchLinkDetailsAsync, removeRequestLinkFromLocalStorage } = useDashboard()
     const [dashboardData, setDashboardData] = useState<IDashboardItem[]>([])
@@ -105,15 +107,33 @@ const HistoryPage = () => {
         return <div className="w-full py-4 text-center">Error loading history</div>
     }
 
+    if (!data?.pages.length) {
+        return (
+            <div className="flex h-[80dvh] items-center justify-center">
+                <NoDataEmptyState
+                    animSize="lg"
+                    message="You haven't done any transactions"
+                    cta={
+                        <Link href="/home" className="cursor-pointer">
+                            <Button shadowSize="4" size="medium" variant={'purple'} className="cursor-pointer">
+                                Go to Dashboard
+                            </Button>
+                        </Link>
+                    }
+                />
+            </div>
+        )
+    }
+
     return (
         <div className="mx-auto w-full space-y-6 md:max-w-2xl md:space-y-3">
-            {!!data?.pages.length ? <NavHeader title="History" /> : null}
+            {!!data?.pages.length ? <NavHeader title={getHeaderTitle(pathname)} /> : null}
             <div className="h-full w-full">
-                {!!data?.pages.length ? (
+                {!!data?.pages.length &&
                     data?.pages.map((page, pageIndex) => (
-                        <div key={pageIndex}>
+                        <div key={pageIndex} className="border-b border-n-1">
                             {page.items.map((item) => (
-                                <div key={item.id} className="border-b border-n-1">
+                                <div key={item.id}>
                                     <ListItemView
                                         id={item.id}
                                         variant="history"
@@ -143,22 +163,7 @@ const HistoryPage = () => {
                                 </div>
                             ))}
                         </div>
-                    ))
-                ) : (
-                    <div className="flex h-full items-center justify-center">
-                        <NoDataEmptyState
-                            animSize="lg"
-                            message="You haven't done any transactions"
-                            cta={
-                                <Link href="/home" className="cursor-pointer">
-                                    <Button shadowSize="4" size="medium" variant={'purple'} className="cursor-pointer">
-                                        Go to Dashboard
-                                    </Button>
-                                </Link>
-                            }
-                        />
-                    </div>
-                )}
+                    ))}
 
                 <div ref={loaderRef} className="w-full py-4">
                     {isFetchingNextPage && <div className="w-full text-center">Loading more...</div>}

src/app/(mobile-ui)/home/page.tsx

@@ -3,6 +3,7 @@
 import { Button } from '@/components/0_Bruddle'
 import { useToast } from '@/components/0_Bruddle/Toast'
 import DirectionalActionButtons from '@/components/Global/DirectionalActionButtons'
+import LogoutButton from '@/components/Global/LogoutButton'
 import WalletHeader from '@/components/Global/WalletHeader'
 import { WalletCard } from '@/components/Home/WalletCard'
 import ProfileSection from '@/components/Profile/Components/ProfileSection'
@@ -126,15 +127,15 @@ export default function Home() {
     }
 
     return (
-        <div className="w-full">
-            <div className="flex w-full flex-row justify-center overflow-hidden p-6">
+        <div className="h-full w-full">
+            <div className="flex h-full w-full flex-row justify-center overflow-hidden pb-6">
                 <div className="flex w-[100%] flex-col gap-4 sm:w-[90%] md:w-[70%] lg:w-[50%]">
                     <div className="flex items-center justify-between">
                         <WalletHeader />
                         {/* todo: temp sign in button, remove it once auth state is fixed */}
                         <div>
                             {hasWallets && (isPeanutWallet || isConnected) && (
-                                <div>
+                                <div className="hidden md:block">
                                     <Button
                                         loading={isLoggingIn}
                                         disabled={isLoggingIn}
@@ -152,6 +153,9 @@ export default function Home() {
                                     </Button>
                                 </div>
                             )}
+                            <div className="md:hidden">
+                                <LogoutButton />
+                            </div>
                         </div>
                     </div>
                     <ProfileSection />

src/app/(mobile-ui)/layout.tsx

@@ -3,6 +3,7 @@
 import { Button } from '@/components/0_Bruddle'
 import { useToast } from '@/components/0_Bruddle/Toast'
 import Modal from '@/components/Global/Modal'
+import TopNavbar from '@/components/Global/TopNavbar'
 import WalletNavigation from '@/components/Global/WalletNavigation'
 import HomeWaitlist from '@/components/Home/HomeWaitlist'
 import { ThemeProvider } from '@/config'
@@ -15,6 +16,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
 import '../../styles/globals.css'
 
 const publicPathRegex = /^\/(request\/pay|claim)/
@@ -24,7 +26,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     const [isReady, setIsReady] = useState(false)
     const { signInModal, selectExternalWallet } = useWallet()
     const web3Modal = useAppKit()
-    const { user } = useAuth()
+    const { user, isFetchingUser } = useAuth()
     const { handleLogin, isLoggingIn } = useZeroDev()
     const toast = useToast()
 
@@ -33,22 +35,75 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     }, [])
 
     const isHome = pathName === '/home'
+    const isHistory = pathName === '/history'
+    const isWallet = pathName === '/wallet'
+    const isSupport = pathName === '/support'
+    const alignStart = isHome || isHistory || isWallet || isSupport
+
     const showFullPeanutWallet = useMemo(() => {
         const isPublicPath = publicPathRegex.test(pathName)
         return isPublicPath || (user?.user.hasPwAccess ?? false) || !peanutWalletIsInPreview
     }, [user, pathName])
 
     if (!isReady) return null
     return (
-        <div className="flex min-h-[100dvh] flex-col  bg-background md:flex-row-reverse">
-            <div
-                className={classNames('z-1 flex w-full flex-1 overflow-x-visible overflow-y-scroll', {
-                    'p-6': !isHome,
-                })}
-            >
-                <ThemeProvider>{showFullPeanutWallet ? children : <HomeWaitlist />}</ThemeProvider>
+        <div className="flex h-screen w-full bg-background">
+            {/* Wrapper div for desktop layout */}
+            <div className="flex w-full">
+                {/* Sidebar - Fixed on desktop */}
+                {showFullPeanutWallet && (
+                    <div className="hidden md:block">
+                        <div className="fixed left-0 top-0 z-20 h-screen w-64">
+                            <WalletNavigation />
+                        </div>
+                    </div>
+                )}
+
+                {/* Main content area */}
+                <div className="flex w-full flex-1 flex-col">
+                    {/* Fixed top navbar */}
+                    {showFullPeanutWallet && (
+                        <div className="sticky top-0 z-10 w-full">
+                            <TopNavbar />
+                        </div>
+                    )}
+
+                    {/* Scrollable content area */}
+                    <div
+                        className={classNames(
+                            twMerge(
+                                'flex-1 overflow-y-auto bg-background p-6 pb-24 md:pb-6',
+                                !!isSupport && 'p-0 pb-20 md:p-6'
+                            )
+                        )}
+                    >
+                        <ThemeProvider>
+                            {showFullPeanutWallet ? (
+                                <div
+                                    className={twMerge(
+                                        'flex min-h-[calc(100dvh-160px)] w-full items-center justify-center md:ml-auto md:min-h-full  md:w-[calc(100%-256px)]',
+                                        alignStart && 'items-start',
+                                        isSupport && 'h-full'
+                                    )}
+                                >
+                                    {children}
+                                </div>
+                            ) : (
+                                <HomeWaitlist />
+                            )}
+                        </ThemeProvider>
+                    </div>
+
+                    {/* Mobile navigation */}
+                    {showFullPeanutWallet && (
+                        <div className="fixed bottom-0 left-0 right-0 z-10 bg-background md:hidden">
+                            <WalletNavigation />
+                        </div>
+                    )}
+                </div>
             </div>
-            {showFullPeanutWallet && <WalletNavigation />}
+
+            {/* Modal */}
             <Modal
                 visible={signInModal.visible}
                 onClose={() => {
@@ -80,7 +135,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                         <div className="h-px flex-1 bg-gray-200" />
                     </div>
                     <Button
-                        // loading={isLoggingIn}
                         disabled={isLoggingIn}
                         variant="dark"
                         shadowType="secondary"

src/app/(mobile-ui)/request/route.ts

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export function GET() {
+    redirect('/request/create')
+}

src/app/(mobile-ui)/wallet/page.tsx

@@ -11,12 +11,14 @@ import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { IUserBalance } from '@/interfaces'
 import { useWalletStore } from '@/redux/hooks'
-import { formatAmount, getChainName, getUserPreferences, updateUserPreferences } from '@/utils'
+import { formatAmount, getChainName, getHeaderTitle, getUserPreferences, updateUserPreferences } from '@/utils'
 import { useAppKit, useDisconnect } from '@reown/appkit/react'
+import { usePathname } from 'next/navigation'
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 const WalletDetailsPage = () => {
+    const pathname = usePathname()
     const { open } = useAppKit()
     const { disconnect } = useDisconnect()
     const { focusedWallet, wallets } = useWalletStore()
@@ -41,7 +43,7 @@ const WalletDetailsPage = () => {
     return (
         <div className="mx-auto flex w-full flex-col gap-6 md:max-w-2xl">
             <div className="md:hidden">
-                <NavHeader title="Wallet asset" />
+                <NavHeader title={getHeaderTitle(pathname)} />
             </div>
 
             <div className="mx-auto">

src/assets/icons/index.ts

@@ -7,6 +7,7 @@ export { default as GAS_ICON } from './gas.svg'
 export { default as GITBOOK_ICON } from './gitbook.png'
 export { default as GITHUB_INVERTED_ICON } from './github-inverted.png'
 export { default as GITHUB_ICON } from './github.png'
+export { default as LOGOUT_ICON } from './logout.svg'
 export { default as MAIL_ICON } from './mail-icon.svg'
 export { default as SHARE_ICON } from './share.svg'
 export { default as SMILEY_ICON } from './smiley.svg'

src/components/0_Bruddle/PageContainer.tsx

@@ -1,16 +1,7 @@
 import { HTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
 
 const PageContainer = (props: HTMLAttributes<HTMLDivElement>) => {
-    return (
-        <div className="flex min-h-[calc(100dvh-3rem)] w-full items-center justify-center py-6 *:w-full md:*:w-2/5">
-            <div
-                className={twMerge('mx-auto flex h-full w-full items-center justify-evenly *:w-full', props.className)}
-            >
-                {props.children}
-            </div>
-        </div>
-    )
+    return <div className="flex w-full items-center justify-center *:w-full md:*:w-2/5">{props.children}</div>
 }
 
 export default PageContainer

src/components/Global/LogoutButton/index.tsx

@@ -0,0 +1,28 @@
+import { LOGOUT_ICON } from '@/assets'
+import { Button } from '@/components/0_Bruddle'
+import { useAuth } from '@/context/authContext'
+import Image from '../Image'
+import Loading from '../Loading'
+
+const LogoutButton = () => {
+    const { logoutUser, isLoggingOut } = useAuth()
+
+    const logout = async () => {
+        await logoutUser()
+    }
+
+    return (
+        <Button
+            disabled={isLoggingOut}
+            size="medium"
+            variant="transparent-dark"
+            onClick={logout}
+            className="flex w-fit items-center gap-3 hover:text-gray-1"
+        >
+            {isLoggingOut ? <Loading /> : <Image src={LOGOUT_ICON} alt="Logout" width={24} height={24} />}
+            {isLoggingOut ? 'Logging out...' : 'Logout'}
+        </Button>
+    )
+}
+
+export default LogoutButton

src/components/Global/TopNavbar/index.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { getHeaderTitle } from '@/utils'
+import { usePathname } from 'next/navigation'
+import LogoutButton from '../LogoutButton'
+
+const TopNavbar = () => {
+    const pathname = usePathname()
+
+    return (
+        <div className="hidden h-[72px] items-center justify-between border-b border-b-black bg-background px-6 md:flex">
+            <h1 className="text-2xl font-extrabold md:ml-64">{getHeaderTitle(pathname)}</h1>
+            <LogoutButton />
+        </div>
+    )
+}
+
+export default TopNavbar

src/components/Global/WalletNavigation/index.tsx

@@ -66,7 +66,7 @@ type MobileNavProps = {
 }
 
 const MobileNav: React.FC<MobileNavProps> = ({ tabs, pathName }) => (
-    <div className="z-1 grid grid-cols-3 border-t border-black p-2 md:hidden">
+    <div className="z-1 grid grid-cols-3 border-t border-black bg-background p-2 md:hidden">
         {tabs.map(({ name, href, icon }) => (
             <Link
                 href={href}

src/components/Home/HomeWaitlist.tsx

@@ -1,17 +1,14 @@
+import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
 import { useAuth } from '@/context/authContext'
 import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import { Card } from '../0_Bruddle'
-
-import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
-import { useZeroDev } from '@/hooks/useZeroDev'
 import RollingNumber from '../0_Bruddle/RollingNumber'
 import Title from '../0_Bruddle/Title'
 
 const HomeWaitlist = () => {
     const { push } = useRouter()
     const { username, isFetchingUser, user } = useAuth()
-    const { handleLogin, isLoggingIn } = useZeroDev()
 
     useEffect(() => {
         if (!isFetchingUser && !username) {

src/constants/general.consts.ts

@@ -1,5 +1,5 @@
-import { CHAIN_DETAILS, TOKEN_DETAILS } from '@squirrel-labs/peanut-sdk'
 import * as interfaces from '@/interfaces'
+import { CHAIN_DETAILS, TOKEN_DETAILS } from '@squirrel-labs/peanut-sdk'
 import { arbitrum, arbitrumSepolia } from 'viem/chains'
 
 export const peanutWalletIsInPreview = true
@@ -184,3 +184,15 @@ export const nativeCurrencyAddresses: string[] = [
     '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
     '0x0000000000000000000000000000000000000000',
 ]
+
+export const pathTitles: { [key: string]: string } = {
+    '/home': 'Dashboard',
+    '/send': 'Send',
+    '/wallet': 'Wallet asset',
+    '/request/create': 'Request Payment',
+    '/request/pay': 'Pay Request',
+    '/cashout': 'Cashout',
+    '/history': 'History',
+    '/support': 'Support',
+    '/claim': 'Claim Payment',
+}