feat: first preparations for stats

src/components/Account/AccountDetails/index.tsx

@@ -37,7 +37,7 @@ import {
 
 export default function AccountDetailsController() {
   const address = useStore((s) => s.address)
-  const isHLS = useStore((s) => s.isHLS)
+  const currentAppSection = useStore((s) => s.currentAppSection)
   const { data: accounts, isLoading } = useAccounts('default', address)
   const { data: accountIds } = useAccountIds(address, false)
   const accountId = useAccountId()
@@ -46,7 +46,7 @@ export default function AccountDetailsController() {
   const focusComponent = useStore((s) => s.focusComponent)
   const isOwnAccount = accountId && accountIds?.includes(accountId)
 
-  if (!address || focusComponent || !isOwnAccount || isHLS) return null
+  if (!address || focusComponent || !isOwnAccount || currentAppSection !== 'app') return null
 
   if ((isLoading && accountId && !focusComponent) || !account) return <Skeleton />
 

src/components/Background.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
+import { useEffect, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useEffect, useMemo } from 'react'
 
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
@@ -13,13 +13,41 @@ export default function Background() {
     LocalStorageKeys.REDUCE_MOTION,
     DEFAULT_SETTINGS.reduceMotion,
   )
+  const [backgroundClasses, setBackgroundClasses] = useState<string[]>([
+    'bg-body',
+    'bg-orb-primary',
+    'bg-orb-secondary',
+    'bg-orb-tertiary',
+  ])
   const { pathname } = useLocation()
   const page = getPage(pathname)
-  const isHLS = useMemo(() => page.split('-')[0] === 'hls', [page])
+  const currentAppSection = useMemo(() => {
+    switch (page.split('-')[0]) {
+      case 'hls':
+        setBackgroundClasses([
+          'bg-body-hls',
+          'bg-orb-primary-hls',
+          'bg-orb-secondary-hls',
+          'bg-orb-tertiary-hls',
+        ])
+        return 'hls'
+      case 'stats':
+        setBackgroundClasses([
+          'bg-body',
+          'bg-orb-primary-stats',
+          'bg-orb-secondary-stats',
+          'bg-orb-tertiary-stats',
+        ])
+        return 'stats'
+      default:
+        setBackgroundClasses(['bg-body', 'bg-orb-primary', 'bg-orb-secondary', 'bg-orb-tertiary'])
+        return 'app'
+    }
+  }, [page])
 
   useEffect(() => {
-    useStore.setState({ isHLS })
-  }, [isHLS])
+    useStore.setState({ currentAppSection })
+  }, [currentAppSection])
 
   return (
     <div
@@ -27,7 +55,7 @@ export default function Background() {
         'fixed inset-0',
         'w-full h-full',
         'overflow-hidden pointer-events-none background ',
-        isHLS ? 'bg-body-hls' : 'bg-body',
+        backgroundClasses[0],
         !reduceMotion && 'transition-bg duration-1000 delay-300',
       )}
     >
@@ -39,7 +67,7 @@ export default function Background() {
           'max-h-[500px] max-w-[500px]',
           'left-[-10vw] top-[-10vw]',
           'blur-orb-primary',
-          isHLS ? ' bg-orb-primary-hls' : 'bg-orb-primary',
+          backgroundClasses[1],
           'translate-x-0 translate-y-0 rounded-full opacity-20',
           !reduceMotion && 'animate-[float_120s_ease-in-out_infinite_2s]',
           !reduceMotion && 'transition-bg duration-1000 delay-300',
@@ -53,7 +81,7 @@ export default function Background() {
           'max-h-[1000px] max-w-[1000px]',
           'bottom-[-20vw] right-[-10vw]',
           'blur-orb-secondary',
-          isHLS ? ' bg-orb-secondary-hls' : 'bg-orb-secondary',
+          backgroundClasses[2],
           'translate-x-0 translate-y-0  rounded-full opacity-30',
           !reduceMotion && 'transition-bg duration-1000 delay-300',
         )}
@@ -66,7 +94,7 @@ export default function Background() {
           'max-h-[600px] max-w-[600px]',
           'right-[-4vw] top-[-10vw]',
           'blur-orb-tertiary ',
-          isHLS ? ' bg-orb-tertiary-hls' : 'bg-orb-tertiary',
+          backgroundClasses[3],
           'translate-x-0 translate-y-0 rounded-full opacity-20',
           !reduceMotion && 'animate-[float_180s_ease-in_infinite]',
           !reduceMotion && 'transition-bg duration-1000 delay-300',

src/components/Header/DesktopHeader.tsx

@@ -20,6 +20,7 @@ export const menuTree = (walletId: WalletID): MenuTreeEntry[] => [
   { pages: ['borrow'], label: 'Borrow' },
   ...(ENABLE_HLS ? [{ pages: ['hls-staking'] as Page[], label: 'High Leverage' }] : []),
   { pages: ['portfolio'], label: 'Portfolio' },
+  { pages: ['stats'], label: 'Statistics' },
   { pages: ['governance'], label: 'Governance', externalUrl: getGovernanceUrl(walletId) },
 ]
 
@@ -27,7 +28,7 @@ export default function DesktopHeader() {
   const address = useStore((s) => s.address)
   const focusComponent = useStore((s) => s.focusComponent)
   const isOracleStale = useStore((s) => s.isOracleStale)
-  const isHLS = useStore((s) => s.isHLS)
+  const currentAppSection = useStore((s) => s.currentAppSection)
   const accountId = useAccountId()
 
   function handleCloseFocusMode() {
@@ -62,7 +63,7 @@ export default function DesktopHeader() {
           <div className='flex gap-4'>
             {isOracleStale && <OracleResyncButton />}
             {accountId && <RewardsCenter />}
-            {address && !isHLS && <AccountMenu />}
+            {address && currentAppSection === 'app' && <AccountMenu />}
             <Wallet />
             <Settings />
           </div>

src/components/Intro.tsx

@@ -32,13 +32,13 @@ function IntroBackground(props: { bg: Props['bg'] }) {
 
 export default function Intro(props: Props) {
   const showTutorial = useStore((s) => s.tutorial)
-  const isHLS = useStore((s) => s.isHLS)
+  const currentAppSection = useStore((s) => s.currentAppSection)
   if (!showTutorial) return null
   return (
     <Card
       className={classNames(
         'relative w-full p-8 bg-cover h-55',
-        isHLS ? 'bg-intro-hls' : 'bg-intro',
+        currentAppSection === 'hls' ? 'bg-intro-hls' : 'bg-intro',
       )}
       contentClassName='flex w-full h-full flex-col justify-between'
     >

src/components/RewardsCenter.tsx

@@ -81,6 +81,8 @@ export default function RewardsCenter() {
     }
   }, [accountId, claimTx])
 
+  if (totalRewardsCoin.amount.isZero()) return null
+
   return (
     <div className={'relative'}>
       <Button

src/components/Routes.tsx

@@ -1,6 +1,5 @@
 import { Navigate, Outlet, Route, Routes as RoutesWrapper } from 'react-router-dom'
 
-import Layout from 'pages/_layout'
 import BorrowPage from 'pages/BorrowPage'
 import FarmPage from 'pages/FarmPage'
 import HLSFarmPage from 'pages/HLSFarmPage'
@@ -9,7 +8,9 @@ import LendPage from 'pages/LendPage'
 import MobilePage from 'pages/MobilePage'
 import PortfolioAccountPage from 'pages/PortfolioAccountPage'
 import PortfolioPage from 'pages/PortfolioPage'
+import StatsPage from 'pages/StatsPage'
 import TradePage from 'pages/TradePage'
+import Layout from 'pages/_layout'
 import { ENABLE_HLS } from 'utils/constants'
 
 export default function Routes() {
@@ -30,6 +31,10 @@ export default function Routes() {
         <Route path='/mobile' element={<MobilePage />} />
         {ENABLE_HLS && <Route path='/hls-staking' element={<HLSStakingPage />} />}
         {ENABLE_HLS && <Route path='/hls-farm' element={<HLSFarmPage />} />}
+        <Route path='/stats' element={<StatsPage />} />
+        <Route path='/stats-farm' element={<StatsPage />} />
+        <Route path='/stats-lend-borrow' element={<StatsPage />} />
+        <Route path='/stats-accounts' element={<StatsPage />} />
         <Route path='/' element={<TradePage />} />
         <Route path='/wallets/:address'>
           <Route path='trade' element={<TradePage />} />
@@ -39,6 +44,10 @@ export default function Routes() {
           <Route path='portfolio' element={<PortfolioPage />} />
           {ENABLE_HLS && <Route path='hls-staking' element={<HLSStakingPage />} />}
           {ENABLE_HLS && <Route path='hls-farm' element={<HLSFarmPage />} />}
+          <Route path='stats' element={<StatsPage />} />
+          <Route path='stats-farm' element={<StatsPage />} />
+          <Route path='stats-lend-borrow' element={<StatsPage />} />
+          <Route path='stats-accounts' element={<StatsPage />} />
           <Route path='portfolio/:accountId'>
             <Route path='' element={<PortfolioAccountPage />} />
           </Route>

src/components/Stats/StatsAccounts.tsx

@@ -0,0 +1,3 @@
+export default function StatsAccounts() {
+  return <div className='flex-1'>Stats Accounts</div>
+}

src/components/Stats/StatsFarm.tsx

@@ -0,0 +1,3 @@
+export default function StatsFarm() {
+  return <div className='flex-1'>Stats Farm</div>
+}

src/components/Stats/StatsLendAndBorrow.tsx

@@ -0,0 +1,3 @@
+export default function StatsLendAndBorrow() {
+  return <div className='flex-1'>Stats Lend &amp; Borrow</div>
+}

src/components/Stats/StatsTrading.tsx

@@ -0,0 +1,3 @@
+export default function StatsTrading() {
+  return <div className='flex-1'>Stats Trading</div>
+}

src/constants/pages.ts

@@ -7,3 +7,10 @@ export const HLS_TABS: Tab[] = [
   { page: 'hls-staking', name: 'Staking' },
   { page: 'hls-farm', name: 'Farm' },
 ]
+
+export const STATS_TABS: Tab[] = [
+  { page: 'stats', name: 'Trading' },
+  { page: 'stats-farm', name: 'Farm' },
+  { page: 'stats-lend-borrow', name: 'Lend & Borrow' },
+  { page: 'stats-accounts', name: 'Accounts' },
+]

src/pages/StatsPage.tsx

@@ -0,0 +1,37 @@
+import { useLocation } from 'react-router-dom'
+
+import Tab from 'components/Earn/Tab'
+import MigrationBanner from 'components/MigrationBanner'
+import StatsAccounts from 'components/Stats/StatsAccounts'
+import StatsFarm from 'components/Stats/StatsFarm'
+import StatsLendAndBorrow from 'components/Stats/StatsLendAndBorrow'
+import StatsTrading from 'components/Stats/StatsTrading'
+import { STATS_TABS } from 'constants/pages'
+import { getPage } from 'utils/route'
+
+function getStatsComponent(page: Page) {
+  switch (page) {
+    case 'stats-farm':
+      return <StatsFarm />
+    case 'stats-lend-borrow':
+      return <StatsLendAndBorrow />
+    case 'stats-accounts':
+      return <StatsAccounts />
+    default:
+      return <StatsTrading />
+  }
+}
+
+export default function StatsPage() {
+  const { pathname } = useLocation()
+  const page = getPage(pathname)
+  const activeIndex = STATS_TABS.findIndex((tab) => tab.page === page)
+
+  return (
+    <div className='flex flex-wrap w-full gap-6'>
+      <MigrationBanner />
+      <Tab tabs={STATS_TABS} activeTabIdx={activeIndex === -1 ? 0 : activeIndex} />
+      {getStatsComponent(page)}
+    </div>
+  )
+}

src/store/slices/common.ts

@@ -15,6 +15,6 @@ export default function createCommonSlice(set: SetState<CommonSlice>, get: GetSt
     useMargin: true,
     useAutoRepay: true,
     isOracleStale: false,
-    isHLS: false,
+    currentAppSection: 'app',
   }
 }

src/types/interfaces/route.d.ts

@@ -8,3 +8,7 @@ type Page =
   | 'hls-farm'
   | 'hls-staking'
   | 'governance'
+  | 'stats'
+  | 'stats-farm'
+  | 'stats-lend-borrow'
+  | 'stats-accounts'

src/types/interfaces/store/common.d.ts

@@ -18,7 +18,7 @@ interface CommonSlice {
   useMargin: boolean
   useAutoRepay: boolean
   isOracleStale: boolean
-  isHLS: boolean
+  currentAppSection: 'app' | 'hls' | 'stats'
 }
 
 interface FocusComponent {

src/utils/constants.ts

@@ -20,5 +20,5 @@ export const DEFAULT_PORTFOLIO_STATS = [
   { title: null, sub: 'Account Leverage' },
 ]
 
-export const ENABLE_HLS = false
+export const ENABLE_HLS = true
 export const ENABLE_PERPS = false

src/utils/route.ts

@@ -19,7 +19,19 @@ export function getRoute(page: Page, address?: string, accountId?: string | null
 }
 
 export function getPage(pathname: string): Page {
-  const pages: Page[] = ['trade', 'borrow', 'farm', 'lend', 'portfolio', 'hls-farm', 'hls-staking']
+  const pages: Page[] = [
+    'trade',
+    'borrow',
+    'farm',
+    'lend',
+    'portfolio',
+    'hls-farm',
+    'hls-staking',
+    'stats',
+    'stats-farm',
+    'stats-lend-borrow',
+    'stats-accounts',
+  ]
   const segments = pathname.split('/')
 
   const page = segments.find((segment) => pages.includes(segment as Page))

tailwind.config.js

@@ -41,12 +41,16 @@ module.exports = {
     '@nav-3/navigation:inline-block',
     '@nav-4/navigation:inline-block',
     '@nav-5/navigation:inline-block',
+    '@nav-6/navigation:inline-block',
+    '@nav-7/navigation:inline-block',
     '@nav-0/navigation:hidden',
     '@nav-1/navigation:hidden',
     '@nav-2/navigation:hidden',
     '@nav-3/navigation:hidden',
     '@nav-4/navigation:hidden',
     '@nav-5/navigation:hidden',
+    '@nav-6/navigation:hidden',
+    '@nav-7/navigation:hidden',
   ],
   theme: {
     extend: {
@@ -119,10 +123,13 @@ module.exports = {
         osmo: '#9f1ab9',
         'orb-primary': '#b12f25',
         'orb-primary-hls': '#FF645F',
+        'orb-primary-stats': '#597DFC',
         'orb-secondary': '#530781',
         'orb-secondary-hls': '#a03b45',
-        'orb-tertiary': '#ff00c7',
+        'orb-secondary-stats': '#FF00C7',
+        'orb-tertiary': '#FF00C7',
         'orb-tertiary-hls': '#FB9562',
+        'orb-tertiary-stats': '#6677FF',
         profit: '#41a4a9',
         primary: '#FF625E',
         secondary: '#FB9562',
@@ -141,6 +148,8 @@ module.exports = {
         'nav-3': '400px',
         'nav-4': '500px',
         'nav-5': '600px',
+        'nav-6': '700px',
+        'nav-7': '800px',
       },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],