feat(explorer): add pegged order details (#4228)

apps/explorer/.env

@@ -1,14 +1,14 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.rocks
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
 NX_VEGA_TOKEN_URL=https://governance.stagnet1.vega.rocks
 NX_VEGA_WALLET_URL=http://localhost:1789
-NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
+NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
-NX_BLOCK_EXPLORER=https://be.stagnet1.vega.xyz/rest
+NX_BLOCK_EXPLORER=https://be.stagnet1.vega.rocks/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 NX_VEGA_GOVERNANCE_URL=https://governance.stagnet1.vega.rocks

apps/explorer/src/app/components/order-details/Order.graphql

@@ -13,6 +13,10 @@ fragment ExplorerDeterministicOrderFields on Order {
   remaining
   size
   rejectionReason
+  peggedOrder {
+    reference
+    offset
+  }
   party {
     id
   }

apps/explorer/src/app/components/order-details/__generated__/Order.ts

@@ -3,7 +3,7 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type ExplorerDeterministicOrderFieldsFragment = { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } };
+export type ExplorerDeterministicOrderFieldsFragment = { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } };
 
 export type ExplorerDeterministicOrderQueryVariables = Types.Exact<{
   orderId: Types.Scalars['ID'];
@@ -11,7 +11,7 @@ export type ExplorerDeterministicOrderQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerDeterministicOrderQuery = { __typename?: 'Query', orderByID: { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } } };
+export type ExplorerDeterministicOrderQuery = { __typename?: 'Query', orderByID: { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } } };
 
 export const ExplorerDeterministicOrderFieldsFragmentDoc = gql`
     fragment ExplorerDeterministicOrderFields on Order {
@@ -29,6 +29,10 @@ export const ExplorerDeterministicOrderFieldsFragmentDoc = gql`
   remaining
   size
   rejectionReason
+  peggedOrder {
+    reference
+    offset
+  }
   party {
     id
   }

apps/explorer/src/app/components/order-details/amend-order-details.spec.tsx

