diff --git a/apps/trading/client-pages/markets/markets.tsx b/apps/trading/client-pages/markets/markets.tsx index ffdf3eb94..0ce5e9d93 100644 --- a/apps/trading/client-pages/markets/markets.tsx +++ b/apps/trading/client-pages/markets/markets.tsx @@ -6,8 +6,13 @@ import { Links, Routes } from '../../pages/client-router'; export const Markets = () => { const navigate = useNavigate(); const handleOnSelect = useCallback( - (marketId: string) => { - navigate(Links[Routes.MARKET](marketId)); + (marketId: string, metaKey?: boolean) => { + const link = Links[Routes.MARKET](marketId); + if (metaKey) { + window.open(`/#${link}`, '_blank'); + } else { + navigate(link); + } }, [navigate] ); diff --git a/libs/datagrid/src/lib/cells/market-name-cell.tsx b/libs/datagrid/src/lib/cells/market-name-cell.tsx index 2f6756472..15de6532d 100644 --- a/libs/datagrid/src/lib/cells/market-name-cell.tsx +++ b/libs/datagrid/src/lib/cells/market-name-cell.tsx @@ -1,9 +1,6 @@ import type { MouseEvent } from 'react'; import { useCallback } from 'react'; import get from 'lodash/get'; -import { Link } from 'react-router-dom'; - -const MARKET_PATH = 'markets'; interface MarketNameCellProps { value?: string; @@ -19,22 +16,21 @@ export const MarketNameCell = ({ onMarketClick, }: MarketNameCellProps) => { const id = data ? get(data, idPath ?? 'id', 'all') : ''; - const marketLink = `/${MARKET_PATH}/${id}`; const handleOnClick = useCallback( - (ev: MouseEvent) => { + (ev: MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); + console.log('onMarketClick', onMarketClick); if (onMarketClick) { onMarketClick(id, ev.metaKey); - return; } }, [id, onMarketClick] ); if (!data) return null; return ( - + ); }; diff --git a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx index 03b2a66f7..faa6fe978 100644 --- a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx +++ b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx @@ -25,8 +25,10 @@ export const getRowId = ({ data }: { data: { id: string } }) => data.id; export const MarketListTable = forwardRef< AgGridReact, - TypedDataAgGrid ->(({ ...props }, ref) => { + TypedDataAgGrid & { + onMarketClick: (marketId: string, metaKey?: boolean) => void; + } +>(({ onMarketClick, ...props }, ref) => { const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); return ( void; + onSelect: (marketId: string, metaKey?: boolean) => void; } export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => { @@ -35,6 +35,7 @@ export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => { } onSelect((data as MarketMaybeWithData).id); }} + onMarketClick={onSelect} />