+
+
+ {t('Status')}
+
+
+ {statusText[o.status]}
+
+
{t('Size')}
@@ -95,17 +106,6 @@ const DeterministicOrderDetails = ({
- {version !== 0 ? null : (
-
-
- {t('Remaining')}
-
-
-
-
-
- )}
-
{t('Version')}
diff --git a/apps/explorer/src/app/components/order-summary/order-summary.spec.tsx b/apps/explorer/src/app/components/order-summary/order-summary.spec.tsx
index 2343f53a2..9aecd0647 100644
--- a/apps/explorer/src/app/components/order-summary/order-summary.spec.tsx
+++ b/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',
},
diff --git a/apps/explorer/src/app/components/txs/details/order/tx-order-peg.test.tsx b/apps/explorer/src/app/components/txs/details/order/tx-order-peg.test.tsx
new file mode 100644
index 000000000..b17a469ae
--- /dev/null
+++ b/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);
+
+ 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();
+
+ 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();
+
+ 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();
+ expect(screen.getByTestId('pegged-reference')).toHaveTextContent(
+ 'Ask + 10'
+ );
+
+ (useExplorerMarketQuery as jest.Mock).mockReturnValue({
+ data: {
+ market: {
+ decimalPlaces: 10,
+ },
+ },
+ loading: false,
+ });
+
+ screen.rerender();
+ expect(screen.getByTestId('pegged-reference')).toHaveTextContent(
+ 'Ask + 0.000000001'
+ );
+ });
+});
diff --git a/apps/explorer/src/app/components/txs/details/order/tx-order-peg.tsx b/apps/explorer/src/app/components/txs/details/order/tx-order-peg.tsx
new file mode 100644
index 000000000..26fd4a7d7
--- /dev/null
+++ b/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 (
+
+ {t('Pegged order')}
+
+
+
+
+ );
+};
+
+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 (
+
+ {PeggedReferenceMapping[reference]}
+ {direction}
+ {!loading && data
+ ? addDecimalsFormatNumber(offset, decimalPlaces)
+ : offset}
+
+ );
+};
diff --git a/apps/explorer/src/app/components/txs/details/tx-order.tsx b/apps/explorer/src/app/components/txs/details/tx-order.tsx
index 57faafa85..577fb34dd 100644
--- a/apps/explorer/src/app/components/txs/details/tx-order.tsx
+++ b/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 = ({
+ {reference ? (
+
+ ) : null}
{deterministicId.length > 0 ? (