test: fixed settlement asset displayed

2023-03-15 19:15:54 +01:00
35 changed files with 1131 additions and 1787 deletions
@@ -2,11 +2,11 @@
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
-NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
+NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io

 NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
-NX_TENDERMINT_URL=https://tm-be.validators-testnet.vega.rocks
-NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.rocks/
+NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.xyz
+NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.xyz/rest
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
@@ -10,7 +10,7 @@ export const Footer = () => {
  const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
  const { screenSize } = useScreenDimensions();
  const showFullFeedbackLabel = useMemo(
-    () => ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize),
+    () => ['lg', 'xl'].includes(screenSize),
    [screenSize]
  );

@@ -2,8 +2,6 @@
  "changes": {
    "decimalPlaces": "5",
    "positionDecimalPlaces": "5",
-    "linearSlippageFactor": "0.001",
-    "quadraticSlippageFactor": "0",
    "lpPriceRange": "10",
    "instrument": {
      "name": "Token test market",
@@ -1,7 +1,5 @@
 {
  "lpPriceRange": "10",
-  "linearSlippageFactor": "0.001",
-  "quadraticSlippageFactor": "0",
  "instrument": {
    "code": "TEST.24h",
    "future": {
@@ -110,9 +110,10 @@ Cypress.Commands.add('vega_wallet_teardown', function () {
    }
  });
  cy.get(vegaWalletContainer).within(() => {
-    cy.get('[data-testid="vega-wallet-balance-unstaked"]', {
-      timeout: 30000,
-    }).should('contain.text', '0.00');
+    cy.get('[data-testid="associated-amount"]', { timeout: 30000 }).should(
+      'contain.text',
+      '0.00'
+    );
  });
 });

@@ -2,7 +2,7 @@
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
-NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
+NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { forwardRef, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Button, Icon } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import { useAppState } from '../../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../../lib/bignumber';
@@ -87,12 +87,7 @@ const TopThirdCellRenderer = (
        <div className="mb-4">
          <Button
            data-testid="show-all-validators"
-            rightIcon={
-              <Icon
-                name="arrow-right"
-                className="fill-current mr-2 align-text-top"
-              />
-            }
+            rightIcon="arrow-right"
            className="inline-flex items-center"
          >
            {t('Reveal top validators')}
@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api-n04.d.vega.rocks/graphql"]
+  "hosts": ["https://api.n04.d.vega.xyz/graphql"]
 }
@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api-n00.mainnet-mirror.vega.rocks/graphql"]
+  "hosts": ["https://api.n00.mainnet-mirror.vega.xyz/graphql"]
 }
@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api-n01.sandbox.vega.rocks/graphql"]
+  "hosts": ["https://api.n01.sandbox.vega.xyz/graphql"]
 }
@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api-n00.stagnet1.vega.rocks/graphql"]
+  "hosts": ["https://api.n00.stagnet1.vega.xyz/graphql"]
 }
@@ -1,3 +1,3 @@
 {
-  "hosts": ["https://api-stagnet3.vega.rocks/graphql"]
+  "hosts": ["https://api.stagnet3.vega.xyz/graphql"]
 }
@@ -1,11 +1,11 @@
 {
  "hosts": [
-    "https://api-n06.testnet.vega.rocks/graphql",
-    "https://api-n07.testnet.vega.rocks/graphql",
-    "https://api-n08.testnet.vega.rocks/graphql",
-    "https://api-n09.testnet.vega.rocks/graphql",
-    "https://api-n10.testnet.vega.rocks/graphql",
-    "https://api-n11.testnet.vega.rocks/graphql",
-    "https://api-n12.testnet.vega.rocks/graphql"
+    "https://api.n06.testnet.vega.xyz/graphql",
+    "https://api.n07.testnet.vega.xyz/graphql",
+    "https://api.n08.testnet.vega.xyz/graphql",
+    "https://api.n09.testnet.vega.xyz/graphql",
+    "https://api.n10.testnet.vega.xyz/graphql",
+    "https://api.n11.testnet.vega.xyz/graphql",
+    "https://api.n12.testnet.vega.xyz/graphql"
  ]
 }
@@ -216,60 +216,6 @@ describe('Market trading page', () => {
        });
    });
  });
