From 4915729ed5591e6336b9e3027480085338a0d17c Mon Sep 17 00:00:00 2001
From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
Date: Thu, 12 Oct 2023 14:40:40 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20routing=20and=20pages=20for=20HLS?=
 =?UTF-8?q?=20(#538)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Earn/Tab.tsx                   | 33 ++++++++-----------
 src/components/Header/DesktopHeader.tsx       |  2 ++
 .../Navigation/DesktopNavigation.tsx          |  3 +-
 src/components/Routes.tsx                     |  6 ++++
 src/constants/pages.ts                        |  9 +++++
 src/pages/FarmPage.tsx                        |  3 +-
 src/pages/HLSFarmPage.tsx                     | 12 +++++++
 src/pages/HLSStakingPage.tsx                  | 12 +++++++
 src/pages/LendPage.tsx                        |  5 +--
 src/types/interfaces/components/Tab.d.ts      |  4 +++
 src/types/interfaces/route.d.ts               | 10 +++++-
 src/utils/constants.ts                        |  2 ++
 12 files changed, 77 insertions(+), 24 deletions(-)
 create mode 100644 src/constants/pages.ts
 create mode 100644 src/pages/HLSFarmPage.tsx
 create mode 100644 src/pages/HLSStakingPage.tsx
 create mode 100644 src/types/interfaces/components/Tab.d.ts

diff --git a/src/components/Earn/Tab.tsx b/src/components/Earn/Tab.tsx
index bc4b7f16..1495c47c 100644
--- a/src/components/Earn/Tab.tsx
+++ b/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
-        to={getRoute('lend', address, accountId)}
-        className={classNames(
-          props.isFarm ? 'text-white/40' : underlineClasses,
-          'relative mr-8 text-xl ',
-        )}
-      >
-        Lend
-      </NavLink>
-      <NavLink
-        to={getRoute('farm', address, accountId)}
-        className={classNames(
-          !props.isFarm ? 'text-white/40' : underlineClasses,
-          'relative text-xl',
-        )}
-      >
-        Farm
-      </NavLink>
+      {props.tabs.map((tab, index) => (
+        <NavLink
+          key={tab.page}
+          to={getRoute(tab.page, address, accountId)}
+          className={classNames(
+            props.activeTabIdx === index ? underlineClasses : 'text-white/40',
+            'relative mr-8 text-xl ',
+          )}
+        >
+          {tab.name}
+        </NavLink>
+      ))}
     </div>
   )
 }
diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx
index 8e1ff645..8965a7a1 100644
--- a/src/components/Header/DesktopHeader.tsx
+++ b/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() {
diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx
index 596164f9..5621315d 100644
--- a/src/components/Navigation/DesktopNavigation.tsx
+++ b/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 (
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
index e4e0b096..df26dd94 100644
--- a/src/components/Routes.tsx
+++ b/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='/' />} />
diff --git a/src/constants/pages.ts b/src/constants/pages.ts
new file mode 100644
index 00000000..a649f1fa
--- /dev/null
+++ b/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' },
+]
diff --git a/src/pages/FarmPage.tsx b/src/pages/FarmPage.tsx
index fb248757..0eeccf7d 100644
--- a/src/pages/FarmPage.tsx
+++ b/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 />
diff --git a/src/pages/HLSFarmPage.tsx b/src/pages/HLSFarmPage.tsx
new file mode 100644
index 00000000..d386ee30
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/pages/HLSStakingPage.tsx b/src/pages/HLSStakingPage.tsx
new file mode 100644
index 00000000..1fc8e2d2
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/pages/LendPage.tsx b/src/pages/LendPage.tsx
index c27b76e3..0cce99ee 100644
--- a/src/pages/LendPage.tsx
+++ b/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' />
diff --git a/src/types/interfaces/components/Tab.d.ts b/src/types/interfaces/components/Tab.d.ts
new file mode 100644
index 00000000..aff1c9c5
--- /dev/null
+++ b/src/types/interfaces/components/Tab.d.ts
@@ -0,0 +1,4 @@
+interface Tab {
+  page: Page
+  name: string
+}
diff --git a/src/types/interfaces/route.d.ts b/src/types/interfaces/route.d.ts
index 48101e31..dcd3b9e7 100644
--- a/src/types/interfaces/route.d.ts
+++ b/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'
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index f4e8a264..55a7b2b4 100644
--- a/src/utils/constants.ts
+++ b/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