fix: 1425 add link on select market table row (#1493)

* fix: #1425 add link on select market table row

* fix: #1425 use only on select

* fix: #1425 revert withdraw manager spec

apps/trading/pages/markets/[marketId].page.tsx

@@ -83,7 +83,7 @@ const MARKET_QUERY = gql`
 `;
 
 const MarketPage = ({ id }: { id?: string }) => {
-  const { query } = useRouter();
+  const { query, push } = useRouter();
   const { w } = useWindowSize();
   const { landingDialog, riskNoticeDialog, update } = useGlobalStore(
     (store) => ({
@@ -104,6 +104,7 @@ const MarketPage = ({ id }: { id?: string }) => {
   const onSelect = (id: string) => {
     if (id && id !== marketId) {
       updateStore({ marketId: id });
+      push(`/markets/${id}`);
     }
   };
 

libs/market-list/src/lib/components/select-market-columns.tsx

@@ -167,33 +167,12 @@ export const columns = (
   const candlesClose = candles
     ?.map((candle) => candle?.close)
     .filter((c: string | undefined): c is CandleClose => !isNil(c));
-  const handleKeyPress = (
-    event: React.KeyboardEvent<HTMLAnchorElement>,
-    id: string
-  ) => {
-    if (event.key === 'Enter' && onSelect) {
-      return onSelect(id);
-    }
-  };
   const candleLow = candles && calcCandleLow(candles);
   const candleHigh = candles && calcCandleHigh(candles);
   const selectMarketColumns: Column[] = [
     {
       kind: ColumnKind.Market,
-      value: (
+      value: market.tradableInstrument.instrument.code,
-        <Link href={`/markets/${market.id}`} passHref={true}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/no-static-element-interactions */}
-          <a
-            onKeyPress={(event) => handleKeyPress(event, market.id)}
-            onClick={() => {
-              onSelect(market.id);
-            }}
-            data-testid={`market-link-${market.id}`}
-          >
-            {market.tradableInstrument.instrument.code}
-          </a>
-        </Link>
-      ),
       className: cellClassNames,
       onlyOnDetailed: false,
     },

libs/market-list/src/lib/components/select-market-table.tsx

@@ -31,13 +31,21 @@ export const SelectMarketTableHeader = ({
 export const SelectMarketTableRow = ({
   detailed = false,
   columns,
+  onSelect,
+  marketId,
 }: {
   detailed?: boolean;
   columns: Column[];
+  onSelect: (id: string) => void;
+  marketId: string;
 }) => {
   return (
     <tr
       className={`hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer relative h-[34px]`}
+      onClick={() => {
+        onSelect(marketId);
+      }}
+      data-testid={`market-link-${marketId}`}
     >
       {columns.map(({ kind, value, className, dataTestId, onlyOnDetailed }) => {
         if (!onlyOnDetailed || detailed === onlyOnDetailed) {
@@ -48,7 +56,6 @@ export const SelectMarketTableRow = ({
             </td>
           );
         }
-
         return null;
       })}
     </tr>

libs/market-list/src/lib/components/select-market.tsx

@@ -57,8 +57,10 @@ export const SelectMarketLandingTable = ({
           <tbody>
             {markets?.map((market, i) => (
               <SelectMarketTableRow
+                marketId={market.id}
                 key={i}
                 detailed={false}
+                onSelect={onSelect}
                 columns={columns(
                   market,
                   marketsData?.find(
@@ -116,8 +118,10 @@ export const SelectAllMarketsTableBody = ({
       <tbody className="border-b-[10px] border-transparent">
         {markets?.map((market, i) => (
           <SelectMarketTableRow
+            marketId={market.id}
             key={i}
             detailed={true}
+            onSelect={onSelect}
             columns={tableColumns(
               market,
               marketsData?.find(