diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx index 671b3e96e..f78298f8a 100644 --- a/apps/trading/client-pages/market/market.tsx +++ b/apps/trading/client-pages/market/market.tsx @@ -9,8 +9,6 @@ import { TradeGrid } from './trade-grid'; import { TradePanels } from './trade-panels'; import { useNavigate, useParams } from 'react-router-dom'; import { Links } from '../../lib/links'; -import { ViewType, useSidebar } from '../../components/sidebar'; -import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id'; import { useT, ns } from '../../lib/use-t'; import { Trans } from 'react-i18next'; @@ -61,9 +59,6 @@ export const MarketPage = () => { const t = useT(); const { marketId } = useParams(); const navigate = useNavigate(); - const currentRouteId = useGetCurrentRouteId(); - const { setViews, getView } = useSidebar(); - const view = getView(currentRouteId); const { screenSize } = useScreenDimensions(); const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize); const update = useGlobalStore((store) => store.update); @@ -77,12 +72,6 @@ export const MarketPage = () => { } }, [update, lastMarketId, data?.id]); - useEffect(() => { - if (largeScreen && view === undefined) { - setViews({ type: ViewType.Order }, currentRouteId); - } - }, [setViews, view, currentRouteId, largeScreen]); - const pinnedAsset = data && getAsset(data); const tradeView = useMemo(() => { diff --git a/apps/trading/client-pages/markets/markets-sidebar.tsx b/apps/trading/client-pages/markets/markets-sidebar.tsx index 1e2f1ed6a..30dd008f7 100644 --- a/apps/trading/client-pages/markets/markets-sidebar.tsx +++ b/apps/trading/client-pages/markets/markets-sidebar.tsx @@ -4,9 +4,26 @@ import { SidebarButton, SidebarDivider, ViewType, + useSidebar, } from '../../components/sidebar'; import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id'; import { useT } from '../../lib/use-t'; +import { useScreenDimensions } from '@vegaprotocol/react-helpers'; +import { useEffect } from 'react'; + +const ViewInitializer = () => { + const currentRouteId = useGetCurrentRouteId(); + const { setViews, getView } = useSidebar(); + const view = getView(currentRouteId); + const { screenSize } = useScreenDimensions(); + const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize); + useEffect(() => { + if (largeScreen && view === undefined) { + setViews({ type: ViewType.Order }, currentRouteId); + } + }, [setViews, view, currentRouteId, largeScreen]); + return null; +}; export const MarketsSidebar = () => { const t = useT(); @@ -37,6 +54,7 @@ export const MarketsSidebar = () => { path=":marketId" element={ <> + { ); }; -export const Portfolio = () => { - const t = useT(); +const SidebarViewInitializer = () => { const currentRouteId = useGetCurrentRouteId(); const { getView, setViews } = useSidebar(); const view = getView(currentRouteId); + // Make transfer sidebar open by default + useEffect(() => { + if (view === undefined) { + setViews({ type: ViewType.Transfer }, currentRouteId); + } + }, [view, setViews, currentRouteId]); + return null; +}; + +export const Portfolio = () => { + const t = useT(); const { updateTitle } = usePageTitleStore((store) => ({ updateTitle: store.updateTitle, @@ -53,17 +63,11 @@ export const Portfolio = () => { updateTitle(titlefy([t('Portfolio')])); }, [updateTitle, t]); - // Make transfer sidebar open by default - useEffect(() => { - if (view === undefined) { - setViews({ type: ViewType.Transfer }, currentRouteId); - } - }, [view, setViews, currentRouteId]); - const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' }); const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col'; return (
+