2022-12-14 12:54:25 -08:00
|
|
|
import {
|
|
|
|
|
Group,
|
|
|
|
|
PerpMarket,
|
|
|
|
|
Serum3Market,
|
|
|
|
|
} from '@blockworks-foundation/mango-v4'
|
2022-09-12 08:53:57 -07:00
|
|
|
import TradeAdvancedPage from '@components/trade/TradeAdvancedPage'
|
2022-12-14 12:54:25 -08:00
|
|
|
import mangoStore, { DEFAULT_TRADE_FORM } from '@store/mangoStore'
|
2022-07-14 16:36:31 -07:00
|
|
|
import type { NextPage } from 'next'
|
|
|
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
2023-12-12 18:58:35 -08:00
|
|
|
import Head from 'next/head'
|
2022-11-21 19:56:56 -08:00
|
|
|
import { useRouter } from 'next/router'
|
|
|
|
|
import { useEffect } from 'react'
|
2023-04-25 05:41:23 -07:00
|
|
|
import { floorToDecimal, getDecimalCount } from 'utils/numbers'
|
2022-07-14 16:36:31 -07:00
|
|
|
|
|
|
|
|
export async function getStaticProps({ locale }: { locale: string }) {
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
2022-10-04 20:35:54 -07:00
|
|
|
...(await serverSideTranslations(locale, [
|
2023-07-27 21:00:51 -07:00
|
|
|
'account',
|
2023-09-01 06:32:21 -07:00
|
|
|
'close-account',
|
2022-10-04 20:35:54 -07:00
|
|
|
'common',
|
2023-04-21 07:23:27 -07:00
|
|
|
'notifications',
|
2022-11-12 02:26:43 -08:00
|
|
|
'onboarding',
|
2022-10-04 20:35:54 -07:00
|
|
|
'onboarding-tours',
|
2023-08-31 19:17:31 -07:00
|
|
|
'profile',
|
2023-12-02 03:55:19 -08:00
|
|
|
'search',
|
2023-09-01 06:32:21 -07:00
|
|
|
'settings',
|
|
|
|
|
'swap',
|
2022-10-04 20:35:54 -07:00
|
|
|
'trade',
|
2023-02-08 01:58:03 -08:00
|
|
|
'tv-chart',
|
2022-10-04 20:35:54 -07:00
|
|
|
])),
|
2022-07-14 16:36:31 -07:00
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-14 12:54:25 -08:00
|
|
|
const getOraclePriceForMarket = (
|
|
|
|
|
group: Group,
|
2023-07-21 11:47:53 -07:00
|
|
|
mkt: Serum3Market | PerpMarket,
|
2022-12-14 12:54:25 -08:00
|
|
|
): number => {
|
|
|
|
|
let price: number
|
|
|
|
|
if (mkt instanceof Serum3Market) {
|
|
|
|
|
const baseBank = group.getFirstBankByTokenIndex(mkt.baseTokenIndex)
|
2023-04-25 05:41:23 -07:00
|
|
|
const quoteBank = group.getFirstBankByTokenIndex(mkt.quoteTokenIndex)
|
|
|
|
|
const market = group.getSerum3ExternalMarket(mkt.serumMarketExternal)
|
|
|
|
|
price = floorToDecimal(
|
|
|
|
|
baseBank.uiPrice / quoteBank.uiPrice,
|
2023-07-21 11:47:53 -07:00
|
|
|
getDecimalCount(market.tickSize),
|
2023-04-25 05:41:23 -07:00
|
|
|
).toNumber()
|
2022-12-14 12:54:25 -08:00
|
|
|
} else if (mkt) {
|
|
|
|
|
price = mkt._uiPrice
|
|
|
|
|
} else {
|
|
|
|
|
price = 0
|
|
|
|
|
}
|
|
|
|
|
return price
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-18 20:58:21 -07:00
|
|
|
const Trade: NextPage = () => {
|
2022-11-21 19:56:56 -08:00
|
|
|
const router = useRouter()
|
|
|
|
|
const { name: marketName } = router.query
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const set = mangoStore.getState().set
|
|
|
|
|
const group = mangoStore.getState().group
|
|
|
|
|
const serumMarkets = mangoStore.getState().serumMarkets
|
|
|
|
|
const perpMarkets = mangoStore.getState().perpMarkets
|
|
|
|
|
|
|
|
|
|
if (group && marketName && typeof marketName === 'string') {
|
|
|
|
|
const mkt =
|
|
|
|
|
serumMarkets.find((m) => m.name === marketName) ||
|
|
|
|
|
perpMarkets.find((m) => m.name === marketName)
|
2022-12-14 12:54:25 -08:00
|
|
|
|
2022-11-21 19:56:56 -08:00
|
|
|
if (mkt) {
|
2022-12-15 21:12:10 -08:00
|
|
|
let tickSize = 4
|
|
|
|
|
if (mkt instanceof Serum3Market) {
|
|
|
|
|
const market = group.getSerum3ExternalMarket(mkt.serumMarketExternal)
|
|
|
|
|
tickSize = market.tickSize
|
|
|
|
|
} else {
|
|
|
|
|
tickSize = mkt.tickSize
|
|
|
|
|
}
|
2022-11-21 19:56:56 -08:00
|
|
|
set((s) => {
|
|
|
|
|
s.selectedMarket.name = marketName
|
|
|
|
|
s.selectedMarket.current = mkt
|
2022-12-14 12:54:25 -08:00
|
|
|
s.tradeForm = {
|
|
|
|
|
...DEFAULT_TRADE_FORM,
|
2022-12-15 21:12:10 -08:00
|
|
|
price: getOraclePriceForMarket(group, mkt).toFixed(
|
2023-07-21 11:47:53 -07:00
|
|
|
getDecimalCount(tickSize),
|
2022-12-15 21:12:10 -08:00
|
|
|
),
|
2022-12-14 12:54:25 -08:00
|
|
|
}
|
2022-11-21 19:56:56 -08:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [marketName])
|
|
|
|
|
|
2023-12-12 18:58:35 -08:00
|
|
|
const metaTitle = 'Trade | Spot x Perps x Lightning Execution'
|
|
|
|
|
const metaDescription =
|
|
|
|
|
'Trade your favorite tokens and perpetuals with up to 10x leverage on the fasted DEX in crypto. '
|
|
|
|
|
|
2022-11-14 02:18:38 -08:00
|
|
|
return (
|
2023-12-12 18:58:35 -08:00
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Trade | Mango Markets</title>
|
|
|
|
|
<meta name="description" content={metaDescription} />
|
|
|
|
|
<meta property="og:title" content={metaTitle} />
|
|
|
|
|
<meta name="og:description" content={metaDescription} />
|
|
|
|
|
<meta name="twitter:title" content={metaTitle} />
|
|
|
|
|
<meta name="twitter:description" content={metaDescription} />
|
|
|
|
|
</Head>
|
2022-11-14 02:18:38 -08:00
|
|
|
<TradeAdvancedPage />
|
2023-12-12 18:58:35 -08:00
|
|
|
</>
|
2022-11-14 02:18:38 -08:00
|
|
|
)
|
2022-07-14 16:36:31 -07:00
|
|
|
}
|
|
|
|
|
|
2022-07-18 20:58:21 -07:00
|
|
|
export default Trade
|
