diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 929108fc5..57b832c8f 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -8,7 +8,7 @@ import { TradesContainer } from '@vegaprotocol/trades';
import { LayoutPriority } from 'allotment';
import classNames from 'classnames';
import AutoSizer from 'react-virtualized-auto-sizer';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
import type { ReactNode, ComponentProps } from 'react';
import { DepthChartContainer } from '@vegaprotocol/market-depth';
import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
@@ -70,6 +70,116 @@ interface TradeGridProps {
pinnedAsset?: PinnedAsset;
}
+interface BottomPanelProps {
+ marketId: string;
+ pinnedAsset?: PinnedAsset;
+}
+
+const MarketBottomPanel = memo(
+ ({ marketId, pinnedAsset }: BottomPanelProps) => {
+ const { screenSize } = useScreenDimensions();
+ const navigate = useNavigate();
+ const onMarketClick = useCallback(
+ (marketId: string) => {
+ navigate(Links[Routes.MARKET](marketId), {
+ replace: true,
+ });
+ },
+ [navigate]
+ );
+
+ return 'xxl' === screenSize ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+);
+MarketBottomPanel.displayName = 'MarketBottomPanel';
+
const MainGrid = memo(
({
marketId,
@@ -81,110 +191,6 @@ const MainGrid = memo(
pinnedAsset?: PinnedAsset;
}) => {
const navigate = useNavigate();
- const { screenSize } = useScreenDimensions();
- const onMarketClick = useCallback(
- (marketId: string) => {
- navigate(Links[Routes.MARKET](marketId), {
- replace: true,
- });
- },
- [navigate]
- );
-
- const bottomPanel = useMemo(() => {
- return ['xl', 'xxl'].includes(screenSize) ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }, [screenSize, marketId, onMarketClick, pinnedAsset]);
-
return (
@@ -255,7 +261,7 @@ const MainGrid = memo(
preferredSize="25%"
minSize={50}
>
- {bottomPanel}
+
);