diff --git a/src/App.tsx b/src/App.tsx index 1190db9..1869616 100644 --- a/src/App.tsx +++ b/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 = () => ( - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/src/constants/routes.ts b/src/constants/routes.ts index bd8642a..2017a83 100644 --- a/src/constants/routes.ts +++ b/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'; diff --git a/src/hooks/useCurrentMarketId.ts b/src/hooks/useCurrentMarketId.ts index 837a860..528364b 100644 --- a/src/hooks/useCurrentMarketId.ts +++ b/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); diff --git a/src/main.tsx b/src/main.tsx index 2a29686..e8a6619 100644 --- a/src/main.tsx +++ b/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( - - } /> - + } /> diff --git a/src/views/forms/TradeForm/AdvancedTradeOptions.tsx b/src/views/forms/TradeForm/AdvancedTradeOptions.tsx index 477f947..5fa2ef3 100644 --- a/src/views/forms/TradeForm/AdvancedTradeOptions.tsx +++ b/src/views/forms/TradeForm/AdvancedTradeOptions.tsx @@ -109,6 +109,7 @@ export const AdvancedTradeOptions = () => { {executionOptions && ( abacusStateManager.setTradeValue({ value: selectedTimeInForceOption,