fix: [#445] shallow routing from index (#484)

* fix: [#445] shallow routing from index

* fix: [#445] use link to redirect to market - an attempt to fix reload

* fix: [#445] remove stretched link from last link - it makes all the other links unusable

* fix: [#445] fix lint on select market list - remove stretched link

apps/trading/pages/index.page.tsx

@@ -32,6 +32,14 @@ export function Index() {
   // The default market selected in the platform behind the overlay
   // should be the oldest market that is currently trading in continuous mode(i.e. not in auction).
   const { data, error, loading } = useQuery<MarketsLanding>(MARKETS_QUERY);
+  if (data && !error && !loading) {
+    const marketId = marketList(data)[0]?.id;
+    window.history.replaceState(
+      data,
+      '',
+      marketId ? `/markets/${marketId}` : '/markets'
+    );
+  }
   return (
     <>
       <LandingDialog />

libs/market-list/src/lib/components/landing/landing-dialog.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@apollo/client';
+import { t } from '@vegaprotocol/react-helpers';
 import { Interval } from '@vegaprotocol/types';
 import { AsyncRenderer, Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { useState } from 'react';
@@ -22,7 +23,7 @@ export const LandingDialog = () => {
     <AsyncRenderer loading={loading} error={error} data={data}>
       {
         <Dialog
-          title="Select a market to get started"
+          title={t('Select a market to get started')}
           intent={Intent.Prompt}
           open={open}
           onChange={setClose}

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

@@ -1,8 +1,10 @@
 import {
   addDecimalsFormatNumber,
   PriceCell,
+  t,
 } from '@vegaprotocol/react-helpers';
 import { PriceCellChange, Sparkline } from '@vegaprotocol/ui-toolkit';
+import Link from 'next/link';
 import { mapDataToMarketList } from '../../utils';
 import type { MarketList } from '../markets-container/__generated__/MarketList';
 
@@ -20,7 +22,6 @@ export const SelectMarketList = ({ data }: SelectMarketListProps) => {
 
   const boldUnderlineClassNames =
     'px-8 underline font-sans text-base leading-9 font-bold tracking-tight decoration-solid text-ui light:hover:text-black/80 dark:hover:text-white/80';
-  const stretchedLink = `after:content-[''] after:inset-0 after:z-[1] after:absolute after:box-border`;
   return (
     <div className="max-h-[40rem] overflow-x-auto">
       <table className="relative h-full min-w-full whitespace-nowrap">
@@ -46,12 +47,11 @@ export const SelectMarketList = ({ data }: SelectMarketListProps) => {
                     className={`hover:bg-black/20 dark:hover:bg-white/20 cursor-pointer relative`}
                   >
                     <td className={`${boldUnderlineClassNames} relative`}>
-                      <a
+                      <Link
                         href={`/markets/${id}?portfolio=orders&trade=orderbook&chart=candles`}
-                        className={stretchedLink}
                       >
                         {marketName}
-                      </a>
+                      </Link>
                     </td>
                     <td className={tdClassNames}>
                       {lastPrice && (
@@ -88,7 +88,7 @@ export const SelectMarketList = ({ data }: SelectMarketListProps) => {
       </table>
 
       <a className={`${boldUnderlineClassNames} text-ui-small`} href="/markets">
-        {'Or view full market list'}
+        {t('Or view full market list')}
       </a>
     </div>
   );