From 071cceacec8f8e85b4749630696b5f3ee4f71934 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Wed, 21 Feb 2024 08:03:17 +0100 Subject: [PATCH] feat: separate v1 implementation --- src/components/header/ChainSelect.tsx | 36 ++++++--- src/components/header/DesktopHeader.tsx | 8 +- src/components/header/V1DesktopHeader.tsx | 81 +++++++++++++++++++ .../header/navigation/DesktopNavigation.tsx | 10 ++- src/pages/_layout.tsx | 6 +- 5 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 src/components/header/V1DesktopHeader.tsx diff --git a/src/components/header/ChainSelect.tsx b/src/components/header/ChainSelect.tsx index 11f761d7..77035442 100644 --- a/src/components/header/ChainSelect.tsx +++ b/src/components/header/ChainSelect.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import { useCallback, useMemo } from 'react' -import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' +import { useNavigate, useSearchParams } from 'react-router-dom' import { useSWRConfig } from 'swr' import Button from 'components/common/Button' @@ -15,11 +15,16 @@ import useToggle from 'hooks/useToggle' import useStore from 'store' import { NETWORK } from 'types/enums/network' import { ChainInfoID } from 'types/enums/wallet' -import { getPage, getRoute } from 'utils/route' +import { getRoute } from 'utils/route' const v1Outposts = [ - { chainId: ChainInfoID.Neutron1, name: 'Neutron', url: 'https://neutron.marsprotocol.io' }, - { chainId: ChainInfoID.Osmosis1, name: 'Osmosis', url: 'https://v1.marsprotocol.io' }, + { + chainId: ChainInfoID.Neutron1, + name: 'Neutron', + url: 'https://neutron.marsprotocol.io', + target: '_blank', + }, + { chainId: ChainInfoID.Osmosis1, name: 'Osmosis', url: '/v1', target: '_self' }, ] export default function ChainSelect() { @@ -27,8 +32,8 @@ export default function ChainSelect() { const chainConfig = useChainConfig() const { mutate } = useSWRConfig() const navigate = useNavigate() - const { pathname } = useLocation() const [searchParams] = useSearchParams() + const isV1 = useStore((s) => s.isV1) const [_, setCurrentChainId] = useCurrentChainId() @@ -39,14 +44,15 @@ export default function ChainSelect() { mutate(() => true) useStore.setState({ chainConfig, + isV1: false, client: undefined, address: undefined, userDomain: undefined, balances: [], }) - navigate(getRoute(getPage(pathname), searchParams)) + navigate(getRoute('trade', searchParams)) }, - [setCurrentChainId, setShowMenu, mutate, navigate, pathname, searchParams], + [setCurrentChainId, setShowMenu, mutate, navigate, searchParams], ) const currentChains = useMemo(() => { @@ -80,7 +86,7 @@ export default function ChainSelect() {
  • {v1Outposts.map((outpost) => (
  • window.open(outpost.url, '_blank')} + onClick={() => window.open(outpost.url, outpost.target)} key={outpost.name} > - {outpost.name} + {outpost.name}{' '} + {outpost.target !== '_self' && ( + + )}
    • ))} diff --git a/src/components/header/DesktopHeader.tsx b/src/components/header/DesktopHeader.tsx index 493e6f73..a3378156 100644 --- a/src/components/header/DesktopHeader.tsx +++ b/src/components/header/DesktopHeader.tsx @@ -16,7 +16,7 @@ import useStore from 'store' import { WalletID } from 'types/enums/wallet' import { getGovernanceUrl } from 'utils/helpers' -export const menuTree = (walletId: WalletID, chainConfig: ChainConfig): MenuTreeEntry[] => [ +const menuTree = (walletId: WalletID, chainConfig: ChainConfig): MenuTreeEntry[] => [ { pages: ['trade', 'trade-advanced'], label: 'Trade', @@ -40,7 +40,6 @@ export const menuTree = (walletId: WalletID, chainConfig: ChainConfig): MenuTree { pages: ['borrow'], label: 'Borrow' }, ...(chainConfig.hls ? [{ pages: ['hls-staking'] as Page[], label: 'High Leverage' }] : []), { pages: ['portfolio'], label: 'Portfolio' }, - { pages: ['v1'], label: 'V1' }, { pages: ['governance'], label: 'Governance', externalUrl: getGovernanceUrl(walletId) }, ] @@ -49,9 +48,8 @@ export default function DesktopHeader() { const focusComponent = useStore((s) => s.focusComponent) const isOracleStale = useStore((s) => s.isOracleStale) const isHLS = useStore((s) => s.isHLS) - const isV1 = useStore((s) => s.isV1) const accountId = useAccountId() - const showAccountMenu = address && !isHLS && !isV1 + const showAccountMenu = address && !isHLS function handleCloseFocusMode() { if (focusComponent && focusComponent.onClose) focusComponent.onClose() @@ -75,7 +73,7 @@ export default function DesktopHeader() { focusComponent ? 'relative isolate' : 'border-b border-white/20', )} > - + {focusComponent ? (
    diff --git a/src/components/header/V1DesktopHeader.tsx b/src/components/header/V1DesktopHeader.tsx new file mode 100644 index 00000000..4635ddd2 --- /dev/null +++ b/src/components/header/V1DesktopHeader.tsx @@ -0,0 +1,81 @@ +import classNames from 'classnames' +import { useMemo } from 'react' +import { isDesktop } from 'react-device-detect' + +import Wallet from 'components/Wallet' +import EscButton from 'components/common/Button/EscButton' +import Settings from 'components/common/Settings' +import ChainSelect from 'components/header/ChainSelect' +import OracleResyncButton from 'components/header/OracleResyncButton' +import RewardsCenter from 'components/header/RewardsCenter' +import DesktopNavigation from 'components/header/navigation/DesktopNavigation' +import useAccountId from 'hooks/useAccountId' +import useStore from 'store' +import { WalletID } from 'types/enums/wallet' +import { getGovernanceUrl } from 'utils/helpers' + +const menuTree = (walletId: WalletID, chainConfig: ChainConfig): MenuTreeEntry[] => [ + { + pages: ['v1'], + label: 'Red Bank', + }, + { pages: ['governance'], label: 'Governance', externalUrl: getGovernanceUrl(walletId) }, +] + +export default function DesktopHeader() { + const address = useStore((s) => s.address) + const focusComponent = useStore((s) => s.focusComponent) + const isOracleStale = useStore((s) => s.isOracleStale) + const accountId = useAccountId() + + function handleCloseFocusMode() { + if (focusComponent && focusComponent.onClose) focusComponent.onClose() + useStore.setState({ focusComponent: null }) + } + + const showStaleOracle = useMemo(() => isOracleStale && address, [isOracleStale, address]) + + if (!isDesktop) return null + + return ( +
    +
    + + + {focusComponent ? ( +
    +
    + {address && ( +
    + + +
    + )} +
    + {!address && } + +
    +
    + ) : ( +
    + {showStaleOracle && } + {accountId && } + + + +
    + )} +
    +
    + ) +} diff --git a/src/components/header/navigation/DesktopNavigation.tsx b/src/components/header/navigation/DesktopNavigation.tsx index 92fc1a47..a8c0c888 100644 --- a/src/components/header/navigation/DesktopNavigation.tsx +++ b/src/components/header/navigation/DesktopNavigation.tsx @@ -4,7 +4,6 @@ import { useMemo } from 'react' import Button from 'components/common/Button' import { ChevronDown, Logo } from 'components/common/Icons' -import { menuTree } from 'components/header/DesktopHeader' import { NavLink } from 'components/header/navigation/NavLink' import { NavMenu } from 'components/header/navigation/NavMenu' import useChainConfig from 'hooks/useChainConfig' @@ -12,19 +11,24 @@ import useToggle from 'hooks/useToggle' import useStore from 'store' import { WalletID } from 'types/enums/wallet' +interface Props { + menuTree: (walletId: WalletID, chainConfig: ChainConfig) => MenuTreeEntry[] +} + export function getIsActive(pages: string[]) { const segments = location.pathname.split('/') return pages.some((page) => segments.includes(page)) } -export default function DesktopNavigation() { +export default function DesktopNavigation(props: Props) { + const { menuTree } = props const [showMenu, setShowMenu] = useToggle() const { recentWallet } = useShuttle() const chainConfig = useChainConfig() const walletId = (recentWallet?.providerId as WalletID) ?? WalletID.Keplr const focusComponent = useStore((s) => s.focusComponent) - const menu = useMemo(() => menuTree(walletId, chainConfig), [walletId, chainConfig]) + const menu = useMemo(() => menuTree(walletId, chainConfig), [walletId, chainConfig, menuTree]) return (
    s.focusComponent) const address = useStore((s) => s.address) + const isV1 = useStore((s) => s.isV1) const [reduceMotion] = useLocalStorage( LocalStorageKeys.REDUCE_MOTION, @@ -67,7 +69,7 @@ export default function Layout({ children }: { children: React.ReactNode }) { - + {isV1 ? : }