@@ -53,6 +53,7 @@ function renderExistingAmend(
             timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
             price: '200',
             side: 'BUY',
+            peggedOrder: null,
             remaining: '99',
             rejectionReason: 'rejection',
             reference: '123',
@@ -100,6 +101,7 @@ function renderExistingAmend(
             updatedAt: '456',
             expiresAt: '789',
             timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+            peggedOrder: null,
             price: '200',
             side: 'BUY',
             remaining: '99',

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -5,6 +5,7 @@ import PriceInMarket from '../price-in-market/price-in-market';
 import { Time } from '../time';
 import { sideText, statusText, tifFull, tifShort } from './lib/order-labels';
 import SizeInMarket from '../size-in-market/size-in-market';
+import { TxOrderPeggedReference } from '../txs/details/order/tx-order-peg';
 
 export interface DeterministicOrderDetailsProps {
   id: string;
@@ -68,25 +69,35 @@ const DeterministicOrderDetails = ({
             <span className="mx-5 text-base">@</span>
             <PriceInMarket price={o.price} marketId={o.market.id} />
           </h2>
-          <p className="text-gray-500 mb-4">
+          <p className="text-gray-200">
             In <MarketLink id={o.market.id} /> at <Time date={o.createdAt} />.
           </p>
+          {o.peggedOrder ? (
+            <p className="text-gray-200">
+              {t('Price peg')}:{' '}
+              <TxOrderPeggedReference
+                side={o.side}
+                reference={o.peggedOrder.reference}
+                offset={o.peggedOrder.offset}
+                marketId={o.market.id}
+              />
+            </p>
+          ) : null}
+
           {o.reference ? (
-            <p className="text-gray-500 mb-4">
+            <p className="text-gray-500 mt-4">
               <span>{t('Reference')}</span>: {o.reference}
             </p>
           ) : null}
-          <div className="grid md:grid-cols-4 gap-x-6">
+          <div className="grid md:grid-cols-4 gap-x-6 mt-4">
-            {version !== 0 ? null : (
+            <div className="mb-12 md:mb-0">
-              <div className="mb-12 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-4">
-                <h2 className="text-2xl font-bold text-dark mb-4">
+                {t('Status')}
-                  {t('Status')}
+              </h2>
-                </h2>
+              <h5 className="text-lg font-medium text-gray-500 mb-0 capitalize">
-                <h5 className="text-lg font-medium text-gray-500 mb-0 capitalize">
+                {statusText[o.status]}
-                  {statusText[o.status]}
+              </h5>
-                </h5>
+            </div>
-              </div>
-            )}
 
             <div className="mb-12 md:mb-0">
               <h2 className="text-2xl font-bold text-dark mb-4">{t('Size')}</h2>
@@ -95,17 +106,6 @@ const DeterministicOrderDetails = ({
               </h5>
             </div>
 
-            {version !== 0 ? null : (
-              <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
-                  {t('Remaining')}
-                </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
-                  <SizeInMarket size={o.remaining} marketId={o.market.id} />
-                </h5>
-              </div>
-            )}
-
             <div className="">
               <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Version')}

apps/explorer/src/app/components/order-summary/order-summary.spec.tsx

@@ -31,6 +31,7 @@ const mock = {
         side: 'SIDE_BUY',
         remaining: '100',
         size: '100',
+        peggedOrder: null,
         party: {
           id: '456',
         },

apps/explorer/src/app/components/txs/details/order/tx-order-peg.test.tsx

@@ -0,0 +1,113 @@
+import { render } from '@testing-library/react';
+import type { TxDetailsOrderProps } from './tx-order-peg';
+import { TxOrderPeggedReference, getMarketDecimals } from './tx-order-peg';
+import { useExplorerMarketQuery } from '../../../links/market-link/__generated__/Market';
+import type { ExplorerMarketQuery } from '../../../links/market-link/__generated__/Market';
+import { PeggedReference, Side } from '@vegaprotocol/types';
+
+// Mock the useExplorerMarketQuery hook
+jest.mock('../../../links/market-link/__generated__/Market', () => ({
+  useExplorerMarketQuery: jest.fn().mockReturnValue({
+    data: {
+      market: { decimalPlaces: 0 },
+    },
+    loading: false,
+  }),
+}));
+
+describe('getSettlementAsset', () => {
+  it('should return the decimal places if data is defined', () => {
+    const data = {
+      market: {
+        __typename: 'Market',
+        id: '123',
+        decimalPlaces: 8,
+      },
+    };
+
+    const result = getMarketDecimals(data as Partial<ExplorerMarketQuery>);
+
+    expect(result).toEqual(8);
+  });
+
+  it('should return 0 if data is undefined', () => {
+    const result = getMarketDecimals(undefined);
+
+    expect(result).toEqual(0);
+  });
+});
+
+describe('TxOrderPeggedReference', () => {
+  beforeEach(() => {
+    // Mock the useExplorerMarketQuery hook return value
+    (useExplorerMarketQuery as jest.Mock).mockReturnValue({
+      data: {
+        settlementAsset: 'some-settlement-asset',
+      },
+      loading: false,
+    });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should render the offset and reference correctly', () => {
+    const props: TxDetailsOrderProps = {
+      side: Side.SIDE_BUY,
+      offset: '10',
+      reference: PeggedReference.PEGGED_REFERENCE_MID,
+      marketId: 'some-market-id',
+    };
+
+    const { getByTestId } = render(<TxOrderPeggedReference {...props} />);
+
+    expect(getByTestId('pegged-reference')).toHaveTextContent('Mid + 10');
+  });
+
+  it('should return null if the reference is "PEGGED_REFERENCE_UNSPECIFIED"', () => {
+    const props: TxDetailsOrderProps = {
+      side: Side.SIDE_BUY,
+      offset: '10',
+      reference: 'PEGGED_REFERENCE_UNSPECIFIED',
+      marketId: 'some-market-id',
+    };
+
+    const { container } = render(<TxOrderPeggedReference {...props} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render the offset without formatting initially, then render the formatted version', () => {
+    const props: TxDetailsOrderProps = {
+      side: Side.SIDE_BUY,
+      offset: '10',
+      reference: PeggedReference.PEGGED_REFERENCE_BEST_ASK,
+      marketId: 'some-market-id',
+    };
+
+    (useExplorerMarketQuery as jest.Mock).mockReturnValue({
+      data: null,
+      loading: true,
+    });
+
+    const screen = render(<TxOrderPeggedReference {...props} />);
+    expect(screen.getByTestId('pegged-reference')).toHaveTextContent(
+      'Ask + 10'
+    );
+
+    (useExplorerMarketQuery as jest.Mock).mockReturnValue({
+      data: {
+        market: {
+          decimalPlaces: 10,
+        },
+      },
+      loading: false,
+    });
+
+    screen.rerender(<TxOrderPeggedReference {...props} />);
+    expect(screen.getByTestId('pegged-reference')).toHaveTextContent(
+      'Ask + 0.000000001'
+    );
+  });
+});

apps/explorer/src/app/components/txs/details/order/tx-order-peg.tsx

@@ -0,0 +1,72 @@
+import { t } from '@vegaprotocol/i18n';
+import { TableCell, TableRow } from '../../../table';
+import type { VegaPeggedReference } from '../liquidity-provision/liquidity-provision-details';
+import { Side, PeggedReferenceMapping } from '@vegaprotocol/types';
+import { useExplorerMarketQuery } from '../../../links/market-link/__generated__/Market';
+import type { ExplorerMarketQuery } from '../../../links/market-link/__generated__/Market';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+
+export interface TxDetailsOrderProps {
+  offset: string;
+  reference: VegaPeggedReference;
+  marketId: string;
+  side: Side;
+}
+
+export function getMarketDecimals(
+  data: ExplorerMarketQuery | undefined
+): number {
+  return data?.market?.decimalPlaces || 0;
+}
+
+/**
+ * Summarises an order's peg
+ */
+export const TxOrderPeggedReferenceRow = ({
+  offset,
+  reference,
+  marketId,
+  side,
+}: TxDetailsOrderProps) => {
+  return (
+    <TableRow modifier="bordered">
+      <TableCell>{t('Pegged order')}</TableCell>
+      <TableCell>
+        <TxOrderPeggedReference
+          side={side}
+          offset={offset}
+          reference={reference}
+          marketId={marketId}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export const TxOrderPeggedReference = ({
+  offset,
+  reference,
+  marketId,
+  side,
+}: TxDetailsOrderProps) => {
+  const { data, loading } = useExplorerMarketQuery({
+    variables: { id: marketId },
+  });
+
+  const direction = side === Side.SIDE_BUY ? '+' : '-';
+  const decimalPlaces = getMarketDecimals(data);
+
+  if (reference === 'PEGGED_REFERENCE_UNSPECIFIED') {
+    return null;
+  }
+
+  return (
+    <span data-testid="pegged-reference">
+      {PeggedReferenceMapping[reference]}&nbsp;
+      {direction}&nbsp;
+      {!loading && data
+        ? addDecimalsFormatNumber(offset, decimalPlaces)
+        : offset}
+    </span>
+  );
+};

apps/explorer/src/app/components/txs/details/tx-order.tsx

@@ -7,6 +7,7 @@ import { TableCell, TableRow, TableWithTbody } from '../../table';
 import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
 import DeterministicOrderDetails from '../../order-details/deterministic-order-details';
 import Hash from '../../links/hash';
+import { TxOrderPeggedReferenceRow } from './order/tx-order-peg';
 
 interface TxDetailsOrderProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -29,6 +30,8 @@ export const TxDetailsOrder = ({
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
   const marketId = txData.command.orderSubmission.marketId || '-';
+  const reference = txData.command.orderSubmission.peggedOrder;
+  const side = txData.command.orderSubmission.side;
 
   let deterministicId = '';
 
@@ -63,6 +66,14 @@ export const TxDetailsOrder = ({
             <MarketLink id={marketId} />
           </TableCell>
         </TableRow>
+        {reference ? (
+          <TxOrderPeggedReferenceRow
+            side={side}
+            offset={reference.offset}
+            reference={reference.reference}
+            marketId={marketId}
+          />
+        ) : null}
       </TableWithTbody>
 
       {deterministicId.length > 0 ? (