mango-ui-v3/components/mobile/MobileTradePage.tsx

140 lines
5.0 KiB
TypeScript

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 (
<div className="px-2 pb-14 pt-4">
<div className="relative">
<div className="flex items-center">
<SwitchMarketDropdown />
<span className="ml-2 rounded border border-th-primary px-1 py-0.5 text-xs text-th-primary">
{initLeverage}x
</span>
</div>
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button>
<div className="absolute right-0 top-1 flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-4 text-th-fgd-1 hover:text-th-primary focus:outline-none">
{open ? (
<XIcon className="h-4 w-4" />
) : (
<CandlesIcon className="h-5 w-5" />
)}
</div>
</Disclosure.Button>
<Disclosure.Panel>
<div className="mb-2 h-96 rounded-lg bg-th-bkg-2 p-2">
<TVChartContainer />
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
</div>
<SwipeableTabs
onChange={handleChangeViewIndex}
items={TABS}
tabIndex={viewIndex}
width="w-40 sm:w-full"
/>
<Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
<div>
<div className="mb-2 grid grid-cols-12 grid-rows-1 gap-4 rounded-lg py-2">
<div className="col-span-7">
<AdvancedTradeForm />
</div>
<div className="col-span-5">
<Orderbook depth={8} />
</div>
</div>
<RecentMarketTrades />
</div>
<div className="py-2">
<h2 className="mb-3 text-base">{t('market-details')}</h2>
<MarketDetails />
</div>
{selectedMarket instanceof PerpMarket ? (
<FloatingElement className="bg-transparent px-0 py-0" showConnect>
<div className={`${!connected ? 'blur-sm filter' : ''} py-2`}>
<h2 className="mb-3 text-base">
{`${marketConfig.name} ${t('position')}`}
</h2>
<MarketPosition />
</div>
</FloatingElement>
) : (
<FloatingElement className="bg-transparent px-0 py-0" showConnect>
<div className={`${!connected ? 'blur-sm filter' : ''} py-2`}>
<h2 className="mb-3 text-base">{t('balances')}</h2>
<MarketBalances />
</div>
</FloatingElement>
)}
<div>
<FloatingElement
className={`${
!connected ? 'min-h-[216px]' : ''
} bg-transparent px-0 py-0`}
showConnect
>
<div className={`${!connected ? 'blur-sm filter' : ''} py-2`}>
<h2 className="mb-3 text-base">{t('open-orders')}</h2>
<OpenOrdersTable />
</div>
</FloatingElement>
</div>
</Swipeable>
</div>
)
}
export default MobileTradePage