Merge pull request #270 from blockworks-foundation/mobile-tweaks
market selection on mobile
This commit is contained in:
tjshipe
GitHub
commit
57732372d4
|
|
@ -91,7 +91,7 @@ const MarketNavItem: FunctionComponent<MarketNavItemProps> = ({
|
|||
</div>
|
||||
) : null}
|
||||
</button>
|
||||
<div className="ml-1">
|
||||
<div className="ml-1 hidden sm:block">
|
||||
<FavoriteMarketButton market={market} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useMemo } from 'react'
|
||||
import { useEffect, useMemo } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { formatUsdValue, perpContractPrecision, usdFormatter } from '../utils'
|
||||
import { Table, Td, Th, TrBody, TrHead } from './TableElements'
|
||||
|
|
@ -6,18 +6,29 @@ import { useViewport } from '../hooks/useViewport'
|
|||
import { breakpoints } from './TradePageGrid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import MobileTableHeader from './mobile/MobileTableHeader'
|
||||
import { ExpandableRow } from './TableElements'
|
||||
import { FavoriteMarketButton } from './TradeNavMenu'
|
||||
import { useSortableData } from '../hooks/useSortableData'
|
||||
import { LinkButton } from './Button'
|
||||
import { ArrowSmDownIcon } from '@heroicons/react/solid'
|
||||
import { useRouter } from 'next/router'
|
||||
import { AreaChart, Area, XAxis, YAxis } from 'recharts'
|
||||
import { InformationCircleIcon } from '@heroicons/react/outline'
|
||||
import Tooltip from './Tooltip'
|
||||
|
||||
const MarketsTable = ({ isPerpMarket }) => {
|
||||
const { t } = useTranslation('common')
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.md : false
|
||||
const marketsInfo = useMangoStore((s) => s.marketsInfo)
|
||||
const actions = useMangoStore((s) => s.actions)
|
||||
const coingeckoPrices = useMangoStore((s) => s.coingeckoPrices)
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
if (coingeckoPrices.length === 0) {
|
||||
actions.fetchCoingeckoPrices()
|
||||
}
|
||||
}, [coingeckoPrices])
|
||||
|
||||
const perpMarketsInfo = useMemo(
|
||||
() =>
|
||||
|
|
@ -49,7 +60,9 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
className="flex items-center font-normal no-underline"
|
||||
onClick={() => requestSort('name')}
|
||||
>
|
||||
<span className="font-normal text-th-fgd-3">{t('market')}</span>
|
||||
<span className="text-left font-normal text-th-fgd-3">
|
||||
{t('market')}
|
||||
</span>
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
||||
sortConfig?.key === 'name'
|
||||
|
|
@ -66,7 +79,9 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
className="flex items-center font-normal no-underline"
|
||||
onClick={() => requestSort('last')}
|
||||
>
|
||||
<span className="font-normal text-th-fgd-3">{t('price')}</span>
|
||||
<span className="text-left font-normal text-th-fgd-3">
|
||||
{t('price')}
|
||||
</span>
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
||||
sortConfig?.key === 'last'
|
||||
|
|
@ -83,7 +98,7 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
className="flex items-center font-normal no-underline"
|
||||
onClick={() => requestSort('change24h')}
|
||||
>
|
||||
<span className="font-normal text-th-fgd-3">
|
||||
<span className="text-left font-normal text-th-fgd-3">
|
||||
{t('rolling-change')}
|
||||
</span>
|
||||
<ArrowSmDownIcon
|
||||
|
|
@ -102,7 +117,7 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
className="flex items-center font-normal no-underline"
|
||||
onClick={() => requestSort('volumeUsd24h')}
|
||||
>
|
||||
<span className="font-normal text-th-fgd-3">
|
||||
<span className="text-left font-normal text-th-fgd-3">
|
||||
{t('daily-volume')}
|
||||
</span>
|
||||
<ArrowSmDownIcon
|
||||
|
|
@ -123,7 +138,7 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
className="flex items-center font-normal no-underline"
|
||||
onClick={() => requestSort('funding1h')}
|
||||
>
|
||||
<span className="font-normal text-th-fgd-3">
|
||||
<span className="text-left font-normal text-th-fgd-3">
|
||||
{t('average-funding')}
|
||||
</span>
|
||||
<ArrowSmDownIcon
|
||||
|
|
@ -142,7 +157,7 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('openInterestUsd')}
|
||||
>
|
||||
<span className="font-normal text-th-fgd-3">
|
||||
<span className="text-left font-normal text-th-fgd-3">
|
||||
{t('open-interest')}
|
||||
</span>
|
||||
<ArrowSmDownIcon
|
||||
|
|
@ -178,7 +193,10 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
const fundingApr = funding1h
|
||||
? (funding1h * 24 * 365).toFixed(2)
|
||||
: '-'
|
||||
|
||||
const coingeckoData = coingeckoPrices.find(
|
||||
(asset) => asset.symbol === baseSymbol
|
||||
)
|
||||
const chartData = coingeckoData ? coingeckoData.prices : undefined
|
||||
return (
|
||||
<TrBody key={name} className="hover:bg-th-bkg-3">
|
||||
<Td>
|
||||
|
|
@ -197,12 +215,36 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
</a>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td>
|
||||
{last ? (
|
||||
formatUsdValue(last)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
<Td className="flex items-center">
|
||||
<div className="w-20">
|
||||
{last ? (
|
||||
formatUsdValue(last)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">{t('unavailable')}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="pl-6">
|
||||
{chartData !== undefined ? (
|
||||
<AreaChart width={104} height={40} data={chartData}>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey="1"
|
||||
stroke="#FF9C24"
|
||||
fill="#FF9C24"
|
||||
fillOpacity={0.1}
|
||||
/>
|
||||
<XAxis dataKey="0" hide />
|
||||
<YAxis
|
||||
domain={['dataMin', 'dataMax']}
|
||||
dataKey="1"
|
||||
hide
|
||||
/>
|
||||
</AreaChart>
|
||||
) : (
|
||||
t('unavailable')
|
||||
)}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<span
|
||||
|
|
@ -211,7 +253,7 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
{change24h || change24h === 0 ? (
|
||||
`${(change24h * 100).toFixed(2)}%`
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
<span className="text-th-fgd-4">{t('unavailable')}</span>
|
||||
)}
|
||||
</span>
|
||||
</Td>
|
||||
|
|
@ -219,7 +261,7 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
{volumeUsd24h ? (
|
||||
usdFormatter(volumeUsd24h, 0)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
<span className="text-th-fgd-4">{t('unavailable')}</span>
|
||||
)}
|
||||
</Td>
|
||||
{isPerpMarket ? (
|
||||
|
|
@ -231,7 +273,9 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
<span className="text-xs text-th-fgd-3">{`(${fundingApr}% APR)`}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
<span className="text-th-fgd-4">
|
||||
{t('unavailable')}
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
|
|
@ -249,7 +293,9 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
<span className="text-th-fgd-4">
|
||||
{t('unavailable')}
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</>
|
||||
|
|
@ -265,128 +311,89 @@ const MarketsTable = ({ isPerpMarket }) => {
|
|||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="mb-4 border-b border-th-bkg-4">
|
||||
<MobileTableHeader
|
||||
colOneHeader={t('asset')}
|
||||
colTwoHeader={`${t('price')}/${t('rolling-change')}`}
|
||||
/>
|
||||
{items.map((market, index) => {
|
||||
const {
|
||||
baseSymbol,
|
||||
change24h,
|
||||
funding1h,
|
||||
high24h,
|
||||
last,
|
||||
low24h,
|
||||
name,
|
||||
openInterest,
|
||||
volumeUsd24h,
|
||||
} = market
|
||||
const fundingApr = funding1h ? (funding1h * 24 * 365).toFixed(2) : '-'
|
||||
items.map((market) => {
|
||||
const { baseSymbol, change24h, funding1h, last, name } = market
|
||||
const fundingApr = funding1h ? (funding1h * 24 * 365).toFixed(2) : '-'
|
||||
const coingeckoData = coingeckoPrices.find(
|
||||
(asset) => asset.symbol === baseSymbol
|
||||
)
|
||||
const chartData = coingeckoData ? coingeckoData.prices : undefined
|
||||
return (
|
||||
<button
|
||||
className="mb-2.5 w-full rounded-lg bg-th-bkg-2 p-4 pb-2.5 md:bg-th-bkg-3"
|
||||
onClick={() =>
|
||||
router.push(`/?name=${name}`, undefined, {
|
||||
shallow: true,
|
||||
})
|
||||
}
|
||||
key={name}
|
||||
>
|
||||
<div className="mb-1 flex justify-between">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center font-bold text-th-fgd-3">
|
||||
<img
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
|
||||
className="mr-2"
|
||||
/>
|
||||
|
||||
return (
|
||||
<ExpandableRow
|
||||
buttonTemplate={
|
||||
<div className="flex w-full items-center justify-between text-th-fgd-1">
|
||||
<div className="flex items-center text-th-fgd-1">
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
|
||||
{market.baseSymbol}
|
||||
</div>
|
||||
<div className="flex space-x-2.5 text-right text-th-fgd-1">
|
||||
<div>{formatUsdValue(last)}</div>
|
||||
<div className="text-th-fgd-4">|</div>
|
||||
<div
|
||||
className={
|
||||
change24h >= 0 ? 'text-th-green' : 'text-th-red'
|
||||
}
|
||||
>
|
||||
{change24h || change24h === 0 ? (
|
||||
`${(change24h * 100).toFixed(2)}%`
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{name}
|
||||
</div>
|
||||
}
|
||||
key={`${name}${index}`}
|
||||
panelTemplate={
|
||||
<>
|
||||
<div className="grid grid-flow-row grid-cols-2 gap-4 pb-4">
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('daily-low')}
|
||||
{chartData !== undefined ? (
|
||||
<AreaChart width={144} height={40} data={chartData}>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey="1"
|
||||
stroke="#FF9C24"
|
||||
fill="#FF9C24"
|
||||
fillOpacity={0.1}
|
||||
/>
|
||||
<XAxis dataKey="0" hide />
|
||||
<YAxis domain={['dataMin', 'dataMax']} dataKey="1" hide />
|
||||
</AreaChart>
|
||||
) : (
|
||||
t('unavailable')
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="mb-0 text-xl font-bold">
|
||||
{last ? (
|
||||
formatUsdValue(last)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">{t('unavailable')}</span>
|
||||
)}
|
||||
</p>
|
||||
<div
|
||||
className={change24h >= 0 ? 'text-th-green' : 'text-th-red'}
|
||||
>
|
||||
{change24h || change24h === 0 ? (
|
||||
`${(change24h * 100).toFixed(2)}%`
|
||||
) : (
|
||||
<span className="text-th-fgd-4">{t('unavailable')}</span>
|
||||
)}
|
||||
</div>
|
||||
{isPerpMarket ? (
|
||||
funding1h ? (
|
||||
<Tooltip content={t('average-funding')}>
|
||||
<div className="mt-1 flex items-center justify-end text-th-fgd-3">
|
||||
<span className="text-xs">{`${fundingApr}% APR`}</span>
|
||||
<InformationCircleIcon className="ml-1 h-4 w-4" />
|
||||
</div>
|
||||
{low24h ? (
|
||||
formatUsdValue(low24h)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('daily-high')}
|
||||
</div>
|
||||
{high24h ? (
|
||||
formatUsdValue(high24h)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
</div>
|
||||
{isPerpMarket ? (
|
||||
<>
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('daily-volume')}
|
||||
</div>
|
||||
{volumeUsd24h ? (
|
||||
usdFormatter(volumeUsd24h, 0)
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('average-funding')}
|
||||
</div>
|
||||
{funding1h ? (
|
||||
`${funding1h.toLocaleString(undefined, {
|
||||
maximumSignificantDigits: 3,
|
||||
})}% (${fundingApr}% APR)`
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('open-interest')}
|
||||
</div>
|
||||
{openInterest ? (
|
||||
`${openInterest.toLocaleString()} ${
|
||||
market.baseSymbol
|
||||
}`
|
||||
) : (
|
||||
<span className="text-th-fgd-4">Unavailable</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span className="text-th-fgd-4">{t('unavailable')}</span>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
export default MarketsTable
|
||||
export default MarketsTable as any
|
||||
|
|
|
|||
|
|
@ -523,27 +523,18 @@ export default function Orderbook({ depth = 8 }) {
|
|||
<div>
|
||||
<div className="flex items-center justify-between pb-2.5">
|
||||
<div className="relative flex">
|
||||
<Tooltip
|
||||
content={
|
||||
displayCumulativeSize
|
||||
? t('tooltip-display-step')
|
||||
: t('tooltip-display-cumulative')
|
||||
}
|
||||
className="py-1 text-xs"
|
||||
<button
|
||||
onClick={() => {
|
||||
setDisplayCumulativeSize(!displayCumulativeSize)
|
||||
}}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3 hover:text-th-primary focus:outline-none"
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDisplayCumulativeSize(!displayCumulativeSize)
|
||||
}}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3 hover:text-th-primary focus:outline-none"
|
||||
>
|
||||
{displayCumulativeSize ? (
|
||||
<StepSizeIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<CumulativeSizeIcon className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
{displayCumulativeSize ? (
|
||||
<StepSizeIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<CumulativeSizeIcon className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<GroupSize
|
||||
|
|
|
|||
|
|
@ -103,10 +103,10 @@ const SwitchMarketDropdown = () => {
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel
|
||||
className="thin-scroll absolute left-0 top-14 z-10 max-h-[75vh] w-72 transform overflow-y-auto rounded-b-md rounded-tl-md bg-th-bkg-3 p-4"
|
||||
className="thin-scroll absolute left-0 top-14 z-10 max-h-[50vh] w-72 transform overflow-y-auto rounded-b-md rounded-tl-md bg-th-bkg-3 p-4 sm:max-h-[75vh]"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<div className="pb-2.5">
|
||||
<div className="hidden pb-2.5 sm:block">
|
||||
<Input
|
||||
onChange={(e) => onSearch(e.target.value)}
|
||||
prefix={<SearchIcon className="h-4 w-4 text-th-fgd-3" />}
|
||||
|
|
@ -134,7 +134,7 @@ const SwitchMarketDropdown = () => {
|
|||
<div className="">
|
||||
<div className="flex justify-between py-1.5">
|
||||
<h4 className="text-xs font-normal">{t('futures')}</h4>
|
||||
<p className="mb-0 text-xs text-th-fgd-3">
|
||||
<p className="mb-0 hidden text-xs text-th-fgd-3 sm:block">
|
||||
{t('favorite')}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -148,7 +148,7 @@ const SwitchMarketDropdown = () => {
|
|||
))}
|
||||
<div className="flex justify-between py-1.5">
|
||||
<h4 className="text-xs font-normal">{t('spot')}</h4>
|
||||
<p className="mb-0 text-xs text-th-fgd-3">
|
||||
<p className="mb-0 hidden text-xs text-th-fgd-3 sm:block">
|
||||
{t('favorite')}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,12 +36,12 @@ const BottomBar = () => {
|
|||
<div className="default-transition grid grid-cols-5 grid-rows-1 bg-th-bkg-3 py-2.5">
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/select',
|
||||
pathname: '/markets',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
asPath === '/select' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
asPath === '/markets' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} default-transition col-span-1 flex cursor-pointer flex-col items-center hover:text-th-primary`}
|
||||
>
|
||||
<BtcMonoIcon className="mb-1 h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useMemo, useState } from 'react'
|
||||
import { Disclosure } from '@headlessui/react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { SwitchHorizontalIcon, XIcon } from '@heroicons/react/outline'
|
||||
import { XIcon } from '@heroicons/react/outline'
|
||||
import useMangoStore from '../../stores/useMangoStore'
|
||||
import { getWeights, PerpMarket } from '@blockworks-foundation/mango-client'
|
||||
import { CandlesIcon } from '../icons'
|
||||
|
|
@ -16,8 +16,8 @@ import RecentMarketTrades from '../RecentMarketTrades'
|
|||
import FloatingElement from '../FloatingElement'
|
||||
import Swipeable from './Swipeable'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Link from 'next/link'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import SwitchMarketDropdown from 'components/SwitchMarketDropdown'
|
||||
|
||||
const TVChartContainer = dynamic(
|
||||
() => import('../../components/TradingView/index'),
|
||||
|
|
@ -31,9 +31,6 @@ const MobileTradePage = () => {
|
|||
const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
|
||||
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
|
||||
const baseSymbol = marketConfig.baseSymbol
|
||||
const isPerpMarket = marketConfig.kind === 'perp'
|
||||
|
||||
const handleChangeViewIndex = (index) => {
|
||||
setViewIndex(index)
|
||||
|
|
@ -57,30 +54,10 @@ const MobileTradePage = () => {
|
|||
<div className="px-2 pb-14 pt-4">
|
||||
<div className="relative">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="30"
|
||||
height="30"
|
||||
src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
|
||||
className="mr-2"
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<div className="pr-0.5 text-xl font-semibold">{baseSymbol}</div>
|
||||
<span className="text-xl text-th-fgd-4">
|
||||
{isPerpMarket ? '-' : '/'}
|
||||
</span>
|
||||
<div className="pl-0.5 text-xl font-semibold">
|
||||
{isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
|
||||
</div>
|
||||
</div>
|
||||
<SwitchMarketDropdown />
|
||||
<span className="ml-2 rounded border border-th-primary px-1 py-0.5 text-xs text-th-primary">
|
||||
{initLeverage}x
|
||||
</span>
|
||||
<Link href="/select">
|
||||
<div className="ml-2 flex h-10 w-10 items-center justify-center">
|
||||
<SwitchHorizontalIcon className="h-5 w-5" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
|
|
|
|||
|
|
@ -15,11 +15,7 @@ import {
|
|||
InformationCircleIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import {
|
||||
calculateTradePrice,
|
||||
getDecimalCount,
|
||||
percentFormat,
|
||||
} from '../../utils'
|
||||
import { calculateTradePrice, getDecimalCount } from '../../utils'
|
||||
import { floorToDecimal } from '../../utils/index'
|
||||
import useMangoStore, { Orderbook } from '../../stores/useMangoStore'
|
||||
import Button, { LinkButton } from '../Button'
|
||||
|
|
@ -79,7 +75,7 @@ export default function AdvancedTradeForm({
|
|||
const [spotMargin, setSpotMargin] = useState(defaultSpotMargin)
|
||||
const [positionSizePercent, setPositionSizePercent] = useState('')
|
||||
const [insufficientSol, setInsufficientSol] = useState(false)
|
||||
const { takerFee, makerFee } = useFees()
|
||||
const { takerFee } = useFees()
|
||||
const { totalMsrm } = useSrmAccount()
|
||||
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
|
|
@ -947,7 +943,7 @@ export default function AdvancedTradeForm({
|
|||
</div>
|
||||
) : null
|
||||
) : null}
|
||||
<div className="flex-wrap sm:flex">
|
||||
<div className="mt-1 flex-wrap sm:flex">
|
||||
{isLimitOrder ? (
|
||||
<div className="flex">
|
||||
<div className="mr-4 mt-3">
|
||||
|
|
@ -989,42 +985,44 @@ export default function AdvancedTradeForm({
|
|||
auto updating the reduceOnly state when doing a market order:
|
||||
&& showReduceOnly(perpAccount?.basePosition.toNumber())
|
||||
*/}
|
||||
{marketConfig.kind === 'perp' || isLuna ? (
|
||||
<div className="mr-4 mt-3">
|
||||
<Tooltip
|
||||
className="hidden md:block"
|
||||
delay={250}
|
||||
placement="left"
|
||||
content={t('tooltip-reduce')}
|
||||
>
|
||||
<Checkbox
|
||||
checked={reduceOnly}
|
||||
onChange={(e) => reduceOnChange(e.target.checked)}
|
||||
disabled={isTriggerOrder || isLuna}
|
||||
<div className="flex">
|
||||
{marketConfig.kind === 'perp' || isLuna ? (
|
||||
<div className="mr-4 mt-3">
|
||||
<Tooltip
|
||||
className="hidden md:block"
|
||||
delay={250}
|
||||
placement="left"
|
||||
content={t('tooltip-reduce')}
|
||||
>
|
||||
Reduce Only
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
{marketConfig.kind === 'perp' && tradeType === 'Limit' ? (
|
||||
<div className="mt-3">
|
||||
<Tooltip
|
||||
className="hidden md:block"
|
||||
delay={250}
|
||||
placement="left"
|
||||
content={t('tooltip-post-and-slide')}
|
||||
>
|
||||
<Checkbox
|
||||
checked={postOnlySlide}
|
||||
onChange={(e) => postOnlySlideOnChange(e.target.checked)}
|
||||
disabled={isTriggerOrder}
|
||||
<Checkbox
|
||||
checked={reduceOnly}
|
||||
onChange={(e) => reduceOnChange(e.target.checked)}
|
||||
disabled={isTriggerOrder || isLuna}
|
||||
>
|
||||
Reduce Only
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
{marketConfig.kind === 'perp' && tradeType === 'Limit' ? (
|
||||
<div className="mt-3">
|
||||
<Tooltip
|
||||
className="hidden md:block"
|
||||
delay={250}
|
||||
placement="left"
|
||||
content={t('tooltip-post-and-slide')}
|
||||
>
|
||||
Slide
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
<Checkbox
|
||||
checked={postOnlySlide}
|
||||
onChange={(e) => postOnlySlideOnChange(e.target.checked)}
|
||||
disabled={isTriggerOrder}
|
||||
>
|
||||
Slide
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{marketConfig.kind === 'spot' ? (
|
||||
<div className="mt-3">
|
||||
<Tooltip
|
||||
|
|
@ -1050,7 +1048,7 @@ export default function AdvancedTradeForm({
|
|||
<div className="text-xs">{t('slippage-warning')}</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`mt-3 flex`}>
|
||||
<div className={`mt-4 flex`}>
|
||||
{canTrade ? (
|
||||
<button
|
||||
disabled={disabledTradeButton}
|
||||
|
|
@ -1174,18 +1172,7 @@ export default function AdvancedTradeForm({
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2.5 flex flex-col items-center justify-center px-6 text-xs text-th-fgd-4 md:flex-row">
|
||||
<div>
|
||||
{t('maker-fee')}: {percentFormat.format(makerFee)}{' '}
|
||||
</div>
|
||||
<span className="hidden md:block md:px-1">|</span>
|
||||
<div>
|
||||
{' '}
|
||||
{t('taker-fee')}: {percentFormat.format(takerFee)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
|
|||
import MarketsTable from '../components/MarketsTable'
|
||||
import Tabs from '../components/Tabs'
|
||||
|
||||
const TABS = ['perp', 'spot']
|
||||
const TABS = ['futures', 'spot']
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
|
|
@ -18,15 +18,13 @@ export async function getStaticProps({ locale }) {
|
|||
}
|
||||
|
||||
export default function Markets() {
|
||||
const [activeTab, setActiveTab] = useState('perp')
|
||||
const [activeTab, setActiveTab] = useState('futures')
|
||||
const { t } = useTranslation(['common'])
|
||||
|
||||
const handleTabChange = (tabName) => {
|
||||
setActiveTab(tabName)
|
||||
}
|
||||
|
||||
const isPerp = activeTab === 'perp'
|
||||
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
|
|
@ -35,13 +33,14 @@ export default function Markets() {
|
|||
<h1>{t('markets')}</h1>
|
||||
</div>
|
||||
<div className="md:rounded-lg md:bg-th-bkg-2 md:p-6">
|
||||
<Tabs activeTab={activeTab} onChange={handleTabChange} tabs={TABS} />
|
||||
<h2 className="mb-4">
|
||||
{isPerp
|
||||
? `${t('perp')} ${t('markets')}`
|
||||
: `${t('spot')} ${t('markets')}`}
|
||||
</h2>
|
||||
<MarketsTable isPerpMarket={activeTab === 'perp'} />
|
||||
<div className="mb-0 sm:mb-6">
|
||||
<Tabs
|
||||
activeTab={activeTab}
|
||||
onChange={handleTabChange}
|
||||
tabs={TABS}
|
||||
/>
|
||||
</div>
|
||||
<MarketsTable isPerpMarket={activeTab === 'futures'} />
|
||||
</div>
|
||||
</PageBodyContainer>
|
||||
</div>
|
||||
|
|
|
|||
109
pages/select.tsx
109
pages/select.tsx
|
|
@ -1,109 +0,0 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ChevronRightIcon } from '@heroicons/react/solid'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import Link from 'next/link'
|
||||
import { formatUsdValue } from '../utils'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import PageBodyContainer from '../components/PageBodyContainer'
|
||||
import TopBar from '../components/TopBar'
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, [
|
||||
'common',
|
||||
'tv-chart',
|
||||
'profile',
|
||||
])),
|
||||
// Will be passed to the page component as props
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const SelectMarket = () => {
|
||||
const { t } = useTranslation('common')
|
||||
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
|
||||
|
||||
const [markets, setMarkets] = useState<any[]>([])
|
||||
useEffect(() => {
|
||||
const markets: any[] = []
|
||||
const allMarkets =
|
||||
groupConfig?.spotMarkets && groupConfig?.perpMarkets
|
||||
? [...groupConfig.spotMarkets, ...groupConfig.perpMarkets]
|
||||
: []
|
||||
allMarkets.forEach((market) => {
|
||||
const base = market.name.slice(0, -5)
|
||||
const found = markets.find((b) => b.baseAsset === base)
|
||||
if (!found) {
|
||||
markets.push({ baseAsset: base, markets: [market] })
|
||||
} else {
|
||||
found.markets.push(market)
|
||||
}
|
||||
})
|
||||
setMarkets(markets)
|
||||
}, [])
|
||||
|
||||
if (!mangoCache) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
<PageBodyContainer>
|
||||
<div className="py-4 text-2xl font-bold text-th-fgd-1">
|
||||
{t('markets')}
|
||||
</div>
|
||||
{markets.map((mkt) => {
|
||||
return (
|
||||
<div key={mkt.baseAsset}>
|
||||
<div className="flex items-center justify-between bg-th-bkg-3 px-2.5 py-2">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
src={`/assets/icons/${mkt.baseAsset.toLowerCase()}.svg`}
|
||||
className={`mr-2.5 h-5 w-auto`}
|
||||
/>
|
||||
<span className="text-th-fgd-2">{mkt.baseAsset}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-th-bkg-4">
|
||||
{mangoGroup
|
||||
? mkt.markets.map((m) => (
|
||||
<div
|
||||
className={`flex items-center justify-between px-2.5 text-xs`}
|
||||
key={m.name}
|
||||
>
|
||||
<Link href={`/?name=${m.name}`} key={m.name}>
|
||||
<a className="default-transition flex h-12 w-full cursor-pointer items-center justify-between text-th-fgd-2 hover:text-th-primary">
|
||||
{m.name}
|
||||
<div className="flex items-center">
|
||||
<span className="w-20 text-right">
|
||||
{formatUsdValue(
|
||||
mangoGroup
|
||||
.getPrice(m.marketIndex, mangoCache)
|
||||
.toNumber()
|
||||
)}
|
||||
</span>
|
||||
<ChevronRightIcon className="ml-1 h-4 w-5 text-th-fgd-2" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
))
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* spacer so last market can be selected albeit bottom bar overlay */}
|
||||
<p className="flex h-12 md:hidden"></p>
|
||||
</PageBodyContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectMarket
|
||||
|
|
@ -431,6 +431,7 @@
|
|||
"trigger-price": "Trigger Price",
|
||||
"try-again": "Try again",
|
||||
"type": "Type",
|
||||
"unavailable": "Unavailable",
|
||||
"unrealized-pnl": "Unrealized PnL",
|
||||
"unsettled": "Unsettled",
|
||||
"unsettled-balance": "Redeemable Value",
|
||||
|
|
|
|||
|
|
@ -431,6 +431,7 @@
|
|||
"trigger-price": "Precio de activación",
|
||||
"try-again": "Inténtalo de nuevo",
|
||||
"type": "Tipo",
|
||||
"unavailable": "Unavailable",
|
||||
"unrealized-pnl": "PnL no realizado",
|
||||
"unsettled": "Inestable",
|
||||
"unsettled-balance": "Saldo pendiente",
|
||||
|
|
|
|||
|
|
@ -431,6 +431,7 @@
|
|||
"trigger-price": "触发价格",
|
||||
"try-again": "请再试一次",
|
||||
"type": "类型",
|
||||
"unavailable": "无资料",
|
||||
"unrealized-pnl": "未实现盈亏",
|
||||
"unsettled": "未结清",
|
||||
"unsettled-balance": "可领取价值",
|
||||
|
|
|
|||
|
|
@ -431,6 +431,7 @@
|
|||
"trigger-price": "觸發價格",
|
||||
"try-again": "請再試一次",
|
||||
"type": "類型",
|
||||
"unavailable": "無資料",
|
||||
"unrealized-pnl": "未實現盈虧",
|
||||
"unsettled": "未結清",
|
||||
"unsettled-balance": "可領取價值",
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import { getProfilePicture, ProfilePicture } from '@solflare-wallet/pfp'
|
|||
import { decodeBook } from '../hooks/useHydrateStore'
|
||||
import { IOrderLineAdapter } from '../public/charting_library/charting_library'
|
||||
import { Wallet } from '@solana/wallet-adapter-react'
|
||||
import { coingeckoIds } from 'utils/tokens'
|
||||
import { getTokenAccountsByMint } from 'utils/tokens'
|
||||
import { getParsedNftAccountsByOwner } from 'utils/getParsedNftAccountsByOwner'
|
||||
|
||||
|
|
@ -264,6 +265,7 @@ export type MangoStore = {
|
|||
deleteAlert: (id: string) => void
|
||||
loadAlerts: (pk: PublicKey) => void
|
||||
fetchMarketsInfo: () => void
|
||||
fetchCoingeckoPrices: () => void
|
||||
}
|
||||
alerts: {
|
||||
activeAlerts: Array<Alert>
|
||||
|
|
@ -277,6 +279,7 @@ export type MangoStore = {
|
|||
tradingView: {
|
||||
orderLines: Map<string, IOrderLineAdapter>
|
||||
}
|
||||
coingeckoPrices: any[]
|
||||
}
|
||||
|
||||
const useMangoStore = create<
|
||||
|
|
@ -408,6 +411,7 @@ const useMangoStore = create<
|
|||
tradingView: {
|
||||
orderLines: new Map(),
|
||||
},
|
||||
coingeckoPrices: [],
|
||||
set: (fn) => set(produce(fn)),
|
||||
actions: {
|
||||
async fetchWalletTokens(wallet: Wallet) {
|
||||
|
|
@ -1125,6 +1129,29 @@ const useMangoStore = create<
|
|||
console.log('ERORR: Unable to load all market info')
|
||||
}
|
||||
},
|
||||
async fetchCoingeckoPrices() {
|
||||
const set = get().set
|
||||
try {
|
||||
const promises: any = []
|
||||
for (const asset of coingeckoIds) {
|
||||
promises.push(
|
||||
fetch(
|
||||
`https://api.coingecko.com/api/v3/coins/${asset.id}/market_chart?vs_currency=usd&days=2`
|
||||
).then((res) => res.json())
|
||||
)
|
||||
}
|
||||
|
||||
const data = await Promise.all(promises)
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
data[i].symbol = coingeckoIds[i].symbol
|
||||
}
|
||||
set((state) => {
|
||||
state.coingeckoPrices = data
|
||||
})
|
||||
} catch (e) {
|
||||
console.log('ERORR: Unable to load Coingecko prices')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -23,6 +23,23 @@ export function parseTokenAccountData(data: Buffer): {
|
|||
}
|
||||
}
|
||||
|
||||
export const coingeckoIds = [
|
||||
{ id: 'bitcoin', symbol: 'BTC' },
|
||||
{ id: 'ethereum', symbol: 'ETH' },
|
||||
{ id: 'solana', symbol: 'SOL' },
|
||||
{ id: 'mango-markets', symbol: 'MNGO' },
|
||||
{ id: 'binancecoin', symbol: 'BNB' },
|
||||
{ id: 'serum', symbol: 'SRM' },
|
||||
{ id: 'raydium', symbol: 'RAY' },
|
||||
{ id: 'ftx-token', symbol: 'FTT' },
|
||||
{ id: 'avalanche-2', symbol: 'AVAX' },
|
||||
{ id: 'terra-luna', symbol: 'LUNA' },
|
||||
{ id: 'cope', symbol: 'COPE' },
|
||||
{ id: 'cardano', symbol: 'ADA' },
|
||||
{ id: 'msol', symbol: 'MSOL' },
|
||||
{ id: 'tether', symbol: 'USDT' },
|
||||
]
|
||||
|
||||
export async function getTokenAccountsByMint(
|
||||
connection: Connection,
|
||||
mint: string
|
||||
|
|
|
|||
Loading…
Reference in New Issue