feat: market view persistent pane sizes - add ulr option to the nx cloud task runner

feat: market view persistent pane sizes - improve some other test
2023-04-28 12:42:20 +02:00 · 2023-04-28 09:55:47 +02:00 · 2023-04-28 09:52:39 +02:00 · 2023-04-28 08:30:51 +02:00 · 2023-04-28 06:08:57 +00:00 · 2023-04-28 00:14:44 +00:00
78 changed files with 1158 additions and 265 deletions
@@ -1,7 +1,7 @@
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_CONFIG_URL=

@@ -18,4 +18,4 @@ NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

 CYPRESS_VEGA_WALLET_API_TOKEN=
-CYPRESS_VEGA_URL=http://localhost:3028/query
+CYPRESS_VEGA_URL=http://localhost:3008/graphql
@@ -25,7 +25,7 @@ module.exports = defineConfig({
  },
  env: {
    environment: 'CUSTOM',
-    networkQueryUrl: 'http://localhost:3028/query',
+    networkQueryUrl: 'http://localhost:3008/graphql',
    ethUrl: 'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
    commitHash: 'dev',
    tsConfig: 'tsconfig.json',
@@ -6,7 +6,7 @@ const customNodeBtn = 'custom-node';
 context.skip('Node switcher', { tags: '@regression' }, function () {
  beforeEach('visit home page', function () {
    cy.intercept('GET', 'https://static.vega.xyz/assets/capsule-network.json', {
-      hosts: ['http://localhost:3028/query'],
+      hosts: ['http://localhost:3008/graphql'],
    }).as('nodeData');
    cy.visit('/');
    cy.wait('@nodeData');
@@ -219,7 +219,7 @@ context.skip('Parties page', { tags: '@regression' }, function () {
          balance type asset {id symbol decimals}}}}}}}}';
      cy.request({
        method: 'POST',
-        url: `http://localhost:3028/query`,
+        url: `http://localhost:3008/graphql`,
        body: {
          query: mutation,
        },
@@ -5,7 +5,7 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_FAIRGROUND=false
 NX_VEGA_NETWORKS={}

-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_ETHEREUM_CHAIN_ID=1440
 NX_ETH_URL_CONNECT=1
 NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session
@@ -20,7 +20,7 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72

 #Test configuration variables
 CYPRESS_FAIRGROUND=false
-CYPRESS_VEGA_URL=http://localhost:3028/query
+CYPRESS_VEGA_URL=http://localhost:3008/graphql
 CYPRESS_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session
 CYPRESS_ETHEREUM_PROVIDER_URL=http://localhost:8545
 CYPRESS_EXPLORER_URL=https://explorer.fairground.wtf
@@ -31,6 +31,5 @@ CYPRESS_VEGA_ENV=CUSTOM
 CYPRESS_VEGA_PUBLIC_KEY=02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65
 CYPRESS_VEGA_PUBLIC_KEY2=7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535
 CYPRESS_VEGA_TOKEN_URL=https://token.fairground.wtf
-CYPRESS_VEGA_URL=http://localhost:3028/query
 CYPRESS_VEGA_WALLET_URL=http://localhost:1789
 CYPRESS_VEGA_WALLET_API_TOKEN=
@@ -50,6 +50,8 @@ const liquidityVoteStatus = 'liquidity-votes-status';
 const tokenVoteStatus = 'token-votes-status';
 const proposalTermsSection = 'proposal';
 const vegaWalletPublicKey = Cypress.env('vegaWalletPublicKey');
+const fUSDCId =
+  '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc';
 const epochTimeout = Cypress.env('epochTimeout');
 const proposalTimeout = { timeout: 14000 };

@@ -264,7 +266,7 @@ context(
    it('Unable to submit update market proposal without minimum amount of tokens', function () {
      vegaWalletTeardown();
      vegaWalletFaucetAssetsWithoutCheck(
-        'fUSDC',
+        fUSDCId,
        '1000000',
        vegaWalletPublicKey
      );
@@ -290,7 +292,7 @@ context(
    // 3001-VOTE-092 3004-PMAC-001
    it('Able to submit update market proposal and vote for proposal', function () {
      vegaWalletFaucetAssetsWithoutCheck(
-        'fUSDC',
+        fUSDCId,
        '1000000',
        vegaWalletPublicKey
      );
@@ -55,7 +55,6 @@ context(
  function () {
    // 2001-STKE-002, 2001-STKE-032
    before('visit staking tab and connect vega wallet', function () {
-      cy.clearAllLocalStorage();
      cy.visit('/');
      ethereumWalletConnect();
      // this is a workaround for #2422 which can be removed once issue is resolved
@@ -67,6 +66,7 @@ context(
      beforeEach(
        'teardown wallet & drill into a specific validator',
        function () {
+          cy.clearAllLocalStorage();
          cy.reload();
          waitForSpinner();
          cy.connectVegaWallet();
@@ -131,7 +131,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
        .within(() => {
          cy.get('span')
            .first()
-            .should('have.text', 'http://localhost:3028/query');
+            .should('have.text', 'http://localhost:3008/graphql');
          cy.getByTestId('link').should('exist');
        });
    });
@@ -17,10 +17,15 @@ const banner = 'view-banner';

 context('View functionality with public key', { tags: '@smoke' }, function () {
  before('send asset to wallet', function () {
-    vegaWalletFaucetAssetsWithoutCheck('fUSDC', '1000000', vegaWalletPubKey);
+    vegaWalletFaucetAssetsWithoutCheck(
+      '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc',
+      '1000000',
+      vegaWalletPubKey
+    );
  });

  beforeEach('visit home page', function () {
+    cy.clearLocalStorage();
    cy.visit('/');
    waitForSpinner();
    cy.connectPublicKey(vegaWalletPubKey);
@@ -13,6 +13,7 @@ context(
  { tags: '@regression' },
  function () {
    before('navigate to rewards page', function () {
+      cy.clearLocalStorage();
      cy.visit('/');
      navigateTo(navigation.rewards);
    });
@@ -282,26 +282,30 @@ context(
      describe('Vega wallet with assets', function () {
        const assets = [
          {
-            id: 'fUSDC',
+            id: '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc',
            name: 'USDC (fake)',
+            symbol: 'fUSDC',
            amount: '1000000',
            expectedAmount: '10.00',
          },
          {
-            id: 'fDAI',
+            id: '8566db7257222b5b7ef2886394ad28b938b28680a54a169bbc795027b89d6665',
            name: 'DAI (fake)',
+            symbol: 'fDAI',
            amount: '200000',
            expectedAmount: '2.00',
          },
          {
-            id: 'fBTC',
+            id: '73174a6fb1d5802ba0ac7bd7ab79e0a3a4837b262de0a4e80815a55442692bd0',
            name: 'BTC (fake)',
+            symbol: 'fBTC',
            amount: '600000',
            expectedAmount: '6.00',
          },
          {
-            id: 'fEURO',
+            id: 'e02d4c15d790d1d2dffaf2dcd1cf06a1fe656656cf4ed18c8ce99f9e83643567',
            name: 'EURO (fake)',
+            symbol: 'fEURO',
            amount: '800000',
            expectedAmount: '8.00',
          },
@@ -322,15 +326,15 @@ context(
          });
        });

-        for (const { id, name, expectedAmount } of assets) {
-          it(`should see ${id} within vega wallet`, () => {
+        for (const { name, symbol, expectedAmount } of assets) {
+          it(`should see ${name} within vega wallet`, () => {
            cy.get(walletContainer).within(() => {
              cy.get(vegaWalletCurrencyTitle)
-                .contains(id, txTimeout)
+                .contains(name, txTimeout)
                .should('be.visible');

              cy.get(vegaWalletCurrencyTitle)
-                .contains(id)
+                .contains(name)
                .parent()
                .siblings()
                .invoke('text')
@@ -338,9 +342,9 @@ context(
                .should('be.gte', parseFloat(expectedAmount));

              cy.get(vegaWalletCurrencyTitle)
-                .contains(id)
+                .contains(name)
                .parent()
-                .contains(name);
+                .contains(symbol);
            });
          });
        }
@@ -54,7 +54,7 @@ export function stakingValidatorPageRemoveStake(stake: string) {
    .and('contain', `Remove ${stake} $VEGA tokens at the end of epoch`)
    .and('be.visible')
    .click();
-  cy.contains('been removed from validator').should('be.visible');
+  cy.contains('been removed from validator', txTimeout).should('be.visible');
  closeDialog();
 }

@@ -185,7 +185,7 @@ export function validateValidatorListTotalStakeAndShare(
 ) {
  cy.contains('Loading...', epochTimeout).should('not.exist');
  waitForBeginningOfEpoch();
-  cy.get(`[row-id="${positionOnList}"]:visible`)
+  cy.get(`[row-id="${positionOnList}"]`)
    .eq(1)
    .within(() => {
      cy.getByTestId(stakeValidatorListTotalStake, epochTimeout).should(
@@ -221,12 +221,12 @@ export function ensureSpecifiedUnstakedTokensAreAssociated(
 }

 export function closeStakingDialog() {
-  cy.get('[data-testid="dialog-title"]:visible').should(
+  cy.getByTestId('dialog-title').should(
    'contain.text',
    'At the beginning of the next epoch'
  );
-  cy.get('[data-testid="dialog-content"]:visible')
-    .first()
+  cy.getByTestId('dialog-content')
+    .last()
    .within(() => {
      cy.get('a').should('have.text', 'Back to Staking').click();
    });
@@ -9,7 +9,7 @@ import {
 import { ethers, Wallet } from 'ethers';

 const associatedAmountInWallet = '[data-testid="associated-amount"]:visible';
-const vegaWalletContainer = 'aside [data-testid="vega-wallet"]:visible';
+const vegaWalletContainer = 'aside [data-testid="vega-wallet"]';
 const vegaWalletMnemonic = Cypress.env('vegaWalletMnemonic');
 const vegaWalletPubKey = Cypress.env('vegaWalletPublicKey');
 const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
@@ -105,25 +105,24 @@ async function vegaWalletTeardownStaking(stakingBridgeContract: StakingBridge) {
    { timeout: transactionTimeout, log: false }
  ).then((stakeBalance) => {
    if (Number(stakeBalance) != 0) {
-      cy.get(vegaWalletContainer).within(() => {
-        cy.getByTestId('currency-value')
-          .invoke('text')
-          .then(($associatedAmount) => {
-            cy.wrap(
-              stakingBridgeContract.remove_stake(
-                String(stakeBalance),
-                vegaWalletPubKey
-              ),
-              { timeout: transactionTimeout, log: false }
-            );
-            cy.get("[data-testid='currency-value']")
-              .first()
-              .invoke('text', {
+      cy.get('[data-testid="vega-wallet-balance-unstaked"]:visible').within(
+        () => {
+          cy.get(associatedAmountInWallet)
+            .invoke('text')
+            .then(($walletAmount) => {
+              cy.wrap(
+                stakingBridgeContract.remove_stake(
+                  String(stakeBalance),
+                  vegaWalletPubKey
+                ),
+                { timeout: transactionTimeout, log: false }
+              );
+              cy.get(associatedAmountInWallet, {
                timeout: transactionTimeout,
-              })
-              .should('not.eq', $associatedAmount);
-          });
-      });
+              }).should('not.have.text', $walletAmount);
+            });
+        }
+      );
    }
  });
 }
@@ -8,7 +8,7 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
 NX_VEGA_CONFIG_URL=''

-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_ETHEREUM_CHAIN_ID=1440
 NX_ETH_URL_CONNECT=1
 NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session
@@ -14,13 +14,17 @@ import { ContractsContext } from './contracts-context';
 import { createDefaultProvider } from '../../lib/web3-connectors';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { ENV } from '../../config/env';
+import { ENV } from '../../config';

 /**
 * Provides Vega Ethereum contract instances to its children.
 */
 export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
-  const { provider: activeProvider, account } = useWeb3React();
+  const {
+    provider: activeProvider,
+    account,
+    chainId: activeChainId,
+  } = useWeb3React();
  const { config } = useEthereumConfig();
  const { VEGA_ENV, ETHEREUM_PROVIDER_URL } = useEnvironment();
  const [contracts, setContracts] =
@@ -39,7 +43,11 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
          ETHEREUM_PROVIDER_URL,
          Number(config.chain_id)
        );
-        const provider = activeProvider ? activeProvider : defaultProvider;
+
+        const provider =
+          activeProvider && activeChainId === Number(config.chain_id)
+            ? activeProvider
+            : defaultProvider;

        if (
          account &&
@@ -84,7 +92,14 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
      //  TODO: hacky quick fix for release to prevent race condition, find a better fix for this.
      cancelled = true;
    };
-  }, [activeProvider, account, config, VEGA_ENV, ETHEREUM_PROVIDER_URL]);
+  }, [
+    activeProvider,
+    activeChainId,
+    account,
+    config,
+    VEGA_ENV,
+    ETHEREUM_PROVIDER_URL,
+  ]);

  if (!contracts) {
    return (
@@ -1,3 +1,3 @@
 # App configuration variables
-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_VEGA_ENV=LOCAL
@@ -37,8 +37,8 @@
    "tranche_start": "2023-04-20T00:00:00.000Z",
    "tranche_end": "2023-05-20T00:00:00.000Z",
    "total_added": "19242.125",
-    "total_removed": "397.984073768865",
-    "locked_amount": "14587.4163594714507360625",
+    "total_removed": "494.628795994665",
+    "locked_amount": "13946.5615435956807465125",
    "deposits": [
      {
        "amount": "188",
@@ -221,6 +221,11 @@
        "amount": "195.89040769089",
        "user": "0xDd7a98557586ce21f770662319C2047C5a3bD605",
        "tx": "0x338ca1f2a725add8aa5328efa43ac7cb1e91c35bf01a2312431c0dbb57137387"
+      },
+      {
+        "amount": "96.6447222258",
+        "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
+        "tx": "0x13b160a21d48eab98cc304bbb46cd675da08afbf6e0ad261c67c10ba34dc4d74"
      }
    ],
    "users": [
@@ -270,11 +275,17 @@
            "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
            "tranche_id": 56,
            "tx": "0x300c18b4220d3bc357f054792cb65f05d4005912bf8e5d9580b5b830cc3c0845"
+          },
+          {
+            "amount": "96.6447222258",
+            "user": "0x1447Efc62d5077d7AbB20492dF831Dd6c9Eb1756",
+            "tranche_id": 56,
+            "tx": "0x13b160a21d48eab98cc304bbb46cd675da08afbf6e0ad261c67c10ba34dc4d74"
          }
        ],
        "total_tokens": "1207.5",
-        "withdrawn_tokens": "202.093666077975",
-        "remaining_tokens": "1005.406333922025"
+        "withdrawn_tokens": "298.738388303775",
+        "remaining_tokens": "908.761611696225"
      },
      {
        "address": "0x33Ce1D9E53AFb7367E34749517C086405a651a95",
@@ -811,7 +822,7 @@
    "tranche_end": "2023-05-06T00:00:00.000Z",
    "total_added": "8976",
    "total_removed": "596.64743517951",
-    "locked_amount": "2615.8875925925923488",
+    "locked_amount": "2316.943851851851464",
    "deposits": [
      {
        "amount": "111",
@@ -4594,7 +4605,7 @@
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "86666.297",
    "total_removed": "0",
-    "locked_amount": "52651.0670675174430414228",
+    "locked_amount": "52413.828522526897906274",
    "deposits": [
      {
        "amount": "86666.297",
@@ -4660,7 +4671,7 @@
    "tranche_end": "2023-06-01T00:00:00.000Z",
    "total_added": "2500",
    "total_removed": "0",
-    "locked_amount": "477.23818426943425",
+    "locked_amount": "463.513685388685375",
    "deposits": [
      {
        "amount": "2500",
@@ -4781,7 +4792,7 @@
    "tranche_end": "2023-09-01T00:00:00.000Z",
    "total_added": "17500",
    "total_removed": "0",
-    "locked_amount": "12054.35568890901775",
+    "locked_amount": "11959.3284520933965",
    "deposits": [
      {
        "amount": "12500",
@@ -5047,8 +5058,8 @@
    "tranche_start": "2023-02-01T00:00:00.000Z",
    "tranche_end": "2023-08-01T00:00:00.000Z",
    "total_added": "37500",
-    "total_removed": "12704.026146825",
-    "locked_amount": "19836.24443677102875",
+    "total_removed": "17678.335539225",
+    "locked_amount": "19629.239564149785",
    "deposits": [
      {
        "amount": "7500",
@@ -5067,6 +5078,11 @@
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
        "tx": "0x4dc6eefb43f5b1704894582aa926f0c6ecd94550ac354b7d5b5f49b0f17261fd"
      },
+      {
+        "amount": "4974.3093924",
+        "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
+        "tx": "0xfce75d8b6bf0d20cbdb1ef29cfabcae4f4504c30b30ca166b4e66d37f7f04339"
+      },
      {
        "amount": "126.30064455",
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -5409,6 +5425,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "4974.3093924",
+            "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
+            "tranche_id": 34,
+            "tx": "0xfce75d8b6bf0d20cbdb1ef29cfabcae4f4504c30b30ca166b4e66d37f7f04339"
+          },
          {
            "amount": "6960.3360957",
            "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -5423,8 +5445,8 @@
          }
        ],
        "total_tokens": "30000",
-        "withdrawn_tokens": "9235.4492784",
-        "remaining_tokens": "20764.5507216"
+        "withdrawn_tokens": "14209.7586708",
+        "remaining_tokens": "15790.2413292"
      }
    ]
  },
@@ -5434,7 +5456,7 @@
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "129999.45",
    "total_removed": "0",
-    "locked_amount": "52603.029593629619941305",
+    "locked_amount": "52366.0074989608675515285",
    "deposits": [
      {
        "amount": "129999.45",
@@ -5467,7 +5489,7 @@
    "tranche_end": "2024-04-01T00:00:00.000Z",
    "total_added": "54144.7663",
    "total_removed": "0",
-    "locked_amount": "50260.38819220796159812442",
+    "locked_amount": "50112.57837715237381561549",
    "deposits": [
      {
        "amount": "54144.7663",
@@ -5500,7 +5522,7 @@
    "tranche_end": "2023-09-03T00:00:00.000Z",
    "total_added": "62600",
    "total_removed": "0",
-    "locked_amount": "22080.29597919837872",
+    "locked_amount": "21908.93602232369342",
    "deposits": [
      {
        "amount": "10000",
@@ -5693,7 +5715,7 @@
    "tranche_end": "2023-09-17T00:00:00.000Z",
    "total_added": "5000",
    "total_removed": "0",
-    "locked_amount": "1955.382737189244",
+    "locked_amount": "1941.6958396752915",
    "deposits": [
      {
        "amount": "5000",
@@ -6234,7 +6256,7 @@
    "tranche_end": "2023-05-01T00:00:00.000Z",
    "total_added": "22500",
    "total_removed": "7280.725809525",
-    "locked_amount": "465.2825736648258",
+    "locked_amount": "341.079650092080135",
    "deposits": [
      {
        "amount": "7500",
@@ -6740,7 +6762,7 @@
    "tranche_end": "2023-06-02T00:00:00.000Z",
    "total_added": "1939928.38",
    "total_removed": "1709370.7872515768348",
-    "locked_amount": "189969.1598120306593902572",
+    "locked_amount": "184658.8396277372732387052",
    "deposits": [
      {
        "amount": "1852091.69",
@@ -12240,7 +12262,7 @@
    "tranche_start": "2021-09-03T00:00:00.000Z",
    "tranche_end": "2022-09-03T00:00:00.000Z",
    "total_added": "57278.000000000000000003",
-    "total_removed": "48182.21518131551",
+    "total_removed": "50196.35141572991",
    "locked_amount": "0",
    "deposits": [
      {
@@ -22825,6 +22847,16 @@
      }
    ],
    "withdrawals": [
+      {
+        "amount": "725",
+        "user": "0x52Dd36AB8e8eec8f6bE968E93679838dc73b19D3",
+        "tx": "0xbc67aa993d42656a84c7da90e6abcc0a3c00e7e9e21da4013251b0f8582567ca"
+      },
+      {
+        "amount": "1289.1362344144",
+        "user": "0xab6dE081Af6C78433AFDaC5B756804bcE17e9eC1",
+        "tx": "0x9e6077e2dc83701a70b2a04028ab533e89cd7f1bb757ea4fe45e1388cfee600d"
+      },
      {
        "amount": "25",
        "user": "0x363D3d06d70761c34D6EfEB25E409A9549E6970D",
@@ -32334,10 +32366,17 @@
            "tx": "0x1a0e42b837a8f3908bc4e36e9b024f48c371b98f066a0db36fd98793cd178f57"
          }
        ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "725",
+            "user": "0x52Dd36AB8e8eec8f6bE968E93679838dc73b19D3",
+            "tranche_id": 11,
+            "tx": "0xbc67aa993d42656a84c7da90e6abcc0a3c00e7e9e21da4013251b0f8582567ca"
+          }
+        ],
        "total_tokens": "725",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "725"
+        "withdrawn_tokens": "725",
+        "remaining_tokens": "0"
      },
      {
        "address": "0xab6dE081Af6C78433AFDaC5B756804bcE17e9eC1",
@@ -33040,6 +33079,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "1289.1362344144",
+            "user": "0xab6dE081Af6C78433AFDaC5B756804bcE17e9eC1",
+            "tranche_id": 11,
+            "tx": "0x9e6077e2dc83701a70b2a04028ab533e89cd7f1bb757ea4fe45e1388cfee600d"
+          },
          {
            "amount": "842.29689345648",
            "user": "0xab6dE081Af6C78433AFDaC5B756804bcE17e9eC1",
@@ -33084,8 +33129,8 @@
          }
        ],
        "total_tokens": "3439",
-        "withdrawn_tokens": "2149.8637655856",
-        "remaining_tokens": "1289.1362344144"
+        "withdrawn_tokens": "3439",
+        "remaining_tokens": "0"
      },
      {
        "address": "0x23E18CBa049393DFebC5a17e3b5ec9aF584CAE04",
@@ -40567,7 +40612,7 @@
    "tranche_end": "2023-06-05T00:00:00.000Z",
    "total_added": "3732368.4671",
    "total_removed": "715655.108029600523393",
-    "locked_amount": "316417.783123780845942826482",
+    "locked_amount": "308257.66985764130666401388",
    "deposits": [
      {
        "amount": "1998.95815",
@@ -41959,8 +42004,8 @@
    "tranche_start": "2022-06-05T00:00:00.000Z",
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "15870102.715470999700000001",
-    "total_removed": "864400.93329864929559852",
-    "locked_amount": "6421684.7286343349090524101959629311219249",
+    "total_removed": "864782.86597041115934852",
+    "locked_amount": "6392749.49092195080541091690422070752608813",
    "deposits": [
      {
        "amount": "16249.93",
@@ -42494,6 +42539,11 @@
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
        "tx": "0x28d2b3f088965906ac3da878c491309729680c302fb98e2a435d07f88d6b962a"
      },
+      {
+        "amount": "381.93267176186375",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x6d5ce55a076149d5f66e5e84720d3bd46f31e5c79c54632927c1a00d1fdbce37"
+      },
      {
        "amount": "981.387731774910625",
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -44620,6 +44670,12 @@
            "tranche_id": 2,
            "tx": "0x28d2b3f088965906ac3da878c491309729680c302fb98e2a435d07f88d6b962a"
          },
+          {
+            "amount": "381.93267176186375",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x6d5ce55a076149d5f66e5e84720d3bd46f31e5c79c54632927c1a00d1fdbce37"
+          },
          {
            "amount": "981.387731774910625",
            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -46128,8 +46184,8 @@
          }
        ],
        "total_tokens": "259998.8875",
-        "withdrawn_tokens": "154502.7650820091405",
-        "remaining_tokens": "105496.1224179908595"
+        "withdrawn_tokens": "154884.69775377100425",
+        "remaining_tokens": "105114.18974622899575"
      },
      {
        "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -48504,8 +48560,8 @@
    "tranche_start": "2021-11-05T00:00:00.000Z",
    "tranche_end": "2023-05-05T00:00:00.000Z",
    "total_added": "14597706.0446472999",
-    "total_removed": "6129688.581848831721813882",
-    "locked_amount": "207013.1123407730577557502438032262",
+    "total_removed": "6130217.967403708954663132",
+    "locked_amount": "180300.2856379379679487702400136114",
    "deposits": [
      {
        "amount": "129284.449",
@@ -48734,6 +48790,11 @@
        "user": "0xDdc5F6484349B242A9B23382Aa21f49B5Dc9a089",
        "tx": "0xba1fdde929e0e2d4fe79de4dbac92cb5d20bb8b1dd7e5ff9bab961b728e7dae2"
      },
+      {
+        "amount": "529.38555487723284925",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0x0c555d0f3b2b4b3fb50f208d9155b5886c83511a552518af11cadd5d5a06acec"
+      },
      {
        "amount": "1360.32447632896938825",
        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -52052,6 +52113,12 @@
            "tranche_id": 3,
            "tx": "0xc37374c867eb2543ba3de47bf14990096f3371a93609cfd557a1eeaa3fb3e774"
          },
+          {
+            "amount": "529.38555487723284925",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0x0c555d0f3b2b4b3fb50f208d9155b5886c83511a552518af11cadd5d5a06acec"
+          },
          {
            "amount": "1360.32447632896938825",
            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -54874,8 +54941,8 @@
          }
        ],
        "total_tokens": "359123.469575",
-        "withdrawn_tokens": "353628.4490036538056375",
-        "remaining_tokens": "5495.0205713461943625"
+        "withdrawn_tokens": "354157.83455853103848675",
+        "remaining_tokens": "4965.63501646896151325"
      },
      {
        "address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@@ -58526,8 +58593,8 @@
    "tranche_start": "2022-06-05T00:00:00.000Z",
    "tranche_end": "2023-06-05T00:00:00.000Z",
    "total_added": "472355.6199999996",
-    "total_removed": "43935.8732690563416",
-    "locked_amount": "50138.206457121953572821564586524",
+    "total_removed": "43997.0543192803416",
+    "locked_amount": "48845.189864906103545725365702684",
    "deposits": [
      {
        "amount": "3000",
@@ -65171,6 +65238,11 @@
        "user": "0x0a6A5e1da768709A2bF17b2E58B2B73120051D03",
        "tx": "0x097e43cb4f64f1cb502f321eceb8b91e6378cac0b3b6fe558fc1d543aec597e2"
      },
+      {
+        "amount": "61.181050224",
+        "user": "0xe7770271d882C54C46B9f00137e96a3BbfFD4d94",
+        "tx": "0x3c7d0394e431000fa5c733213116dc39b0f87a9a32a40e75cec3c2fce7795b0b"
+      },
      {
        "amount": "168.502276762",
        "user": "0x38A292CB98Dc602ECAFF94E8E5fADD9800e4bA13",
@@ -78176,6 +78248,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "61.181050224",
+            "user": "0xe7770271d882C54C46B9f00137e96a3BbfFD4d94",
+            "tranche_id": 5,
+            "tx": "0x3c7d0394e431000fa5c733213116dc39b0f87a9a32a40e75cec3c2fce7795b0b"
+          },
          {
            "amount": "101.521461192",
            "user": "0xe7770271d882C54C46B9f00137e96a3BbfFD4d94",
@@ -78214,8 +78292,8 @@
          }
        ],
        "total_tokens": "600",
-        "withdrawn_tokens": "476.48491248",
-        "remaining_tokens": "123.51508752"
+        "withdrawn_tokens": "537.665962704",
+        "remaining_tokens": "62.334037296"
      },
      {
        "address": "0x79D8ff1699911f065fD97a95a6B47216925C4B0e",
@@ -8,7 +8,7 @@ NX_VEGA_ENV=CUSTOM
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://stagnet1.console.vega.xyz\",\"STAGNET3\":\"https://stagnet3.console.vega.xyz\"}
 NX_VEGA_TOKEN_URL=https://token.fairground.wtf
-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session"
@@ -27,6 +27,6 @@ CYPRESS_VEGA_ENV=CUSTOM
 CYPRESS_VEGA_PUBLIC_KEY=02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65
 CYPRESS_VEGA_PUBLIC_KEY2=7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535
 CYPRESS_VEGA_TOKEN_URL=https://token.fairground.wtf
-CYPRESS_VEGA_URL=http://localhost:3028/query
+CYPRESS_VEGA_URL=http://localhost:3008/graphql
 CYPRESS_VEGA_WALLET_URL=http://localhost:1789
 CYPRESS_VEGA_WALLET_API_TOKEN=
@@ -7,7 +7,7 @@ NX_VEGA_ENV=CUSTOM
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://stagnet1.console.vega.xyz\",\"STAGNET3\":\"https://stagnet3.console.vega.xyz\"}
 NX_VEGA_TOKEN_URL=https://token.fairground.wtf
-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session"
@@ -24,6 +24,6 @@ CYPRESS_VEGA_ENV=CUSTOM
 CYPRESS_VEGA_PUBLIC_KEY=02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65
 CYPRESS_VEGA_PUBLIC_KEY2=7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535
 CYPRESS_VEGA_TOKEN_URL=https://token.fairground.wtf
-CYPRESS_VEGA_URL=http://localhost:3028/query
+CYPRESS_VEGA_URL=http://localhost:3008/graphql
 CYPRESS_VEGA_WALLET_URL=http://localhost:1789
 CYPRESS_VEGA_WALLET_API_TOKEN=
@@ -1,4 +1,5 @@
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
+import { MarketState } from '@vegaprotocol/types';

 const marketInfoBtn = 'Info';
 const row = 'key-value-table-row';
@@ -12,7 +13,12 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
  });

  before(() => {
-    cy.mockTradingPage();
+    cy.mockTradingPage(
+      MarketState.STATE_ACTIVE,
+      undefined,
+      undefined,
+      'COMPROMISED'
+    );
    cy.mockSubscription();
    cy.visit('/#/markets/market-0');
    cy.wait('@Markets');
@@ -20,6 +26,11 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
    cy.wait('@MarketInfo');
  });

+  it('show oracle banner', () => {
+    cy.getByTestId(marketTitle).contains('Oracle').click();
+    cy.getByTestId('oracle-status').should('contain.text', 'COMPROMISED');
+  });
+
  it('current fees displayed', () => {
    cy.getByTestId(marketTitle).contains('Current fees').click();
    validateMarketDataRow(0, 'Maker Fee', '0.02%');
@@ -1,12 +1,12 @@
+import { closeWelcomeDialog } from '../support/helpers';
+
 describe('Settings page', { tags: '@smoke' }, () => {
  beforeEach(() => {
    cy.clearLocalStorage().then(() => {
      cy.mockTradingPage();
      cy.mockSubscription();
      cy.visit('/');
-      cy.get('[role=dialog]').within(() => {
-        cy.getByTestId('dialog-close').click();
-      });
+      closeWelcomeDialog();
      cy.get('[aria-label="cog icon"]').click();
    });
  });
@@ -1,17 +1,23 @@
 import { checkSorting } from '@vegaprotocol/cypress';

 describe('accounts', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.clearAllLocalStorage();
+  beforeEach(() => {
    cy.mockTradingPage();
    cy.mockWeb3Provider();
    cy.mockSubscription();
    cy.setVegaWallet();
    cy.visit('/#/markets/market-0');
-    cy.wait('@Assets');
  });

  it('renders accounts', () => {
+    // 7001-COLL-001
+    // 7001-COLL-002
+    // 7001-COLL-003
+    // 7001-COLL-004
+    // 7001-COLL-005
+    // 7001-COLL-006
+    // 7001-COLL-007
+
    const tradingAccountRowId = '[row-id="t-0"]';
    cy.getByTestId('Collateral').click();

@@ -24,29 +30,85 @@ describe('accounts', { tags: '@smoke' }, () => {

    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
-      .find('[col-id="accounts-actions"]')
-      .should('have.text', 'DepositWithdraw');
+      .find('[col-id="used"]')
+      .should('have.text', '1.010.00%');

    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
-      .find('[data-testid="deposit"]')
-      .should('have.text', 'Deposit');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="accounts-actions"] [data-testid="withdraw"]')
-      .should('have.text', 'Withdraw');
+      .find('[col-id="available"]')
+      .should('have.text', '100,000.00');

    cy.getByTestId('tab-accounts')
      .get(tradingAccountRowId)
      .find('[col-id="total"]')
      .should('have.text', '100,001.01');
+
+    cy.getByTestId('tab-accounts')
+      .get(tradingAccountRowId)
+      .find('[col-id="accounts-actions"]')
+      .should('have.text', ' ');
+
+    cy.getByTestId('tab-accounts')
+      .get(tradingAccountRowId)
+      .find('[col-id="total"]')
+      .should('have.text', '100,001.01');
+
+    cy.getByTestId('tab-accounts')
+      .get('[col-id="accounts-actions"]')
+      .find('[data-testid="dropdown-menu"]')
+      .eq(1)
+      .click();
+    cy.getByTestId('deposit').should('be.visible');
+    cy.getByTestId('withdraw').should('be.visible');
+    cy.getByTestId('breakdown').should('be.visible');
+    cy.getByTestId('Collateral').click({ force: true });
  });

  it('should open asset details dialog when clicked on symbol', () => {
+    // 7001-COLL-008
    cy.getByTestId('asset').contains('tEURO').click();
-    cy.get('[data-testid="dialog-content"]:visible').should('exist');
-    cy.get('[data-testid="dialog-close"]:visible').click();
+    cy.get('[data-testid$="_label"]').should('have.length', 16);
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('should open asset details dialog when clicked on symbol', () => {
+    // 7001-COLL-008
+    cy.getByTestId('asset').contains('tEURO').click();
+    cy.get('[data-testid$="_label"]').should('have.length', 16);
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('should open usage breakdown dialog when clicked on used', () => {
+    // 7001-COLL-009
+    cy.getByTestId('breakdown').contains('1.01').click();
+    const headers = ['Market', 'Account type', 'Balance'];
+    cy.getByTestId('usage-breakdown').within(($headers) => {
+      cy.wrap($headers)
+        .get('.ag-header-cell-text')
+        .each(($header, i) => {
+          cy.wrap($header).should('have.text', headers[i]);
+        });
+    });
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('sorting usage breakdown columns should work well', () => {
+    // 7001-COLL-010
+    cy.getByTestId('breakdown').contains('1.01').click();
+    cy.getByTestId('usage-breakdown')
+      .find('[col-id="type"]')
+      .eq(1)
+      .should('have.text', 'Margin');
+    cy.getByTestId('usage-breakdown')
+      .find('[col-id="type"]')
+      .eq(2)
+      .should('have.text', 'Margin');
+    cy.getByTestId('usage-breakdown')
+      .find('[col-id="type"]')
+      .eq(3)
+      .should('have.text', 'General');
+
+    cy.get('[data-testid="dialog-close"]').click();
  });

  describe('sorting by ag-grid columns should work well', () => {
@@ -88,5 +88,18 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
        'Size cannot be lower than 1'
      );
    });
+    it('must have total margin available', () => {
+      // 7001-COLL-011
+      cy.getByTestId('tab-ticket')
+        .find('.text-xs')
+        .eq(5)
+        .within(() => {
+          cy.get('[data-state="closed"]').should(
+            'have.text',
+            'Total margin available'
+          );
+          cy.get('.text-neutral-500').should('have.text', '~100,000.01 tDAI');
+        });
+    });
  });
 });
@@ -455,7 +455,7 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
      });
  });
  it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', () => {
-    // 7003-MORD-016
+    // 7003-MORD-013
    updateOrder({
      id: orderId,
      status: Schema.OrderStatus.STATUS_ACTIVE,
@@ -9,3 +9,8 @@ export const selectAsset = (assetIndex: number) => {
  // eslint-disable-next-line
  cy.wait(100);
 };
+
+export const closeWelcomeDialog = () => {
+  cy.getByTestId('select-market-list').should('exist');
+  cy.getByTestId('dialog-close').click();
+};
@@ -1,6 +1,7 @@
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import * as Schema from '@vegaprotocol/types';
 import type { CyHttpMessages } from 'cypress/types/net-stubbing';
+import type { Provider, Status } from '@vegaprotocol/oracles';
 import {
  accountsQuery,
  assetQuery,
@@ -155,7 +156,6 @@ const mockTradingPage = (
  aliasGQLQuery(req, 'ProposalsList', proposalListQuery());
  aliasGQLQuery(req, 'Deposits', depositsQuery());
 };
-
 declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
@@ -164,50 +164,56 @@ declare global {
      mockTradingPage(
        state?: Schema.MarketState,
        tradingMode?: Schema.MarketTradingMode,
-        trigger?: Schema.AuctionTrigger
+        trigger?: Schema.AuctionTrigger,
+        oracleStatus?: Status
      ): void;
    }
  }
 }
+
 export const addMockTradingPage = () => {
  Cypress.Commands.add(
    'mockTradingPage',
-    (state = Schema.MarketState.STATE_ACTIVE, tradingMode, trigger) => {
+    (
+      state = Schema.MarketState.STATE_ACTIVE,
+      tradingMode,
+      trigger,
+      oracleStatus
+    ) => {
      cy.mockGQL((req) => {
        mockTradingPage(req, state, tradingMode, trigger);
      });

+      const oracle: Provider = {
+        name: 'Another oracle',
+        url: 'https://zombo.com',
+        description_markdown:
+          'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
+        oracle: {
+          status: oracleStatus || 'GOOD',
+          status_reason: '',
+          first_verified: '2022-01-01T00:00:00.000Z',
+          last_verified: '2022-12-31T00:00:00.000Z',
+          type: 'public_key',
+          public_key: ORACLE_PUBKEY,
+        },
+        proofs: [
+          {
+            format: 'signed_message',
+            available: true,
+            type: 'public_key',
+            public_key: ORACLE_PUBKEY,
+            message: 'SOMEHEX',
+          },
+        ],
+        github_link: `https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/public_key-${ORACLE_PUBKEY}.toml`,
+      };
      // Prevent request to github, return some dummy content
      cy.intercept(
        'GET',
        /^https:\/\/raw.githubusercontent.com\/vegaprotocol\/well-known/,
        {
-          body: [
-            {
-              name: 'Another oracle',
-              url: 'https://zombo.com',
-              description_markdown:
-                'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
-              oracle: {
-                status: 'GOOD',
-                status_reason: '',
-                first_verified: '2022-01-01T00:00:00.000Z',
-                last_verified: '2022-12-31T00:00:00.000Z',
-                type: 'public_key',
-                public_key: ORACLE_PUBKEY,
-              },
-              proofs: [
-                {
-                  format: 'signed_message',
-                  available: true,
-                  type: 'public_key',
-                  public_key: ORACLE_PUBKEY,
-                  message: 'SOMEHEX',
-                },
-              ],
-              github_link: `https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/public_key-${ORACLE_PUBKEY}.toml`,
-            },
-          ],
+          body: [oracle],
        }
      );
    }
@@ -7,7 +7,7 @@ NX_VEGA_ENV=CUSTOM
 NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
 NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://stagnet1.console.vega.xyz\",\"STAGNET3\":\"https://stagnet3.console.vega.xyz\"}
 NX_VEGA_TOKEN_URL=https://token.fairground.wtf
-NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_URL=http://localhost:3008/graphql
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
@@ -27,7 +27,10 @@ import { NO_MARKET } from './constants';
 import { LiquidityContainer } from '../liquidity/liquidity';
 import { useNavigate } from 'react-router-dom';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import {
+  usePaneLayout,
+  useScreenDimensions,
+} from '@vegaprotocol/react-helpers';
 import {
  useMarketClickHandler,
  useMarketLiquidityClickHandler,
@@ -83,15 +86,20 @@ interface BottomPanelProps {

 const MarketBottomPanel = memo(
  ({ marketId, pinnedAsset }: BottomPanelProps) => {
+    const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'bottom' });
    const { screenSize } = useScreenDimensions();
    const onMarketClick = useMarketClickHandler(true);
    const onOrderTypeClick = useMarketLiquidityClickHandler(true);

    return 'xxxl' === screenSize ? (
-      <ResizableGrid proportionalLayout minSize={200}>
+      <ResizableGrid
+        proportionalLayout
+        minSize={200}
+        onChange={handleOnLayoutChange}
+      >
        <ResizableGridPanel
          priority={LayoutPriority.Low}
-          preferredSize="50%"
+          preferredSize={sizes[0] || '50%'}
          minSize={50}
        >
          <TradeGridChild>
@@ -119,7 +127,7 @@ const MarketBottomPanel = memo(
        </ResizableGridPanel>
        <ResizableGridPanel
          priority={LayoutPriority.Low}
-          preferredSize="50%"
+          preferredSize={sizes[1] || '50%'}
          minSize={50}
        >
          <TradeGridChild>
@@ -186,22 +194,29 @@ MarketBottomPanel.displayName = 'MarketBottomPanel';
 const MainGrid = memo(
  ({
    marketId,
-    onSelect,
    pinnedAsset,
  }: {
    marketId: string;
-    onSelect: (marketId: string, metaKey?: boolean) => void;
    pinnedAsset?: PinnedAsset;
  }) => {
    const navigate = useNavigate();
+    const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
+    const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
+      id: 'middle',
+    });
+
    return (
-      <ResizableGrid vertical>
+      <ResizableGrid vertical onChange={handleOnLayoutChange}>
        <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
-          <ResizableGrid proportionalLayout={false} minSize={200}>
+          <ResizableGrid
+            proportionalLayout={false}
+            minSize={200}
+            onChange={handleOnMiddleLayoutChange}
+          >
            <ResizableGridPanel
              priority={LayoutPriority.High}
              minSize={200}
-              preferredSize="50%"
+              preferredSize={sizesMiddle[0] || '50%'}
            >
              <TradeGridChild>
                <Tabs storageKey="console-trade-grid-main-left">
@@ -219,7 +234,7 @@ const MainGrid = memo(
            </ResizableGridPanel>
            <ResizableGridPanel
              priority={LayoutPriority.Low}
-              preferredSize={330}
+              preferredSize={sizesMiddle[1] || 330}
              minSize={300}
            >
              <TradeGridChild>
@@ -238,7 +253,7 @@ const MainGrid = memo(
            </ResizableGridPanel>
            <ResizableGridPanel
              priority={LayoutPriority.Low}
-              preferredSize={430}
+              preferredSize={sizesMiddle[2] || 430}
              minSize={200}
            >
              <TradeGridChild>
@@ -256,7 +271,7 @@ const MainGrid = memo(
        </ResizableGridPanel>
        <ResizableGridPanel
          priority={LayoutPriority.Low}
-          preferredSize="25%"
+          preferredSize={sizes[1] || '25%'}
          minSize={50}
        >
          <MarketBottomPanel marketId={marketId} pinnedAsset={pinnedAsset} />
@@ -278,11 +293,7 @@ export const TradeGrid = ({
        <TradeMarketHeader market={market} onSelect={onSelect} />
        <OracleBanner marketId={market?.id || ''} />
      </div>
-      <MainGrid
-        marketId={market?.id || ''}
-        onSelect={onSelect}
-        pinnedAsset={pinnedAsset}
-      />
+      <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
    </div>
  );
 };
@@ -350,7 +361,10 @@ export const TradePanels = ({

  return (
    <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
-      <TradeMarketHeader market={market} onSelect={onSelect} />
+      <div>
+        <TradeMarketHeader market={market} onSelect={onSelect} />
+        <OracleBanner marketId={market?.id || ''} />
+      </div>
      <div className="h-full">
        <AutoSizer>
          {({ width, height }) => (
@@ -7,6 +7,7 @@ import { WithdrawalsContainer } from './withdrawals-container';
 import { FillsContainer } from '@vegaprotocol/fills';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
+import { usePaneLayout } from '@vegaprotocol/react-helpers';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { DepositsContainer } from './deposits-container';
 import { LayoutPriority } from 'allotment';
@@ -34,11 +35,11 @@ export const Portfolio = () => {

  const onMarketClick = useMarketClickHandler(true);
  const onOrderTypeClick = useMarketLiquidityClickHandler(true);
-
+  const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
  const wrapperClasses = 'h-full max-h-full flex flex-col';
  return (
    <div className={wrapperClasses}>
-      <ResizableGrid vertical>
+      <ResizableGrid vertical onChange={handleOnLayoutChange}>
        <ResizableGridPanel minSize={75}>
          <PortfolioGridChild>
            <Tabs storageKey="console-portfolio-top">
@@ -78,7 +79,7 @@ export const Portfolio = () => {
        </ResizableGridPanel>
        <ResizableGridPanel
          priority={LayoutPriority.Low}
-          preferredSize={300}
+          preferredSize={sizes[1] || 300}
          minSize={50}
        >
          <PortfolioGridChild>
@@ -26,7 +26,8 @@ export const OracleBanner = ({ marketId }: { marketId: string }) => {
  return (
    <NotificationBanner intent={Intent.Danger}>
      <div>
-        Oracle status for this market is {oracle.status}.{' '}
+        Oracle status for this market is{' '}
+        <span data-testId="oracle-status">{oracle.status}</span>.{' '}
        {oracleStatuses[oracle.status]}
      </div>
      {oracle.status_reason ? (
@@ -61,14 +61,7 @@ describe('AccountsTable', () => {
      );
    });
    const cells = await screen.findAllByRole('gridcell');
-    const expectedValues = [
-      'tBTC',
-      '1,256.00',
-      '1,256.00',
-      '2,512.00',
-      'Deposit',
-      'Withdraw',
-    ];
+    const expectedValues = ['tBTC', '1,256.00', '1,256.00', '2,512.00', ''];
    cells.forEach((cell, i) => {
      expect(cell).toHaveTextContent(expectedValues[i]);
    });
@@ -9,7 +9,17 @@ import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import { Button, ButtonLink, Dialog } from '@vegaprotocol/ui-toolkit';
+import {
+  Button,
+  ButtonLink,
+  Dialog,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
 import {
  AgGridDynamic as AgGrid,
@@ -122,7 +132,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
        params.data.asset.id === pinnedAssetId &&
        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
          ? 32
-          : 22,
+          : 24,
      [pinnedAssetId]
    );

@@ -256,7 +266,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
              colId="accounts-actions"
              headerName=""
              sortable={false}
-              minWidth={200}
+              maxWidth={200}
              type="rightAligned"
              cellRenderer={({
                data,
@@ -283,30 +293,66 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                    );
                  }
                  return (
-                    <>
-                      <span className="mx-1" />
-                      {!props.isReadOnly && (
-                        <ButtonLink
-                          data-testid="deposit"
-                          onClick={() => {
-                            onClickDeposit && onClickDeposit(data.asset.id);
-                          }}
-                        >
-                          {t('Deposit')}
-                        </ButtonLink>
-                      )}
-                      <span className="mx-1" />
-                      {!props.isReadOnly && (
-                        <ButtonLink
-                          data-testid="withdraw"
-                          onClick={() =>
-                            onClickWithdraw && onClickWithdraw(data.asset.id)
-                          }
-                        >
-                          {t('Withdraw')}
-                        </ButtonLink>
-                      )}
-                    </>
+                    !props.isReadOnly && (
+                      <DropdownMenu
+                        trigger={
+                          <DropdownMenuTrigger
+                            iconName="more"
+                            className="hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 p-0.5 focus:rounded-full hover:rounded-full"
+                            data-testid="dropdown-menu"
+                          ></DropdownMenuTrigger>
+                        }
+                      >
+                        <DropdownMenuContent>
+                          <DropdownMenuItem
+                            key={'deposit'}
+                            data-testid="deposit"
+                            onClick={() => {
+                              onClickDeposit && onClickDeposit(data.asset.id);
+                            }}
+                          >
+                            <span>
+                              <VegaIcon
+                                name={VegaIconNames.DEPOSIT}
+                                size={16}
+                              />
+                              {t('Deposit')}
+                            </span>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            key={'withdraw'}
+                            data-testid="withdraw"
+                            onClick={() =>
+                              onClickWithdraw && onClickWithdraw(data.asset.id)
+                            }
+                          >
+                            <span>
+                              <VegaIcon
+                                name={VegaIconNames.WITHDRAW}
+                                size={16}
+                              />
+                              {t('Withdraw')}
+                            </span>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            key={'breakdown'}
+                            data-testid="breakdown"
+                            onClick={() => {
+                              setOpenBreakdown(!openBreakdown);
+                              setRow(data);
+                            }}
+                          >
+                            <span>
+                              <VegaIcon
+                                name={VegaIconNames.BREAKDOWN}
+                                size={16}
+                              />
+                              {t('Breakdown')}
+                            </span>
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )
                  );
                }
              }}
@@ -314,7 +360,10 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
          }
        </AgGrid>
        <Dialog size="medium" open={openBreakdown} onChange={setOpenBreakdown}>
-          <div className="h-[35vh] w-full m-auto flex flex-col">
+          <div
+            className="h-[35vh] w-full m-auto flex flex-col"
+            data-testid="usage-breakdown"
+          >
            <h1 className="text-xl mb-4">
              {row?.asset?.symbol} {t('usage breakdown')}
            </h1>
@@ -1 +1,4 @@
-export const ASSET_ID_FOR_MARKET = 'fUSDC';
+export const ASSET_ID_FOR_MARKET =
+  '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc';
+
+export const ASSET_SYMBOL = 'fUSDC';
@@ -4,7 +4,7 @@ import { createLog } from './logging';
 import type { ProposalSubmissionBody } from '@vegaprotocol/wallet';
 import { getProposal } from './get-proposal';
 import { sendVegaTx } from './wallet-client';
-import { ASSET_ID_FOR_MARKET } from './contants';
+import { ASSET_ID_FOR_MARKET, ASSET_SYMBOL } from './contants';

 const log = createLog('propose-market');

@@ -43,7 +43,7 @@ function createNewMarketProposal(): ProposalSubmissionBody {
              code: 'TEST.24h',
              future: {
                settlementAsset: ASSET_ID_FOR_MARKET,
-                quoteName: ASSET_ID_FOR_MARKET,
+                quoteName: ASSET_SYMBOL,
                dataSourceSpecForSettlementData: {
                  external: {
                    oracle: {
@@ -66,7 +66,7 @@ export function addGetAssets() {

    cy.request({
      method: 'POST',
-      url: 'http://localhost:3028/query',
+      url: 'http://localhost:3008/graphql',
      body: {
        query: print(query),
      },
@@ -24,7 +24,7 @@ export function addGetNetworkParameters() {
  }`;
    cy.request({
      method: 'POST',
-      url: `http://localhost:3028/query`,
+      url: `http://localhost:3008/graphql`,
      body: {
        query: mutation,
      },
@@ -43,7 +43,7 @@ export function addGetNodes() {

    cy.request({
      method: 'POST',
-      url: `http://localhost:3028/query`,
+      url: `http://localhost:3008/graphql`,
      body: {
        query: print(query),
      },
@@ -70,7 +70,7 @@ const NetworkLabel = ({
  isCurrent = false,
  isAvailable = false,
 }: NetworkLabelProps) => (
-  <span className="text-neutral-800">
+  <span className="text-vega-dark-300 dark:text-vega-light-300">
    {getLabelText({ isCurrent, isAvailable })}
  </span>
 );
@@ -111,9 +111,12 @@ export const NetworkSwitcher = ({
      trigger={
        <DropdownMenuTrigger
          ref={menuRef}
-          className={classNames('flex justify-between items-center', className)}
+          className={classNames(
+            'flex justify-between items-center text-sm text-vega-dark-600 dark:text-vega-light-600 py-1 px-2 rounded border border-vega-dark-200 whitespace-nowrap dark:hover:bg-vega-dark-500 hover:bg-vega-light-500',
+            className
+          )}
        >
-          {envTriggerMapping[current]}
+          <span className="mr-2"> {envTriggerMapping[current]}</span>
        </DropdownMenuTrigger>
      }
    >
@@ -12,4 +12,5 @@ export default {
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: '../../coverage/libs/ledger',
+  setupFilesAfterEnv: ['./src/setup-tests.ts'],
 };
@@ -30,7 +30,10 @@ export type LedgerEntry = LedgerEntryFragment & {
 };

 export type AggregatedLedgerEntriesEdge = Schema.AggregatedLedgerEntriesEdge;
-export type AggregatedLedgerEntriesNode = AggregatedLedgerEntriesEdge & {
+export type AggregatedLedgerEntriesNode = Omit<
+  AggregatedLedgerEntriesEdge,
+  'node'
+> & {
  node: LedgerEntry;
 };

@@ -32,7 +32,7 @@ export const ledgerEntriesQuery = (
  return merge(defaultResult, override);
 };

-const ledgerEntries: LedgerEntryFragment[] = [
+export const ledgerEntries: LedgerEntryFragment[] = [
  {
    vegaTime: '1669224476734364000',
    quantity: '0',
@@ -180,7 +180,6 @@ const ledgerEntries: LedgerEntryFragment[] = [
    toAccountBalance: '0',
    fromAccountBalance: '0',
  },
-
  {
    vegaTime: '2022-11-24T12:41:22.054428Z',
    quantity: '1000000000',
@@ -0,0 +1,85 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LedgerExportLink } from './ledger-export-link';
+import * as Types from '@vegaprotocol/types';
+import { ledgerEntries } from './ledger-entries.mock';
+import type { LedgerEntry } from './ledger-entries-data-provider';
+
+const VEGA_URL = 'https://vega-url.co.uk/querystuff';
+const mockEnvironment = jest.fn(() => VEGA_URL);
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: jest.fn(() => mockEnvironment()),
+}));
+
+const asset = {
+  id: 'assetID',
+  name: 'assetName',
+  symbol: 'assetSymbol',
+  decimals: 1,
+  quantum: '1',
+  status: Types.AssetStatus,
+  source: {
+    __typename: 'ERC20',
+    contractAddress: 'contractAddres',
+    lifetimeLimit: 'lifetimeLimit',
+    withdrawThreshold: 'withdraw',
+  },
+};
+
+describe('LedgerExportLink', () => {
+  const partyId = 'partyId';
+  const entries = ledgerEntries.map((entry) => {
+    return {
+      ...entry,
+      asset: entry.assetId
+        ? {
+            ...asset,
+            id: entry.assetId,
+            name: `name ${entry.assetId}`,
+            symbol: `symbol ${entry.assetId}`,
+          }
+        : null,
+      marketSender: null,
+      marketReceiver: null,
+    } as LedgerEntry;
+  });
+
+  it('should be properly rendered', async () => {
+    render(<LedgerExportLink partyId={partyId} entries={entries} />);
+    await waitFor(() => {
+      expect(screen.getByRole('link')).toBeInTheDocument();
+      expect(screen.getByRole('link')).toHaveAttribute(
+        'href',
+        `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=asset-id`
+      );
+      expect(
+        screen.getByRole('button', { name: /^symbol asset-id/ })
+      ).toBeInTheDocument();
+    });
+  });
+  it('should be properly change link url', async () => {
+    render(<LedgerExportLink partyId={partyId} entries={entries} />);
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /^symbol asset-id/ })
+      ).toBeInTheDocument();
+    });
+    act(() => {
+      userEvent.click(screen.getByRole('button', { name: /^symbol asset-id/ }));
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    act(() => {
+      userEvent.click(
+        screen.getByRole('menuitem', { name: /^symbol asset-id-2/ })
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('link')).toHaveAttribute(
+        'href',
+        `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=asset-id-2`
+      );
+    });
+  });
+});
@@ -0,0 +1,71 @@
+import type { LedgerEntry } from './ledger-entries-data-provider';
+import { useMemo, useState } from 'react';
+import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Link,
+  Button,
+} from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+
+const getProtoHost = (vegaurl: string) => {
+  const loc = new URL(vegaurl);
+  return `${loc.protocol}//${loc.host}`;
+};
+
+export const LedgerExportLink = ({
+  partyId,
+  entries,
+}: {
+  partyId: string;
+  entries: LedgerEntry[];
+}) => {
+  const assets = entries.reduce((aggr, item) => {
+    if (item.asset && !(item.asset.id in aggr)) {
+      aggr[item.asset.id] = item.asset.symbol;
+    }
+    return aggr;
+  }, {} as Record<string, string>);
+  const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
+  const VEGA_URL = useEnvironment((store) => store.VEGA_URL);
+  const protohost = VEGA_URL ? getProtoHost(VEGA_URL) : '';
+
+  const assetDropDown = useMemo(() => {
+    return (
+      <DropdownMenu
+        trigger={<DropdownMenuTrigger>{assets[assetId]}</DropdownMenuTrigger>}
+      >
+        <DropdownMenuContent>
+          {Object.keys(assets).map((assetKey) => (
+            <DropdownMenuItem
+              key={assetKey}
+              onSelect={() => setAssetId(assetKey)}
+            >
+              {assets[assetKey]}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }, [assetId, assets]);
+
+  if (!protohost) {
+    return null;
+  }
+  return (
+    <div className="flex shrink items-stretch gap-2 p-2">
+      <div className="flex items-center">Export all</div>
+      {assetDropDown}
+      <Link
+        className="text-sm"
+        title={t('Download all to .csv file')}
+        href={`${protohost}/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${assetId}`}
+      >
+        <Button size="sm">{t('Download')}</Button>
+      </Link>
+    </div>
+  );
+};
@@ -3,12 +3,13 @@ import type * as Schema from '@vegaprotocol/types';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { FilterChangedEvent } from 'ag-grid-community';
 import type { AgGridReact } from 'ag-grid-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { subDays, formatRFC3339 } from 'date-fns';
 import type { AggregatedLedgerEntriesNode } from './ledger-entries-data-provider';
 import { useLedgerEntriesDataProvider } from './ledger-entries-data-provider';
 import { LedgerTable } from './ledger-table';
 import type * as Types from '@vegaprotocol/types';
+import { LedgerExportLink } from './ledger-export-link';

 export interface Filter {
  vegaTime?: {
@@ -22,6 +23,7 @@ const defaultFilter = {
    value: { start: formatRFC3339(subDays(Date.now(), 7)) },
  },
 };
+
 export const LedgerManager = ({ partyId }: { partyId: string }) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const [filter, setFilter] = useState<Filter>(defaultFilter);
@@ -55,6 +57,9 @@ export const LedgerManager = ({ partyId }: { partyId: string }) => {
        rowData={extractedData}
        onFilterChanged={onFilterChanged}
      />
+      {extractedData && (
+        <LedgerExportLink entries={extractedData} partyId={partyId} />
+      )}
      <div className="pointer-events-none absolute inset-0">
        <AsyncRenderer
          loading={loading}
@@ -49,7 +49,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
  (props, ref) => {
    return (
      <AgGrid
-        style={{ width: '100%', height: '100%' }}
+        style={{ width: '100%', height: 'calc(100% - 50px)' }}
        ref={ref}
        tooltipShowDelay={500}
        defaultColDef={{
@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
+global.DOMRect = class DOMRect {
+  bottom = 0;
+  left = 0;
+  right = 0;
+  top = 0;
+
+  constructor(
+    public x = 0,
+    public y = 0,
+    public width = 0,
+    public height = 0
+  ) {}
+  static fromRect(other?: DOMRectInit): DOMRect {
+    return new DOMRect(other?.x, other?.y, other?.width, other?.height);
+  }
+  toJSON() {
+    return JSON.stringify(this);
+  }
+};
@@ -19,25 +19,29 @@ export const useMarketOracle = (marketId: string) => {
      marketInfo.tradableInstrument.instrument.product
        .dataSourceSpecForSettlementData.data;
    return data.find((provider) =>
-      provider.proofs.some(
-        (proof) =>
-          (proof.type === 'eth_address' &&
-            dataSource.sourceType.__typename ===
-              'DataSourceDefinitionExternal' &&
-            dataSource.sourceType.sourceType.signers?.some(
-              (signer) =>
-                signer.signer.__typename === 'ETHAddress' &&
-                signer.signer.address === proof.eth_address
-            )) ||
-          (proof.type === 'public_key' &&
-            dataSource.sourceType.__typename ===
-              'DataSourceDefinitionExternal' &&
-            dataSource.sourceType.sourceType.signers?.some(
-              (signer) =>
-                signer.signer.__typename === 'PubKey' &&
-                signer.signer.key === proof.public_key
-            ))
-      )
+      provider.proofs.some((proof) => {
+        if (
+          proof.type === 'eth_address' &&
+          dataSource.sourceType.__typename === 'DataSourceDefinitionExternal'
+        ) {
+          return dataSource.sourceType.sourceType.signers?.some(
+            (signer) =>
+              signer.signer.__typename === 'ETHAddress' &&
+              signer.signer.address === proof.eth_address
+          );
+        }
+        if (
+          proof.type === 'public_key' &&
+          dataSource.sourceType.__typename === 'DataSourceDefinitionExternal'
+        ) {
+          return dataSource.sourceType.sourceType.signers?.some(
+            (signer) =>
+              signer.signer.__typename === 'PubKey' &&
+              signer.signer.key === proof.public_key
+          );
+        }
+        return false;
+      })
    )?.oracle;
  }, [data, marketInfo]);
 };
@@ -17,3 +17,4 @@ export * from './use-yesterday';
 export * from './use-previous';
 export * from './use-logger';
 export * from './use-bottom-placeholder';
+export * from './use-pane-layout';
@@ -0,0 +1,19 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { usePaneLayout } from './use-pane-layout';
+
+describe('usePaneLayout', () => {
+  it('should return proper values', () => {
+    const ret = renderHook(() => usePaneLayout({ id: 'testid' }));
+    expect(ret.result.current[0]).toStrictEqual([]);
+    expect(ret.result.current[1]).toStrictEqual(expect.any(Function));
+  });
+  it('setter should change value', async () => {
+    const ret = renderHook(() => usePaneLayout({ id: 'testid' }));
+    await act(() => {
+      ret.result.current[1]([100, 50, 50]);
+    });
+    await waitFor(() => {
+      expect(ret.result.current[0]).toStrictEqual(['50%', '25%', '25%']);
+    });
+  });
+});
@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import debounce from 'lodash/debounce';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+const STORAGE_KEY = 'vega_pane_store';
+const PANELS_SET_DEBOUNCE_TIME = 300;
+
+export const usePaneLayoutStore = create<{
+  sizes: Record<string, string[]>;
+  valueSetter: (id: string, value: string[]) => void;
+}>()(
+  persist(
+    immer((set) => ({
+      sizes: {},
+      valueSetter: (id, value) =>
+        set((state) => {
+          state.sizes[id] = value;
+          return state;
+        }),
+    })),
+    { name: STORAGE_KEY }
+  )
+);
+
+interface UsePaneLayoutProps {
+  id: string;
+}
+export const usePaneLayout = ({
+  id,
+}: UsePaneLayoutProps): [string[], (sizes: number[]) => void] => {
+  const sizes = usePaneLayoutStore((store) => store.sizes[id]) || [];
+  const valueSetter = usePaneLayoutStore((store) => store.valueSetter);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleOnChange = useCallback(
+    debounce((args) => {
+      if (args.length) {
+        const all = args.reduce((agg: number, item: number) => agg + item, 0);
+        const sizesArr = args.map((arg: number) => `${(arg / all) * 100}%`);
+        valueSetter(id, sizesArr);
+      }
+    }, PANELS_SET_DEBOUNCE_TIME),
+    [valueSetter, id]
+  );
+  return [sizes, handleOnChange];
+};
@@ -62,7 +62,7 @@ export function Dialog({
    <DialogPrimitives.Root open={open} onOpenChange={(x) => onChange?.(x)}>
      <DialogPrimitives.Portal>
        <DialogPrimitives.Overlay
-          className="fixed inset-0 bg-black/50 z-20"
+          className="fixed inset-0 dark:bg-black/80 bg-black/50 z-20"
          data-testid="dialog-overlay"
        />
        <DialogPrimitives.Content
@@ -2,13 +2,14 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
+import type { IconName } from '../icon';
 import { Icon } from '../icon';

 const itemClass = classNames(
  'relative flex items-center justify-between rounded-sm p-2 text-sm',
  'cursor-default hover:cursor-pointer',
-  'hover:bg-white dark:hover:bg-neutral-200',
-  'focus:bg-white dark:focus:bg-neutral-200',
+  'hover:bg-white dark:hover:bg-vega-dark-200',
+  'focus:bg-white dark:focus:bg-vega-dark-200',
  'select-none',
  'whitespace-nowrap'
 );
@@ -16,6 +17,11 @@ const itemClass = classNames(
 type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps & {
  trigger: ReactNode;
 };
+
+type DropdownTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps & {
+  iconName?: IconName;
+};
+
 /**
 * Contains all the parts of a dropdown menu.
 */
@@ -37,22 +43,20 @@ export const DropdownMenu = ({
 */
 export const DropdownMenuTrigger = forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>
->(({ className, children, ...props }, forwardedRef) => {
-  const triggerClasses = classNames(
-    className,
-    'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500 whitespace-nowrap',
-    'hover:bg-neutral-500/20 dark:hover:bg-neutral-500/40'
-  );
+  DropdownTriggerProps
+>(({ className, children, iconName, ...props }, forwardedRef) => {
+  const defaultClasses =
+    'text-sm py-1 px-2 rounded bg-transparent border border-vega-dark-200 whitespace-nowrap dark:hover:bg-vega-dark-500/20 hover:bg-vega-light-500/40';
+
  return (
    <DropdownMenuPrimitive.Trigger
      asChild={true}
      ref={forwardedRef}
-      className={triggerClasses}
+      className={className || defaultClasses}
      {...props}
    >
      <button>
-        {children} <Icon name="chevron-down" className="ml-2" />
+        {children} <Icon name={iconName || 'chevron-down'} />
      </button>
    </DropdownMenuPrimitive.Trigger>
  );
@@ -73,7 +77,7 @@ export const DropdownMenuContent = forwardRef<
  <DropdownMenuPrimitive.Content
    {...contentProps}
    ref={forwardedRef}
-    className="min-w-[290px] bg-neutral-200 dark:bg-white p-2 rounded z-20 dark:text-black"
+    className="min-w-[290px] bg-vega-light-100 dark:bg-vega-dark-100 p-2 rounded z-20 text-black dark:text-white border-vega-light-200 dark:border-vega-dark-200"
    align="start"
    sideOffset={10}
  />
@@ -115,9 +119,9 @@ export const DropdownMenuRadioItem = forwardRef<
  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
    inset?: boolean;
  }
->(({ className, inset = false, ...radioItemprops }, forwardedRef) => (
+>(({ className, inset = false, ...radioItemProps }, forwardedRef) => (
  <DropdownMenuPrimitive.RadioItem
-    {...radioItemprops}
+    {...radioItemProps}
    ref={forwardedRef}
    className={classNames(itemClass, className)}
  />
@@ -151,7 +155,7 @@ export const DropdownMenuSeparator = forwardRef<
    {...separatorProps}
    ref={forwardedRef}
    className={classNames(
-      'h-px my-1 mx-2 bg-neutral-400 dark:bg-neutral-300',
+      'h-px my-1 mx-2 bg-vega-dark-400 dark:bg-vega-dark-300',
      className
    )}
  />
@@ -0,0 +1 @@
+export * from './icon';
@@ -1 +1,2 @@
-export * from './icon';
+export * from './blueprint-icons';
+export * from './vega-icons';
@@ -0,0 +1,3 @@
+export * from './vega-icon';
+export * from './vega-icon.stories';
+export * from './vega-icon-record';
@@ -0,0 +1,29 @@
+export const IconBreakdown = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="8" cy="8" r="6.5" stroke="stroke-current" />
+      <rect
+        x="8.5"
+        y="11"
+        width="1"
+        height="4"
+        transform="rotate(-180 8.5 11)"
+        fill="white"
+      />
+      <rect
+        x="8.5"
+        y="6"
+        width="1"
+        height="1"
+        transform="rotate(-180 8.5 6)"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconCopy = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.47021 1.46997H14.5302V11.53H12.5002V10.47H13.4702V2.52997H5.53021V3.49997H4.47021V1.46997ZM1.47021 4.46997H11.5302V14.53H1.47021V4.46997ZM2.53021 5.52997V13.47H10.4702V5.52997H2.53021Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,17 @@
+export const IconDeposit = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="13" width="8" height="1" fill="white" />
+      <path
+        d="M8.52977 8.72048L11.625 5.62524L12.3745 6.37478L7.99977 10.7495L3.625 6.37478L4.37453 5.62524L7.46977 8.72048V2H8.52977V8.72048Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconEdit = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.31 10.44L1.5 14.5L5.56 13.69L14.5 4.75L11.25 1.5V1.51L9.97784 2.78074L9.97356 2.77646L9.26645 3.48357L9.27033 3.48745L2.31 10.44ZM11.25 2.92L13.08 4.75L12.5135 5.31645L10.6835 3.48645L11.25 2.92ZM9.97644 4.19356L11.8064 6.02356L6.02355 11.8064L4.19355 9.97645L9.97644 4.19356ZM5.31644 12.5136L5.07 12.76L2.78 13.22L3.24 10.93L3.48644 10.6836L5.31644 12.5136Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconForum = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.20755 15.7736H6V4H8.20755V15.7736ZM10.4151 17.8585V15.7736H8.20755V17.9811H10.4151V20.066H12.6226V17.9811H14.8302V15.7736H12.6226V17.8585H10.4151ZM16.7925 13.566H14.5849V4H16.7925V13.566ZM16.7925 13.566H19V15.7736H16.7925V13.566Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconGlobe = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.9946 3C10.2165 3.00106 8.47842 3.52883 6.99987 4.51677C5.51983 5.5057 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C21 9.61305 20.0518 7.32386 18.364 5.63604C16.6761 3.94821 14.3869 3 12 3C12.0001 3 11.9999 3 12 3M11.9959 3.936C11.9972 3.936 11.9985 3.936 11.9999 3.936C13.2976 3.93617 14.3772 5.83592 14.9515 8.22998H9.04712C9.62068 5.83664 10.6991 3.93971 11.9959 3.936ZM9.8073 4.24157C9.05208 5.16925 8.44481 6.56185 8.07534 8.22998H4.87438C5.24741 7.52551 5.72602 6.87397 6.3 6.3C7.28288 5.31711 8.49319 4.61388 9.8073 4.24157ZM4.42885 9.22998C4.10667 10.1091 3.93685 11.0458 3.936 12C3.936 12.9499 4.10378 13.8872 4.42669 14.77H7.88922C7.75324 13.8973 7.67969 12.9663 7.67969 12C7.67969 11.0336 7.7527 10.1027 7.8879 9.22998H4.42885ZM4.87153 15.77C5.00006 16.013 5.14133 16.2501 5.29503 16.4801C6.18112 17.8062 7.44054 18.8398 8.91404 19.4502C9.20977 19.5727 9.51146 19.677 9.81744 19.763C9.06048 18.8354 8.44956 17.4409 8.07765 15.77H4.87153ZM14.1834 19.7628C15.5101 19.3896 16.7227 18.6815 17.7021 17.7021C18.2744 17.1298 18.7541 16.4778 19.1285 15.77H15.9224C15.5508 17.4416 14.9402 18.8355 14.1834 19.7628ZM19.5733 14.77C19.7153 14.3819 19.8278 13.9819 19.9091 13.5732C20.1981 12.12 20.0808 10.6174 19.5733 9.22998H16.1106C16.2463 10.1024 16.3197 11.0333 16.3197 12C16.3197 12.9667 16.2463 13.8976 16.1106 14.77H19.5733ZM19.1285 8.22998C18.5047 7.05058 17.596 6.04063 16.4801 5.29503C15.7711 4.82129 14.9955 4.46564 14.1834 4.23723C14.9402 5.16453 15.5508 6.55844 15.9224 8.22998H19.1285ZM8.60129 12C8.60129 11.0806 8.68603 10.1352 8.84194 9.22998H15.1569C15.3132 10.1358 15.3981 11.0814 15.3981 12C15.3981 12.9186 15.314 13.8642 15.1588 14.77H8.84003C8.68519 13.8648 8.60129 12.9194 8.60129 12ZM11.9997 20.064C10.6916 20.064 9.61486 18.1657 9.04394 15.77H14.9547C14.3836 18.1642 13.3072 20.064 11.9997 20.064Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,16 @@
+export const IconLinkedIn = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 4.32353V19.6765C21 20.0275 20.8606 20.3641 20.6123 20.6123C20.3641 20.8606 20.0275 21 19.6765 21H4.32353C3.97251 21 3.63586 20.8606 3.38765 20.6123C3.13944 20.3641 3 20.0275 3 19.6765V4.32353C3 3.97251 3.13944 3.63586 3.38765 3.38765C3.63586 3.13944 3.97251 3 4.32353 3H19.6765C20.0275 3 20.3641 3.13944 20.6123 3.38765C20.8606 3.63586 21 3.97251 21 4.32353V4.32353ZM8.29412 9.88235H5.64706V18.3529H8.29412V9.88235ZM8.53235 6.97059C8.53375 6.77036 8.49569 6.57182 8.42035 6.3863C8.34502 6.20078 8.23387 6.03191 8.09328 5.88935C7.95268 5.74678 7.78537 5.6333 7.60091 5.5554C7.41646 5.47749 7.21846 5.43668 7.01824 5.43529H6.97059C6.5634 5.43529 6.1729 5.59705 5.88497 5.88497C5.59705 6.1729 5.43529 6.5634 5.43529 6.97059C5.43529 7.37777 5.59705 7.76828 5.88497 8.05621C6.1729 8.34413 6.5634 8.50588 6.97059 8.50588V8.50588C7.17083 8.51081 7.37008 8.47623 7.55696 8.40413C7.74383 8.33202 7.91467 8.2238 8.0597 8.08565C8.20474 7.94749 8.32113 7.78212 8.40223 7.59897C8.48333 7.41582 8.52755 7.21848 8.53235 7.01824V6.97059ZM18.3529 13.2071C18.3529 10.6606 16.7329 9.67059 15.1235 9.67059C14.5966 9.6442 14.0719 9.75644 13.6019 9.9961C13.1318 10.2358 12.7328 10.5945 12.4447 11.0365H12.3706V9.88235H9.88235V18.3529H12.5294V13.8476C12.4911 13.3862 12.6365 12.9283 12.9339 12.5735C13.2313 12.2186 13.6567 11.9954 14.1176 11.9524H14.2182C15.06 11.9524 15.6847 12.4818 15.6847 13.8159V18.3529H18.3318L18.3529 13.2071Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,23 @@
+export const IconMoon = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 1C4.13 1 1 4.13 1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1ZM8.66 12.44H7.32V11.1H8.66V12.44ZM10.38 6.78C10.29 7.01 10.18 7.2 10.05 7.36C9.92 7.52 9.75 7.7 9.53 7.91C9.3 8.14 9.11 8.34 8.98 8.51C8.85 8.68 8.73 8.89 8.64 9.14C8.55 9.37 8.51 9.65 8.51 9.96V10.04V10.13H7.3V10.04C7.3 9.61 7.36 9.24 7.47 8.92C7.58 8.61 7.71 8.34 7.87 8.13C8.03 7.92 8.22 7.69 8.47 7.43C8.75 7.13 8.96 6.87 9.09 6.66C9.22 6.46 9.28 6.2 9.28 5.88C9.28 5.47 9.16 5.16 8.93 4.93C8.7 4.7 8.38 4.58 7.96 4.58C7.6 4.58 7.28 4.68 7.01 4.89C6.75 5.09 6.56 5.44 6.45 5.96C6.34 6.48 6.43 6.06 6.43 6.06L5.26 5.62L5.28 5.54C5.47 4.87 5.81 4.35 6.29 4.02C6.77 3.69 7.34 3.53 8 3.53C8.75 3.53 9.37 3.75 9.82 4.18C10.28 4.62 10.5 5.22 10.5 5.97C10.5 6.27 10.46 6.53 10.37 6.76L10.38 6.78Z"
+        fill="white"
+      />
+      <circle cx="8" cy="8" r="7" fill="white" />
+      <path
+        d="M6.15393 5.69232C6.15393 5.10304 6.24054 4.5075 6.46161 4C4.99179 4.63982 4 6.14089 4 7.84607C4 10.1402 5.85982 12 8.15393 12C9.85911 12 11.3602 11.0082 12 9.53839C11.4925 9.75946 10.8964 9.84607 10.3077 9.84607C8.01357 9.84607 6.15393 7.98643 6.15393 5.69232Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,16 @@
+export const IconOpenExternal = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.9605 4.28998H3.76002V3.22998H12.77V12.24H11.71V5.03952L4.13479 12.6148L3.38525 11.8652L10.9605 4.28998Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const IconQuestionMark = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 1C4.13 1 1 4.13 1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1ZM8.66 12.44H7.32V11.1H8.66V12.44ZM10.38 6.78C10.29 7.01 10.18 7.2 10.05 7.36C9.92 7.52 9.75 7.7 9.53 7.91C9.3 8.14 9.11 8.34 8.98 8.51C8.85 8.68 8.73 8.89 8.64 9.14C8.55 9.37 8.51 9.65 8.51 9.96V10.04V10.13H7.3V10.04C7.3 9.61 7.36 9.24 7.47 8.92C7.58 8.61 7.71 8.34 7.87 8.13C8.03 7.92 8.22 7.69 8.47 7.43C8.75 7.13 8.96 6.87 9.09 6.66C9.22 6.46 9.28 6.2 9.28 5.88C9.28 5.47 9.16 5.16 8.93 4.93C8.7 4.7 8.38 4.58 7.96 4.58C7.6 4.58 7.28 4.68 7.01 4.89C6.75 5.09 6.56 5.44 6.45 5.96L6.43 6.06L5.26 5.62L5.28 5.54C5.47 4.87 5.81 4.35 6.29 4.02C6.77 3.69 7.34 3.53 8 3.53C8.75 3.53 9.37 3.75 9.82 4.18C10.28 4.62 10.5 5.22 10.5 5.97C10.5 6.27 10.46 6.53 10.37 6.76L10.38 6.78Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,20 @@
+export const IconTransfer = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.27952 5.90477L5.37476 8L4.62522 8.74953L1.25046 5.37477L4.62522 2L5.37476 2.74953L3.27952 4.84477L9 4.84477L9 5.90477L3.27952 5.90477Z"
+        fill="white"
+      />
+      <path
+        d="M12.7205 10.0952L10.6252 8L11.3748 7.25047L14.7495 10.6252L11.3748 14L10.6252 13.2505L12.7205 11.1552L7 11.1552L7 10.0952L12.7205 10.0952Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,16 @@
+export const IconTwitter = ({ size = 24 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.28743 20.2575C15.8423 20.2575 19.9641 14 19.9641 8.58084C19.9641 8.4012 19.9641 8.22156 19.9541 8.0519C20.7525 7.47305 21.4511 6.74451 22 5.92615C21.2615 6.25549 20.4731 6.47505 19.6447 6.57485C20.493 6.06587 21.1417 5.26747 21.4511 4.2994C20.6627 4.76846 19.7844 5.10778 18.8463 5.29741C18.0978 4.499 17.0299 4 15.8523 4C13.5868 4 11.7505 5.83633 11.7505 8.1018C11.7505 8.42116 11.7904 8.74052 11.8603 9.03992C8.43713 8.86028 5.40319 7.22355 3.38723 4.7485C3.02794 5.34731 2.82834 6.05589 2.82834 6.80439C2.82834 8.23154 3.55689 9.48902 4.65469 10.2176C3.97605 10.2076 3.34731 10.018 2.7984 9.70858C2.7984 9.72854 2.7984 9.73852 2.7984 9.75848C2.7984 11.7445 4.21557 13.4112 6.09182 13.7804C5.74251 13.8703 5.38323 13.9202 5.01397 13.9202C4.75449 13.9202 4.49501 13.8902 4.24551 13.8503C4.76447 15.477 6.28144 16.6647 8.07784 16.7046C6.67066 17.8024 4.90419 18.4611 2.97804 18.4611C2.6487 18.4611 2.31936 18.4411 2 18.4012C3.80639 19.5788 5.96208 20.2575 8.28743 20.2575Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,17 @@
+export const IconWithdraw = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.47023 4.0291L4.375 7.12433L3.62547 6.37479L8.00023 2.00003L12.375 6.3748L11.6255 7.12433L8.53023 4.0291L8.53023 10.7496L7.47023 10.7496L7.47023 4.0291Z"
+        fill="white"
+      />
+      <rect x="4" y="13" width="8" height="1" fill="white" />
+    </svg>
+  );
+};
@@ -0,0 +1,48 @@
+import { IconBreakdown } from './svg-icons/icon-breakdown';
+import { IconCopy } from './svg-icons/icon-copy';
+import { IconDeposit } from './svg-icons/icon-deposit';
+import { IconWithdraw } from './svg-icons/icon-withdraw';
+import { IconTransfer } from './svg-icons/icon-transfer';
+import { IconEdit } from './svg-icons/icon-edit';
+import { IconMoon } from './svg-icons/icon-moon';
+import { IconGlobe } from './svg-icons/icon-globe';
+import { IconLinkedIn } from './svg-icons/icon-linkedin';
+import { IconTwitter } from './svg-icons/icon-twitter';
+import { IconQuestionMark } from './svg-icons/icon-question-mark';
+import { IconForum } from './svg-icons/icon-forum';
+import { IconOpenExternal } from './svg-icons/icon-open-external';
+
+export enum VegaIconNames {
+  BREAKDOWN = 'breakdown',
+  COPY = 'copy',
+  DEPOSIT = 'deposit',
+  WITHDRAW = 'withdraw',
+  EDIT = 'edit',
+  TRANSFER = 'transfer',
+  FORUM = 'forum',
+  GLOBE = 'globe',
+  LINKEDIN = 'linkedin',
+  TWITTER = 'twitter',
+  MOON = 'moon',
+  OPEN_EXTERNAL = 'open-external',
+  QUESTION_MARK = 'question-mark',
+}
+
+export const VegaIconNameMap: Record<
+  VegaIconNames,
+  ({ size }: { size: number }) => JSX.Element
+> = {
+  breakdown: IconBreakdown,
+  copy: IconCopy,
+  deposit: IconDeposit,
+  withdraw: IconWithdraw,
+  transfer: IconTransfer,
+  edit: IconEdit,
+  moon: IconMoon,
+  globe: IconGlobe,
+  linkedin: IconLinkedIn,
+  twitter: IconTwitter,
+  'question-mark': IconQuestionMark,
+  forum: IconForum,
+  'open-external': IconOpenExternal,
+};
@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import { VegaIcon } from './vega-icon';
+import { VegaIconNames } from './vega-icon-record';
+
+describe('VegaIcon', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<VegaIcon name={VegaIconNames.TWITTER} />);
+    expect(baseElement).toBeTruthy();
+  });
+});
@@ -0,0 +1,28 @@
+import type { Story, Meta } from '@storybook/react';
+import type { VegaIconProps } from './vega-icon';
+import { VegaIcon } from './vega-icon';
+import { VegaIconNames } from './vega-icon-record';
+
+export default {
+  component: VegaIcon,
+  title: 'VegaIcon',
+} as Meta;
+
+const Template: Story<VegaIconProps> = (args) => <VegaIcon {...args} />;
+
+export const Small = Template.bind({});
+Small.args = {
+  name: VegaIconNames.BREAKDOWN,
+};
+
+export const Bigger = Template.bind({});
+Bigger.args = {
+  name: VegaIconNames.DEPOSIT,
+  size: 24,
+};
+
+export const EvenBigger = Template.bind({});
+EvenBigger.args = {
+  name: VegaIconNames.GLOBE,
+  size: 32,
+};
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+import type { VegaIconNames } from './vega-icon-record';
+import { VegaIconNameMap } from './vega-icon-record';
+
+export interface VegaIconProps {
+  name: VegaIconNames;
+  size?: 16 | 24 | 32;
+}
+
+export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {
+  const effectiveClassName = classNames(
+    'inline-block',
+    'align-text-bottom',
+    'pr-1',
+    'stroke-current'
+  );
+  const Element = VegaIconNameMap[name];
+  return (
+    <span className={effectiveClassName}>
+      <Element size={size} />
+    </span>
+  );
+};
@@ -120,7 +120,11 @@ describe('VegaConnectDialog', () => {
        .mockImplementation(() =>
          Promise.resolve({ success: true, error: null })
        );
-
+      jest
+        .spyOn(connectors.rest, 'connect')
+        .mockImplementation(() =>
+          Promise.resolve([{ publicKey: 'pubkey', name: 'test key 1' }])
+        );
      render(generateJSX());
      // Switches to rest form
      fireEvent.click(await screen.findByText('Hosted Fairground wallet'));
@@ -138,10 +142,11 @@ describe('VegaConnectDialog', () => {
      await act(async () => {
        fireEvent.submit(screen.getByTestId('rest-connector-form'));
      });
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledWith(fields);

-      expect(spy).toHaveBeenCalledWith(fields);
-
-      expect(mockCloseVegaDialog).toHaveBeenCalled();
+        expect(mockCloseVegaDialog).toHaveBeenCalled();
+      });
    });

    it('handles failed connection', async () => {
@@ -24,7 +24,8 @@
          "echo $NX_TENDERMINT_WEBSOCKET_URL",
          "echo $NX_USE_ENV_OVERRIDES",
          "echo $NX_ETHEREUM_PROVIDER_URL"
-        ]
+        ],
+        "url": "https://cloud.nx.app"
      }
    }
  },
@@ -1,7 +1,7 @@
 {
 	"app_state": {
 	  "assets": {
-		"fBTC": {
+		"73174a6fb1d5802ba0ac7bd7ab79e0a3a4837b262de0a4e80815a55442692bd0": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "BTC (fake)",
@@ -13,7 +13,7 @@
 			}
 		  }
 		},
-		"fDAI": {
+		"8566db7257222b5b7ef2886394ad28b938b28680a54a169bbc795027b89d6665": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "DAI (fake)",
@@ -25,7 +25,7 @@
 			}
 		  }
 		},
-		"fEURO": {
+		"e02d4c15d790d1d2dffaf2dcd1cf06a1fe656656cf4ed18c8ce99f9e83643567": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "EURO (fake)",
@@ -37,7 +37,7 @@
 			}
 		  }
 		},
-		"fUSDC": {
+		"816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "USDC (fake)",
@@ -49,7 +49,7 @@
 			}
 		  }
 		},
-		"XYZalpha": {
+		"62dfb1ab1cd488862b416cf163c75bc9a279226c65ac287c0dd67650daa444ee": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "XYZ (α alpha)",
@@ -61,7 +61,7 @@
 			}
 		  }
 		},
-		"XYZbeta": {
+		"dedb3c42e7bc88d98a7fe0d73c7b9870b34c62c79a713071bd4d645ef7c216ee": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "XYZ (β beta)",
@@ -73,7 +73,7 @@
 			}
 		  }
 		},
-		"XYZgamma": {
+		"a0ea8a48eb5cb024e66be5777bea75165ffcaf0be82d9047e376ce352e202f76": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "XYZ (γ gamma)",
@@ -85,7 +85,7 @@
 			}
 		  }
 		},
-		"XYZdelta": {
+		"9ed5dd08c88e38f1c92cb8f056bd9d0507512c9ea4e6f308936f73646187b8e9": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "XYZ (δ delta)",
@@ -97,7 +97,7 @@
 			}
 		  }
 		},
-		"XYZepsilon": {
+		"bdcde894dcc4ffa11d6192065d84f9dcc75814cf24760ff4f3e50d64eaddbc02": {
 		  "min_lp_stake": "1",
 		  "decimals": 5,
 		  "name": "XYZ (ε epsilon)",
Author	SHA1	Message	Date
maciek	6699df1296	feat: market view persistent pane sizes - add ulr option to the nx cloud task runner	2023-04-28 12:42:20 +02:00
maciek	a936174385	feat: market view persistent pane sizes - improve some other test	2023-04-28 09:55:47 +02:00
maciek	264629b7b0	feat: market view persistent pane sizes - improve some other test	2023-04-28 09:52:39 +02:00
maciek	54756eb58b	Merge remote-tracking branch 'origin/develop' into feat/3392-persist-pane-sizes	2023-04-28 08:30:51 +02:00
dexturr	e4fd040933	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-28 06:08:57 +00:00
dexturr	30c1dbd019	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-28 00:14:44 +00:00
daro-majandm.ray	5e558c4cd3	test(trading): 7001-COLL-collateral - e2e tests (#3561 ) Co-authored-by: m.ray <16125548+MadalinaRaicu@users.noreply.github.com>	2023-04-27 21:28:25 +02:00
dexturr	85060a0421	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-27 18:10:05 +00:00
Sam Keen	b336291b49	fix(governance): use default jsonrpc connector when the provider from useWe… (#3563 )	2023-04-27 16:26:00 +00:00
maciek	f236e03709	feat: market view persistent pane sizes - add unit test	2023-04-27 17:02:43 +02:00
maciek	5f56eb8f0e	feat: market view persistent pane sizes - add unit test	2023-04-27 16:12:12 +02:00
maciek	a570d65d21	Merge remote-tracking branch 'origin/develop' into feat/3392-persist-pane-sizes	2023-04-27 16:05:46 +02:00
maciek	b04ae74e41	feat: market view persistent pane sizes - add unit test	2023-04-27 16:05:16 +02:00
Joe Tsang	0f7bffd38b	test(ci): capsule update v0.71.1 (#3559 )	2023-04-27 14:37:55 +01:00
maciek	1ab3846881	Merge remote-tracking branch 'origin/develop' into feat/3392-persist-pane-sizes	2023-04-27 15:18:12 +02:00
maciek	c6877bc831	feat: market view persistent pane sizes - refactor to use hook	2023-04-27 15:17:52 +02:00
dexturr	3665375b75	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-04-27 12:09:22 +00:00
m.ray	8572c0a570	feat(trading): data grid dropdown menu in collateral table and vega icons (#3472 )	2023-04-27 09:21:05 +00:00
Maciek	6a29dc82ef	feat(ledger): add link for download ledger entries to .csv (#3454 )	2023-04-27 08:53:28 +00:00
Bartłomiej Głownia	c19bcc5e0c	feat(trading): add oracle banner e2e tests (#3524 )	2023-04-27 09:47:18 +01:00
maciek	f13b00223e	Merge remote-tracking branch 'origin/develop' into feat/3392-persist-pane-sizes	2023-04-27 10:40:28 +02:00
maciek	e5182939af	Merge remote-tracking branch 'origin/develop' into feat/3392-persist-pane-sizes	2023-04-26 11:41:45 +02:00
maciek	ac03cc6815	feat: market view persistent pane sizes - fix type error	2023-04-26 11:41:19 +02:00
maciek	c1da8f978c	Merge remote-tracking branch 'origin/develop' into feat/3392-persist-pane-sizes	2023-04-26 09:08:26 +02:00
maciek	058b4bbf95	feat: market view persistent pane sizes - fix linters	2023-04-26 09:08:09 +02:00
maciek	dd7ce9387f	feat: market view persistent pane sizes	2023-04-25 17:07:21 +02:00
maciek	e025fdfb2e	feat: market view persistent pane sizes	2023-04-25 17:05:18 +02:00
maciek	163cdc6efa	feat: market view persistent pane sizes	2023-04-25 16:58:36 +02:00