@@ -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',
diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx
index 6ec89232..785cb73b 100644
--- a/src/components/Header/DesktopHeader.tsx
+++ b/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() {
{isOracleStale &&
}
{accountId &&
}
- {address && !isHLS &&
}
+ {address && currentAppSection === 'app' &&
}
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index 9b38b6de..e225a8df 100644
--- a/src/components/Intro.tsx
+++ b/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 (
diff --git a/src/components/RewardsCenter.tsx b/src/components/RewardsCenter.tsx
index 649a4abb..4e38696e 100644
--- a/src/components/RewardsCenter.tsx
+++ b/src/components/RewardsCenter.tsx
@@ -81,6 +81,8 @@ export default function RewardsCenter() {
}
}, [accountId, claimTx])
+ if (totalRewardsCoin.amount.isZero()) return null
+
return (
} />
{ENABLE_HLS &&
} />}
{ENABLE_HLS &&
} />}
+
} />
+
} />
+
} />
+
} />
} />
} />
@@ -39,6 +44,10 @@ export default function Routes() {
} />
{ENABLE_HLS && } />}
{ENABLE_HLS && } />}
+ } />
+ } />
+ } />
+ } />
} />
diff --git a/src/components/Stats/Chart.tsx b/src/components/Stats/Chart.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Stats/StatsAccounts.tsx b/src/components/Stats/StatsAccounts.tsx
new file mode 100644
index 00000000..dbced76d
--- /dev/null
+++ b/src/components/Stats/StatsAccounts.tsx
@@ -0,0 +1,3 @@
+export default function StatsAccounts() {
+ return Stats Accounts
+}
diff --git a/src/components/Stats/StatsFarm.tsx b/src/components/Stats/StatsFarm.tsx
new file mode 100644
index 00000000..1737090c
--- /dev/null
+++ b/src/components/Stats/StatsFarm.tsx
@@ -0,0 +1,3 @@
+export default function StatsFarm() {
+ return Stats Farm
+}
diff --git a/src/components/Stats/StatsLendAndBorrow.tsx b/src/components/Stats/StatsLendAndBorrow.tsx
new file mode 100644
index 00000000..63cd5242
--- /dev/null
+++ b/src/components/Stats/StatsLendAndBorrow.tsx
@@ -0,0 +1,3 @@
+export default function StatsLendAndBorrow() {
+ return Stats Lend & Borrow
+}
diff --git a/src/components/Stats/StatsTrading.tsx b/src/components/Stats/StatsTrading.tsx
new file mode 100644
index 00000000..b3d4582b
--- /dev/null
+++ b/src/components/Stats/StatsTrading.tsx
@@ -0,0 +1,3 @@
+export default function StatsTrading() {
+ return Stats Trading
+}
diff --git a/src/constants/pages.ts b/src/constants/pages.ts
index e545b7f7..816522b9 100644
--- a/src/constants/pages.ts
+++ b/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' },
+]
diff --git a/src/pages/StatsPage.tsx b/src/pages/StatsPage.tsx
new file mode 100644
index 00000000..0f5ff560
--- /dev/null
+++ b/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
+ case 'stats-lend-borrow':
+ return
+ case 'stats-accounts':
+ return
+ default:
+ return
+ }
+}
+
+export default function StatsPage() {
+ const { pathname } = useLocation()
+ const page = getPage(pathname)
+ const activeIndex = STATS_TABS.findIndex((tab) => tab.page === page)
+
+ return (
+
+
+
+ {getStatsComponent(page)}
+
+ )
+}
diff --git a/src/store/slices/common.ts b/src/store/slices/common.ts
index 033237b7..156900cb 100644
--- a/src/store/slices/common.ts
+++ b/src/store/slices/common.ts
@@ -15,6 +15,6 @@ export default function createCommonSlice(set: SetState, get: GetSt
useMargin: true,
useAutoRepay: true,
isOracleStale: false,
- isHLS: false,
+ currentAppSection: 'app',
}
}
diff --git a/src/types/interfaces/route.d.ts b/src/types/interfaces/route.d.ts
index d1563795..94160241 100644
--- a/src/types/interfaces/route.d.ts
+++ b/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'
diff --git a/src/types/interfaces/store/common.d.ts b/src/types/interfaces/store/common.d.ts
index 151c0da7..aefac7aa 100644
--- a/src/types/interfaces/store/common.d.ts
+++ b/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 {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 13092a66..61c6db82 100644
--- a/src/utils/constants.ts
+++ b/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
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 80207bdc..81a51c6d 100644
--- a/src/utils/route.ts
+++ b/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))
diff --git a/tailwind.config.js b/tailwind.config.js
index 493a5781..bff18ca1 100644
--- a/tailwind.config.js
+++ b/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'],