diff --git a/apps/trading/client-pages/closed-market/closed-market.tsx b/apps/trading/client-pages/closed-market/closed-market.tsx new file mode 100644 index 000000000..e3327f495 --- /dev/null +++ b/apps/trading/client-pages/closed-market/closed-market.tsx @@ -0,0 +1,5 @@ +import MarketPage from '../market'; + +export const ClosedMarketPage = () => { + return ; +}; diff --git a/apps/trading/client-pages/closed-market/index.ts b/apps/trading/client-pages/closed-market/index.ts new file mode 100644 index 000000000..d660b555a --- /dev/null +++ b/apps/trading/client-pages/closed-market/index.ts @@ -0,0 +1 @@ +export { ClosedMarketPage as default } from './closed-market'; diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx index fd29cdec0..bc649619a 100644 --- a/apps/trading/client-pages/market/market.tsx +++ b/apps/trading/client-pages/market/market.tsx @@ -9,9 +9,10 @@ import { useGlobalStore, usePageTitleStore } from '../../stores'; import { TradeGrid } from './trade-grid'; import { TradePanels } from './trade-panels'; import { useNavigate, useParams } from 'react-router-dom'; -import { Links } from '../../lib/links'; +import { Links, Routes } from '../../lib/links'; 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.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 pinnedAsset = data && getAsset(data); diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx index de2a71f63..b07349879 100644 --- a/apps/trading/client-pages/markets/closed.tsx +++ b/apps/trading/client-pages/markets/closed.tsx @@ -22,6 +22,8 @@ import { SettlementPriceCell } from './settlement-price-cell'; import { useDataProvider } from '@vegaprotocol/data-provider'; import { MarketCodeCell } from './market-code-cell'; import { MarketActionsDropdown } from './market-table-actions'; +import type { CellClickedEvent } from 'ag-grid-community'; +import { useClosedMarketClickHandler } from '../../lib/hooks/use-market-click-handler'; type SettlementAsset = Pick< Asset, @@ -125,6 +127,7 @@ const ClosedMarketsDataGrid = ({ rowData: Row[]; error: Error | undefined; }) => { + const handleOnSelect = useClosedMarketClickHandler(); const openAssetDialog = useAssetDetailsDialogStore((store) => store.open); const colDefs = useMemo(() => { @@ -281,6 +284,27 @@ const ClosedMarketsDataGrid = ({ overlayNoRowsTemplate={error ? error.message : t('No markets')} components={components} rowHeight={45} + onCellClicked={({ data, column, event }: CellClickedEvent) => { + 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); + }} /> ); }; diff --git a/apps/trading/components/layouts/layout-with-sidebar.tsx b/apps/trading/components/layouts/layout-with-sidebar.tsx index a3391f42d..c7f982540 100644 --- a/apps/trading/components/layouts/layout-with-sidebar.tsx +++ b/apps/trading/components/layouts/layout-with-sidebar.tsx @@ -23,6 +23,10 @@ export const LayoutWithSidebar = () => {
} /> + } + /> } />
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx index 9d28a1302..ab44dd4ed 100644 --- a/apps/trading/components/sidebar/sidebar.tsx +++ b/apps/trading/components/sidebar/sidebar.tsx @@ -135,6 +135,21 @@ export const Sidebar = () => { } /> + + + + + + } + />