trade history mobile
This commit is contained in:
saml33
parent
b2bb1b685b
commit
6882a520ac
|
|
@ -15,8 +15,10 @@ import { PublicKey } from '@solana/web3.js'
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useMemo } from 'react'
|
||||
import { formatDecimal } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import TableMarketName from './TableMarketName'
|
||||
|
||||
const byTimestamp = (a: any, b: any) => {
|
||||
|
|
@ -87,6 +89,8 @@ const TradeHistory = () => {
|
|||
const { selectedMarket } = useSelectedMarket()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const fills = mangoStore((s) => s.selectedMarket.fills)
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
|
||||
const openOrderOwner = useMemo(() => {
|
||||
if (!mangoAccount || !selectedMarket) return
|
||||
|
|
@ -127,64 +131,94 @@ const TradeHistory = () => {
|
|||
|
||||
return connected ? (
|
||||
tradeHistoryFromEventQueue.length ? (
|
||||
<div>
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">Market</Th>
|
||||
<Th className="text-right">Side</Th>
|
||||
<Th className="text-right">Size</Th>
|
||||
<Th className="text-right">Price</Th>
|
||||
<Th className="text-right">Value</Th>
|
||||
<Th className="text-right">Fee</Th>
|
||||
{selectedMarket instanceof PerpMarket ? (
|
||||
<Th className="text-right">Time</Th>
|
||||
) : null}
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tradeHistoryFromEventQueue.map((trade: any) => {
|
||||
return (
|
||||
<TrBody key={`${trade.marketIndex}`} className="my-1 p-2">
|
||||
<Td className="">
|
||||
<TableMarketName market={selectedMarket} />
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<SideBadge side={trade.side} />
|
||||
</Td>
|
||||
<Td className="text-right font-mono">{trade.size}</Td>
|
||||
<Td className="text-right font-mono">
|
||||
{formatDecimal(trade.price)}
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
${trade.value.toFixed(2)}
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<span className="font-mono">{trade.feeCost}</span>
|
||||
<p className="font-body text-xs text-th-fgd-4">{`${
|
||||
trade.liquidity ? trade.liquidity : ''
|
||||
}`}</p>
|
||||
</Td>
|
||||
{selectedMarket instanceof PerpMarket ? (
|
||||
<Td className="whitespace-nowrap text-right font-mono">
|
||||
<TableDateDisplay
|
||||
date={trade.timestamp.toNumber() * 1000}
|
||||
showSeconds
|
||||
/>
|
||||
showTableView ? (
|
||||
<div>
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">Market</Th>
|
||||
<Th className="text-right">Side</Th>
|
||||
<Th className="text-right">Size</Th>
|
||||
<Th className="text-right">Price</Th>
|
||||
<Th className="text-right">Value</Th>
|
||||
<Th className="text-right">Fee</Th>
|
||||
{selectedMarket instanceof PerpMarket ? (
|
||||
<Th className="text-right">Time</Th>
|
||||
) : null}
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tradeHistoryFromEventQueue.map((trade: any) => {
|
||||
return (
|
||||
<TrBody key={`${trade.marketIndex}`} className="my-1 p-2">
|
||||
<Td className="">
|
||||
<TableMarketName market={selectedMarket} />
|
||||
</Td>
|
||||
) : null}
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
<div className="px-6 py-4">
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc="During the Mango V4 alpha, only your recent Openbook trades will be displayed here. Full trade history will be available shortly."
|
||||
/>
|
||||
<Td className="text-right">
|
||||
<SideBadge side={trade.side} />
|
||||
</Td>
|
||||
<Td className="text-right font-mono">{trade.size}</Td>
|
||||
<Td className="text-right font-mono">
|
||||
{formatDecimal(trade.price)}
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
${trade.value.toFixed(2)}
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<span className="font-mono">{trade.feeCost}</span>
|
||||
<p className="font-body text-xs text-th-fgd-4">{`${
|
||||
trade.liquidity ? trade.liquidity : ''
|
||||
}`}</p>
|
||||
</Td>
|
||||
{selectedMarket instanceof PerpMarket ? (
|
||||
<Td className="whitespace-nowrap text-right font-mono">
|
||||
<TableDateDisplay
|
||||
date={trade.timestamp.toNumber() * 1000}
|
||||
showSeconds
|
||||
/>
|
||||
</Td>
|
||||
) : null}
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
<div className="px-6 py-4">
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc="During the Mango V4 alpha, only your recent Openbook trades will be displayed here. Full trade history will be available shortly."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{tradeHistoryFromEventQueue.map((trade: any) => {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||
key={`${trade.marketIndex}`}
|
||||
>
|
||||
<div>
|
||||
<TableMarketName market={selectedMarket} />
|
||||
<div className="mt-1 flex items-center space-x-1">
|
||||
<SideBadge side={trade.side} />
|
||||
<p className="text-th-fgd-4">
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{trade.size}
|
||||
</span>
|
||||
{' for '}
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{formatDecimal(trade.price)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-mono">${trade.value.toFixed(2)}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center px-6 pb-8 pt-4">
|
||||
<div className="mb-8 w-full">
|
||||
|
|
|
|||
Loading…
Reference in New Issue