Fix/routing

src/components/Footer/Footer.component.tsx

@@ -1,13 +1,18 @@
 import { socialLinks } from '@/constants/socialLinks'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Icon } from '../icon'
 import { type FC } from 'react'
 import { useAccount } from 'wagmi'
+import { privateRoutes } from '@/constants'
 
 export const Footer: FC = () => {
   const { isConnected: isWalletConnected } = useAccount()
+
+  const location = useLocation()
+  const isPrivateRoute = privateRoutes.includes(location.pathname)
+
   return (
-    <footer className={`${!isWalletConnected ? 'disconnected' : ''}`}>
+    <footer className={`${(!isWalletConnected && isPrivateRoute) ? 'disconnected' : ''}`}>
       <div className="info">&copy; 2024 Cedro Labs All rights reserved</div>
       <div className="socials">
         {socialLinks.map((social, key) => (

src/components/Navbar/NavbarSharedCompoent.tsx

@@ -86,6 +86,7 @@ export const WalletActions: FC = () => {
       />
       {isWalletConnected
         ? (
+        <>
         <div className="right">
           {
             NETWORK_TYPE !== 'mainnet'
@@ -100,33 +101,34 @@ export const WalletActions: FC = () => {
               : null
           }
 
-          <div className="switch-network">
-            <SwitchNetworkDropdown />
+            <div className="switch-network">
+              <SwitchNetworkDropdown />
+            </div>
+
+            <div className="wallet-info">
+              <span className="wallet-balance">
+                ${' '}
+                {toFixedCutZero(aggregateDollarValue.toString() ?? '', 2, true)}
+              </span>
+              <AvailableTokens />
+            </div>
           </div>
+          <div className="line-separator txn-history-line-seperator"></div>
 
-          <div className="wallet-info">
-            <span className="wallet-balance">
-              $ {toFixedCutZero(aggregateDollarValue.toString() ?? '', 2, true)}
-            </span>
-            <AvailableTokens />
+          <div className="txn-history-link-btn">
+            <div className="transaction-history">
+              <Link to={'/history'}>
+                <Icon name="history" height={24} width={24} color="#5549F9" />
+              </Link>
+            </div>
           </div>
-        </div>
+        </>
           )
         : (
         <div className="right-false">
           <WalletConnect togglerVariant='ghost' />
         </div>
           )}
-
-      <div className="line-separator txn-history-line-seperator"></div>
-
-      <div className="txn-history-link-btn">
-        <div className="transaction-history">
-          <Link to={'/history'}>
-            <Icon name="history" height={24} width={24} color="#5549F9" />
-          </Link>
-        </div>
-      </div>
     </>
   )
 }

src/components/layout/Layout.component.tsx

@@ -2,9 +2,10 @@ import { type FC, type ReactNode } from 'react'
 import { Icon, type IconStackData, MobileNav, Navbar, WalletConnect, MobileNotSupported, DashboardHeader } from '@/components'
 import { Tooltip } from 'react-tooltip'
 import { useScreenSize } from '@/hooks/useScreenSize'
-import { MOBILE_SCREEN_SIZE } from '@/constants'
+import { MOBILE_SCREEN_SIZE, privateRoutes } from '@/constants'
 import { Footer } from '../Footer'
 import { useAccount } from 'wagmi'
+import { useLocation } from 'react-router-dom'
 
 interface LayoutProps {
   children: ReactNode
@@ -17,14 +18,17 @@ export const Layout: FC<LayoutProps> = ({
 }): JSX.Element => {
   const screenSize = useScreenSize()
   const { isConnected: isWalletConnected } = useAccount()
+  const location = useLocation()
+
+  const isPrivateRoute = privateRoutes.includes(location.pathname)
 
   if (screenSize.width < 500) return <MobileNotSupported />
 
   return (
     <div className={`site-layout ${className}`}>
       <div className="dashboard-layout wrapper">
         {screenSize.width > MOBILE_SCREEN_SIZE ? <Navbar /> : <MobileNav />}
-        {!isWalletConnected
+        {(!isWalletConnected && isPrivateRoute)
           ? (
           <div className='dashboard-not-connected'>
             <DashboardHeader showInfo />

src/constants/constants.ts

@@ -16,3 +16,5 @@ export const NETWORK_SWITCH_TYPE = {
   ASSETS_IN: 'assets',
   ACTIONS_ORIGINATE: 'actions'
 } as const
+
+export const privateRoutes = ['/dashboard', '/history']

src/containers/market.tsx

@@ -10,7 +10,8 @@ import {
   AccordionTable,
   Price,
   LiquidityTooltip,
-  TokenInfo
+  TokenInfo,
+  WalletConnect
   // TableLayout,
   // TokenInfo
 } from '@/components'
@@ -39,7 +40,7 @@ import { IconStack, type IconStackData } from '@/components'
 import { NETWORK_TYPE } from '@/configs/env'
 import { BarDiagram } from '@/components/BarDiagram'
 import { floatSortingFn } from '@/utils/misc'
-import { useNetwork } from 'wagmi'
+import { useAccount, useNetwork } from 'wagmi'
 import { type IChain } from '@/@types'
 import { cedroClient } from '@/configs/chainConfig'
 import { type TChipRateDirection } from '@/components/ChipRate/ChipRate.component'
@@ -230,11 +231,32 @@ export const MarketColumnDefinition: Array<ColumnDef<IDashboardData>> = [
       const { nativeChain, supportedChains } = cedroClient.Config.getPoolSupportedChains(poolId)
 
       const selectedChain = connectedChain && supportedChains.includes(connectedChain.chain as tSupportedChains) ? connectedChain.chain as tSupportedChains : nativeChain ?? supportedChains[0]
-
+      const { isConnected: isWalletConnected } = useAccount()
       return (
         <div className="datatable-action-group">
-          <ProtocolActionButton action = {eProtocolAction.DEPOSIT} poolId={poolId} chain={selectedChain} icon='doubleTriangleUp' />
-          <ProtocolActionButton action={eProtocolAction.BORROW} poolId={poolId} chain={selectedChain} variant='secondary' icon='doubleTriangleDown' />
+          {isWalletConnected
+            ? (
+            <>
+              <ProtocolActionButton
+                action={eProtocolAction.DEPOSIT}
+                poolId={poolId}
+                chain={selectedChain}
+                icon="doubleTriangleUp"
+              />
+              <ProtocolActionButton
+                action={eProtocolAction.BORROW}
+                poolId={poolId}
+                chain={selectedChain}
+                variant="secondary"
+                icon="doubleTriangleDown"
+              />
+            </>
+              )
+            : (
+            <div onClick={e => { e.stopPropagation() }}>
+              <WalletConnect />
+            </div>
+              )}
         </div>
       )
     },