import useLocalStorageState from '../hooks/useLocalStorageState' import { FAVORITE_MARKETS_KEY } from './TradeNavMenu' import { StarIcon, QuestionMarkCircleIcon } from '@heroicons/react/solid' import { useViewport } from '../hooks/useViewport' import { breakpoints } from './TradePageGrid' import Link from 'next/link' import { useRouter } from 'next/router' import { initialMarket } from './SettingsModal' import * as MonoIcons from './icons' import { Transition } from '@headlessui/react' import useMangoStore from '../stores/useMangoStore' const FavoritesShortcutBar = () => { const [favoriteMarkets] = useLocalStorageState(FAVORITE_MARKETS_KEY, []) const { width } = useViewport() const isMobile = width ? width < breakpoints.sm : false const { asPath } = useRouter() const marketsInfo = useMangoStore((s) => s.marketsInfo) const renderIcon = (mktName) => { const symbol = mktName.slice(0, -5) const iconName = `${symbol.slice(0, 1)}${symbol .slice(1, 4) .toLowerCase()}MonoIcon` const SymbolIcon = MonoIcons[iconName] || QuestionMarkCircleIcon return } return !isMobile ? ( 0} enter="transition-all ease-in duration-200" enterFrom="opacity-0" enterTo="opacity-100" leave="transition ease-out duration-200" leaveFrom="opacity-100" leaveTo="opacity-0" > {favoriteMarkets.map((mkt) => { const change24h = marketsInfo?.find((m) => m.name === mkt)?.change24h return ( {renderIcon(mkt)} {mkt} {change24h ? (
= 0 ? 'text-th-green' : 'text-th-red' : 'text-th-fgd-4' }`} > {`${(change24h * 100).toFixed(1)}%`}
) : null}
) })}
) : null } export default FavoritesShortcutBar