-
-  describe('market bottom panel', { tags: '@smoke' }, () => {
-    it('on xxl screen should be splitted out into two tables', () => {
-      cy.getByTestId('tab-positions').should(
-        'have.attr',
-        'data-state',
-        'active'
-      );
-      cy.getByTestId('tab-orders').should(
-        'have.attr',
-        'data-state',
-        'inactive'
-      );
-      cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'inactive');
-      cy.getByTestId('tab-accounts').should(
-        'have.attr',
-        'data-state',
-        'inactive'
-      );
-
-      cy.viewport(1801, 1000);
-      cy.getByTestId('tab-positions').should(
-        'have.attr',
-        'data-state',
-        'active'
-      );
-      cy.getByTestId('tab-orders').should('have.attr', 'data-state', 'active');
-      cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'inactive');
-      cy.getByTestId('tab-accounts').should(
-        'have.attr',
-        'data-state',
-        'inactive'
-      );
-
-      cy.getByTestId('Fills').click();
-      cy.getByTestId('Collateral').click();
-      cy.getByTestId('tab-positions').should(
-        'have.attr',
-        'data-state',
-        'inactive'
-      );
-      cy.getByTestId('tab-orders').should(
-        'have.attr',
-        'data-state',
-        'inactive'
-      );
-      cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'active');
-      cy.getByTestId('tab-accounts').should(
-        'have.attr',
-        'data-state',
-        'active'
-      );
-    });
-  });
 });

 describe('market states not accepting orders', { tags: '@smoke' }, function () {
@@ -1,58 +0,0 @@
-import { connectEthereumWallet } from '../support/ethereum-wallet';
-
-const connectEthWalletBtn = 'connect-eth-wallet-btn';
-
-describe('ethereum wallet', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.mockWeb3Provider();
-    // Using portfolio withdrawals tab is it requires Ethereum wallet connection
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
-    cy.getByTestId('Withdrawals').click();
-  });
-
-  it('can connect', () => {
-    // 0004-EWAL-001
-
-    cy.wait('@NetworkParams');
-    cy.getByTestId('Deposits').click();
-    cy.getByTestId('deposit-button').click();
-    cy.getByTestId('connect-eth-wallet-btn').click();
-    cy.getByTestId('web3-connector-list').should('exist');
-    cy.getByTestId('web3-connector-MetaMask').click();
-    cy.getByTestId('web3-connector-list').should('not.exist');
-    cy.getByTestId('tab-deposits').should('not.be.empty');
-  });
-
-  it('should see an option to cancel the attempted connection', () => {
-    // 0004-EWAL-003
-
-    cy.wait('@NetworkParams');
-    cy.getByTestId('Deposits').click();
-    cy.getByTestId('deposit-button').click();
-    cy.getByTestId('connect-eth-wallet-btn').click();
-    cy.getByTestId('web3-connector-list').should('exist');
-    cy.getByTestId('web3-connector-WalletConnect').click();
-    cy.get('#walletconnect-qrcode-text').should('exist');
-    cy.get('#walletconnect-qrcode-close').click();
-  });
-
-  it('able to disconnect eth wallet', () => {
-    // 0004-EWAL-004
-    // 0004-EWAL-005
-    // 0004-EWAL-006
-
-    const ethWalletAddress = Cypress.env('ETHEREUM_WALLET_ADDRESS');
-    cy.getByTestId('Deposits').click();
-    cy.getByTestId('deposit-button').click();
-    connectEthereumWallet('MetaMask');
-    cy.getByTestId('ethereum-address').should('have.text', ethWalletAddress);
-    cy.getByTestId('disconnect-ethereum-wallet')
-      .should('have.text', 'Disconnect')
-      .click();
-    cy.getByTestId(connectEthWalletBtn).should('exist');
-  });
-});
@@ -1,8 +1,7 @@
-import {
-  mockConnectWallet,
-  mockConnectWalletWithUserError,
-} from '@vegaprotocol/cypress';
+import { mockConnectWallet } from '@vegaprotocol/cypress';
+import { connectEthereumWallet } from '../support/ethereum-wallet';

+const connectEthWalletBtn = 'connect-eth-wallet-btn';
 const connectVegaBtn = 'connect-vega-wallet';
 const manageVegaBtn = 'manage-vega-wallet';
 const form = 'rest-connector-form';
@@ -128,21 +127,6 @@ describe('connect vega wallet', { tags: '@smoke' }, () => {
    cy.getByTestId(manageVegaBtn).should('exist');
  });

