import { useMemo, useState } from 'react' import { Disclosure } from '@headlessui/react' import dynamic from 'next/dynamic' import { XIcon } from '@heroicons/react/solid' import useMangoStore from '../../stores/useMangoStore' import { getWeights, PerpMarket } from '@blockworks-foundation/mango-client' import { CandlesIcon } from '../icons' import SwipeableTabs from './SwipeableTabs' import Swipeable from './Swipeable' import AdvancedTradeForm from '../trade_form/AdvancedTradeForm' import Orderbook from '../Orderbook' import MarketBalances from '../MarketBalances' import MarketDetails from '../MarketDetails' import MarketPosition from '../MarketPosition' import OpenOrdersTable from '../OpenOrdersTable' import RecentMarketTrades from '../RecentMarketTrades' import FloatingElement from '../FloatingElement' import { useTranslation } from 'next-i18next' import { useWallet } from '@solana/wallet-adapter-react' import SwitchMarketDropdown from 'components/SwitchMarketDropdown' const TVChartContainer = dynamic(() => import('../TVChartContainer'), { ssr: false, }) const MobileTradePage = () => { const { t } = useTranslation('common') const [viewIndex, setViewIndex] = useState(0) const { connected } = useWallet() const selectedMarket = useMangoStore((s) => s.selectedMarket.current) const marketConfig = useMangoStore((s) => s.selectedMarket.config) const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const handleChangeViewIndex = (index) => { setViewIndex(index) } const initLeverage = useMemo(() => { if (!mangoGroup || !marketConfig) return 1 const ws = getWeights(mangoGroup, marketConfig.marketIndex, 'Init') const w = marketConfig.kind === 'perp' ? ws.perpAssetWeight : ws.spotAssetWeight return Math.round((100 * -1) / (w.toNumber() - 1)) / 100 }, [mangoGroup, marketConfig]) const TABS = selectedMarket instanceof PerpMarket ? ['Trade', 'Details', 'Position', 'Orders'] : ['Trade', 'Details', 'Balances', 'Orders'] return (