import { Fragment, FunctionComponent, useEffect, useMemo, useRef, useState, } from 'react' import { Popover, Transition } from '@headlessui/react' import { useTranslation } from 'next-i18next' import { StarIcon } from '@heroicons/react/outline' import { ChevronDownIcon, StarIcon as FilledStarIcon, } from '@heroicons/react/solid' import useLocalStorageState from '../hooks/useLocalStorageState' import MarketNavItem from './MarketNavItem' import useMangoStore from '../stores/useMangoStore' const initialMenuCategories = [ { name: 'Futures', desc: 'perp-desc' }, { name: 'Spot', desc: 'spot-desc' }, ] export const FAVORITE_MARKETS_KEY = 'favoriteMarkets-0.1' const TradeNavMenu = () => { const [favoriteMarkets] = useLocalStorageState(FAVORITE_MARKETS_KEY, []) const [activeMenuCategory, setActiveMenuCategory] = useState('Futures') const [menuCategories, setMenuCategories] = useState(initialMenuCategories) const buttonRef = useRef(null) const { t } = useTranslation('common') const marketsInfo = useMangoStore((s) => s.marketsInfo) const perpMarketsInfo = useMemo( () => marketsInfo .filter((mkt) => mkt?.name.includes('PERP')) .sort((a, b) => b.volumeUsd24h - a.volumeUsd24h), [marketsInfo] ) const spotMarketsInfo = useMemo( () => marketsInfo .filter((mkt) => mkt?.name.includes('USDC')) .sort((a, b) => b.volumeUsd24h - a.volumeUsd24h), [marketsInfo] ) const markets = useMemo( () => activeMenuCategory === 'Futures' ? perpMarketsInfo : activeMenuCategory === 'Spot' ? spotMarketsInfo : marketsInfo.filter((mkt) => favoriteMarkets.includes(mkt.name)), [activeMenuCategory, marketsInfo, favoriteMarkets] ) const handleMenuCategoryChange = (categoryName) => { setActiveMenuCategory(categoryName) } const toggleMenu = () => { buttonRef?.current?.click() if (favoriteMarkets.length > 0) { setActiveMenuCategory('Favorites') } else { setActiveMenuCategory('Futures') } } const onHoverMenu = (open, action) => { if ( (!open && action === 'onMouseEnter') || (open && action === 'onMouseLeave') ) { toggleMenu() } } const handleClickOutside = (event) => { if (buttonRef.current && !buttonRef.current.contains(event.target)) { event.stopPropagation() } } useEffect(() => { document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } }) useEffect(() => { if (favoriteMarkets.length > 0 && menuCategories.length === 2) { const newCategories = [{ name: 'Favorites', desc: '' }, ...menuCategories] setMenuCategories(newCategories) } if (favoriteMarkets.length === 0 && menuCategories.length === 3) { setMenuCategories( menuCategories.filter((cat) => cat.name !== 'Favorites') ) if (activeMenuCategory === 'Favorites') { setActiveMenuCategory('Futures') } } }, [favoriteMarkets]) return ( {({ open }) => (
onHoverMenu(open, 'onMouseEnter')} onMouseLeave={() => onHoverMenu(open, 'onMouseLeave')} className="relative z-50 flex flex-col" >
{t('trade')}
{markets.map((mkt) => ( ))}
)}
) } export default TradeNavMenu interface MenuCategoriesProps { activeCategory: string onChange: (x) => void categories: Array } const MenuCategories: FunctionComponent = ({ activeCategory, onChange, categories, }) => { const { t } = useTranslation('common') return (
cat.name === activeCategory) * 100 }%)`, height: `${100 / categories.length}%`, }} /> {categories.map((cat) => { return ( ) })}
) } export const FavoriteMarketButton = ({ market }) => { const [favoriteMarkets, setFavoriteMarkets] = useLocalStorageState( FAVORITE_MARKETS_KEY, [] ) const addToFavorites = (mkt) => { const newFavorites: any = [...favoriteMarkets, mkt] setFavoriteMarkets(newFavorites) } const removeFromFavorites = (mkt) => { setFavoriteMarkets(favoriteMarkets.filter((m) => m !== mkt)) } return favoriteMarkets.find((mkt) => mkt === market.name) ? ( ) : ( ) }