-  it('can not connect', () => {
-    // 0002-WCON-002
-    // 0002-WCON-005
-    // 0002-WCON-007
-
-    mockConnectWalletWithUserError();
-    cy.getByTestId(connectVegaBtn).click();
-    cy.getByTestId('connectors-list')
-      .find('[data-testid="connector-jsonRpc"]')
-      .click();
-    cy.getByTestId('dialog-content')
-      .should('contain.text', 'User error')
-      .and('contain.text', 'the user rejected the wallet connection');
-  });
-
  it('can change selected public key and disconnect', () => {
    // 0002-WCON-022
    // 0002-WCON-023
@@ -180,3 +164,39 @@ describe('connect vega wallet', { tags: '@smoke' }, () => {
    );
  });
 });
+
+describe('ethereum wallet', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockWeb3Provider();
+    // Using portfolio withdrawals tab is it requires Ethereum wallet connection
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+    cy.visit('/#/portfolio');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.getByTestId('Withdrawals').click();
+  });
+
+  it('can connect', () => {
+    cy.wait('@NetworkParams');
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    cy.getByTestId('connect-eth-wallet-btn').click();
+    cy.getByTestId('web3-connector-list').should('exist');
+    cy.getByTestId('web3-connector-MetaMask').click();
+    cy.getByTestId('web3-connector-list').should('not.exist');
+    cy.getByTestId('tab-deposits').should('not.be.empty');
+  });
+
+  it('able to disconnect eth wallet', () => {
+    const ethWalletAddress = Cypress.env('ETHEREUM_WALLET_ADDRESS');
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    connectEthereumWallet('MetaMask');
+    cy.getByTestId('ethereum-address').should('have.text', ethWalletAddress);
+    cy.getByTestId('disconnect-ethereum-wallet')
+      .should('have.text', 'Disconnect')
+      .click();
+    cy.getByTestId(connectEthWalletBtn).should('exist');
+  });
+});
@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
  useDataProvider,
-  useScreenDimensions,
  useThrottledDataProvider,
 } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
@@ -61,8 +61,7 @@ export const MarketPage = () => {
  const { marketId } = useParams();
  const navigate = useNavigate();

-  const { screenSize } = useScreenDimensions();
-  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
+  const { w } = useWindowSize();
  const update = useGlobalStore((store) => store.update);
  const lastMarketId = useGlobalStore((store) => store.marketId);

@@ -88,7 +87,7 @@ export const MarketPage = () => {
  }, [update, lastMarketId, data?.id]);

  const tradeView = useMemo(() => {
-    if (largeScreen) {
+    if (w > 960) {
      return (
        <TradeGrid
          market={data}
@@ -106,7 +105,7 @@ export const MarketPage = () => {
        onClickCollateral={() => navigate('/portfolio')}
      />
    );
-  }, [largeScreen, data, onSelect, navigate]);
+  }, [w, data, onSelect, navigate]);
  if (!data && marketId) {
    return (
      <Splash>
@@ -141,3 +140,37 @@ export const MarketPage = () => {
    </AsyncRenderer>
  );
 };
+
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return {
+        w: window.innerWidth,
+        h: window.innerHeight,
+      };
+    }
+
+    // Something sensible for server rendered page
+    return {
+      w: 1200,
+      h: 900,
+    };
+  });
+
+  useEffect(() => {
+    const handleResize = debounce(({ target }) => {
+      setWindowSize({
+        w: target.innerWidth,
+        h: target.innerHeight,
+      });
+    }, 300);
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return windowSize;
+};
@@ -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, useState } from 'react';
+import { memo, useState } from 'react';
 import type { ReactNode, ComponentProps } from 'react';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
@@ -29,7 +29,6 @@ import { LiquidityContainer } from '../liquidity/liquidity';
 import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';

 type MarketDependantView =
  | typeof CandlesChartContainer
@@ -70,204 +69,129 @@ interface TradeGridProps {
  pinnedAsset?: PinnedAsset;
 }

