chore(trading): 4134 see if a closed market was succeeded (#4336)

apps/trading-e2e/src/integration/closed-markets.cy.ts

@@ -369,6 +369,10 @@ describe('Closed markets', { tags: '@smoke' }, () => {
       .first()
       .find('button svg')
       .should('exist');
+    cy.get(rowSelector)
+      .find('[col-id="successorMarketID"]')
+      .first()
+      .should('have.text', ' - ');
   });
 
   // test market list for market in terminated state

apps/trading/client-pages/markets/closed.spec.tsx

@@ -1,4 +1,5 @@
-import { act, render, screen, within } from '@testing-library/react';
+import { act, render, screen, within, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { Closed } from './closed';
 import { MarketStateMapping, PropertyKeyType } from '@vegaprotocol/types';
 import { PositionStatus } from '@vegaprotocol/types';
@@ -211,15 +212,22 @@ describe('Closed', () => {
   it('renders correctly formatted and filtered rows', async () => {
     await act(async () => {
       render(
-        <MockedProvider
-          mocks={[marketsMock, marketsDataMock, positionsMock, oracleDataMock]}
-        >
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[
+              marketsMock,
+              marketsDataMock,
+              positionsMock,
+              oracleDataMock,
+            ]}
           >
-            <Closed />
-          </VegaWalletContext.Provider>
-        </MockedProvider>
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
       );
     });
     // screen.debug(document, Infinity);
@@ -230,6 +238,7 @@ describe('Closed', () => {
       'Description',
       'Status',
       'Settlement date',
+      'Successor market',
       'Best bid',
       'Best offer',
       'Mark price',
@@ -247,6 +256,7 @@ describe('Closed', () => {
       market.tradableInstrument.instrument.name,
       MarketStateMapping[market.state],
       '3 days ago',
+      '-',
       /* eslint-disable @typescript-eslint/no-non-null-assertion */
       addDecimalsFormatNumber(marketsData.bestBidPrice, market.decimalPlaces),
       addDecimalsFormatNumber(
@@ -315,20 +325,22 @@ describe('Closed', () => {
     };
     await act(async () => {
       render(
-        <MockedProvider
-          mocks={[
-            mixedMarketsMock,
-            marketsDataMock,
-            positionsMock,
-            oracleDataMock,
-          ]}
-        >
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[
+              mixedMarketsMock,
+              marketsDataMock,
+              positionsMock,
+              oracleDataMock,
+            ]}
           >
-            <Closed />
-          </VegaWalletContext.Provider>
-        </MockedProvider>
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
       );
     });
 
@@ -359,4 +371,74 @@ describe('Closed', () => {
       });
     expect(cells).toEqual(expectedRows.map((m) => m.node.id));
   });
+
+  it('successor marked should be visible', async () => {
+    const mixedMarkets = [
+      {
+        __typename: 'MarketEdge' as const,
+        node: createMarketFragment({
+          id: 'include-0',
+          state: MarketState.STATE_SETTLED,
+          successorMarketID: 'successorMarketID',
+        }),
+      },
+      {
+        __typename: 'MarketEdge' as const,
+        node: {
+          ...createMarketFragment({
+            id: 'successorMarketID',
+            state: MarketState.STATE_ACTIVE,
+          }),
+          tradableInstrument: {
+            ...createMarketFragment().tradableInstrument,
+            instrument: {
+              ...createMarketFragment().tradableInstrument.instrument,
+              id: 'successorAssset',
+              name: 'Successor Market Name',
+              code: 'SuccessorCode',
+            },
+          },
+        },
+      },
+    ];
+
+    const mixedMarketsMock: MockedResponse<MarketsQuery> = {
+      request: {
+        query: MarketsDocument,
+      },
+      result: {
+        data: {
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: mixedMarkets,
+          },
+        },
+      },
+    };
+
+    render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[
+            mixedMarketsMock,
+            marketsDataMock,
+            positionsMock,
+            oracleDataMock,
+          ]}
+        >
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
+          >
+            <Closed />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'SuccessorCode' })
+      ).toBeInTheDocument();
+    });
+  });
 });

apps/trading/client-pages/markets/closed.tsx

@@ -4,7 +4,11 @@ import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import { AgGridLazy as AgGrid, COL_DEFS } from '@vegaprotocol/datagrid';
+import {
+  AgGridLazy as AgGrid,
+  COL_DEFS,
+  MarketNameCell,
+} from '@vegaprotocol/datagrid';
 import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
@@ -20,6 +24,7 @@ import type {
 import {
   MarketActionsDropdown,
   closedMarketsWithDataProvider,
+  marketProvider,
 } from '@vegaprotocol/markets';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
@@ -27,6 +32,7 @@ import type { ColDef } from 'ag-grid-community';
 import { SettlementDateCell } from './settlement-date-cell';
 import { SettlementPriceCell } from './settlement-price-cell';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
 type SettlementAsset =
   MarketMaybeWithData['tradableInstrument']['instrument']['product']['settlementAsset'];
@@ -48,6 +54,7 @@ interface Row {
   tradingTerminationOracleId: string;
   settlementAsset: SettlementAsset;
   realisedPNL: string | undefined;
+  successorMarketID: string | undefined | null;
 }
 
 export const Closed = () => {
@@ -109,6 +116,7 @@ export const Closed = () => {
         instrument.product.dataSourceSpecForTradingTermination.id,
       settlementAsset: instrument.product.settlementAsset,
       realisedPNL: position?.node.realisedPNL,
+      successorMarketID: market.successorMarketID,
     };
 
     return row;
@@ -120,6 +128,28 @@ export const Closed = () => {
   );
 };
 
+export const SuccessorMarketRenderer = ({
+  value,
+}: VegaICellRendererParams<Row, 'successorMarketID'>) => {
+  const { data } = useDataProvider({
+    dataProvider: marketProvider,
+    variables: {
+      marketId: value || '',
+    },
+    skip: !value,
+  });
+  const onMarketClick = useMarketClickHandler();
+  return data ? (
+    <MarketNameCell
+      value={data.tradableInstrument.instrument.code}
+      data={data}
+      onMarketClick={onMarketClick}
+    />
+  ) : (
+    ' - '
+  );
+};
+
 const ClosedMarketsDataGrid = ({
   rowData,
   error,
@@ -199,6 +229,11 @@ const ClosedMarketsDataGrid = ({
           },
         },
       },
+      {
+        headerName: t('Successor market'),
+        field: 'successorMarketID',
+        cellRenderer: 'SuccessorMarketRenderer',
+      },
       {
         headerName: t('Best bid'),
         field: 'bestBidPrice',
@@ -311,7 +346,9 @@ const ClosedMarketsDataGrid = ({
       defaultColDef={{
         resizable: true,
         minWidth: 100,
+        flex: 1,
       }}
+      components={{ SuccessorMarketRenderer }}
       overlayNoRowsTemplate={error ? error.message : t('No markets')}
     />
   );

libs/markets/src/lib/markets.mock.ts

@@ -141,6 +141,7 @@ export const createMarketFragment = (
       },
       __typename: 'TradableInstrument',
     },
+    successorMarketID: null,
     __typename: 'Market',
   };