✨ routing and pages for HLS (#538)

src/components/Earn/Tab.tsx

@@ -8,7 +8,8 @@ const underlineClasses =
   'relative before:absolute before:h-[2px] before:-bottom-1 before:left-0 before:right-0 before:gradient-active-tab'
 
 interface Props {
-  isFarm?: boolean
+  tabs: Tab[]
+  activeTabIdx: number
 }
 
 export default function Tab(props: Props) {
@@ -17,24 +18,18 @@ export default function Tab(props: Props) {
 
   return (
     <div className='relative w-full'>
-      <NavLink
+      {props.tabs.map((tab, index) => (
-        to={getRoute('lend', address, accountId)}
+        <NavLink
-        className={classNames(
+          key={tab.page}
-          props.isFarm ? 'text-white/40' : underlineClasses,
+          to={getRoute(tab.page, address, accountId)}
-          'relative mr-8 text-xl ',
+          className={classNames(
-        )}
+            props.activeTabIdx === index ? underlineClasses : 'text-white/40',
-      >
+            'relative mr-8 text-xl ',
-        Lend
+          )}
-      </NavLink>
+        >
-      <NavLink
+          {tab.name}
-        to={getRoute('farm', address, accountId)}
+        </NavLink>
-        className={classNames(
+      ))}
-          !props.isFarm ? 'text-white/40' : underlineClasses,
-          'relative text-xl',
-        )}
-      >
-        Farm
-      </NavLink>
     </div>
   )
 }

src/components/Header/DesktopHeader.tsx

@@ -9,12 +9,14 @@ import Settings from 'components/Settings'
 import Wallet from 'components/Wallet'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'
+import { ENABLE_HLS } from 'utils/constants'
 
 export const menuTree: { pages: Page[]; label: string }[] = [
   { pages: ['trade'], label: 'Trade' },
   { pages: ['lend', 'farm'], label: 'Earn' },
   { pages: ['borrow'], label: 'Borrow' },
   { pages: ['portfolio'], label: 'Portfolio' },
+  ...(ENABLE_HLS ? [{ pages: ['hls-farm', 'hls-staking'] as Page[], label: 'High Leverage' }] : []),
 ]
 
 export default function DesktopHeader() {

src/components/Navigation/DesktopNavigation.tsx

@@ -15,7 +15,8 @@ export default function DesktopNavigation() {
   const focusComponent = useStore((s) => s.focusComponent)
 
   function getIsActive(pages: string[]) {
-    return pages.some((page) => location.pathname.includes(page))
+    const segments = location.pathname.split('/')
+    return pages.some((page) => segments.includes(page))
   }
 
   return (

src/components/Routes.tsx

@@ -3,6 +3,8 @@ import { Navigate, Outlet, Route, Routes as RoutesWrapper } from 'react-router-d
 import Layout from 'pages/_layout'
 import BorrowPage from 'pages/BorrowPage'
 import FarmPage from 'pages/FarmPage'
+import HLSFarmPage from 'pages/HLSFarmPage'
+import HLSStakingPage from 'pages/HLSStakingPage'
 import LendPage from 'pages/LendPage'
 import MobilePage from 'pages/MobilePage'
 import PortfolioAccountPage from 'pages/PortfolioAccountPage'
@@ -25,6 +27,8 @@ export default function Routes() {
         <Route path='/borrow' element={<BorrowPage />} />
         <Route path='/portfolio' element={<PortfolioPage />} />
         <Route path='/mobile' element={<MobilePage />} />
+        <Route path='/hls-staking' element={<HLSStakingPage />} />
+        <Route path='/hls-farm' element={<HLSFarmPage />} />
         <Route path='/' element={<TradePage />} />
         <Route path='/wallets/:address'>
           <Route path='trade' element={<TradePage />} />
@@ -35,6 +39,8 @@ export default function Routes() {
           <Route path='portfolio/:accountId'>
             <Route path='' element={<PortfolioAccountPage />} />
           </Route>
+          <Route path='hls-staking' element={<HLSStakingPage />} />
+          <Route path='hls-farm' element={<HLSFarmPage />} />
           <Route path='' element={<TradePage />} />
         </Route>
         <Route path='*' element={<Navigate to='/' />} />

src/constants/pages.ts

@@ -0,0 +1,9 @@
+export const EARN_TABS: Tab[] = [
+  { page: 'lend', name: 'Lend' },
+  { page: 'farm', name: 'Farm' },
+]
+
+export const HLS_TABS: Tab[] = [
+  { page: 'hls-farm', name: 'Farm' },
+  { page: 'hls-staking', name: 'Staking' },
+]

src/pages/FarmPage.tsx

@@ -2,12 +2,13 @@ import FarmIntro from 'components/Earn/Farm/FarmIntro'
 import { AvailableVaults, DepositedVaults } from 'components/Earn/Farm/Vaults'
 import Tab from 'components/Earn/Tab'
 import MigrationBanner from 'components/MigrationBanner'
+import { EARN_TABS } from 'constants/pages'
 
 export default function FarmPage() {
   return (
     <div className='flex flex-wrap w-full gap-6'>
       <MigrationBanner />
-      <Tab isFarm />
+      <Tab tabs={EARN_TABS} activeTabIdx={1} />
       <FarmIntro />
       <DepositedVaults />
       <AvailableVaults />

src/pages/HLSFarmPage.tsx

@@ -0,0 +1,12 @@
+import Tab from 'components/Earn/Tab'
+import MigrationBanner from 'components/MigrationBanner'
+import { HLS_TABS } from 'constants/pages'
+
+export default function HLSFarmPage() {
+  return (
+    <div className='flex flex-wrap w-full gap-6'>
+      <MigrationBanner />
+      <Tab tabs={HLS_TABS} activeTabIdx={0} />
+    </div>
+  )
+}

src/pages/HLSStakingPage.tsx

@@ -0,0 +1,12 @@
+import Tab from 'components/Earn/Tab'
+import MigrationBanner from 'components/MigrationBanner'
+import { HLS_TABS } from 'constants/pages'
+
+export default function HLSStakingPage() {
+  return (
+    <div className='flex flex-wrap w-full gap-6'>
+      <MigrationBanner />
+      <Tab tabs={HLS_TABS} activeTabIdx={1} />
+    </div>
+  )
+}

src/pages/LendPage.tsx

@@ -1,7 +1,8 @@
-import LendIntro from 'components/Earn/Lend/LendIntro'
 import LendingMarketsTable from 'components/Earn/Lend/LendingMarketsTable'
+import LendIntro from 'components/Earn/Lend/LendIntro'
 import Tab from 'components/Earn/Tab'
 import MigrationBanner from 'components/MigrationBanner'
+import { EARN_TABS } from 'constants/pages'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 
 export default function LendPage() {
@@ -9,7 +10,7 @@ export default function LendPage() {
   return (
     <div className='flex flex-wrap w-full gap-6'>
       <MigrationBanner />
-      <Tab />
+      <Tab tabs={EARN_TABS} activeTabIdx={0} />
       <LendIntro />
       <LendingMarketsTable data={accountLentAssets} title='Lent Assets' />
       <LendingMarketsTable data={availableAssets} title='Available Markets' />

src/types/interfaces/components/Tab.d.ts

@@ -0,0 +1,4 @@
+interface Tab {
+  page: Page
+  name: string
+}

src/types/interfaces/route.d.ts

@@ -1 +1,9 @@
-type Page = 'trade' | 'borrow' | 'farm' | 'lend' | 'portfolio' | 'portfolio/{accountId}'
+type Page =
+  | 'trade'
+  | 'borrow'
+  | 'farm'
+  | 'lend'
+  | 'portfolio'
+  | 'portfolio/{accountId}'
+  | 'hls-farm'
+  | 'hls-staking'

src/utils/constants.ts

@@ -22,3 +22,5 @@ export const DEFAULT_PORTFOLIO_STATS = [
   { title: null, sub: 'APR' },
   { title: null, sub: 'Account Leverage' },
 ]
+
+export const ENABLE_HLS = false