import { useState } from 'react' import { PencilIcon, TrashIcon, XIcon } from '@heroicons/react/outline' import Link from 'next/link' import { useRouter } from 'next/router' import Button, { IconButton } from './Button' import Loading from './Loading' import useMangoStore from '../stores/useMangoStore' import { notify } from '../utils/notifications' import SideBadge from './SideBadge' import { Order, Market } from '@project-serum/serum/lib/market' import { PerpOrder, PerpMarket, MarketConfig, } from '@blockworks-foundation/mango-client' import { formatUsdValue, getDecimalCount, usdFormatter } from '../utils' import { Table, Td, Th, TrBody, TrHead } from './TableElements' import { useViewport } from '../hooks/useViewport' import { breakpoints } from './TradePageGrid' import { Row } from './TableElements' import { PerpTriggerOrder } from '../@types/types' import { useTranslation } from 'next-i18next' import Input, { Label } from './Input' import { useWallet, Wallet } from '@solana/wallet-adapter-react' const DesktopTable = ({ cancelledOrderId, editOrderIndex, handleCancelOrder, handleModifyOrder, modifiedOrderId, openOrders, setEditOrderIndex, }) => { const { t } = useTranslation('common') const { asPath } = useRouter() const { wallet } = useWallet() const [modifiedOrderSize, setModifiedOrderSize] = useState('') const [modifiedOrderPrice, setModifiedOrderPrice] = useState('') const showEditOrderForm = (index, order) => { setEditOrderIndex(index) setModifiedOrderSize(order.size) setModifiedOrderPrice(order.price) } const renderMarketName = (market: MarketConfig) => { const location = market.kind === 'spot' ? `/?name=${market.baseSymbol}%2FUSDC` : `/?name=${market.name}` if (!asPath.includes(location)) { return ( {market.name} ) } else { return {market.name} } } return (
{t('market')} | {t('side')} | {t('size')} | {t('price')} | {t('value')} | {t('condition')} | {t('edit')} |
|
|
{editOrderIndex !== index ? (
<>
{order.size.toLocaleString(undefined, { maximumFractionDigits: 4, })} | {usdFormatter(order.price, decimals)} | > ) : ( <>setModifiedOrderSize(e.target.value)} /> | setModifiedOrderPrice(e.target.value)} /> | > )}{editThisOrder ? '' : formatUsdValue(order.price * order.size)} | {order.perpTrigger && `${t(order.orderType)} ${t( order.triggerCondition )} $${order.triggerPrice.toFixed(2)}`} |
{editOrderIndex !== index ? (
<>
{!order.perpTrigger ? (
) : null}
>
) : (
<>
>
)}
|
---|