diff --git a/src/components/Account/AccountDetails/index.tsx b/src/components/Account/AccountDetails/index.tsx index a21cdbb6..ac4fcb06 100644 --- a/src/components/Account/AccountDetails/index.tsx +++ b/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 diff --git a/src/components/Background.tsx b/src/components/Background.tsx index d6db98d0..874db28c 100644 --- a/src/components/Background.tsx +++ b/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([ + '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 (
@@ -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 (