blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

display conditional orders in order table

This commit is contained in:
Maximilian Schneider 2021-09-27 17:45:39 +02:00
parent f7a7f5f424
commit 70dc7d816a
2 changed files with 126 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/AdvancedTradeForm.tsx
View File

@ -351,7 +351,7 @@ export default function AdvancedTradeForm({ initLeverage }) {
mangoAccount,
market,
wallet,
orderType,
isMarketOrder ? 'market' : orderType,
side,
orderPrice,
baseSize,
@ -368,7 +368,7 @@ export default function AdvancedTradeForm({ initLeverage }) {
side,
orderPrice,
baseSize,
tradeType === 'Market' ? 'market' : orderType,
isMarketOrder ? 'market' : orderType,
Date.now(),
side === 'buy' ? askInfo : bidInfo, // book side used for ConsumeEvents
reduceOnly
@ -385,6 +385,7 @@ export default function AdvancedTradeForm({ initLeverage }) {
txid: e.txid,
type: 'error',
})
console.error(e)
} finally {
// TODO: should be removed, main issue are newly created OO accounts
// await sleep(600)

226
components/OpenOrdersTable.tsx
View File

@ -16,6 +16,121 @@ import { breakpoints } from './TradePageGrid'
import { Row } from './TableElements'
import { PerpTriggerOrder } from '../@types/types'
const DesktopTable = ({ openOrders, cancelledOrderId, handleCancelOrder }) => {
return (
<Table>
<thead>
<TrHead>
<Th>Market</Th>
<Th>Side</Th>
<Th>Size</Th>
<Th>Price</Th>
<Th>Value</Th>
<Th>Condition</Th>
<Th>
<span className={`sr-only`}>Edit</span>
</Th>
</TrHead>
</thead>
<tbody>
{openOrders.map(({ order, market }, index) => {
return (
<TrBody index={index} key={`${order.orderId}${order.side}`}>
<Td>
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${market.config.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>{market.config.name}</div>
</div>
</Td>
<Td>
<SideBadge side={order.side} />
</Td>
<Td>{order.size}</Td>
<Td>{formatUsdValue(order.price)}</Td>
<Td>{formatUsdValue(order.price * order.size)}</Td>
<Td>
{order.perpTrigger &&
`${order.orderType} ${
order.triggerCondition
} ${order.triggerPrice.toString()}`}
</Td>
<Td>
<div className={`flex justify-end`}>
<Button
onClick={() => handleCancelOrder(order, market.account)}
className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
>
{cancelledOrderId + '' === order.orderId + '' ? (
<Loading />
) : (
<span>Cancel</span>
)}
</Button>
</div>
</Td>
</TrBody>
)
})}
</tbody>
</Table>
)
}
const MobileTable = ({ openOrders, cancelledOrderId, handleCancelOrder }) => {
return (
<>
{openOrders.map(({ market, order }, index) => (
<Row key={`${order.orderId}${order.side}`} index={index}>
<div className="col-span-12 flex items-center justify-between text-fgd-1 text-left">
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${market.config.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>
<div className="mb-0.5">{market.config.name}</div>
<div className="text-th-fgd-3 text-xs">
<span
className={`mr-1
${
order.side === 'buy'
? 'text-th-green'
: 'text-th-red'
}
`}
>
{order.side.toUpperCase()}
</span>
{`${order.size} at ${formatUsdValue(order.price)}`}
</div>
</div>
</div>
<Button
onClick={() => handleCancelOrder(order, market.account)}
className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
>
{cancelledOrderId + '' === order.orderId + '' ? (
<Loading />
) : (
<span>Cancel</span>
)}
</Button>
</div>
</Row>
))}
</>
)
}
const OpenOrdersTable = () => {
const { asPath } = useRouter()
const openOrders = useOpenOrders()
@ -82,116 +197,21 @@ const OpenOrdersTable = () => {
}
}
const tableProps = {
openOrders,
cancelledOrderId: cancelId,
handleCancelOrder,
}
return (
<div className={`flex flex-col py-2 sm:pb-4 sm:pt-4`}>
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
{openOrders && openOrders.length > 0 ? (
!isMobile ? (
<Table>
<thead>
<TrHead>
<Th>Market</Th>
<Th>Side</Th>
<Th>Size</Th>
<Th>Price</Th>
<Th>Value</Th>
<Th>
<span className={`sr-only`}>Edit</span>
</Th>
</TrHead>
</thead>
<tbody>
{openOrders.map(({ order, market }, index) => {
return (
<TrBody
index={index}
key={`${order.orderId}${order.side}`}
>
<Td>
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${market.config.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>{market.config.name}</div>
</div>
</Td>
<Td>
<SideBadge side={order.side} />
</Td>
<Td>{order.size}</Td>
<Td>{formatUsdValue(order.price)}</Td>
<Td>{formatUsdValue(order.price * order.size)}</Td>
<Td>
<div className={`flex justify-end`}>
<Button
onClick={() =>
handleCancelOrder(order, market.account)
}
className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
>
{cancelId + '' === order.orderId + '' ? (
<Loading />
) : (
<span>Cancel</span>
)}
</Button>
</div>
</Td>
</TrBody>
)
})}
</tbody>
</Table>
<DesktopTable {...tableProps} />
) : (
<>
{openOrders.map(({ market, order }, index) => (
<Row key={`${order.orderId}${order.side}`} index={index}>
<div className="col-span-12 flex items-center justify-between text-fgd-1 text-left">
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${market.config.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>
<div className="mb-0.5">{market.config.name}</div>
<div className="text-th-fgd-3 text-xs">
<span
className={`mr-1
${
order.side === 'buy'
? 'text-th-green'
: 'text-th-red'
}
`}
>
{order.side.toUpperCase()}
</span>
{`${order.size} at ${formatUsdValue(order.price)}`}
</div>
</div>
</div>
<Button
onClick={() => handleCancelOrder(order, market.account)}
className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
>
{cancelId + '' === order.orderId + '' ? (
<Loading />
) : (
<span>Cancel</span>
)}
</Button>
</div>
</Row>
))}
</>
<MobileTable {...tableProps} />
)
) : (
<div