Navigate to the Markets page if the current marketId is not included in subscribed markets (#198)

* Navigate to markets if current url is invalid

* nits

src/hooks/useCurrentMarketId.ts

@@ -5,16 +5,15 @@ import { useMatch, useNavigate } from 'react-router-dom';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';
 import { AppRoute } from '@/constants/routes';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { closeDialogInTradeBox } from '@/state/dialogs';
 import { setCurrentMarketId } from '@/state/perpetuals';
+import { getMarketIds } from '@/state/perpetualsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 
-import { useLocalStorage } from './useLocalStorage';
-import { getMarketIds } from '@/state/perpetualsSelectors';
-
 export const useCurrentMarketId = () => {
   const navigate = useNavigate();
   const match = useMatch(`/${AppRoute.Trade}/:marketId`);
@@ -33,17 +32,35 @@ export const useCurrentMarketId = () => {
     if (marketIds.length === 0) return marketId ?? lastViewedMarket;
     if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
     return marketId ?? lastViewedMarket;
-  }, [marketIds, marketId]);
+  }, [hasMarketIds, marketId]);
 
   useEffect(() => {
-    setLastViewedMarket(validId);
-    dispatch(setCurrentMarketId(validId));
-    dispatch(closeDialogInTradeBox());
+    // If v4_markets has not been subscribed to yet or marketId is not specified, default to validId
+    if (!hasMarketIds || !marketId) {
+      setLastViewedMarket(validId);
+      dispatch(setCurrentMarketId(validId));
+      dispatch(closeDialogInTradeBox());
 
-    navigate(`${AppRoute.Trade}/${validId}`, {
-      replace: true,
-    });
-  }, [validId]);
+      if (validId !== marketId) {
+        navigate(`${AppRoute.Trade}/${validId}`, {
+          replace: true,
+        });
+      }
+    } else {
+      // If v4_markets has been subscribed to, check if marketId is valid
+      if (!marketIds.includes(marketId)) {
+        // If marketId is not valid (i.e. final settlement), navigate to markets page
+        navigate(AppRoute.Markets, {
+          replace: true,
+        });
+      } else {
+        // If marketId is valid, set currentMarketId
+        setLastViewedMarket(marketId);
+        dispatch(setCurrentMarketId(marketId));
+        dispatch(closeDialogInTradeBox());
+      }
+    }
+  }, [hasMarketIds, marketId]);
 
   useEffect(() => {
     // Check for marketIds otherwise Abacus will silently fail its isMarketValid check