update navigation transitions and ordering

This commit is contained in:
tjs 2022-02-18 17:24:06 -05:00
parent 138a664c77
commit 7ca2e6d31f
8 changed files with 57 additions and 55 deletions

View File

@ -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>

View File

@ -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'

View File

@ -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('')}

View File

@ -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`}>

View File

@ -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}

View File

@ -75,7 +75,6 @@ const useHydrateStore = () => {
useInterval(() => {
actions.fetchMangoGroup()
actions.fetchWalletTokens()
actions.fetchMarketInfo()
}, 120 * SECONDS)
useEffect(() => {

View File

@ -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(

View File

@ -112,7 +112,7 @@ button.transition-none {
}
.default-transition {
@apply transition-all duration-300;
@apply transition-all duration-200;
}
.tiny-text {