update navigation transitions and ordering
This commit is contained in:
parent
138a664c77
commit
7ca2e6d31f
|
@ -180,23 +180,6 @@ const MarketDetails = () => {
|
|||
<div className="flex flex-col lg:flex-row lg:items-center">
|
||||
<div className="hidden md:block md:pb-4 md:pr-6 lg:pb-0">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
|
||||
<div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
|
||||
<span className="text-th-fgd-4 text-xl">
|
||||
{isPerpMarket ? '-' : '/'}
|
||||
</span>
|
||||
<div className="font-semibold pl-0.5 text-xl">
|
||||
{isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
|
||||
</div>
|
||||
</div>
|
||||
<SwitchMarketDropdown />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -44,12 +44,13 @@ const MarketNavItem: FunctionComponent<MarketNavItemProps> = ({
|
|||
<div className="text-th-fgd-3">
|
||||
<div className="flex items-center">
|
||||
<FavoriteMarketButton market={market} />
|
||||
|
||||
<button
|
||||
className="font-normal flex items-center justify-between w-full"
|
||||
onClick={() => selectMarket(market)}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center text-xs hover:text-th-primary w-full whitespace-nowrap ${
|
||||
className={`flex items-center text-xs w-full whitespace-nowrap py-1.5 hover:text-th-primary ${
|
||||
asPath.includes(market.name) ||
|
||||
(asPath === '/' && initialMarket.name === market.name)
|
||||
? 'text-th-primary'
|
||||
|
|
|
@ -1,14 +1,19 @@
|
|||
import { Fragment, useCallback, useMemo, useRef, useState } from 'react'
|
||||
import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
import { SearchIcon } from '@heroicons/react/outline'
|
||||
import { SwitchHorizontalIcon, XIcon } from '@heroicons/react/solid'
|
||||
import { ChevronDownIcon, SearchIcon } from '@heroicons/react/outline'
|
||||
import { XIcon } from '@heroicons/react/solid'
|
||||
import Input from './Input'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import MarketNavItem from './MarketNavItem'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
|
||||
const SwitchMarketDropdown = () => {
|
||||
const groupConfig = useMangoGroupConfig()
|
||||
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
||||
const baseSymbol = marketConfig.baseSymbol
|
||||
const isPerpMarket = marketConfig.kind === 'perp'
|
||||
|
||||
const markets = useMemo(
|
||||
() => [...groupConfig.spotMarkets, ...groupConfig.perpMarkets],
|
||||
[groupConfig]
|
||||
|
@ -52,21 +57,38 @@ const SwitchMarketDropdown = () => {
|
|||
return (
|
||||
<Popover>
|
||||
{({ open }) => (
|
||||
<div className="flex flex-col ml-2 relative">
|
||||
<div className="flex flex-col relative">
|
||||
<Popover.Button
|
||||
className={`focus:outline-none focus:bg-th-bkg-3 ${
|
||||
open && 'bg-th-bkg-3'
|
||||
}`}
|
||||
ref={buttonRef}
|
||||
>
|
||||
<div
|
||||
className={`flex h-10 items-center justify-center rounded-none w-10 hover:text-th-primary`}
|
||||
>
|
||||
{open ? (
|
||||
<XIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<SwitchHorizontalIcon className="h-5 w-5" />
|
||||
)}
|
||||
<div className="flex items-center pl-2 hover:text-th-primary">
|
||||
<img
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
|
||||
<div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
|
||||
<span className="text-th-fgd-4 text-xl">
|
||||
{isPerpMarket ? '-' : '/'}
|
||||
</span>
|
||||
<div className="font-semibold pl-0.5 text-xl">
|
||||
{isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
|
||||
</div>
|
||||
<div
|
||||
className={`flex h-10 items-center justify-center rounded-none w-10`}
|
||||
>
|
||||
{open ? (
|
||||
<XIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<ChevronDownIcon className="h-5 w-5" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
|
@ -81,7 +103,7 @@ const SwitchMarketDropdown = () => {
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel
|
||||
className="absolute bg-th-bkg-3 max-h-96 overflow-y-auto p-4 left-1/2 transform -translate-x-1/2 rounded-b-md rounded-tl-md thin-scroll top-12 w-72 z-10"
|
||||
className="absolute bg-th-bkg-3 max-h-96 overflow-y-auto p-4 left-0 transform rounded-b-md rounded-tl-md thin-scroll top-12 w-72 z-10"
|
||||
static
|
||||
>
|
||||
<div className="pb-2.5">
|
||||
|
@ -94,7 +116,7 @@ const SwitchMarketDropdown = () => {
|
|||
/>
|
||||
</div>
|
||||
{searchString.length > 0 ? (
|
||||
<div className="pt-1.5 space-y-2.5">
|
||||
<div className="pt-1.5">
|
||||
{filteredMarkets.length > 0 ? (
|
||||
filteredMarkets.map((mkt) => (
|
||||
<MarketNavItem
|
||||
|
@ -109,14 +131,14 @@ const SwitchMarketDropdown = () => {
|
|||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
<div className="flex justify-between pt-1.5">
|
||||
<h4 className="text-xs">{t('spot')}</h4>
|
||||
<div className="">
|
||||
<div className="flex justify-between py-1.5">
|
||||
<h4 className="text-xs">{t('perp')}</h4>
|
||||
<p className="mb-0 text-th-fgd-4 text-xs">
|
||||
{t('rolling-change')}
|
||||
</p>
|
||||
</div>
|
||||
{spotMarkets.map((mkt) => (
|
||||
{perpMarkets.map((mkt) => (
|
||||
<MarketNavItem
|
||||
buttonRef={buttonRef}
|
||||
onClick={() => setSearchString('')}
|
||||
|
@ -124,13 +146,13 @@ const SwitchMarketDropdown = () => {
|
|||
key={mkt.name}
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-between pt-1.5">
|
||||
<h4 className="text-xs">{t('perp')}</h4>
|
||||
<div className="flex justify-between py-1.5">
|
||||
<h4 className="text-xs">{t('spot')}</h4>
|
||||
<p className="mb-0 text-th-fgd-4 text-xs">
|
||||
{t('rolling-change')}
|
||||
</p>
|
||||
</div>
|
||||
{perpMarkets.map((mkt) => (
|
||||
{spotMarkets.map((mkt) => (
|
||||
<MarketNavItem
|
||||
buttonRef={buttonRef}
|
||||
onClick={() => setSearchString('')}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { abbreviateAddress } from '../utils/index'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
|
@ -13,7 +13,6 @@ import { DEFAULT_MARKET_KEY, initialMarket } from './SettingsModal'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import Settings from './Settings'
|
||||
import TradeNavMenu from './TradeNavMenu'
|
||||
import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
|
||||
|
||||
const StyledNewLabel = ({ children, ...props }) => (
|
||||
<div style={{ fontSize: '0.5rem', marginLeft: '1px' }} {...props}>
|
||||
|
@ -30,18 +29,11 @@ const TopBar = () => {
|
|||
DEFAULT_MARKET_KEY,
|
||||
initialMarket
|
||||
)
|
||||
const actions = useMangoStore((s) => s.actions)
|
||||
const groupConfig = useMangoGroupConfig()
|
||||
const markets = [...groupConfig.spotMarkets, ...groupConfig.perpMarkets]
|
||||
|
||||
const handleCloseAccounts = useCallback(() => {
|
||||
setShowAccountsModal(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
actions.fetchMarketInfo(markets)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={`bg-th-bkg-2`}>
|
||||
|
|
|
@ -112,10 +112,10 @@ const TradeNavMenu = () => {
|
|||
appear={true}
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in duration-200"
|
||||
enterFrom="opacity-0 transform scale-75"
|
||||
enter="transition-all ease-in duration-100"
|
||||
enterFrom="opacity-0 transform scale-90"
|
||||
enterTo="opacity-100 transform scale-100"
|
||||
leave="transition ease-out duration-200"
|
||||
leave="transition ease-out duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
|
@ -128,7 +128,7 @@ const TradeNavMenu = () => {
|
|||
/>
|
||||
</div>
|
||||
<div className="bg-th-bkg-3 col-span-2 p-4 rounded-br-lg">
|
||||
<div className="grid grid-cols-2 grid-flow-row gap-x-6 gap-y-2.5">
|
||||
<div className="grid grid-cols-2 grid-flow-row gap-x-6">
|
||||
{markets.map((mkt) => (
|
||||
<MarketNavItem
|
||||
buttonRef={buttonRef}
|
||||
|
|
|
@ -75,7 +75,6 @@ const useHydrateStore = () => {
|
|||
useInterval(() => {
|
||||
actions.fetchMangoGroup()
|
||||
actions.fetchWalletTokens()
|
||||
actions.fetchMarketInfo()
|
||||
}, 120 * SECONDS)
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -407,7 +407,6 @@ const useMangoStore = create<MangoStore>((set, get) => {
|
|||
])
|
||||
.then((values) => {
|
||||
const [mangoAccounts, delegatedAccounts] = values
|
||||
console.log(mangoAccounts.length, delegatedAccounts.length)
|
||||
if (mangoAccounts.length + delegatedAccounts.length > 0) {
|
||||
const sortedAccounts = mangoAccounts
|
||||
.slice()
|
||||
|
@ -534,6 +533,7 @@ const useMangoStore = create<MangoStore>((set, get) => {
|
|||
}
|
||||
})
|
||||
})
|
||||
actions.fetchMarketInfo()
|
||||
})
|
||||
.catch((err) => {
|
||||
if (mangoGroupRetryAttempt < 2) {
|
||||
|
@ -856,9 +856,14 @@ const useMangoStore = create<MangoStore>((set, get) => {
|
|||
})
|
||||
}
|
||||
},
|
||||
async fetchMarketInfo(markets) {
|
||||
async fetchMarketInfo() {
|
||||
const set = get().set
|
||||
const marketInfos = []
|
||||
const groupConfig = get().selectedMangoGroup.config
|
||||
const markets = [...groupConfig.spotMarkets, ...groupConfig.perpMarkets]
|
||||
|
||||
if (!markets) return
|
||||
|
||||
await Promise.all(
|
||||
markets.map(async (market) => {
|
||||
const response = await fetch(
|
||||
|
|
|
@ -112,7 +112,7 @@ button.transition-none {
|
|||
}
|
||||
|
||||
.default-transition {
|
||||
@apply transition-all duration-300;
|
||||
@apply transition-all duration-200;
|
||||
}
|
||||
|
||||
.tiny-text {
|
||||
|
|
Loading…
Reference in New Issue