From 97b4ffb399c27f746c4ff9531705682557073928 Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Mon, 30 May 2022 19:57:14 +0300
Subject: [PATCH] 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                      |  8 ++++++++
 .../src/lib/components/landing/landing-dialog.tsx      |  3 ++-
 .../src/lib/components/landing/select-market-list.tsx  | 10 +++++-----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx
index 25cfbe67b..f1a0811b7 100644
--- a/apps/trading/pages/index.page.tsx
+++ b/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 />
diff --git a/libs/market-list/src/lib/components/landing/landing-dialog.tsx b/libs/market-list/src/lib/components/landing/landing-dialog.tsx
index 7112bd6e0..8f4eb6719 100644
--- a/libs/market-list/src/lib/components/landing/landing-dialog.tsx
+++ b/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}
diff --git a/libs/market-list/src/lib/components/landing/select-market-list.tsx b/libs/market-list/src/lib/components/landing/select-market-list.tsx
index cbb835144..ac82985b4 100644
--- a/libs/market-list/src/lib/components/landing/select-market-list.tsx
+++ b/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>
   );