From c221d0772ca20f2b322806bcfdc81ff018095fe5 Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Fri, 30 Sep 2022 16:50:48 +0100
Subject: [PATCH] fix: 1569 trading tab navigation update (#1573)

* fix: #1569 trading tab navigation update

* fix: #1569 get market id value from init
---
 apps/trading/components/navbar/navbar.tsx | 9 +++------
 apps/trading/pages/index.page.tsx         | 8 ++++++--
 apps/trading/stores/global.ts             | 6 +++++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index 2d28e7d83..d21e6231f 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -18,7 +18,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
     marketId: store.marketId,
     update: store.update,
   }));
-  const tradingPath = marketId ? `/markets/${marketId}` : '/markets';
+  const tradingPath = marketId ? `/markets/${marketId}` : '/';
   return (
     <div className="dark px-4 flex items-stretch border-b border-default bg-black text-white">
       <div className="flex gap-4 mr-4 items-center h-full">
@@ -35,7 +35,6 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
           {
             name: t('Trading'),
             path: tradingPath,
-            exact: false,
           },
           { name: t('Portfolio'), path: '/portfolio' },
         ].map((route) => (
@@ -55,14 +54,12 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
 interface NavLinkProps {
   name: string;
   path: string;
-  exact?: boolean;
   testId?: string;
 }
 
-const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
+const NavLink = ({ name, path, testId = name }: NavLinkProps) => {
   const router = useRouter();
-  const isActive =
-    router.asPath === path || (!exact && router.asPath.startsWith(path));
+  const isActive = router.asPath === path;
   const linkClasses = classNames('mx-2 py-2 self-end border-b-4', {
     'border-vega-yellow text-white cursor-default': isActive,
     'border-transparent text-neutral-400 hover:text-neutral-300': !isActive,
diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx
index eb71788dc..e56d503c2 100644
--- a/apps/trading/pages/index.page.tsx
+++ b/apps/trading/pages/index.page.tsx
@@ -1,5 +1,9 @@
 import { useMarketList } from '@vegaprotocol/market-list';
-import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/react-helpers';
+import {
+  addDecimalsFormatNumber,
+  LocalStorage,
+  titlefy,
+} from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -19,7 +23,7 @@ export function Index() {
     update({ landingDialog: true });
 
     if (data) {
-      const marketId = data.markets[0]?.id;
+      const marketId = LocalStorage.getItem('marketId') || data.markets[0]?.id;
       const marketName = data.markets[0]?.tradableInstrument.instrument.name;
       const marketPrice = data.marketsData[0]?.markPrice
         ? addDecimalsFormatNumber(
diff --git a/apps/trading/stores/global.ts b/apps/trading/stores/global.ts
index 716bac394..a476a7213 100644
--- a/apps/trading/stores/global.ts
+++ b/apps/trading/stores/global.ts
@@ -1,3 +1,4 @@
+import { LocalStorage } from '@vegaprotocol/react-helpers';
 import create from 'zustand';
 
 interface GlobalStore {
@@ -15,9 +16,12 @@ export const useGlobalStore = create<GlobalStore>((set) => ({
   networkSwitcherDialog: false,
   landingDialog: false,
   riskNoticeDialog: false,
-  marketId: null,
+  marketId: LocalStorage.getItem('marketId') || null,
   pageTitle: null,
   update: (state) => {
     set(state);
+    if (state.marketId) {
+      LocalStorage.setItem('marketId', state.marketId);
+    }
   },
 }));