Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into chore/4764-remember-closed-sidebar

apps/governance-e2e/src/integration/flow/staking-flow.cy.ts

@@ -212,7 +212,7 @@ context(
         closeStakingDialog();
         navigateTo(navigation.validators);
         cy.get(`[row-id="${0}"]`)
-          .eq(1)
+          .first()
           .within(() => {
             cy.getByTestId(stakeValidatorListTotalStake)
               .should('have.text', '3,002.00')
@@ -222,7 +222,7 @@ context(
               .and('be.visible');
           });
         cy.get(`[row-id="${1}"]`)
-          .eq(1)
+          .first()
           .within(() => {
             cy.getByTestId(stakeValidatorListTotalStake)
               .scrollIntoView()

apps/trading/client-pages/market/trade-grid.tsx

@@ -56,6 +56,7 @@ const MainGrid = memo(
                 <Tabs storageKey="console-trade-grid-main-left">
                   <Tab
                     id="chart"
+                    overflowHidden
                     name={t('Chart')}
                     menu={<TradingViews.candles.menu />}
                   >
@@ -72,7 +73,7 @@ const MainGrid = memo(
             </ResizableGridPanel>
             <ResizableGridPanel
               minSize={200}
-              preferredSize={sizesMiddle[1] || 300}
+              preferredSize={sizesMiddle[1] || 275}
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
@@ -180,7 +181,7 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
         {({ width, height }) => (
           <div
             style={{ width, height }}
-            className="border border-default rounded-sm"
+            className="border rounded-sm border-default"
           >
             {children}
           </div>

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -15,7 +15,8 @@ export const LayoutWithSidebar = () => {
     'h-full relative z-0 grid',
     'grid-rows-[min-content_1fr_40px]',
     'lg:grid-rows-[min-content_1fr]',
-    'lg:grid-cols-[1fr_350px_40px]'
+    'lg:grid-cols-[1fr_280px_40px]',
+    'xxxl:grid-cols-[1fr_320px_40px]'
   );
 
   return (

apps/trading/components/welcome-dialog/get-started.tsx

@@ -73,7 +73,6 @@ export const GetStarted = ({ lead }: Props) => {
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
-  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
   const currentStep = useGetOnboardingStep();
   const dismissed = useOnboardingStore((store) => store.dismissed);
 
@@ -116,7 +115,7 @@ export const GetStarted = ({ lead }: Props) => {
         {VEGA_ENV === Networks.MAINNET && (
           <p className="text-sm">
             {t('Experiment for free with virtual assets on')}{' '}
-            <ExternalLink href={CANONICAL_URL}>
+            <ExternalLink href={VEGA_NETWORKS.TESTNET}>
               {t('Fairground Testnet')}
             </ExternalLink>
           </p>
@@ -124,7 +123,7 @@ export const GetStarted = ({ lead }: Props) => {
         {VEGA_ENV === Networks.TESTNET && (
           <p className="text-sm">
             {t('Ready to trade with real funds?')}{' '}
-            <ExternalLink href={CANONICAL_URL}>
+            <ExternalLink href={VEGA_NETWORKS.MAINNET}>
               {t('Switch to Mainnet')}
             </ExternalLink>
           </p>

apps/trading/pages/styles.css

@@ -83,8 +83,7 @@ html [data-theme='light'] {
   --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
 
   /* reduce space between candles */
-  --pennant-candlestick-inner-padding: 0.175;
-  --pennant-candlestick-stroke-width: 0.5;
+  --pennant-candlestick-inner-padding: 0.25;
 }
 
 html [data-theme='light'] {
@@ -162,11 +161,22 @@ html [data-theme='dark'] {
   @apply font-normal font-alpha;
 }
 
-/* Light variables */
-.ag-theme-balham {
+.ag-theme-balham,
+.ag-theme-balham-dark {
   --ag-grid-size: 2px; /* Used for compactness */
   --ag-row-height: 36px;
-  --ag-header-height: 36px;
+  --ag-header-height: 28px;
+}
+
+@media (min-width: theme(screens.xxl)) {
+  .ag-theme-balham,
+  .ag-theme-balham-dark {
+    --ag-header-height: 36px;
+  }
+}
+
+/* Light variables */
+.ag-theme-balham {
   --ag-background-color: theme(colors.white);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
@@ -179,9 +189,6 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
-  --ag-row-height: 36px;
-  --ag-header-height: 36px;
   --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);
@@ -191,6 +198,7 @@ html [data-theme='dark'] {
   --ag-row-hover-color: theme(colors.vega.cdark.800);
   --ag-modal-overlay-background-color: rgb(9 11 16 / 50%);
 }
+
 .ag-theme-balham-dark .ag-row.no-hover,
 .ag-theme-balham-dark .ag-row.no-hover:hover,
 .ag-theme-balham .ag-row.no-hover,

libs/candles-chart/src/lib/candles-chart.tsx

@@ -8,13 +8,16 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-import { useCandlesChartSettings } from './use-candles-chart-settings';
+import {
+  STUDY_SIZE,
+  useCandlesChartSettings,
+} from './use-candles-chart-settings';
 
 export type CandlesChartContainerProps = {
   marketId: string;
 };
 
-const CANDLES_TO_WIDTH_FACTOR = 0.15;
+const CANDLES_TO_WIDTH_FACTOR = 0.2;
 
 export const CandlesChartContainer = ({
   marketId,
@@ -49,33 +52,34 @@ export const CandlesChartContainer = ({
 
   return (
     <AutoSizer>
-      {({ width, height }) => (
-        <div style={{ width, height }}>
-          <CandlestickChart
-            dataSource={dataSource}
-            options={{
-              chartType,
-              overlays,
-              studies,
-              notEnoughDataText: (
-                <span className="text-xs text-center">{t('No data')}</span>
-              ),
-              initialNumCandlesToDisplay: Math.floor(
-                width * CANDLES_TO_WIDTH_FACTOR
-              ),
-              studySize: 150, // default size
-              studySizes,
-            }}
-            interval={interval}
-            theme={theme}
-            onOptionsChanged={(options) => {
-              setStudies(options.studies);
-              setOverlays(options.overlays);
-            }}
-            onPaneChanged={handlePaneChange}
-          />
-        </div>
-      )}
+      {({ width, height }) => {
+        const candlesCount = Math.floor(width * CANDLES_TO_WIDTH_FACTOR);
+        return (
+          <div style={{ width, height }}>
+            <CandlestickChart
+              dataSource={dataSource}
+              options={{
+                chartType,
+                overlays,
+                studies,
+                notEnoughDataText: (
+                  <span className="text-xs text-center">{t('No data')}</span>
+                ),
+                initialNumCandlesToDisplay: candlesCount,
+                studySize: STUDY_SIZE,
+                studySizes,
+              }}
+              interval={interval}
+              theme={theme}
+              onOptionsChanged={(options) => {
+                setStudies(options.studies);
+                setOverlays(options.overlays);
+              }}
+              onPaneChanged={handlePaneChange}
+            />
+          </div>
+        );
+      }}
     </AutoSizer>
   );
 };

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -15,7 +15,7 @@ interface StoredSettings {
   studySizes: StudySizes;
 }
 
-export const STUDY_SIZE = 100;
+export const STUDY_SIZE = 90;
 const STUDY_ORDER: Study[] = [
   Study.FORCE_INDEX,
   Study.RELATIVE_STRENGTH_INDEX,

libs/ui-toolkit/src/components/tabs/tabs.tsx

@@ -113,7 +113,9 @@ export const Tabs = ({
           return (
             <TabsPrimitive.Content
               value={child.props.id}
-              className="h-full"
+              className={classNames('h-full', {
+                'overflow-hidden': child.props.overflowHidden,
+              })}
               data-testid={`tab-${child.props.id}`}
             >
               {child.props.children}
@@ -131,6 +133,7 @@ interface TabProps {
   name: string;
   indicator?: ReactNode;
   hidden?: boolean;
+  overflowHidden?: boolean;
   menu?: ReactNode;
 }