chore: add metaKey detection - remove of router implementation dependecy from the libs

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]
   );

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<HTMLAnchorElement>) => {
+    (ev: MouseEvent<HTMLButtonElement>) => {
       ev.preventDefault();
       ev.stopPropagation();
+      console.log('onMarketClick', onMarketClick);
       if (onMarketClick) {
         onMarketClick(id, ev.metaKey);
-        return;
       }
     },
     [id, onMarketClick]
   );
   if (!data) return null;
   return (
-    <span onClick={handleOnClick} role="link" tabIndex="0">
+    <button onClick={handleOnClick} tabIndex={0}>
       {value}
-    </Link>
+    </button>
   );
 };

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<MarketMaybeWithData>
->(({ ...props }, ref) => {
+  TypedDataAgGrid<MarketMaybeWithData> & {
+    onMarketClick: (marketId: string, metaKey?: boolean) => void;
+  }
+>(({ onMarketClick, ...props }, ref) => {
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   return (
     <AgGrid
@@ -49,6 +51,7 @@ export const MarketListTable = forwardRef<
         headerName={t('Market')}
         field="tradableInstrument.instrument.code"
         cellRenderer="MarketNameCell"
+        cellRendererParams={{ onMarketClick }}
       />
       <AgGridColumn
         headerName={t('Description')}

libs/market-list/src/lib/components/markets-container/markets-container.tsx

@@ -7,7 +7,7 @@ import { marketsWithDataProvider as dataProvider } from '../../markets-provider'
 import type { MarketMaybeWithData } from '../../markets-provider';
 
 interface MarketsContainerProps {
-  onSelect: (marketId: string) => 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}
       />
       <div className="pointer-events-none absolute inset-0">
         <AsyncRenderer