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 (