-interface BottomPanelProps {
+const MainGrid = ({
+  marketId,
+  onSelect,
+  pinnedAsset,
+}: {
  marketId: string;
+  onSelect?: (marketId: string) => void;
  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 'xxxl' === screenSize ? (
-      <ResizableGrid proportionalLayout minSize={200}>
-        <ResizableGridPanel
-          priority={LayoutPriority.Low}
-          preferredSize="50%"
-          minSize={50}
-        >
-          <TradeGridChild>
-            <Tabs>
-              <Tab id="orders" name={t('Orders')}>
-                <VegaWalletContainer>
-                  <TradingViews.Orders
+}) => {
+  const navigate = useNavigate();
+  const onMarketClick = (marketId: string) => {
+    navigate(Links[Routes.MARKET](marketId), {
+      replace: true,
+    });
+  };
+  return (
+    <ResizableGrid vertical>
+      <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
+        <ResizableGrid proportionalLayout={false} minSize={200}>
+          <ResizableGridPanel
+            priority={LayoutPriority.High}
+            minSize={200}
+            preferredSize="50%"
+          >
+            <TradeGridChild>
+              <Tabs>
+                <Tab id="chart" name={t('Chart')}>
+                  <TradingViews.Candles marketId={marketId} />
+                </Tab>
+                <Tab id="depth" name={t('Depth')}>
+                  <TradingViews.Depth marketId={marketId} />
+                </Tab>
+                <Tab id="liquidity" name={t('Liquidity')}>
+                  <TradingViews.Liquidity marketId={marketId} />
+                </Tab>
+              </Tabs>
+            </TradeGridChild>
+          </ResizableGridPanel>
+          <ResizableGridPanel
+            priority={LayoutPriority.Low}
+            preferredSize={330}
+            minSize={300}
+          >
+            <TradeGridChild>
+              <Tabs>
+                <Tab id="ticket" name={t('Ticket')}>
+                  <TradingViews.Ticket
                    marketId={marketId}
-                    onMarketClick={onMarketClick}
+                    onClickCollateral={() => navigate('/portfolio')}
                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="fills" name={t('Fills')}>
-                <VegaWalletContainer>
-                  <TradingViews.Fills
+                </Tab>
+                <Tab id="info" name={t('Info')}>
+                  <TradingViews.Info
                    marketId={marketId}
-                    onMarketClick={onMarketClick}
+                    onSelect={(id: string) => {
+                      onSelect?.(id);
+                    }}
                  />
-                </VegaWalletContainer>
-              </Tab>
-            </Tabs>
-          </TradeGridChild>
-        </ResizableGridPanel>
-        <ResizableGridPanel
-          priority={LayoutPriority.Low}
-          preferredSize="50%"
-          minSize={50}
-        >
-          <TradeGridChild>
-            <Tabs>
-              <Tab id="positions" name={t('Positions')}>
-                <VegaWalletContainer>
-                  <TradingViews.Positions
-                    onMarketClick={onMarketClick}
-                    noBottomPlaceholder
-                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="accounts" name={t('Collateral')}>
-                <VegaWalletContainer>
-                  <TradingViews.Collateral
-                    pinnedAsset={pinnedAsset}
-                    noBottomPlaceholder
-                    hideButtons
-                  />
-                </VegaWalletContainer>
-              </Tab>
-            </Tabs>
-          </TradeGridChild>
-        </ResizableGridPanel>
-      </ResizableGrid>
-    ) : (
-      <TradeGridChild>
-        <Tabs>
-          <Tab id="positions" name={t('Positions')}>
-            <VegaWalletContainer>
-              <TradingViews.Positions onMarketClick={onMarketClick} />
-            </VegaWalletContainer>
-          </Tab>
-          <Tab id="orders" name={t('Orders')}>
-            <VegaWalletContainer>
-              <TradingViews.Orders
-                marketId={marketId}
-                onMarketClick={onMarketClick}
-              />
-            </VegaWalletContainer>
-          </Tab>
-          <Tab id="fills" name={t('Fills')}>
-            <VegaWalletContainer>
-              <TradingViews.Fills
-                marketId={marketId}
-                onMarketClick={onMarketClick}
-              />
-            </VegaWalletContainer>
-          </Tab>
-          <Tab id="accounts" name={t('Collateral')}>
-            <VegaWalletContainer>
-              <TradingViews.Collateral pinnedAsset={pinnedAsset} hideButtons />
-            </VegaWalletContainer>
-          </Tab>
-        </Tabs>
-      </TradeGridChild>
-    );
-  }
-);
-MarketBottomPanel.displayName = 'MarketBottomPanel';
-
-const MainGrid = memo(
-  ({
-    marketId,
-    onSelect,
-    pinnedAsset,
-  }: {
-    marketId: string;
-    onSelect?: (marketId: string) => void;
-    pinnedAsset?: PinnedAsset;
-  }) => {
-    const navigate = useNavigate();
-    return (
-      <ResizableGrid vertical>
-        <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
-          <ResizableGrid proportionalLayout={false} minSize={200}>
-            <ResizableGridPanel
-              priority={LayoutPriority.High}
-              minSize={200}
-              preferredSize="50%"
-            >
-              <TradeGridChild>
-                <Tabs>
-                  <Tab id="chart" name={t('Chart')}>
-                    <TradingViews.Candles marketId={marketId} />
-                  </Tab>
-                  <Tab id="depth" name={t('Depth')}>
-                    <TradingViews.Depth marketId={marketId} />
-                  </Tab>
-                  <Tab id="liquidity" name={t('Liquidity')}>
-                    <TradingViews.Liquidity marketId={marketId} />
-                  </Tab>
-                </Tabs>
-              </TradeGridChild>
-            </ResizableGridPanel>
-            <ResizableGridPanel
-              priority={LayoutPriority.Low}
-              preferredSize={330}
-              minSize={300}
-            >
-              <TradeGridChild>
-                <Tabs>
-                  <Tab id="ticket" name={t('Ticket')}>
-                    <TradingViews.Ticket
-                      marketId={marketId}
-                      onClickCollateral={() => navigate('/portfolio')}
-                    />
-                  </Tab>
-                  <Tab id="info" name={t('Info')}>
-                    <TradingViews.Info
-                      marketId={marketId}
-                      onSelect={(id: string) => {
-                        onSelect?.(id);
-                      }}
-                    />
-                  </Tab>
-                </Tabs>
-              </TradeGridChild>
-            </ResizableGridPanel>
-            <ResizableGridPanel
-              priority={LayoutPriority.Low}
-              preferredSize={430}
-              minSize={200}
-            >
-              <TradeGridChild>
-                <Tabs>
-                  <Tab id="orderbook" name={t('Orderbook')}>
-                    <TradingViews.Orderbook marketId={marketId} />
-                  </Tab>
-                  <Tab id="trades" name={t('Trades')}>
-                    <TradingViews.Trades marketId={marketId} />
-                  </Tab>
-                </Tabs>
-              </TradeGridChild>
-            </ResizableGridPanel>
-          </ResizableGrid>
-        </ResizableGridPanel>
-        <ResizableGridPanel
-          priority={LayoutPriority.Low}
-          preferredSize="25%"
-          minSize={50}
-        >
-          <MarketBottomPanel marketId={marketId} pinnedAsset={pinnedAsset} />
-        </ResizableGridPanel>
-      </ResizableGrid>
-    );
-  }
-);
-MainGrid.displayName = 'MainGrid';
+                </Tab>
+              </Tabs>
+            </TradeGridChild>
+          </ResizableGridPanel>
+          <ResizableGridPanel
+            priority={LayoutPriority.Low}
+            preferredSize={430}
+            minSize={200}
+          >
+            <TradeGridChild>
+              <Tabs>
+                <Tab id="orderbook" name={t('Orderbook')}>
+                  <TradingViews.Orderbook marketId={marketId} />
+                </Tab>
+                <Tab id="trades" name={t('Trades')}>
+                  <TradingViews.Trades marketId={marketId} />
+                </Tab>
+              </Tabs>
+            </TradeGridChild>
+          </ResizableGridPanel>
+        </ResizableGrid>
+      </ResizableGridPanel>
+      <ResizableGridPanel
+        priority={LayoutPriority.Low}
+        preferredSize="25%"
+        minSize={50}
+      >
+        <TradeGridChild>
+          <Tabs>
+            <Tab id="positions" name={t('Positions')}>
+              <VegaWalletContainer>
+                <TradingViews.Positions onMarketClick={onMarketClick} />
+              </VegaWalletContainer>
+            </Tab>
+            <Tab id="orders" name={t('Orders')}>
+              <VegaWalletContainer>
+                <TradingViews.Orders
+                  marketId={marketId}
+                  onMarketClick={onMarketClick}
+                />
+              </VegaWalletContainer>
+            </Tab>
+            <Tab id="fills" name={t('Fills')}>
+              <VegaWalletContainer>
+                <TradingViews.Fills
+                  marketId={marketId}
+                  onMarketClick={onMarketClick}
+                />
+              </VegaWalletContainer>
+            </Tab>
+            <Tab id="accounts" name={t('Collateral')}>
+              <VegaWalletContainer>
+                <TradingViews.Collateral
+                  pinnedAsset={pinnedAsset}
+                  hideButtons
+                />
+              </VegaWalletContainer>
+            </Tab>
+          </Tabs>
+        </TradeGridChild>
+      </ResizableGridPanel>
+    </ResizableGrid>
+  );
+};
+const MainGridWrapped = memo(MainGrid);

 export const TradeGrid = ({
  market,
@@ -277,7 +201,7 @@ export const TradeGrid = ({
  return (
    <div className="h-full grid grid-rows-[min-content_1fr]">
      <TradeMarketHeader market={market} onSelect={onSelect} />
-      <MainGrid
+      <MainGridWrapped
        marketId={market?.id || ''}
        onSelect={onSelect}
        pinnedAsset={pinnedAsset}
@@ -12,11 +12,9 @@ import { useDepositDialog } from '@vegaprotocol/deposits';
 export const AccountsContainer = ({
  pinnedAsset,
  hideButtons,
-  noBottomPlaceholder,
 }: {
  pinnedAsset?: PinnedAsset;
  hideButtons?: boolean;
-  noBottomPlaceholder?: boolean;
 }) => {
  const { pubKey, isReadOnly } = useVegaWallet();
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
@@ -48,7 +46,6 @@ export const AccountsContainer = ({
        onClickDeposit={openDepositDialog}
        isReadOnly={isReadOnly}
        pinnedAsset={pinnedAsset}
-        noBottomPlaceholder={noBottomPlaceholder}
      />
      {!isReadOnly && !hideButtons && (
        <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">
@@ -19,7 +19,6 @@ interface AccountManagerProps {
  onClickDeposit?: (assetId?: string) => void;
  isReadOnly: boolean;
  pinnedAsset?: PinnedAsset;
-  noBottomPlaceholder?: boolean;
 }

 export const AccountManager = ({
@@ -29,7 +28,6 @@ export const AccountManager = ({
  partyId,
  isReadOnly,
  pinnedAsset,
-  noBottomPlaceholder,
 }: AccountManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -47,7 +45,6 @@ export const AccountManager = ({
  const bottomPlaceholderProps = useBottomPlaceholder<AccountFields>({
    gridRef,
    setId,
-    disabled: noBottomPlaceholder,
  });

  const getRowHeight = useCallback(
@@ -46,10 +46,7 @@ addVegaWalletSubmitProposal();
 addVegaWalletSubmitLiquidityProvision();
 addImportNodeWallets();

-export {
-  mockConnectWallet,
-  mockConnectWalletWithUserError,
-} from './lib/commands/vega-wallet-connect';
+export { mockConnectWallet } from './lib/commands/vega-wallet-connect';
 export type { onMessage } from './lib/mock-ws';
 export { aliasGQLQuery } from './lib/mock-gql';
 export { aliasWalletQuery } from './lib/mock-rest';
@@ -35,8 +35,6 @@ function createNewMarketProposal(): ProposalSubmissionBody {
          changes: {
            decimalPlaces: '5',
            positionDecimalPlaces: '5',
-            linearSlippageFactor: '0.001',
-            quadraticSlippageFactor: '0',
            lpPriceRange: '10',
            instrument: {
              name: 'Test market 1',
@@ -1,7 +1,4 @@
-import {
-  aliasWalletConnectQuery,
-  aliasWalletConnectWithUserError,
-} from '../mock-rest';
+import { aliasWalletConnectQuery } from '../mock-rest';

 declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -23,12 +20,6 @@ export const mockConnectWallet = () => {
  });
 };

-export const mockConnectWalletWithUserError = () => {
-  cy.mockWallet((req) => {
-    aliasWalletConnectWithUserError(req);
-  });
-};
-
 export function addVegaWalletConnect() {
  Cypress.Commands.add('connectVegaWallet', (isMobile) => {
    mockConnectWallet();
@@ -63,23 +63,3 @@ export const aliasWalletConnectQuery = (
    });
  }
 };
-
-export const aliasWalletConnectWithUserError = (
-  req: CyHttpMessages.IncomingHttpRequest
-) => {
-  if (hasMethod(req, 'client.connect_wallet')) {
-    req.alias = 'client.connect_wallet';
-    req.reply({
-      statusCode: 400,
-      body: {
-        jsonrpc: '2.0',
-        error: {
-          code: 3001,
-          data: 'the user rejected the wallet connection',
-          message: 'User error',
-        },
-        id: '0',
-      },
-    });
-  }
-};
@@ -68,11 +68,10 @@ export const PositionsManager = ({
  const bottomPlaceholderProps = useBottomPlaceholder<Position>({
    gridRef,
    setId,
-    disabled: noBottomPlaceholder,
  });
  useEffect(() => {
    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
-  }, [data?.length]);
+  }, [data]);
  const onFilterChanged = useCallback((event: FilterChangedEvent) => {
    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
  }, []);
@@ -87,7 +86,7 @@ export const PositionsManager = ({
        suppressNoRowsOverlay
        isReadOnly={isReadOnly}
        onFilterChanged={onFilterChanged}
-        {...bottomPlaceholderProps}
+        {...(noBottomPlaceholder ? null : bottomPlaceholderProps)}
      />
      <div className="pointer-events-none absolute inset-0">
        <AsyncRenderer
@@ -116,7 +116,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
              value
            )
          }
-          minWidth={190}
        />
        <AgGridColumn
          headerName={t('Notional')}
@@ -142,7 +141,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                  data.marketDecimalPlaces
                );
          }}
-          minWidth={80}
        />
        <AgGridColumn
          headerName={t('Open volume')}
@@ -176,7 +174,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                );
          }}
          cellRenderer={OpenVolumeCell}
-          minWidth={100}
        />
        <AgGridColumn
          headerName={t('Mark price')}
@@ -216,13 +213,8 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
              data.marketDecimalPlaces
            );
          }}
-          minWidth={100}
-        />
-        <AgGridColumn
-          headerName={t('Settlement asset')}
-          field="assetSymbol"
-          minWidth={100}
        />
+        <AgGridColumn headerName={t('Settlement asset')} field="assetSymbol" />
        <AgGridColumn
          headerName={t('Entry price')}
          field="averageEntryPrice"
@@ -256,7 +248,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
              data.marketDecimalPlaces
            );
          }}
-          minWidth={100}
        />
        <AgGridColumn
          headerName={t('Leverage')}
@@ -273,7 +264,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
          }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
            value === undefined ? undefined : formatNumber(value.toString(), 1)
          }
-          minWidth={100}
        />
        <AgGridColumn
          headerName={t('Margin allocated')}
@@ -305,7 +295,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
              data.decimals
            );
          }}
