2022-12-11 18:43:16 -08:00
|
|
|
import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
|
|
|
|
import useSelectedMarket from 'hooks/useSelectedMarket'
|
|
|
|
import Link from 'next/link'
|
2023-03-31 03:03:20 -07:00
|
|
|
import { useRouter } from 'next/router'
|
2022-12-11 18:43:16 -08:00
|
|
|
import MarketLogos from './MarketLogos'
|
2023-07-01 03:07:15 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-12-11 18:43:16 -08:00
|
|
|
|
2023-06-26 19:43:15 -07:00
|
|
|
const TableMarketName = ({
|
|
|
|
market,
|
|
|
|
side,
|
|
|
|
}: {
|
|
|
|
market: PerpMarket | Serum3Market
|
2023-06-28 18:04:53 -07:00
|
|
|
side?: string
|
2023-06-26 19:43:15 -07:00
|
|
|
}) => {
|
2022-12-11 18:43:16 -08:00
|
|
|
const { selectedMarket } = useSelectedMarket()
|
2023-03-31 03:03:20 -07:00
|
|
|
const { asPath } = useRouter()
|
2023-01-14 21:01:30 -08:00
|
|
|
|
2023-03-31 03:03:20 -07:00
|
|
|
return selectedMarket?.name === market.name && asPath.includes('/trade') ? (
|
2023-07-01 03:07:15 -07:00
|
|
|
<NameAndSide market={market} side={side} />
|
2022-12-11 18:43:16 -08:00
|
|
|
) : (
|
|
|
|
<Link href={`/trade?name=${market.name}`}>
|
2023-07-01 03:07:15 -07:00
|
|
|
<NameAndSide market={market} side={side} />
|
2022-12-11 18:43:16 -08:00
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TableMarketName
|
2023-06-26 19:43:15 -07:00
|
|
|
|
|
|
|
const NameAndSide = ({
|
|
|
|
market,
|
|
|
|
side,
|
|
|
|
}: {
|
|
|
|
market: PerpMarket | Serum3Market
|
2023-06-28 18:04:53 -07:00
|
|
|
side?: string
|
2023-06-26 19:43:15 -07:00
|
|
|
}) => {
|
2023-07-01 03:07:15 -07:00
|
|
|
const { t } = useTranslation('common')
|
|
|
|
const textColor =
|
|
|
|
side === 'buy' || side === 'long'
|
|
|
|
? 'text-th-up'
|
|
|
|
: side === 'sell' || side === 'short'
|
|
|
|
? 'text-th-down'
|
|
|
|
: 'text-th-fgd-2'
|
2023-06-26 19:43:15 -07:00
|
|
|
return (
|
2023-07-01 03:07:15 -07:00
|
|
|
<div className="flex items-center">
|
2023-06-26 19:43:15 -07:00
|
|
|
<MarketLogos market={market} size="large" />
|
2023-07-01 03:07:15 -07:00
|
|
|
<div>
|
|
|
|
<span className="whitespace-nowrap">{market.name}</span>
|
|
|
|
{side ? (
|
|
|
|
<div className="mt-0.5 flex items-center">
|
|
|
|
<p
|
|
|
|
className={`mr-1 font-body text-xs uppercase no-underline ${textColor}`}
|
|
|
|
>
|
|
|
|
{t(side)}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-06-26 19:43:15 -07:00
|
|
|
)
|
|
|
|
}
|