99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import {
|
|
getMarketByBaseSymbolAndKind,
|
|
getMarketIndexBySymbol,
|
|
} from '@blockworks-foundation/mango-client'
|
|
import TopBar from '../components/TopBar'
|
|
import TradePageGrid from '../components/TradePageGrid'
|
|
import MarketSelect from '../components/MarketSelect'
|
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
|
import AlphaModal, { ALPHA_MODAL_KEY } from '../components/AlphaModal'
|
|
import { PageBodyWrapper } from '../components/styles'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import IntroTips, { SHOW_TOUR_KEY } from '../components/IntroTips'
|
|
import { useViewport } from '../hooks/useViewport'
|
|
import { breakpoints } from '../components/TradePageGrid'
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, ['common', 'tv-chart'])),
|
|
// Will be passed to the page component as props
|
|
},
|
|
}
|
|
}
|
|
|
|
const PerpMarket = () => {
|
|
const [alphaAccepted] = useLocalStorageState(ALPHA_MODAL_KEY, false)
|
|
const [showTour] = useLocalStorageState(SHOW_TOUR_KEY, false)
|
|
const groupConfig = useMangoGroupConfig()
|
|
const setMangoStore = useMangoStore((s) => s.set)
|
|
const connected = useMangoStore((s) => s.wallet.connected)
|
|
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
|
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
|
|
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
|
const router = useRouter()
|
|
const { width } = useViewport()
|
|
const hideTips = width ? width < breakpoints.md : false
|
|
|
|
useEffect(() => {
|
|
// @ts-ignore
|
|
if (window.solana) {
|
|
// @ts-ignore
|
|
window.solana.connect({ onlyIfTrusted: true })
|
|
}
|
|
}, [marketConfig])
|
|
|
|
useEffect(() => {
|
|
const name = decodeURIComponent(router.asPath).split('name=')[1]
|
|
|
|
if (name && mangoGroup) {
|
|
const marketQueryParam = name.toString().split(/-|\//)
|
|
const marketBaseSymbol = marketQueryParam[0]
|
|
const marketType = marketQueryParam[1] === 'PERP' ? 'perp' : 'spot'
|
|
|
|
const newMarket = getMarketByBaseSymbolAndKind(
|
|
groupConfig,
|
|
marketBaseSymbol.toUpperCase(),
|
|
marketType
|
|
)
|
|
|
|
const marketIndex = getMarketIndexBySymbol(
|
|
groupConfig,
|
|
marketBaseSymbol.toUpperCase()
|
|
)
|
|
|
|
setMangoStore((state) => {
|
|
state.selectedMarket.kind = marketType
|
|
if (newMarket.name !== marketConfig.name) {
|
|
state.selectedMarket.current = null
|
|
state.selectedMarket.config = newMarket
|
|
state.tradeForm.price =
|
|
state.tradeForm.tradeType === 'Limit'
|
|
? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
|
|
: ''
|
|
}
|
|
})
|
|
}
|
|
}, [router, mangoGroup])
|
|
|
|
return (
|
|
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
|
|
{showTour && !hideTips ? <IntroTips connected={connected} /> : null}
|
|
<TopBar />
|
|
<MarketSelect />
|
|
<PageBodyWrapper className="p-1 sm:px-2 sm:py-1 md:px-2 md:py-1">
|
|
<TradePageGrid />
|
|
</PageBodyWrapper>
|
|
{!alphaAccepted && (
|
|
<AlphaModal isOpen={!alphaAccepted} onClose={() => {}} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PerpMarket
|