-          minWidth={100}
        />
        <AgGridColumn
          headerName={t('Realised PNL')}
@@ -332,7 +321,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
            'Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.'
          )}
          cellRenderer={PNLCell}
-          minWidth={100}
        />
        <AgGridColumn
          headerName={t('Unrealised PNL')}
@@ -359,7 +347,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
            'Unrealised profit is the current profit on your open position. Margin is still allocated to your position.'
          )}
          cellRenderer={PNLCell}
-          minWidth={100}
        />
        <AgGridColumn
          headerName={t('Updated')}
@@ -374,7 +361,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
            }
            return getDateTimeFormat().format(new Date(value));
          }}
-          minWidth={150}
        />
        {onClose && !props.isReadOnly ? (
          <AgGridColumn
@@ -389,7 +375,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                </ButtonLink>
              ) : null
            }
-            minWidth={80}
          />
        ) : null}
      </AgGrid>
@@ -11,13 +11,11 @@ const isFullWidthRow = (params: IsFullWidthRowParams) =>
 interface Props<T> {
  gridRef: RefObject<AgGridReact>;
  setId?: (data: T) => T;
-  disabled?: boolean;
 }
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const useBottomPlaceholder = <T extends {}>({
  gridRef,
  setId,
-  disabled,
 }: Props<T>) => {
  const onBodyScrollEnd = useCallback(() => {
    const rowCont = gridRef.current?.api.getModel().getRowCount() ?? 0;
@@ -60,17 +58,14 @@ export const useBottomPlaceholder = <T extends {}>({
  }, [gridRef, onBodyScrollEnd]);

  return useMemo(
-    () =>
-      !disabled
-        ? {
-            onBodyScrollEnd,
-            rowClassRules: NO_HOVER_CSS_RULE,
-            isFullWidthRow,
-            fullWidthCellRenderer,
-            onSortChanged: onRowsChanged,
-            onFilterChange: onRowsChanged,
-          }
-        : {},
-    [onBodyScrollEnd, onRowsChanged, disabled]
+    () => ({
+      onBodyScrollEnd,
+      rowClassRules: NO_HOVER_CSS_RULE,
+      isFullWidthRow,
+      fullWidthCellRenderer,
+      onSortChanged: onRowsChanged,
+      onFilterChange: onRowsChanged,
+    }),
+    [onBodyScrollEnd, onRowsChanged]
  );
 };
@@ -1,19 +1,10 @@
 import { useRef, useEffect, useState } from 'react';

-const SERVER_SIDE_DIMENSIONS = {
-  width: 1200,
-  height: 900,
-};
-
 export const useResize = () => {
-  const [windowSize, setWindowSize] = useState(
-    typeof window !== undefined
-      ? {
-          width: window.innerWidth,
-          height: window.innerHeight,
-        }
-      : { ...SERVER_SIDE_DIMENSIONS }
-  );
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });

  const timeout = useRef(0);

@@ -1,31 +1,29 @@
 import { useMemo } from 'react';
+// @ts-ignore avoid adding declaration file
 import { theme } from '@vegaprotocol/tailwindcss-config';
 import { useResize } from './use-resize';

-export type Screen = keyof typeof theme.screens;
+type Screen = keyof typeof theme.screens;

 interface Props {
  isMobile: boolean;
  screenSize: Screen;
+  width: number;
 }

 export const useScreenDimensions = (): Props => {
  const { width } = useResize();
-  const isMobile = width < parseInt(theme.screens.md);
-  const screenSize = Object.entries(theme.screens).reduce(
-    (agg: Screen, entry) => {
-      if (width > parseInt(entry[1])) {
-        agg = entry[0] as Screen;
-      }
-      return agg;
-    },
-    'xs'
-  );
  return useMemo(
    () => ({
-      isMobile,
-      screenSize,
+      width,
+      isMobile: width < parseInt(theme.screens.md),
+      screenSize: Object.entries(theme.screens).reduce((agg: Screen, entry) => {
+        if (width > parseInt(entry[1])) {
+          agg = entry[0] as Screen;
+        }
+        return agg;
+      }, 'xs'),
    }),
-    [isMobile, screenSize]
+    [width]
  );
 };
@@ -6,7 +6,6 @@ module.exports = {
    lg: '960px',
    xl: '1280px',
    xxl: '1536px',
-    xxxl: '1800px',
  },
  colors: {
    transparent: 'transparent',
@@ -50,7 +50,7 @@ interface Props extends AgGridReactProps {
 export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
  return (
    <AgGrid
-      style={{ width: '100%', height: '100%' }}
+      style={{ width: '100%', height: '100%', background: 'red' }}
      overlayNoRowsTemplate={t('No trades')}
      getRowId={({ data }) => data.id}
      ref={ref}
@@ -1,4 +1,4 @@
 {
  "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.8.0"
+  "version": "0.7.0"
 }
@@ -4,6 +4,8 @@ import type {
  ReactNode,
 } from 'react';
 import { forwardRef } from 'react';
+import type { IconName } from '../icon';
+import { Icon } from '../icon';
 import classnames from 'classnames';

 export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ternary';
@@ -74,8 +76,8 @@ interface CommonProps {
  disabled?: boolean;
  fill?: boolean;
  size?: ButtonSize;
-  icon?: ReactNode;
-  rightIcon?: ReactNode;
+  icon?: IconName;
+  rightIcon?: IconName;
 }
 export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
@@ -149,13 +151,17 @@ export const ButtonLink = forwardRef<HTMLButtonElement, ButtonLinkProps>(

 interface ButtonContentProps {
  children: ReactNode;
-  icon?: ReactNode;
-  rightIcon?: ReactNode;
+  icon?: IconName;
+  rightIcon?: IconName;
 }

 const ButtonContent = ({ children, icon, rightIcon }: ButtonContentProps) => {
-  const iconEl = icon ? icon : null;
-  const rightIconEl = rightIcon ? rightIcon : null;
+  const iconEl = icon ? (
+    <Icon name={icon} className="fill-current mr-2 align-text-top" />
+  ) : null;
+  const rightIconEl = rightIcon ? (
+    <Icon name={rightIcon} className="fill-current ml-2 align-text-top" />
+  ) : null;

  return (
    <>
@@ -98,8 +98,6 @@ interface ProposalNewMarketTerms {
      decimalPlaces: string;
      positionDecimalPlaces: string;
      lpPriceRange: string;
-      linearSlippageFactor: string;
-      quadraticSlippageFactor: string;
      instrument: {
        name: string;
        code: string;
@@ -132,8 +130,6 @@ interface ProposalUpdateMarketTerms {
  updateMarket: {
    marketId: string;
    changes: {
-      linearSlippageFactor: string;
-      quadraticSlippageFactor: string;
      instrument: {
        code: string;
        future: {