import React from 'react' import styled from '@emotion/styled' import Link from 'next/link' import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline' import Modal from './Modal' import useLocalStorageState from '../hooks/useLocalStorageState' import useMangoStore from '../stores/useMangoStore' import { LinkButton } from './Button' const StyledColumnHeader = styled.span` font-size: 0.6rem; ` const MarketsModal = ({ isOpen, markets, onClose, }: { isOpen: boolean markets: Array onClose?: (x?) => void }) => { const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache) const [hiddenMarkets, setHiddenMarkets] = useLocalStorageState( 'hiddenMarkets', [] ) const handleHideShowMarket = (asset) => { if (hiddenMarkets.includes(asset)) { setHiddenMarkets(hiddenMarkets.filter((m) => m !== asset)) } else { setHiddenMarkets(hiddenMarkets.concat(asset)) } } return (
Markets
setHiddenMarkets([])} > Show all in Nav
{markets.map((mkt, index) => (
{mkt.baseAsset}
{hiddenMarkets.includes(mkt.baseAsset) ? ( handleHideShowMarket(mkt.baseAsset)} /> ) : ( handleHideShowMarket(mkt.baseAsset)} /> )}
Market
Price {/* 24h Change 24h Vol */}
{mkt.markets.map((m, i) => (
{m.name}
${mangoGroup.getPrice(index, mangoCache).toFixed(2)} {/* +2.44% $233m */}
))}
))}
) } export default React.memo(MarketsModal)