fix: nav header and pre-alpha banner

Author: kushagrasarathe

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

@@ -5,6 +5,7 @@ import { useDashboard } from '@/components/Dashboard/useDashboard'
 import AddressLink from '@/components/Global/AddressLink'
 import NoDataEmptyState from '@/components/Global/EmptyStates/NoDataEmptyState'
 import { ListItemView, TransactionType } from '@/components/Global/ListItemView'
+import NavHeader from '@/components/Global/NavHeader'
 import PeanutLoading from '@/components/Global/PeanutLoading'
 import { TransactionBadge } from '@/components/Global/TransactionBadge'
 import { useWallet } from '@/hooks/wallet/useWallet'
@@ -13,6 +14,7 @@ import {
     formatAmount,
     formatDate,
     getChainLogo,
+    getHeaderTitle,
     getHistoryTransactionStatus,
     getTokenLogo,
     isStableCoin,
@@ -21,12 +23,14 @@ import {
 import * as Sentry from '@sentry/nextjs'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
 import { isAddress } from 'viem'
 
 const ITEMS_PER_PAGE = 10
 
 const HistoryPage = () => {
+    const pathname = usePathname()
     const { address } = useWallet()
     const { composeLinkDataArray, fetchLinkDetailsAsync } = useDashboard()
     const [dashboardData, setDashboardData] = useState<IDashboardItem[]>([])
@@ -142,6 +146,7 @@ const HistoryPage = () => {
 
     return (
         <div className="mx-auto w-full space-y-6 md:max-w-2xl md:space-y-3">
+            {!!data?.pages.length ? <NavHeader title={getHeaderTitle(pathname)} /> : null}
             <div className="h-full w-full border-t border-n-1">
                 {!!data?.pages.length &&
                     data?.pages.map((page, pageIndex) => (

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

@@ -2,14 +2,12 @@
 
 import { GenericBanner } from '@/components/Global/Banner/GenericBanner'
 import GuestLoginModal from '@/components/Global/GuestLoginModal'
-import NavHeader from '@/components/Global/NavHeader'
 import TopNavbar from '@/components/Global/TopNavbar'
 import WalletNavigation from '@/components/Global/WalletNavigation'
 import HomeWaitlist from '@/components/Home/HomeWaitlist'
 import { ThemeProvider } from '@/config'
 import { peanutWalletIsInPreview } from '@/constants'
 import { useAuth } from '@/context/authContext'
-import { getHeaderTitle } from '@/utils'
 import classNames from 'classnames'
 import { usePathname } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
@@ -45,11 +43,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         <div className="flex h-[100dvh] w-full bg-background">
             {/* Wrapper div for desktop layout */}
             <div className="flex h-full w-full flex-col">
-                {showNavHeader && showFullPeanutWallet && (
-                    <div className="px-6 py-4 md:hidden">
-                        <NavHeader title={getHeaderTitle(pathName)} />
-                    </div>
-                )}
                 {/* Sidebar - Fixed on desktop */}
                 {showFullPeanutWallet && (
                     <div className="hidden md:block">
@@ -87,7 +80,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                             {showFullPeanutWallet ? (
                                 <div
                                     className={twMerge(
-                                        'flex min-h-[calc(100dvh-236px)] w-full items-center justify-center md:ml-auto md:min-h-full md:w-[calc(100%-256px)]',
+                                        'flex min-h-[calc(100dvh-160px)] w-full items-center justify-center md:ml-auto md:min-h-full md:w-[calc(100%-160px)]',
                                         alignStart && 'items-start',
                                         isSupport && 'h-full'
                                     )}

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

@@ -3,9 +3,11 @@
 import { ARBITRUM_ICON } from '@/assets'
 import { Button, Card } from '@/components/0_Bruddle'
 import DirectionalActionButtons from '@/components/Global/DirectionalActionButtons'
+import DirectSendQr from '@/components/Global/DirectSendQR'
 import NoDataEmptyState from '@/components/Global/EmptyStates/NoDataEmptyState'
 import Icon from '@/components/Global/Icon'
 import { ListItemView } from '@/components/Global/ListItemView'
+import NavHeader from '@/components/Global/NavHeader'
 import { PartnerBarLocation, RewardDetails } from '@/components/Global/RewardsModal'
 import { WalletCard } from '@/components/Home/WalletCard'
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_TOKEN_NAME } from '@/constants'
@@ -14,13 +16,14 @@ import { useWallet } from '@/hooks/wallet/useWallet'
 import { useWalletConnection } from '@/hooks/wallet/useWalletConnection'
 import { IWallet, WalletProviderType } from '@/interfaces'
 import { useWalletStore } from '@/redux/hooks'
-import { formatAmount, getChainName, getUserPreferences, updateUserPreferences } from '@/utils'
+import { formatAmount, getChainName, getHeaderTitle, getUserPreferences, updateUserPreferences } from '@/utils'
 import { useDisconnect } from '@reown/appkit/react'
+import { usePathname } from 'next/navigation'
 import { useState } from 'react'
 import { formatUnits } from 'viem'
-import DirectSendQr from '@/components/Global/DirectSendQR'
 
 const WalletDetailsPage = () => {
+    const pathname = usePathname()
     const { disconnect } = useDisconnect()
     const { focusedWallet: focusedWalletId } = useWalletStore()
     const { connectWallet } = useWalletConnection()
@@ -126,6 +129,10 @@ const WalletDetailsPage = () => {
 
     return (
         <div className="mx-auto flex w-full flex-col gap-6 md:max-w-2xl">
+            <div className="md:hidden">
+                <NavHeader title={getHeaderTitle(pathname)} />
+            </div>
+
             <div className="mx-auto">
                 {focusedWalletId && walletDetails && (
                     <WalletCard

src/components/Global/MarqueeWrapper/index.tsx

@@ -18,7 +18,7 @@ export function MarqueeWrapper({
     backgroundColor,
     onClick,
     direction = 'left',
-    className = 'border-b-2 border-black border',
+    className = 'border-b-1 border-black border',
 }: MarqueeWrapperProps) {
     const baseClass = `${className} ${backgroundColor}`
     const _className = onClick ? `${baseClass} cursor-pointer` : baseClass