chore(trading): 4947 cant view settled market main (#4964)

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

@@ -0,0 +1,5 @@
+import MarketPage from '../market';
+
+export const ClosedMarketPage = () => {
+  return <MarketPage closed />;
+};

apps/trading/client-pages/closed-market/index.ts

@@ -0,0 +1 @@
+export { ClosedMarketPage as default } from './closed-market';

apps/trading/client-pages/market/market.tsx

@@ -12,6 +12,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { ViewType, useSidebar } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { MarketState } from '@vegaprotocol/types';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
   return markPrice && decimalPlaces
@@ -56,7 +57,7 @@ const TitleUpdater = ({
   return null;
 };
 
-export const MarketPage = () => {
+export const MarketPage = ({ closed }: { closed?: boolean }) => {
   const { marketId } = useParams();
   const navigate = useNavigate();
   const currentRouteId = useGetCurrentRouteId();
@@ -70,16 +71,33 @@ export const MarketPage = () => {
   const { data, error, loading } = useMarket(marketId);
 
   useEffect(() => {
-    if (data?.id && data.id !== lastMarketId) {
+    if (
+      data?.state &&
+      [
+        MarketState.STATE_SETTLED,
+        MarketState.STATE_TRADING_TERMINATED,
+      ].includes(data.state) &&
+      currentRouteId !== Routes.CLOSED_MARKETS &&
+      marketId
+    ) {
+      navigate(Links[Routes.CLOSED_MARKETS](marketId));
+    }
+  }, [data?.state, currentRouteId, navigate, marketId]);
+
+  useEffect(() => {
+    if (data?.id && data.id !== lastMarketId && !closed) {
       update({ marketId: data.id });
     }
-  }, [update, lastMarketId, data?.id]);
+  }, [update, lastMarketId, data?.id, closed]);
 
   useEffect(() => {
     if (largeScreen && view === undefined) {
-      setViews({ type: ViewType.Order }, currentRouteId);
+      setViews(
+        { type: closed ? ViewType.Info : ViewType.Order },
+        currentRouteId
+      );
     }
-  }, [setViews, view, currentRouteId, largeScreen]);
+  }, [setViews, view, currentRouteId, largeScreen, closed]);
 
   const tradeView = useMemo(() => {
     if (largeScreen) {

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

@@ -24,6 +24,8 @@ import { SettlementPriceCell } from './settlement-price-cell';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { MarketActionsDropdown } from './market-table-actions';
 import { MarketCodeCell } from './market-code-cell';
+import type { CellClickedEvent } from 'ag-grid-community';
+import { useClosedMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
 type SettlementAsset =
   MarketMaybeWithData['tradableInstrument']['instrument']['product']['settlementAsset'];
@@ -112,6 +114,7 @@ const ClosedMarketsDataGrid = ({
   rowData: Row[];
   error: Error | undefined;
 }) => {
+  const handleOnSelect = useClosedMarketClickHandler();
   const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
 
   const colDefs = useMemo(() => {
@@ -268,6 +271,27 @@ const ClosedMarketsDataGrid = ({
       overlayNoRowsTemplate={error ? error.message : t('No markets')}
       components={components}
       rowHeight={45}
+      onCellClicked={({ data, column, event }: CellClickedEvent<Row>) => {
+        if (!data) return;
+
+        // prevent navigating to the market page if any of the below cells are clicked
+        // event.preventDefault or event.stopPropagation dont seem to apply for aggird
+        const colId = column.getColId();
+
+        if (
+          [
+            'settlementDate',
+            'settlementDataOracleId',
+            'settlementAsset',
+            'market-actions',
+          ].includes(colId)
+        ) {
+          return;
+        }
+
+        // @ts-ignore metaKey exists
+        handleOnSelect(data.id, event ? event.metaKey : false);
+      }}
     />
   );
 };

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -24,6 +24,7 @@ export const LayoutWithSidebar = () => {
       <div className="col-span-full">
         <Routes>
           <Route path={AppRoutes.MARKET} element={<MarketHeader />} />
+          <Route path={AppRoutes.CLOSED_MARKETS} element={<MarketHeader />} />
           <Route path={AppRoutes.LIQUIDITY} element={<LiquidityHeader />} />
         </Routes>
       </div>

apps/trading/components/sidebar/sidebar.tsx

@@ -110,6 +110,20 @@ export const Sidebar = () => {
               </>
             }
           />
+          <Route
+            path={AppRoutes.CLOSED_MARKETS}
+            element={
+              <>
+                <SidebarDivider />
+                <SidebarButton
+                  view={ViewType.Info}
+                  icon={VegaIconNames.BREAKDOWN}
+                  tooltip={t('Market specification')}
+                  routeId={currentRouteId}
+                />
+              </>
+            }
+          />
         </Routes>
       </nav>
       <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>

apps/trading/lib/hooks/use-market-click-handler.ts

@@ -20,3 +20,16 @@ export const useMarketLiquidityClickHandler = () => {
     window.open(`/#/liquidity/${selectedId}`, metaKey ? '_blank' : '_self');
   }, []);
 };
+
+export const useClosedMarketClickHandler = (replace = false) => {
+  const navigate = useNavigate();
+
+  return (selectedId: string, metaKey?: boolean) => {
+    const link = Links[Routes.CLOSED_MARKETS](selectedId);
+    if (metaKey) {
+      window.open(`/#${link}`, '_blank');
+    } else {
+      navigate(link, { replace });
+    }
+  };
+};

apps/trading/pages/client-router.tsx

@@ -23,6 +23,10 @@ const LazyMarket = dynamic(() => import('../client-pages/market'), {
   ssr: false,
 });
 
+const ClosedMarket = dynamic(() => import('../client-pages/closed-market'), {
+  ssr: false,
+});
+
 const LazyPortfolio = dynamic(() => import('../client-pages/portfolio'), {
   ssr: false,
 });
@@ -39,6 +43,7 @@ export enum Routes {
   HOME = '/',
   MARKET = '/markets/:marketId',
   MARKETS = '/markets/all',
+  CLOSED_MARKETS = '/markets/all/closed/:marketId',
   PORTFOLIO = '/portfolio',
   LIQUIDITY = '/liquidity/:marketId',
   DISCLAIMER = '/disclaimer',
@@ -52,6 +57,8 @@ export const Links: ConsoleLinks = {
   [Routes.MARKET]: (marketId: string) =>
     trimEnd(Routes.MARKET.replace(':marketId', marketId)),
   [Routes.MARKETS]: () => Routes.MARKETS,
+  [Routes.CLOSED_MARKETS]: (marketId: string) =>
+    trimEnd(Routes.CLOSED_MARKETS.replace(':marketId', marketId)),
   [Routes.PORTFOLIO]: () => Routes.PORTFOLIO,
   [Routes.LIQUIDITY]: (marketId: string) =>
     trimEnd(Routes.LIQUIDITY.replace(':marketId', marketId)),
@@ -84,6 +91,11 @@ export const routerConfig: RouteObject[] = [
             element: <LazyMarket />,
             id: Routes.MARKET,
           },
+          {
+            path: 'all/closed/:marketId',
+            element: <ClosedMarket />,
+            id: Routes.CLOSED_MARKETS,
+          },
         ],
       },
       {