fix(trading): order single view side (#4526)

This commit is contained in:
m.ray 2023-08-11 11:12:13 +03:00 committed by GitHub
parent 70c3bc8128
commit 1b311a8b36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 4 deletions

View File

@ -18,6 +18,7 @@ import {
import type { Order } from '../order-data-provider';
import CopyToClipboard from 'react-copy-to-clipboard';
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
import classNames from 'classnames';
interface OrderViewDialogProps {
isOpen: boolean;
@ -50,6 +51,21 @@ export const OrderViewDialog = ({
)}
</div>
</KeyValueTableRow>
<KeyValueTableRow key={'order-side'}>
<div data-testid={'order-side-label'}>{t('Side')}</div>
<div
data-testid={`order-side-value`}
className={classNames({
// BUY
'text-market-green-600 dark:text-market-green':
order.side === Schema.Side.SIDE_BUY,
// SELL
'text-market-red': order.side === Schema.Side.SIDE_SELL,
})}
>
{Schema.SideMapping[order.side as Schema.Side]}
</div>
</KeyValueTableRow>
<KeyValueTableRow key={'order-type'}>
<div data-testid={'order-type-label'}>{t('Type')}</div>
<div data-testid={`order-type-value`}>
@ -206,6 +222,23 @@ export const OrderViewDialog = ({
{order.icebergOrder ? t('Yes') : t('-')}
</div>
</KeyValueTableRow>
{order.icebergOrder && (
<KeyValueTableRow key={'order-side'} className="ml-4">
<div data-testid={'order-side-label'}>{t('Side')}</div>
<div
data-testid={`order-side-value`}
className={classNames('text-right', {
// BUY
'text-market-green-600 dark:text-market-green':
order.side === Schema.Side.SIDE_BUY,
// SELL
'text-market-red': order.side === Schema.Side.SIDE_SELL,
})}
>
{Schema.SideMapping[order.side as Schema.Side]}
</div>
</KeyValueTableRow>
)}
{order.icebergOrder && (
<KeyValueTableRow
key={'order-iceberg-order-peak-size'}
@ -223,7 +256,6 @@ export const OrderViewDialog = ({
<div data-testid={`order-iceberg-order-peak-size-value`}>
<Size
value={order.icebergOrder.peakSize}
side={order.side}
positionDecimalPlaces={
order.market?.positionDecimalPlaces as number
}
@ -248,7 +280,6 @@ export const OrderViewDialog = ({
<div data-testid={`order-iceberg-order-minimum-visible-size-value`}>
<Size
value={order.icebergOrder.minimumVisibleSize}
side={order.side}
positionDecimalPlaces={
order.market?.positionDecimalPlaces as number
}
@ -267,7 +298,6 @@ export const OrderViewDialog = ({
<div data-testid={`order-iceberg-order-reserved-remaining-value`}>
<Size
value={order.icebergOrder.reservedRemaining}
side={order.side}
positionDecimalPlaces={
order.market?.positionDecimalPlaces as number
}

View File

@ -69,7 +69,7 @@ When looking at a list of orders, I...
- **must** see if any execution flags (aka conditions. e.g. Post only, Reduce only) were applied to the order (<a name="7003-MORD-019" href="#7003-MORD-019">7003-MORD-019</a>)
- **should** see "created at" [time](9001-DATA-data_display.md#time)
- **could** see updated at (this is used by the system when an order is amended, or repriced (in pegged and LP) not sure this in needed)
- **must** be able to see a single order view dialog with all the fields present above
- **should** see time priority (how many orders are before mine at this price)
- if the order is `Active` &amp; **not** part of a liquidity or peg shape: **must** see an option to [amend](#amend-order---price) the individual order (<a name="7003-MORD-007" href="#7003-MORD-007">7003-MORD-007</a>)
- if the order is `Active` &amp; is part of a liquidity or peg shape: **must** **not** see an option to amend the individual order (<a name="7003-MORD-008" href="#7003-MORD-008">7003-MORD-008</a>)