feat(trading): show pegged order offset and reference in the order table (#3675)

libs/datagrid/src/lib/cells/order-type-cell.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useCallback } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 
 interface OrderTypeCellProps {
   value?: Schema.OrderType;
@@ -23,7 +24,15 @@ export const OrderTypeCell = ({
     }
     if (!value) return '-';
     if (order?.peggedOrder) {
-      return t('Pegged');
+      const reference =
+        Schema.PeggedReferenceMapping[order.peggedOrder?.reference];
+      // the offset (e.g. + 0.001 for a Sell, or -1231.023 for a Buy)
+      const side = order.side === Schema.Side.SIDE_BUY ? '-' : '+';
+      const offset = addDecimalsFormatNumber(
+        order.peggedOrder?.offset,
+        order.market.decimalPlaces
+      );
+      return t('%s %s %s Peg limit', [reference, side, offset]);
     }
     if (order?.liquidityProvision) {
       return t('Liquidity provision');

libs/orders/src/lib/components/order-data-provider/Orders.graphql

@@ -21,6 +21,8 @@ fragment OrderFields on Order {
   }
   peggedOrder {
     __typename
+    reference
+    offset
   }
 }
 
@@ -64,6 +66,7 @@ fragment OrderUpdateFields on OrderUpdate {
   type
   side
   size
+  remaining
   status
   rejectionReason
   price
@@ -75,6 +78,8 @@ fragment OrderUpdateFields on OrderUpdate {
   liquidityProvisionId
   peggedOrder {
     __typename
+    reference
+    offset
   }
 }
 

libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts

@@ -3,14 +3,14 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type OrderFieldsFragment = { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder' } | null };
+export type OrderFieldsFragment = { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null };
 
 export type OrderByIdQueryVariables = Types.Exact<{
   orderId: Types.Scalars['ID'];
 }>;
 
 
-export type OrderByIdQuery = { __typename?: 'Query', orderByID: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder' } | null } };
+export type OrderByIdQuery = { __typename?: 'Query', orderByID: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } };
 
 export type OrdersQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
@@ -20,9 +20,9 @@ export type OrdersQueryVariables = Types.Exact<{
 }>;
 
 
-export type OrdersQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, ordersConnection?: { __typename?: 'OrderConnection', edges?: Array<{ __typename?: 'OrderEdge', cursor?: string | null, node: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder' } | null } }> | null, pageInfo?: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } | null } | null } | null };
+export type OrdersQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, ordersConnection?: { __typename?: 'OrderConnection', edges?: Array<{ __typename?: 'OrderEdge', cursor?: string | null, node: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } }> | null, pageInfo?: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } | null } | null } | null };
 
-export type OrderUpdateFieldsFragment = { __typename?: 'OrderUpdate', id: string, marketId: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, liquidityProvisionId?: string | null, peggedOrder?: { __typename: 'PeggedOrder' } | null };
+export type OrderUpdateFieldsFragment = { __typename?: 'OrderUpdate', id: string, marketId: string, type?: Types.OrderType | null, side: Types.Side, size: string, remaining: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, liquidityProvisionId?: string | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null };
 
 export type OrdersUpdateSubscriptionVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
@@ -30,7 +30,7 @@ export type OrdersUpdateSubscriptionVariables = Types.Exact<{
 }>;
 
 
-export type OrdersUpdateSubscription = { __typename?: 'Subscription', orders?: Array<{ __typename?: 'OrderUpdate', id: string, marketId: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, liquidityProvisionId?: string | null, peggedOrder?: { __typename: 'PeggedOrder' } | null }> | null };
+export type OrdersUpdateSubscription = { __typename?: 'Subscription', orders?: Array<{ __typename?: 'OrderUpdate', id: string, marketId: string, type?: Types.OrderType | null, side: Types.Side, size: string, remaining: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, liquidityProvisionId?: string | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null }> | null };
 
 export const OrderFieldsFragmentDoc = gql`
     fragment OrderFields on Order {
@@ -56,6 +56,8 @@ export const OrderFieldsFragmentDoc = gql`
   }
   peggedOrder {
     __typename
+    reference
+    offset
   }
 }
     `;
@@ -66,6 +68,7 @@ export const OrderUpdateFieldsFragmentDoc = gql`
   type
   side
   size
+  remaining
   status
   rejectionReason
   price
@@ -77,6 +80,8 @@ export const OrderUpdateFieldsFragmentDoc = gql`
   liquidityProvisionId
   peggedOrder {
     __typename
+    reference
+    offset
   }
 }
     `;

libs/orders/src/lib/components/order-list/order-list.spec.tsx

@@ -213,6 +213,8 @@ describe('OrderListTable', () => {
         timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
         peggedOrder: {
           __typename: 'PeggedOrder',
+          reference: Schema.PeggedReference.PEGGED_REFERENCE_MID,
+          offset: '100',
         },
       });
 
@@ -222,7 +224,7 @@ describe('OrderListTable', () => {
 
       const amendCell = getAmendCell();
       const typeCell = screen.getAllByRole('gridcell')[2];
-      expect(typeCell).toHaveTextContent('Pegged');
+      expect(typeCell).toHaveTextContent('Mid - 10.0 Peg limit');
       expect(amendCell.queryAllByRole('button')).toHaveLength(0);
     });
 

libs/types/src/global-types-mappings.ts

@@ -1,4 +1,4 @@
-import type { ConditionOperator } from './__generated__/types';
+import type { ConditionOperator, PeggedReference } from './__generated__/types';
 import type {
   AccountType,
   AuctionTrigger,
@@ -474,3 +474,9 @@ export const ConditionOperatorMapping: { [C in ConditionOperator]: string } = {
   OPERATOR_LESS_THAN: 'Less than',
   OPERATOR_LESS_THAN_OR_EQUAL: 'Less than or equal to',
 };
+
+export const PeggedReferenceMapping: { [R in PeggedReference]: string } = {
+  PEGGED_REFERENCE_BEST_ASK: 'Ask',
+  PEGGED_REFERENCE_BEST_BID: 'Bid',
+  PEGGED_REFERENCE_MID: 'Mid',
+};