Move localeProvider, add label, valid marketId

src/App.tsx

@@ -10,10 +10,10 @@ import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
 import { useBreakpoints, useInitializePage, useShouldShowFooter, useAnalytics } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { SubaccountProvider } from './hooks/useSubaccount';
 import { DialogAreaProvider, useDialogArea } from './hooks/useDialogArea';
+import { LocaleProvider } from './hooks/useLocaleSeparators';
 import { NotificationsProvider } from './hooks/useNotifications';
-
+import { SubaccountProvider } from './hooks/useSubaccount';
 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
 
 import MarketsPage from '@/pages/markets/Markets';
@@ -100,17 +100,19 @@ const App = () => (
   <QueryClientProvider client={queryClient}>
     <GrazProvider>
       <WagmiConfig config={config}>
-        <DydxProvider>
-          <AccountsProvider>
-            <SubaccountProvider>
-              <NotificationsProvider>
-                <DialogAreaProvider>
-                  <Content />
-                </DialogAreaProvider>
-              </NotificationsProvider>
-            </SubaccountProvider>
-          </AccountsProvider>
-        </DydxProvider>
+        <LocaleProvider>
+          <DydxProvider>
+            <AccountsProvider>
+              <SubaccountProvider>
+                <NotificationsProvider>
+                  <DialogAreaProvider>
+                    <Content />
+                  </DialogAreaProvider>
+                </NotificationsProvider>
+              </SubaccountProvider>
+            </AccountsProvider>
+          </DydxProvider>
+        </LocaleProvider>
       </WagmiConfig>
     </GrazProvider>
   </QueryClientProvider>

src/constants/routes.ts

@@ -1,3 +1,5 @@
+import { DEFAULT_MARKETID } from './markets';
+
 export enum AppRoute {
   Markets = '/markets',
   Portfolio = '/portfolio',
@@ -31,7 +33,7 @@ export enum MobileSettingsRoute {
 export const TRADE_ROUTE = `${AppRoute.Trade}/:market`;
 export const PORTFOLIO_ROUTE = `${AppRoute.Portfolio}/:subroute`;
 export const HISTORY_ROUTE = `${AppRoute.Portfolio}/${PortfolioRoute.History}/:subroute`;
-export const DEFAULT_TRADE_ROUTE = `${AppRoute.Trade}/ETH-USD`;
+export const DEFAULT_TRADE_ROUTE = `${AppRoute.Trade}/${DEFAULT_MARKETID}`;
 export const SETTINGS_ROUTE = `${AppRoute.Settings}/*`;
 export const DEFAULT_DOCUMENT_TITLE = 'dYdX';
 

src/hooks/useCurrentMarketId.ts

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useMemo } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useMatch, useNavigate } from 'react-router-dom';
 
 import { LocalStorageKey } from '@/constants/localStorage';
@@ -13,6 +13,7 @@ import { setCurrentMarketId } from '@/state/perpetuals';
 import abacusStateManager from '@/lib/abacus';
 
 import { useLocalStorage } from './useLocalStorage';
+import { getMarketIds } from '@/state/perpetualsSelectors';
 
 export const useCurrentMarketId = () => {
   const navigate = useNavigate();
@@ -20,26 +21,27 @@ export const useCurrentMarketId = () => {
   const { marketId } = match?.params ?? {};
   const dispatch = useDispatch();
   const selectedNetwork = useSelector(getSelectedNetwork);
+  const marketIds = useSelector(getMarketIds, shallowEqual);
   const [lastViewedMarket, setLastViewedMarket] = useLocalStorage({
     key: LocalStorageKey.LastViewedMarket,
     defaultValue: DEFAULT_MARKETID,
   });
 
+  const validId = useMemo(() => {
+    if (marketIds.length === 0) return marketId ?? lastViewedMarket;
+    if (!marketIds.includes(marketId)) return DEFAULT_MARKETID;
+    return marketId ?? lastViewedMarket;
+  }, [marketIds, marketId]);
+
   useEffect(() => {
-    setLastViewedMarket(marketId ?? DEFAULT_MARKETID);
-    dispatch(setCurrentMarketId(marketId ?? DEFAULT_MARKETID));
+    setLastViewedMarket(validId);
+    dispatch(setCurrentMarketId(validId));
     dispatch(closeDialogInTradeBox());
 
-    if (!marketId) {
-      navigate(lastViewedMarket ? `${AppRoute.Trade}/${lastViewedMarket}` : DEFAULT_TRADE_ROUTE, {
-        replace: true,
-      });
-    } else {
-      navigate(`${AppRoute.Trade}/${marketId}`, {
-        replace: true,
-      });
-    }
-  }, [marketId]);
+    navigate(`${AppRoute.Trade}/${validId}`, {
+      replace: true,
+    });
+  }, [validId]);
 
   useEffect(() => {
     abacusStateManager.setMarket(marketId ?? DEFAULT_MARKETID);

src/main.tsx

@@ -1,5 +1,5 @@
 import './polyfills';
-import { Fragment, StrictMode } from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
@@ -11,15 +11,12 @@ import { ErrorBoundary } from './components/ErrorBoundary';
 import './index.css';
 
 import App from './App';
-import { LocaleProvider } from './hooks/useLocaleSeparators';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <ErrorBoundary>
     <StrictMode>
       <Provider store={store}>
-        <LocaleProvider>
-          <HashRouter children={<App />} />
-        </LocaleProvider>
+        <HashRouter children={<App />} />
       </Provider>
     </StrictMode>
   </ErrorBoundary>

src/views/forms/TradeForm/AdvancedTradeOptions.tsx

@@ -109,6 +109,7 @@ export const AdvancedTradeOptions = () => {
             {executionOptions && (
               <Styled.SelectMenu
                 value={execution}
+                label={stringGetter({ key: STRING_KEYS.EXECUTION })}
                 onValueChange={(selectedTimeInForceOption: string) =>
                   abacusStateManager.setTradeValue({
                     value: selectedTimeInForceOption,