chore: upgrade to 1.0.1

chore: update snap to 1.0.0
feat(trading): add LP fee settings (#5773 )
2024-02-09 12:20:30 -08:00 · 2024-02-09 12:19:17 -08:00 · 2024-02-09 19:44:15 +00:00 · 2024-02-09 12:55:17 +00:00 · 2024-02-09 10:32:54 +00:00 · 2024-02-09 10:31:15 +00:00
125 changed files with 2589 additions and 1270 deletions
@@ -205,7 +205,7 @@ jobs:
      # run tests
      #----------------------------------------------
      - name: Run tests
-        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v --numprocesses 1 --dist loadfile --durations=45
+        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v --numprocesses 4 --dist loadfile --durations=45
        working-directory: apps/trading/e2e
      #----------------------------------------------
      # upload traces
@@ -4,7 +4,7 @@ The front-end monorepo provides a toolkit for building apps that interact with V

 This repository is managed using [Nx](https://nx.dev).

-# 🔎 Applications in this repo
+## 🔎 Applications in this repo

 ### [Block explorer](./apps/explorer)

@@ -30,7 +30,7 @@ Hosting for static content being shared across apps, for example fonts.

 The utility dApp for validators wishing to add or remove themselves as a signer of the multisig contract.

-# 🧱 Libraries in this repo
+## 🧱 Libraries in this repo

 ### [UI toolkit](./libs/ui-toolkit)

@@ -53,7 +53,7 @@ A utility library for connecting to the Ethereum network and interacting with Ve

 Generic react helpers that can be used across multiple applications, along with other utilities.

-# 💻 Develop
+## 💻 Develop

 ### Set up

@@ -103,7 +103,7 @@ In CI linting, formatting and also run. These checks can be seen in the [CI work

 Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more.

-# 🐋 Hosting a console
+## 🐋 Hosting a console

 To host a console there are two possible build scenarios for running the frontends: nx performed **outside** or **inside** docker build. For specific build instructions follow [build instructions](#build-instructions).

@@ -226,6 +226,6 @@ Note: The script is only needed if capsule was built for first time or fresh. To
 vega wallet service run -n DV --load-tokens --tokens-passphrase-file passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet
 ```

-# 📑 License
+## 📑 License

 [MIT](./LICENSE)
@@ -24,10 +24,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
          cy.get_element_by_col_id('title').should('have.text', proposalTitle);
          cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
          cy.get_element_by_col_id('state').should('have.text', 'Enacted');
-          cy.getByTestId('vote-progress').should('be.visible');
-          cy.getByTestId('vote-progress-bar-for')
-            .invoke('attr', 'style')
-            .should('eq', 'width: 100%;');
          cy.get('[col-id="cDate"]')
            .invoke('text')
            .should('match', dateTimeRegex);
@@ -73,10 +69,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
            'have.text',
            'Waiting for Node Vote'
          );
-          cy.getByTestId('vote-progress').should('be.visible');
-          cy.getByTestId('vote-progress-bar-against')
-            .invoke('attr', 'style')
-            .should('eq', 'width: 100%;');
          cy.get('[col-id="cDate"]')
            .invoke('text')
            .should('match', dateTimeRegex);
@@ -1,4 +1,4 @@
-export type HashProps = {
+export type HashProps = React.HTMLProps<HTMLSpanElement> & {
  text: string;
  truncate?: boolean;
 };
@@ -2,4 +2,5 @@ export { default as BlockLink } from './block-link/block-link';
 export { default as PartyLink } from './party-link/party-link';
 export { default as NodeLink } from './node-link/node-link';
 export { default as MarketLink } from './market-link/market-link';
+export { default as NetworkParameterLink } from './network-parameter-link/network-parameter-link';
 export * from './asset-link/asset-link';
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Routes } from '../../../routes/route-names';
+import { Link } from 'react-router-dom';
+
+import type { ComponentProps } from 'react';
+import Hash from '../hash';
+
+export type NetworkParameterLinkProps = Partial<ComponentProps<typeof Link>> & {
+  parameter: string;
+};
+
+/**
+ * Links a given network parameter to the relevant page and anchor on the page
+ */
+const NetworkParameterLink = ({
+  parameter,
+  ...props
+}: NetworkParameterLinkProps) => {
+  return (
+    <Link
+      className="underline"
+      {...props}
+      to={`/${Routes.NETWORK_PARAMETERS}#${parameter}`}
+    >
+      <Hash text={parameter} />
+    </Link>
+  );
+};
+
+export default NetworkParameterLink;
@@ -26,7 +26,7 @@ const ProposalLink = ({ id, text }: ProposalLinkProps) => {
  >;

  const base = ENV.dataSources.governanceUrl;
-  const label = proposal?.rationale.title || id;
+  const label = proposal?.rationale?.title || id;

  return (
    <ExternalLink href={`${base}/proposals/${id}`}>
@@ -1,5 +1,4 @@
 import { type ProposalListFieldsFragment } from '@vegaprotocol/proposals';
-import { VoteProgress } from '@vegaprotocol/proposals';
 import { type AgGridReact } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGrid } from '@vegaprotocol/datagrid';
@@ -12,12 +11,7 @@ import { type ColDef } from 'ag-grid-community';
 import type { RowClickedEvent } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import {
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
 import { ProposalStateMapping } from '@vegaprotocol/types';
-import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { JsonViewerDialog } from '../dialogs/json-viewer-dialog';
@@ -31,15 +25,7 @@ type ProposalsTableProps = {
  data: ProposalListFieldsFragment[] | null;
 };
 export const ProposalsTable = ({ data }: ProposalsTableProps) => {
-  const { params } = useNetworkParams([
-    NetworkParams.governance_proposal_market_requiredMajority,
-  ]);
  const tokenLink = useLinks(DApp.Governance);
-  const requiredMajorityPercentage = useMemo(() => {
-    const requiredMajority =
-      params?.governance_proposal_market_requiredMajority ?? 1;
-    return new BigNumber(requiredMajority).times(100);
-  }, [params?.governance_proposal_market_requiredMajority]);

  const gridRef = useRef<AgGridReact>(null);
  useLayoutEffect(() => {
@@ -90,33 +76,6 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
          return value ? ProposalStateMapping[value] : '-';
        },
      },
-      {
-        colId: 'voting',
-        maxWidth: 100,
-        hide: window.innerWidth <= BREAKPOINT_MD,
-        headerName: t('Voting'),
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
-          if (data) {
-            const yesTokens = new BigNumber(data.votes.yes.totalTokens);
-            const noTokens = new BigNumber(data.votes.no.totalTokens);
-            const totalTokensVoted = yesTokens.plus(noTokens);
-            const yesPercentage = totalTokensVoted.isZero()
-              ? new BigNumber(0)
-              : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
-            return (
-              <div className="flex h-full items-center justify-center pt-2 uppercase">
-                <VoteProgress
-                  threshold={requiredMajorityPercentage}
-                  progress={yesPercentage}
-                />
-              </div>
-            );
-          }
-          return '-';
-        },
-      },
      {
        colId: 'cDate',
        maxWidth: 150,
@@ -184,7 +143,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
        },
      },
    ],
-    [requiredMajorityPercentage, tokenLink]
+    [tokenLink]
  );
  return (
    <>
@@ -5,5 +5,10 @@ query ExplorerProposalStatus($id: ID!) {
      state
      rejectionReason
    }
+    ... on BatchProposal {
+      id
+      state
+      rejectionReason
+    }
  }
 }
@@ -8,7 +8,7 @@ export type ExplorerProposalStatusQueryVariables = Types.Exact<{
 }>;


-export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'BatchProposal' } | { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };
+export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'BatchProposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };


 export const ExplorerProposalStatusDocument = gql`
@@ -19,6 +19,11 @@ export const ExplorerProposalStatusDocument = gql`
      state
      rejectionReason
    }
+    ... on BatchProposal {
+      id
+      state
+      rejectionReason
+    }
  }
 }
    `;
@@ -0,0 +1,257 @@
+import { render, screen } from '@testing-library/react';
+import { BatchItem } from './batch-item';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+import type { components } from '../../../../../types/explorer';
+type Item = components['schemas']['vegaBatchProposalTermsChange'];
+
+describe('BatchItem', () => {
+  it('Renders "Unknown proposal type" by default', () => {
+    const item = {};
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Unknown proposal type')).toBeInTheDocument();
+  });
+
+  it('Renders "Unknown proposal type" for unknown items', () => {
+    const item = {
+      newLochNessMonster: {
+        location: 'Loch Ness',
+      },
+    } as unknown as Item;
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Unknown proposal type')).toBeInTheDocument();
+  });
+
+  it('Renders "New spot market"', () => {
+    const item = {
+      newSpotMarket: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New spot market')).toBeInTheDocument();
+  });
+
+  it('Renders "Cancel transfer"', () => {
+    const item = {
+      cancelTransfer: {
+        changes: {
+          transferId: 'transfer123',
+        },
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Cancel transfer')).toBeInTheDocument();
+    expect(screen.getByText('transf')).toBeInTheDocument();
+  });
+
+  it('Renders "Cancel transfer" without an id', () => {
+    const item = {
+      cancelTransfer: {
+        changes: {},
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Cancel transfer')).toBeInTheDocument();
+  });
+
+  it('Renders "New freeform"', () => {
+    const item = {
+      newFreeform: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New freeform proposal')).toBeInTheDocument();
+  });
+
+  it('Renders "New market"', () => {
+    const item = {
+      newMarket: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New market')).toBeInTheDocument();
+  });
+
+  it('Renders "New transfer"', () => {
+    const item = {
+      newTransfer: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New transfer')).toBeInTheDocument();
+  });
+
+  it('Renders "Update asset" with assetId', () => {
+    const item = {
+      updateAsset: {
+        assetId: 'asset123',
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update asset')).toBeInTheDocument();
+    expect(screen.getByText('asset123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update asset" even if assetId is not set', () => {
+    const item = {
+      updateAsset: {
+        assetId: undefined,
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Update asset')).toBeInTheDocument();
+  });
+
+  it('Renders "Update market state" with marketId', () => {
+    const item = {
+      updateMarketState: {
+        changes: {
+          marketId: 'market123',
+        },
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market state')).toBeInTheDocument();
+    expect(screen.getByText('market123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update market state" even if marketId is not set', () => {
+    const item = {
+      updateMarketState: {
+        changes: {
+          marketId: undefined,
+        },
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market state')).toBeInTheDocument();
+  });
+
+  it('Renders "Update network parameter" with parameter', () => {
+    const item = {
+      updateNetworkParameter: {
+        changes: {
+          key: 'parameter123',
+        },
+      },
+    };
+    render(
+      <MockedProvider>
+        <MemoryRouter>
+          <BatchItem item={item} />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+    expect(screen.getByText('Update network parameter')).toBeInTheDocument();
+    expect(screen.getByText('parameter123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update network parameter" even if parameter is not set', () => {
+    const item = {
+      updateNetworkParameter: {
+        changes: {
+          key: undefined,
+        },
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Update network parameter')).toBeInTheDocument();
+  });
+
+  it('Renders "Update referral program"', () => {
+    const item = {
+      updateReferralProgram: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Update referral program')).toBeInTheDocument();
+  });
+
+  it('Renders "Update spot market" with marketId', () => {
+    const item = {
+      updateSpotMarket: {
+        marketId: 'market123',
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update spot market')).toBeInTheDocument();
+    expect(screen.getByText('market123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update spot market" even if marketId is not set', () => {
+    const item = {
+      updateSpotMarket: {
+        marketId: undefined,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update spot market')).toBeInTheDocument();
+  });
+  it('Renders "Update market" with marketId', () => {
+    const item = {
+      updateMarket: {
+        marketId: 'market123',
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market')).toBeInTheDocument();
+    expect(screen.getByText('market123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update market" even if marketId is not set', () => {
+    const item = {
+      updateMarket: {
+        marketId: undefined,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market')).toBeInTheDocument();
+  });
+
+  it('Renders "Update volume discount program"', () => {
+    const item = {
+      updateVolumeDiscountProgram: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(
+      screen.getByText('Update volume discount program')
+    ).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,87 @@
+import { t } from '@vegaprotocol/i18n';
+import { AssetLink, MarketLink, NetworkParameterLink } from '../../../links';
+import type { components } from '../../../../../types/explorer';
+import Hash from '../../../links/hash';
+
+type Item = components['schemas']['vegaBatchProposalTermsChange'];
+
+export interface BatchItemProps {
+  item: Item;
+}
+
+/**
+ * Produces a one line summary for an item in a batch proposal. Could
+ * easily be adapted to summarise individual proposals, but there is no
+ * place for that yet.
+ *
+ * Details (like IDs) should be shown and linked if available, but handled
+ * if not available. This is adequate as the ProposalSummary component contains
+ * a JSON viewer for the full proposal.
+ */
+export const BatchItem = ({ item }: BatchItemProps) => {
+  if (item.cancelTransfer) {
+    const transferId = item?.cancelTransfer?.changes?.transferId || false;
+    return (
+      <span>
+        {t('Cancel transfer')}&nbsp;
+        {transferId && (
+          <Hash className="ml-1" truncate={true} text={transferId} />
+        )}
+      </span>
+    );
+  } else if (item.newFreeform) {
+    return <span>{t('New freeform proposal')}</span>;
+  } else if (item.newMarket) {
+    return <span>{t('New market')}</span>;
+  } else if (item.newSpotMarket) {
+    return <span>{t('New spot market')}</span>;
+  } else if (item.newTransfer) {
+    return <span>{t('New transfer')}</span>;
+  } else if (item.updateAsset) {
+    const assetId = item?.updateAsset?.assetId || false;
+    return (
+      <span>
+        {t('Update asset')}
+        {assetId && <AssetLink className="ml-1" assetId={assetId} />}
+      </span>
+    );
+  } else if (item.updateMarket) {
+    const marketId = item?.updateMarket?.marketId || false;
+    return (
+      <span>
+        {t('Update market')}{' '}
+        {marketId && <MarketLink className="ml-1" id={marketId} />}
+      </span>
+    );
+  } else if (item.updateMarketState) {
+    const marketId = item?.updateMarketState?.changes?.marketId || false;
+    return (
+      <span>
+        {t('Update market state')}
+        {marketId && <MarketLink className="ml-1" id={marketId} />}
+      </span>
+    );
+  } else if (item.updateNetworkParameter) {
+    const param = item?.updateNetworkParameter?.changes?.key || false;
+    return (
+      <span>
+        {t('Update network parameter')}
+        {param && <NetworkParameterLink className="ml-1" parameter={param} />}
+      </span>
+    );
+  } else if (item.updateReferralProgram) {
+    return <span>{t('Update referral program')}</span>;
+  } else if (item.updateSpotMarket) {
+    const marketId = item?.updateSpotMarket?.marketId || '';
+    return (
+      <span>
+        {t('Update spot market')}
+        <MarketLink className="ml-1" id={marketId} />
+      </span>
+    );
+  } else if (item.updateVolumeDiscountProgram) {
+    return <span>{t('Update volume discount program')}</span>;
+  }
+
+  return <span>{t('Unknown proposal type')}</span>;
+};
@@ -1,6 +1,4 @@
-import type { ProposalTerms } from '../tx-proposal';
 import { useState } from 'react';
-import type { components } from '../../../../../types/explorer';
 import { JsonViewerDialog } from '../../../dialogs/json-viewer-dialog';
 import ProposalLink from '../../../links/proposal-link/proposal-link';
 import truncate from 'lodash/truncate';
@@ -9,7 +7,12 @@ import ReactMarkdown from 'react-markdown';
 import { ProposalDate } from './proposal-date';
 import { t } from '@vegaprotocol/i18n';

+import type { ProposalTerms } from '../tx-proposal';
+import type { components } from '../../../../../types/explorer';
+import { BatchItem } from './batch-item';
+
 type Rationale = components['schemas']['vegaProposalRationale'];
+type Batch = components['schemas']['v1BatchProposalSubmissionTerms']['changes'];

 type ProposalTermsDialog = {
  open: boolean;
@@ -21,6 +24,7 @@ interface ProposalSummaryProps {
  id: string;
  rationale?: Rationale;
  terms?: ProposalTerms;
+  batch?: Batch;
 }

 /**
@@ -31,6 +35,7 @@ export const ProposalSummary = ({
  id,
  rationale,
  terms,
+  batch,
 }: ProposalSummaryProps) => {
  const [dialog, setDialog] = useState<ProposalTermsDialog>({
    open: false,
@@ -72,6 +77,18 @@ export const ProposalSummary = ({
          </ReactMarkdown>
        </div>
      )}
+      {batch && (
+        <section className="pt-2 text-sm leading-tight my-3">
+          <h2 className="text-lg pb-1">{t('Changes')}</h2>
+          <ol>
+            {batch.map((change, index) => (
+              <li className="ml-4 list-decimal" key={`batch-${index}`}>
+                <BatchItem item={change} />
+              </li>
+            ))}
+          </ol>
+        </section>
+      )}
      <div className="pt-5">
        <button className="underline max-md:hidden mr-5" onClick={openDialog}>
          {t('View terms')}
@@ -0,0 +1,46 @@
+import { t } from '@vegaprotocol/i18n';
+import { TxDetailsShared } from '../shared/tx-details-shared';
+import { TableWithTbody } from '../../../table';
+import type { components } from '../../../../../types/explorer';
+
+import type { BlockExplorerTransactionResult } from '../../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../../routes/blocks/tendermint-blocks-response';
+import { TableCell, TableRow } from '../../../table';
+
+type Update = components['schemas']['v1UpdatePartyProfile'];
+
+interface TxDetailsUpdatePartyProfileProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * Party profiles can be an alias and arbitrary key/values pairs.
+ * This component displays the alias, if any, but not the metadata. When there is
+ * some wider usage, we can decide how to render it. For now, it's available in the
+ * full TX details.
+ */
+export const TxDetailsUpdatePartyProfile = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsUpdatePartyProfileProps) => {
+  if (!txData?.command.updatePartyProfile) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const update: Update = txData.command.updatePartyProfile;
+
+  return (
+    <TableWithTbody className="mb-8" allowWrap={true}>
+      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
+      {update.alias && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('New alias')}</TableCell>
+          <TableCell>{update.alias}</TableCell>
+        </TableRow>
+      )}
+    </TableWithTbody>
+  );
+};
@@ -0,0 +1,75 @@
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { sharedHeaderProps, TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import type { components } from '../../../../types/explorer';
+import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import { ProposalSummary } from './proposal/summary';
+import Hash from '../../links/hash';
+import { t } from '@vegaprotocol/i18n';
+
+export type Proposal = components['schemas']['v1BatchProposalSubmission'];
+export type ProposalTerms = components['schemas']['vegaProposalTerms'];
+
+interface TxBatchProposalProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ *
+ */
+export const TxBatchProposal = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxBatchProposalProps) => {
+  if (!txData || !txData.command.batchProposalSubmission) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+  let deterministicId = '';
+
+  const proposal: Proposal = txData.command.batchProposalSubmission;
+  const sig = txData?.signature?.value;
+  if (sig) {
+    deterministicId = txSignatureToDeterministicId(sig);
+  }
+
+  return (
+    <>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TableRow modifier="bordered">
+          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
+          <TableCell>{t('Batch proposal')}</TableCell>
+        </TableRow>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+          hideTypeRow={true}
+        />
+        <TableRow modifier="bordered">
+          <TableCell>{t('Batch size')}</TableCell>
+          <TableCell>
+            {proposal.terms?.changes?.length || t('No changes')}
+          </TableCell>
+        </TableRow>
+        <TableRow modifier="bordered">
+          <TableCell>{t('Proposal ID')}</TableCell>
+          <TableCell>
+            <Hash text={deterministicId} />
+          </TableCell>
+        </TableRow>
+      </TableWithTbody>
+      {proposal && (
+        <ProposalSummary
+          id={deterministicId}
+          rationale={proposal?.rationale}
+          terms={proposal.terms}
+          batch={proposal.terms?.changes}
+        />
+      )}
+    </>
+  );
+};
@@ -33,6 +33,8 @@ import { TxDetailsApplyReferralCode } from './tx-apply-referral-code';
 import { TxDetailsUpdateReferralSet } from './tx-update-referral-set';
 import { TxDetailsJoinTeam } from './tx-join-team';
 import { TxDetailsUpdateMarginMode } from './tx-update-margin-mode';
+import { TxBatchProposal } from './tx-batch-proposal';
+import { TxDetailsUpdatePartyProfile } from './proposal/tx-update-party-profile';

 interface TxDetailsWrapperProps {
  txData: BlockExplorerTransactionResult | undefined;
@@ -136,6 +138,10 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
      return TxDetailsJoinTeam;
    case 'Update Margin Mode':
      return TxDetailsUpdateMarginMode;
+    case 'Batch Proposal':
+      return TxBatchProposal;
+    case 'Update Party Profile':
+      return TxDetailsUpdatePartyProfile;
    default:
      return TxDetailsGeneric;
  }
@@ -20,6 +20,7 @@ export type FilterOption =
  | 'Amend Order'
  | 'Apply Referral Code'
  | 'Batch Market Instructions'
+  | 'Batch Proposal'
  | 'Cancel LiquidityProvision Order'
  | 'Cancel Order'
  | 'Cancel Transfer Funds'
@@ -43,6 +44,7 @@ export type FilterOption =
  | 'Submit Order'
  | 'Transfer Funds'
  | 'Undelegate'
+  | 'Update Party Profile'
  | 'Update Referral Set'
  | 'Update Margin Mode'
  | 'Validator Heartbeat'
@@ -67,11 +69,18 @@ export const filterOptions: Record<string, FilterOption[]> = {
    'Cancel Transfer Funds',
    'Withdraw',
  ],
-  Governance: ['Delegate', 'Undelegate', 'Vote on Proposal', 'Proposal'],
+  Governance: [
+    'Batch Proposal',
+    'Delegate',
+    'Undelegate',
+    'Vote on Proposal',
+    'Proposal',
+  ],
  Referrals: [
    'Apply Referral Code',
    'Create Referral Set',
    'Join Team',
+    'Update Party Profile',
    'Update Referral Set',
  ],
  'External Data': ['Chain Event', 'Submit Oracle Data'],
@@ -1,6 +1,6 @@
 {
-  "short_name": "Mainnet Stats",
-  "name": "Vega Mainnet statistics",
+  "short_name": "Explorer VEGA",
+  "name": "Vega Protocol - Explorer",
  "icons": [
    {
      "src": "favicon.ico",
@@ -1,6 +1,6 @@
 {
-  "short_name": "Mainnet Stats",
-  "name": "Vega Mainnet statistics",
+  "short_name": "Governance VEGA",
+  "name": "Vega Protocol - Governance",
  "icons": [
    {
      "src": "favicon.ico",
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Vega Protocol static asseets</title>
+    <title>Vega Protocol static assets</title>
    <link rel="stylesheet" href="fonts.css" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
@@ -1,4 +1,4 @@
-NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.gateway.pokt.network/v1/lb/af6a2d529a11f8158bc8ca2a
+NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.rpc.grove.city/v1/af6a2d529a11f8158bc8ca2a
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
@@ -1,6 +1,12 @@
 {
-  "short_name": "Mainnet Stats",
-  "name": "Vega Mainnet statistics",
+  "name": "Vega Protocol - Trading",
+  "short_name": "Console",
+  "description": "Vega Protocol - Trading dApp",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
  "icons": [
    {
      "src": "favicon.ico",
@@ -12,9 +18,5 @@
      "type": "image/png",
      "sizes": "192x192"
    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }
@@ -1,5 +1,10 @@
-import { useSearchParams } from 'react-router-dom';
-import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
+import { Link, useSearchParams } from 'react-router-dom';
+import {
+  Intent,
+  TradingAnchorButton,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
@@ -30,6 +35,19 @@ export const CompetitionsCreateTeam = () => {
      <LayoutWithGradient>
        <div className="mx-auto md:w-2/3 max-w-xl">
          <Box className="flex flex-col gap-4">
+            <Link
+              to={Links.COMPETITIONS()}
+              className="text-xs inline-flex items-center gap-1 group"
+            >
+              <VegaIcon
+                name={VegaIconNames.CHEVRON_LEFT}
+                size={12}
+                className="text-vega-clight-100 dark:text-vega-cdark-100"
+              />{' '}
+              <span className="group-hover:underline">
+                {t('Go back to the competitions')}
+              </span>
+            </Link>
            <h1 className="calt text-2xl lg:text-3xl xl:text-4xl">
              {isSolo ? t('Create solo team') : t('Create a team')}
            </h1>
@@ -78,15 +96,17 @@ const CreateTeamFormContainer = ({ isSolo }: { isSolo: boolean }) => {
        <p className="text-sm">{t('Team creation transaction successful')}</p>
        {code && (
          <>
-            <p className="text-sm">
-              Your team ID is:{' '}
-              <span
-                className="font-mono break-all"
-                data-testid="team-id-display"
-              >
-                {code}
-              </span>
-            </p>
+            <dl>
+              <dt className="text-sm">{t('Your team ID:')}</dt>
+              <dl>
+                <span
+                  className="font-mono break-all bg-rainbow bg-clip-text text-transparent text-2xl"
+                  data-testid="team-id-display"
+                >
+                  {code}
+                </span>
+              </dl>
+            </dl>
            <TradingAnchorButton
              href={Links.COMPETITIONS_TEAM(code)}
              intent={Intent.Info}
@@ -3,7 +3,14 @@ import { usePageTitle } from '../../lib/hooks/use-page-title';
 import { Box } from '../../components/competitions/box';
 import { useT } from '../../lib/use-t';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  Intent,
+  Loader,
+  Splash,
+  TradingAnchorButton,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { RainbowButton } from '../../components/rainbow-button';
 import { Link, Navigate, useParams } from 'react-router-dom';
 import { Links } from '../../lib/links';
@@ -11,6 +18,7 @@ import { useReferralSetTransaction } from '../../lib/hooks/use-referral-set-tran
 import { type FormFields, TeamForm, TransactionType } from './team-form';
 import { useTeam } from '../../lib/hooks/use-team';
 import { LayoutWithGradient } from '../../components/layouts-inner';
+import { useEffect, useState } from 'react';

 export const CompetitionsUpdateTeam = () => {
  const t = useT();
@@ -29,6 +37,19 @@ export const CompetitionsUpdateTeam = () => {
      <LayoutWithGradient>
        <div className="mx-auto md:w-2/3 max-w-xl">
          <Box className="flex flex-col gap-4">
+            <Link
+              to={Links.COMPETITIONS_TEAM(teamId)}
+              className="text-xs inline-flex items-center gap-1 group"
+            >
+              <VegaIcon
+                name={VegaIconNames.CHEVRON_LEFT}
+                size={12}
+                className="text-vega-clight-100 dark:text-vega-cdark-100"
+              />{' '}
+              <span className="group-hover:underline">
+                {t('Go back to the team profile')}
+              </span>
+            </Link>
            <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
              {t('Update a team')}
            </h1>
@@ -57,7 +78,8 @@ const UpdateTeamFormContainer = ({
  pubKey: string;
 }) => {
  const t = useT();
-  const { team, loading, error } = useTeam(teamId, pubKey);
+  const [refetching, setRefetching] = useState<boolean>(false);
+  const { team, loading, error, refetch } = useTeam(teamId, pubKey);

  const { err, status, onSubmit } = useReferralSetTransaction({
    onSuccess: () => {
@@ -65,7 +87,15 @@ const UpdateTeamFormContainer = ({
    },
  });

-  if (loading) {
+  // refetch when saved
+  useEffect(() => {
+    if (refetch && status === 'confirmed') {
+      refetch();
+      setRefetching(true);
+    }
+  }, [refetch, status]);
+
+  if (loading && !refetching) {
    return <Loader size="small" />;
  }
  if (error) {
@@ -84,6 +114,33 @@ const UpdateTeamFormContainer = ({
    return <Navigate to={Links.COMPETITIONS_TEAM(teamId)} />;
  }

+  if (status === 'confirmed') {
+    return (
+      <div
+        className="flex flex-col items-start gap-2"
+        data-testid="team-creation-success-message"
+      >
+        <p className="text-sm">
+          <VegaIcon
+            name={VegaIconNames.TICK}
+            size={18}
+            className="text-vega-green-500"
+          />{' '}
+          {t('Changes successfully saved to your team.')}
+        </p>
+
+        <TradingAnchorButton
+          href={Links.COMPETITIONS_TEAM(teamId)}
+          intent={Intent.Info}
+          size="small"
+          data-testid="view-team-button"
+        >
+          {t('View team')}
+        </TradingAnchorButton>
+      </div>
+    );
+  }
+
  const defaultValues: FormFields = {
    id: team.teamId,
    name: team.name,
@@ -19,6 +19,7 @@ import {
  useFundingRate,
  useMarketTradingMode,
  useExternalTwap,
+  getQuoteName,
 } from '@vegaprotocol/markets';
 import { MarketState as State } from '@vegaprotocol/types';
 import { HeaderStat } from '../../components/header';
@@ -41,6 +42,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();

  const asset = getAsset(market);
+  const quoteUnit = getQuoteName(market);

  return (
    <>
@@ -54,12 +56,15 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
        <Last24hPriceChange
          marketId={market.id}
          decimalPlaces={market.decimalPlaces}
+          fallback={<span>-</span>}
        />
      </HeaderStat>
      <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
        <Last24hVolume
          marketId={market.id}
          positionDecimalPlaces={market.positionDecimalPlaces}
+          marketDecimals={market.decimalPlaces}
+          quoteUnit={quoteUnit}
        />
      </HeaderStat>
      <HeaderStatMarketTradingMode
@@ -108,7 +113,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
          heading={`${t('Funding Rate')} / ${t('Countdown')}`}
          testId="market-funding"
        >
-          <div className="flex justify-between gap-2">
+          <div className="flex gap-2">
            <FundingRate marketId={market.id} />
            <FundingCountdown marketId={market.id} />
          </div>
@@ -3,7 +3,6 @@ import { type Market } from '@vegaprotocol/markets';
 // TODO: handle oracle banner
 // import { OracleBanner } from '@vegaprotocol/markets';
 import { useState } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
 import {
  Popover,
@@ -12,21 +11,21 @@ import {
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
-import { MarketBanner } from '../../components/market-banner';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { type TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
-
 interface TradePanelsProps {
  market: Market;
  pinnedAsset?: PinnedAsset;
 }

 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const [view, setView] = useState<TradingView>('chart');
-  const viewCfg = TradingViews[view];
+  const [topView, setTopView] = useState<TradingView>('chart');
+  const topViewCfg = TradingViews[topView];
+  const [bottomView, setBottomView] = useState<TradingView>('positions');
+  const bottomViewCfg = TradingViews[bottomView];

-  const renderView = () => {
+  const renderView = (view: TradingView) => {
    const Component = TradingViews[view].component;

    if (!Component) {
@@ -39,12 +38,13 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
    // so watch out for clashes in props
    return (
      <ErrorBoundary feature={view}>
-        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
+        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />
      </ErrorBoundary>
    );
  };

-  const renderMenu = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const renderMenu = (viewCfg: any) => {
    if ('menu' in viewCfg || 'settings' in viewCfg) {
      return (
        <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
@@ -69,55 +69,80 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
  };

  return (
-    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
-      <div>
-        <MarketBanner market={market} />
-      </div>
-      <div>{renderMenu()}</div>
-      <div className="h-full relative">
-        <AutoSizer>
-          {({ width, height }) => (
-            <div style={{ width, height }} className="overflow-auto">
-              {renderView()}
-            </div>
-          )}
-        </AutoSizer>
-      </div>
-      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
-        {Object.keys(TradingViews)
-          // filter to control available views for the current market
-          // eg only perps should get the funding views
-          .filter((_key) => {
-            const key = _key as TradingView;
-            const perpOnlyViews = ['funding', 'fundingPayments'];
+    <div className="h-full flex flex-col lg:grid grid-rows-[min-content_min-content_1fr_min-content]">
+      <div className="flex flex-col w-full overflow-hidden">
+        <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
+          {['chart', 'orderbook', 'trades', 'liquidity', 'fundingPayments']
+            // filter to control available views for the current market
+            // e.g. only perpetuals should get the funding views
+            .filter((_key) => {
+              const key = _key as TradingView;
+              const perpOnlyViews = ['funding', 'fundingPayments'];
+
+              if (
+                market?.tradableInstrument.instrument.product.__typename ===
+                'Perpetual'
+              ) {
+                return true;
+              }
+
+              if (perpOnlyViews.includes(key)) {
+                return false;
+              }

-            if (
-              market?.tradableInstrument.instrument.product.__typename ===
-              'Perpetual'
-            ) {
              return true;
-            }
+            })
+            .map((_key) => {
+              const key = _key as TradingView;
+              const isActive = topView === key;
+              return (
+                <ViewButton
+                  key={key}
+                  view={key}
+                  isActive={isActive}
+                  onClick={() => {
+                    setTopView(key);
+                  }}
+                />
+              );
+            })}
+        </div>
+        <div className="h-[50vh] lg:h-full relative">
+          <div>{renderMenu(topViewCfg)}</div>
+          <div className="overflow-auto h-full">{renderView(topView)}</div>
+        </div>
+      </div>

-            if (perpOnlyViews.includes(key)) {
-              return false;
-            }
-
-            return true;
-          })
-          .map((_key) => {
+      <div className="flex flex-col w-full grow">
+        <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
+          {[
+            'positions',
+            'activeOrders',
+            'closedOrders',
+            'rejectedOrders',
+            'orders',
+            'stopOrders',
+            'collateral',
+            'fills',
+          ].map((_key) => {
            const key = _key as TradingView;
-            const isActive = view === key;
+            const isActive = bottomView === key;
            return (
              <ViewButton
                key={key}
                view={key}
                isActive={isActive}
                onClick={() => {
-                  setView(key);
+                  setBottomView(key);
                }}
              />
            );
          })}
+        </div>
+        <div className="relative grow">
+          <div className="flex flex-col">{renderMenu(bottomViewCfg)}</div>
+          <div className="overflow-auto h-full">{renderView(bottomView)}</div>
+        </div>
      </div>
    </div>
  );
@@ -157,7 +182,7 @@ const useViewLabel = (view: TradingView) => {
    depth: t('Depth'),
    liquidity: t('Liquidity'),
    funding: t('Funding'),
-    fundingPayments: t('Funding Payments'),
+    fundingPayments: t('Funding'),
    orderbook: t('Orderbook'),
    trades: t('Trades'),
    positions: t('Positions'),
@@ -5,7 +5,7 @@ import {
  useDataGridEvents,
 } from '@vegaprotocol/datagrid';
 import type { MarketMaybeWithData } from '@vegaprotocol/markets';
-import { useColumnDefs } from './use-column-defs';
+import { useMarketsColumnDefs } from './use-column-defs';
 import type { DataGridStore } from '../../stores/datagrid-store-slice';
 import { type StateCreator, create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -50,7 +50,7 @@ export const useMarketsStore = create<DataGridSlice>()(
 );

 export const MarketListTable = (props: Props) => {
-  const columnDefs = useColumnDefs();
+  const columnDefs = useMarketsColumnDefs();
  const gridStore = useMarketsStore((store) => store.gridStore);
  const updateGridStore = useMarketsStore((store) => store.updateGridStore);

@@ -0,0 +1,235 @@
+import { Route, Routes } from 'react-router-dom';
+import {
+  Intent,
+  MobileActionsDropdown,
+  Tooltip,
+  TradingButton,
+  TradingDropdownItem,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import { type BarView, ViewType, useSidebar } from '../../components/sidebar';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { useEffect } from 'react';
+import classNames from 'classnames';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+
+const ViewInitializer = () => {
+  const currentRouteId = useGetCurrentRouteId();
+  const { setViews, getView } = useSidebar();
+  const view = getView(currentRouteId);
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
+  useEffect(() => {
+    if (largeScreen && view === undefined) {
+      setViews({ type: ViewType.Order }, currentRouteId);
+    }
+  }, [setViews, view, currentRouteId, largeScreen]);
+  return null;
+};
+
+export const MarketsMobileSidebar = () => {
+  const t = useT();
+  const currentRouteId = useGetCurrentRouteId();
+  const { pubKeys, isReadOnly } = useVegaWallet();
+  const openVegaWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+
+  return (
+    <Routes>
+      <Route
+        path=":marketId"
+        element={
+          <>
+            <ViewInitializer />
+            <div className="grid grid-cols-3 grow md:grow-0 md:flex lg:flex-col items-center gap-2 lg:gap-4 p-1">
+              {!pubKeys || isReadOnly ? (
+                <>
+                  <TradingButton
+                    intent={Intent.Primary}
+                    size="medium"
+                    onClick={() => {
+                      openVegaWalletDialog();
+                    }}
+                  >
+                    {t('Connect')}
+                  </TradingButton>
+                  <MobileButton
+                    view={ViewType.Order}
+                    tooltip={t('Trade')}
+                    routeId={currentRouteId}
+                  />
+                  <MobileBarActionsDropdown currentRouteId={currentRouteId} />
+                </>
+              ) : (
+                <>
+                  <MobileButton
+                    view={ViewType.Order}
+                    tooltip={t('Trade')}
+                    routeId={currentRouteId}
+                  />
+                  <MobileButton
+                    view={ViewType.Deposit}
+                    tooltip={t('Deposit')}
+                    routeId={currentRouteId}
+                  />
+                  <MobileBarActionsDropdown currentRouteId={currentRouteId} />
+                </>
+              )}
+            </div>
+          </>
+        }
+      />
+    </Routes>
+  );
+};
+
+export const MobileButton = ({
+  view,
+  tooltip: label,
+  disabled = false,
+  onClick,
+  routeId,
+}: {
+  view?: ViewType;
+  tooltip: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  routeId: string;
+}) => {
+  const { setViews, getView } = useSidebar((store) => ({
+    setViews: store.setViews,
+    getView: store.getView,
+  }));
+  const currView = getView(routeId);
+  const onSelect = (view: BarView['type']) => {
+    if (view === currView?.type) {
+      setViews(null, routeId);
+    } else {
+      setViews({ type: view }, routeId);
+    }
+  };
+
+  const buttonClasses = classNames(
+    'flex items-center p-1 rounded',
+    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
+    {
+      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
+        !view || view !== currView?.type,
+      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
+        view && view === currView?.type,
+    }
+  );
+
+  return (
+    <Tooltip description={label} align="center" side="right" sideOffset={10}>
+      <TradingButton
+        className={buttonClasses}
+        data-testid={view}
+        onClick={onClick || (() => onSelect(view as BarView['type']))}
+        disabled={disabled}
+      >
+        {label}
+      </TradingButton>
+    </Tooltip>
+  );
+};
+
+export const MobileDropdownItem = ({
+  view,
+  icon,
+  tooltip,
+  disabled = false,
+  onClick,
+  routeId,
+}: {
+  view?: ViewType;
+  icon: VegaIconNames;
+  tooltip: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  routeId: string;
+}) => {
+  const { setViews, getView } = useSidebar((store) => ({
+    setViews: store.setViews,
+    getView: store.getView,
+  }));
+  const currView = getView(routeId);
+  const onSelect = (view: BarView['type']) => {
+    if (view === currView?.type) {
+      setViews(null, routeId);
+    } else {
+      setViews({ type: view }, routeId);
+    }
+  };
+
+  const buttonClasses = classNames(
+    'flex items-center p-1 rounded',
+    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
+    {
+      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
+        !view || view !== currView?.type,
+      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
+        view && view === currView?.type,
+    }
+  );
+
+  return (
+    <Tooltip description={tooltip} align="center" side="right" sideOffset={10}>
+      <TradingDropdownItem
+        className={buttonClasses}
+        data-testid={view}
+        onClick={onClick || (() => onSelect(view as BarView['type']))}
+        disabled={disabled}
+      >
+        <VegaIcon name={icon} size={20} />
+        {tooltip}
+      </TradingDropdownItem>
+    </Tooltip>
+  );
+};
+
+export const MobileBarActionsDropdown = ({
+  currentRouteId,
+}: {
+  currentRouteId: string;
+}) => {
+  const t = useT();
+  return (
+    <MobileActionsDropdown>
+      <MobileDropdownItem
+        view={ViewType.Deposit}
+        icon={VegaIconNames.DEPOSIT}
+        tooltip={t('Deposit')}
+        routeId={currentRouteId}
+      />
+      <MobileDropdownItem
+        view={ViewType.Withdraw}
+        icon={VegaIconNames.WITHDRAW}
+        tooltip={t('Withdraw')}
+        routeId={currentRouteId}
+      />
+      <MobileDropdownItem
+        view={ViewType.Transfer}
+        icon={VegaIconNames.TRANSFER}
+        tooltip={t('Transfer')}
+        routeId={currentRouteId}
+      />
+      <MobileDropdownItem
+        view={ViewType.Info}
+        icon={VegaIconNames.BREAKDOWN}
+        tooltip={t('Market specification')}
+        routeId={currentRouteId}
+      />
+      <MobileDropdownItem
+        view={ViewType.Settings}
+        icon={VegaIconNames.COG}
+        tooltip={t('Settings')}
+        routeId={currentRouteId}
+      />
+    </MobileActionsDropdown>
+  );
+};
@@ -7,21 +7,31 @@ import type {
 } from '@vegaprotocol/datagrid';
 import { COL_DEFS, SetFilter } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
-import { addDecimalsFormatNumber, toBigNum } from '@vegaprotocol/utils';
+import {
+  addDecimalsFormatNumber,
+  formatNumber,
+  toBigNum,
+} from '@vegaprotocol/utils';
 import { ButtonLink, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import type {
+  MarketFieldsFragment,
  MarketMaybeWithData,
  MarketMaybeWithDataAndCandles,
 } from '@vegaprotocol/markets';
 import { MarketActionsDropdown } from './market-table-actions';
-import { calcCandleVolume, getAsset } from '@vegaprotocol/markets';
+import {
+  calcCandleVolume,
+  calcCandleVolumePrice,
+  getAsset,
+  getQuoteName,
+} from '@vegaprotocol/markets';
 import { MarketCodeCell } from './market-code-cell';
 import { useT } from '../../lib/use-t';

 const { MarketTradingMode, AuctionTrigger } = Schema;

-export const useColumnDefs = () => {
+export const useMarketsColumnDefs = () => {
  const t = useT();
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
  return useMemo<ColDef[]>(
@@ -158,11 +168,25 @@ export const useColumnDefs = () => {
        }: ValueFormatterParams<MarketMaybeWithDataAndCandles, 'candles'>) => {
          const candles = data?.candles;
          const vol = candles ? calcCandleVolume(candles) : '0';
+          const quoteName = getQuoteName(data as MarketFieldsFragment);
+          const volPrice =
+            candles &&
+            calcCandleVolumePrice(
+              candles,
+              data.decimalPlaces,
+              data.positionDecimalPlaces
+            );
+
          const volume =
            data && vol && vol !== '0'
              ? addDecimalsFormatNumber(vol, data.positionDecimalPlaces)
              : '0.00';
-          return volume;
+          const volumePrice =
+            volPrice && formatNumber(volPrice, data?.decimalPlaces);
+
+          return volumePrice
+            ? `${volume} (${volumePrice} ${quoteName})`
+            : volume;
        },
      },
      {
@@ -2,6 +2,7 @@ import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { SidebarButton, ViewType } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { MobileButton } from '../markets/mobile-buttons';

 export const PortfolioSidebar = () => {
  const t = useT();
@@ -30,3 +31,28 @@ export const PortfolioSidebar = () => {
    </>
  );
 };
+
+export const PortfolioMobileSidebar = () => {
+  const t = useT();
+  const currentRouteId = useGetCurrentRouteId();
+
+  return (
+    <div className="grid grid-cols-3 grow md:grow-0 md:flex lg:flex-col items-center gap-2 lg:gap-4 p-1">
+      <MobileButton
+        view={ViewType.Deposit}
+        tooltip={t('Deposit')}
+        routeId={currentRouteId}
+      />
+      <MobileButton
+        view={ViewType.Withdraw}
+        tooltip={t('Withdraw')}
+        routeId={currentRouteId}
+      />
+      <MobileButton
+        view={ViewType.Transfer}
+        tooltip={t('Transfer')}
+        routeId={currentRouteId}
+      />
+    </div>
+  );
+};
@@ -1,4 +1,4 @@
-import { getNumberFormat } from '@vegaprotocol/utils';
+import { formatNumber } from '@vegaprotocol/utils';
 import sortBy from 'lodash/sortBy';
 import omit from 'lodash/omit';
 import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
@@ -107,9 +107,7 @@ export const useReferralProgram = () => {
      discountFactor: Number(t.referralDiscountFactor),
      discount: BigNumber(t.referralDiscountFactor).times(100).toFixed(2) + '%',
      minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
-      volume: getNumberFormat(0).format(
-        Number(t.minimumRunningNotionalTakerVolume)
-      ),
+      volume: formatNumber(t.minimumRunningNotionalTakerVolume, 0),
      epochs: Number(t.minimumEpochs),
    };
  });
@@ -14,9 +14,9 @@ import {
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import {
  addDecimalsFormatNumber,
+  formatNumber,
  getDateFormat,
  getDateTimeFormat,
-  getNumberFormat,
  getUserLocale,
  removePaginationWrapper,
 } from '@vegaprotocol/utils';
@@ -323,7 +323,7 @@ export const Statistics = ({
      }
      description={<QUSDTooltip />}
    >
-      {getNumberFormat(0).format(Number(totalCommissionValue))}
+      {formatNumber(totalCommissionValue, 0)}
    </StatTile>
  );

@@ -563,8 +563,8 @@ export const RefereesTable = ({
              )
                .map((r) => ({
                  ...r,
-                  volume: getNumberFormat(0).format(r.volume),
-                  commission: getNumberFormat(0).format(r.commission),
+                  volume: formatNumber(r.volume, 0),
+                  commission: formatNumber(r.commission, 0),
                }))
                .reverse()}
            />
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-import { getNumberFormat } from '@vegaprotocol/utils';
+import { formatNumber } from '@vegaprotocol/utils';
 import { type useTeams } from '../../lib/hooks/use-teams';
 import { useT } from '../../lib/use-t';
 import { Table } from '../table';
@@ -15,8 +15,7 @@ export const CompetitionsLeaderboard = ({
 }) => {
  const t = useT();

-  const num = (n?: number | string) =>
-    !n ? '-' : getNumberFormat(0).format(Number(n));
+  const num = (n?: number | string) => (!n ? '-' : formatNumber(n, 0));

  if (!data || data.length === 0) {
    return <Splash>{t('Could not find any teams')}</Splash>;
@@ -33,9 +32,9 @@ export const CompetitionsLeaderboard = ({
        { name: 'status', displayName: t('Status') },
        { name: 'volume', displayName: t('Volume') },
      ]}
-      data={data.map((td, i) => {
+      data={data.map((td) => {
        // leaderboard place or medal
-        let rank: number | React.ReactNode = i + 1;
+        let rank: number | React.ReactNode = td.rank;
        if (rank === 1) rank = <Rank variant="gold" />;
        if (rank === 2) rank = <Rank variant="silver" />;
        if (rank === 3) rank = <Rank variant="bronze" />;
@@ -1,6 +1,11 @@
 import { type TransferNode } from '@vegaprotocol/types';
-import { ActiveRewardCard } from '../rewards-container/active-rewards';
+import {
+  ActiveRewardCard,
+  isActiveReward,
+} from '../rewards-container/active-rewards';
 import { useT } from '../../lib/use-t';
+import { useAssetsMapProvider } from '@vegaprotocol/assets';
+import { useMarketsMapProvider } from '@vegaprotocol/markets';

 export const GamesContainer = ({
  data,
@@ -10,8 +15,35 @@ export const GamesContainer = ({
  currentEpoch: number;
 }) => {
  const t = useT();
+  // Re-load markets and assets in the games container to ensure that the
+  // the cards are updated (not grayed out) when the user navigates to the games page
+  const { data: assets } = useAssetsMapProvider();
+  const { data: markets } = useMarketsMapProvider();

-  if (!data || data.length === 0) {
+  const enrichedTransfers = data
+    .filter((node) => isActiveReward(node, currentEpoch))
+    .map((node) => {
+      if (node.transfer.kind.__typename !== 'RecurringTransfer') {
+        return node;
+      }
+
+      const asset =
+        assets &&
+        assets[
+          node.transfer.kind.dispatchStrategy?.dispatchMetricAssetId || ''
+        ];
+
+      const marketsInScope =
+        node.transfer.kind.dispatchStrategy?.marketIdsInScope?.map(
+          (id) => markets && markets[id]
+        );
+
+      return { ...node, asset, markets: marketsInScope };
+    });
+
+  if (!enrichedTransfers || !enrichedTransfers.length) return null;
+
+  if (!enrichedTransfers || enrichedTransfers.length === 0) {
    return (
      <p className="mb-6 text-muted">
        {t('There are currently no games available.')}
@@ -21,7 +53,7 @@ export const GamesContainer = ({

  return (
    <div className="mb-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {data.map((game, i) => {
+      {enrichedTransfers.map((game, i) => {
        // TODO: Remove `kind` prop from ActiveRewardCard
        const { transfer } = game;
        if (
@@ -1,4 +1,6 @@
+import { isValidUrl } from '@vegaprotocol/utils';
 import classNames from 'classnames';
+import { useEffect, useState } from 'react';

 const NUM_AVATARS = 20;
 const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';
@@ -11,6 +13,26 @@ export const getFallbackAvatar = (teamId: string) => {
  return AVATAR_PATHNAME_PATTERN.replace('{id}', avatarId);
 };

+const useAvatar = (teamId: string, url: string) => {
+  const fallback = getFallbackAvatar(teamId);
+  const [avatar, setAvatar] = useState<string>(fallback);
+
+  useEffect(() => {
+    if (!isValidUrl(url)) return;
+    fetch(url, { cache: 'force-cache' })
+      .then((response) => {
+        if (response.ok) {
+          setAvatar(url);
+        }
+      })
+      .catch(() => {
+        /** noop */
+      });
+  });
+
+  return avatar;
+};
+
 export const TeamAvatar = ({
  teamId,
  imgUrl,
@@ -22,7 +44,7 @@ export const TeamAvatar = ({
  alt?: string;
  size?: 'large' | 'small';
 }) => {
-  const img = imgUrl && imgUrl.length > 0 ? imgUrl : getFallbackAvatar(teamId);
+  const img = useAvatar(teamId, imgUrl);
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
@@ -3,7 +3,6 @@ import { Outlet } from 'react-router-dom';
 import { Sidebar, SidebarContent, useSidebar } from '../sidebar';
 import classNames from 'classnames';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-
 export const LayoutWithSidebar = ({
  header,
  sidebar,
@@ -17,7 +16,7 @@ export const LayoutWithSidebar = ({
  const sidebarOpen = sidebarView !== null;
  const gridClasses = classNames(
    'h-full relative z-0 grid',
-    'grid-rows-[min-content_1fr_40px]',
+    'grid-rows-[min-content_1fr_50px]',
    'lg:grid-rows-[min-content_1fr]',
    'lg:grid-cols-[1fr_280px_40px]',
    'xxxl:grid-cols-[1fr_320px_40px]'
@@ -27,10 +26,13 @@ export const LayoutWithSidebar = ({
    <div className={gridClasses}>
      <div className="col-span-full">{header}</div>
      <main
-        className={classNames('col-start-1 col-end-1 overflow-y-auto', {
-          'lg:col-end-3': !sidebarOpen,
-          'hidden lg:block lg:col-end-2': sidebarOpen,
-        })}
+        className={classNames(
+          'col-start-1 col-end-1 overflow-hidden lg:overflow-y-auto grow lg:grow-0',
+          {
+            'lg:col-end-3': !sidebarOpen,
+            'hidden lg:block lg:col-end-2': sidebarOpen,
+          }
+        )}
      >
        <Outlet />
      </main>
@@ -1 +1,2 @@
 export * from './market-header';
+export * from './mobile-market-header';
@@ -0,0 +1,133 @@
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { MarketSelector } from '../market-selector';
+import {
+  Last24hPriceChange,
+  useMarket,
+  useMarketList,
+} from '@vegaprotocol/markets';
+import { useParams } from 'react-router-dom';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { useState } from 'react';
+import { useT } from '../../lib/use-t';
+import classNames from 'classnames';
+import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
+import { MarketMarkPrice } from '../market-mark-price';
+/**
+ * This is only rendered for the mobile navigation
+ */
+export const MobileMarketHeader = () => {
+  const t = useT();
+  const { marketId } = useParams();
+  const { data } = useMarket(marketId);
+  const [openMarket, setOpenMarket] = useState(false);
+  const [openPrice, setOpenPrice] = useState(false);
+
+  // Ensure that markets are kept cached so opening the list
+  // shows all markets instantly
+  useMarketList();
+
+  if (!marketId) return null;
+
+  return (
+    <div className="pl-3 pr-2 flex justify-between gap-2 h-10 bg-vega-clight-700 dark:bg-vega-cdark-700">
+      <FullScreenPopover
+        open={openMarket}
+        onOpenChange={(x) => {
+          setOpenMarket(x);
+        }}
+        trigger={
+          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-base leading-3 md:text-lg whitespace-nowrap">
+            {data
+              ? data.tradableInstrument.instrument.code
+              : t('Select market')}
+            <span
+              className={classNames(
+                'transition-transform ease-in-out duration-300 flex',
+                {
+                  'rotate-180': openMarket,
+                }
+              )}
+            >
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={16} />
+            </span>
+          </h1>
+        }
+      >
+        <MarketSelector
+          currentMarketId={marketId}
+          onSelect={() => setOpenMarket(false)}
+        />
+      </FullScreenPopover>
+      <FullScreenPopover
+        open={openPrice}
+        onOpenChange={(x) => {
+          setOpenPrice(x);
+        }}
+        trigger={
+          <span className="flex gap-2 items-end md:text-md whitespace-nowrap leading-3">
+            {data && (
+              <>
+                <span className="text-xs">
+                  <Last24hPriceChange
+                    marketId={data.id}
+                    decimalPlaces={data.decimalPlaces}
+                  />
+                </span>
+                <span className="flex items-center gap-1">
+                  <MarketMarkPrice
+                    marketId={data.id}
+                    decimalPlaces={data.decimalPlaces}
+                  />
+                  <VegaIcon
+                    name={VegaIconNames.CHEVRON_DOWN}
+                    size={16}
+                    className={classNames(
+                      'transition-transform ease-in-out duration-300',
+                      {
+                        'rotate-180': openPrice,
+                      }
+                    )}
+                  />
+                </span>
+              </>
+            )}
+          </span>
+        }
+      >
+        {data && (
+          <div className="px-3 py-6 text-sm grid grid-cols-2 items-center gap-x-4 gap-y-6">
+            <MarketHeaderStats market={data} />
+          </div>
+        )}
+      </FullScreenPopover>
+    </div>
+  );
+};
+
+export interface PopoverProps extends PopoverPrimitive.PopoverProps {
+  trigger: React.ReactNode | string;
+}
+
+export const FullScreenPopover = ({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+}: PopoverProps) => {
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger data-testid="popover-trigger">
+        {trigger}
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          data-testid="popover-content"
+          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 border-y border-default"
+          sideOffset={0}
+        >
+          {children}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+};
@@ -1,2 +1 @@
 export * from './navbar';
-export * from './nav-header';
@@ -1,81 +0,0 @@
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { MarketSelector } from '../market-selector';
-import { useMarket, useMarketList } from '@vegaprotocol/markets';
-import { useParams } from 'react-router-dom';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { useState } from 'react';
-import { useT } from '../../lib/use-t';
-import classNames from 'classnames';
-
-/**
- * This is only rendered for the mobile navigation
- */
-export const NavHeader = () => {
-  const t = useT();
-  const { marketId } = useParams();
-  const { data } = useMarket(marketId);
-  const [open, setOpen] = useState(false);
-
-  // Ensure that markets are kept cached so opening the list
-  // shows all markets instantly
-  useMarketList();
-
-  if (!marketId) return null;
-
-  return (
-    <FullScreenPopover
-      open={open}
-      onOpenChange={(x) => {
-        setOpen(x);
-      }}
-      trigger={
-        <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
-          {data ? data.tradableInstrument.instrument.code : t('Select market')}
-          <span
-            className={classNames(
-              'transition-transform ease-in-out duration-300',
-              {
-                'rotate-180': open,
-              }
-            )}
-          >
-            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
-          </span>
-        </h1>
-      }
-    >
-      <MarketSelector
-        currentMarketId={marketId}
-        onSelect={() => setOpen(false)}
-      />
-    </FullScreenPopover>
-  );
-};
-
-export interface PopoverProps extends PopoverPrimitive.PopoverProps {
-  trigger: React.ReactNode | string;
-}
-
-export const FullScreenPopover = ({
-  trigger,
-  children,
-  open,
-  onOpenChange,
-}: PopoverProps) => {
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <PopoverPrimitive.Trigger data-testid="popover-trigger">
-        {trigger}
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          data-testid="popover-content"
-          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 text-default border border-default"
-          sideOffset={5}
-        >
-          {children}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-};
@@ -34,13 +34,7 @@ import { supportedLngs } from '../../lib/i18n';
 type MenuState = 'wallet' | 'nav' | null;
 type Theme = 'system' | 'yellow';

-export const Navbar = ({
-  children,
-  theme = 'system',
-}: {
-  children?: ReactNode;
-  theme?: Theme;
-}) => {
+export const Navbar = ({ theme = 'system' }: { theme?: Theme }) => {
  const i18n = useI18n();
  const t = useT();
  // menu state for small screens
@@ -75,8 +69,6 @@ export const Navbar = ({
      >
        <VLogo className="w-4" />
      </NavLink>
-      {/* Left section */}
-      <div className="flex items-center lg:hidden">{children}</div>
      {/* Used to show header in nav on mobile */}
      <div className="hidden lg:block">
        <NavbarMenu onClick={() => setMenu(null)} />
@@ -316,49 +316,30 @@ export const ActiveRewardCard = ({
        MarketState.STATE_CLOSED,
      ].includes(m.state)
  );
+
  if (marketSettled) {
    return null;
  }

-  const assetInSettledMarket =
+  const assetInActiveMarket =
    allMarkets &&
    Object.values(allMarkets).some((m: MarketFieldsFragment | null) => {
      if (m && getAsset(m).id === dispatchStrategy.dispatchMetricAssetId) {
-        return (
-          m?.state &&
-          [
-            MarketState.STATE_TRADING_TERMINATED,
-            MarketState.STATE_SETTLED,
-            MarketState.STATE_CANCELLED,
-            MarketState.STATE_CLOSED,
-          ].includes(m.state)
-        );
+        return m?.state && MarketState.STATE_ACTIVE === m.state;
      }
      return false;
    });

-  // Gray out the cards that are related to suspended markets
-  const suspended = transferNode.markets?.some(
+  const marketSuspended = transferNode.markets?.some(
    (m) =>
      m?.state === MarketState.STATE_SUSPENDED ||
      m?.state === MarketState.STATE_SUSPENDED_VIA_GOVERNANCE
  );

-  const assetInSuspendedMarket =
-    allMarkets &&
-    Object.values(allMarkets).some((m: MarketFieldsFragment | null) => {
-      if (m && getAsset(m).id === dispatchStrategy.dispatchMetricAssetId) {
-        return (
-          m?.state === MarketState.STATE_SUSPENDED ||
-          m?.state === MarketState.STATE_SUSPENDED_VIA_GOVERNANCE
-        );
-      }
-      return false;
-    });
-
  // Gray out the cards that are related to suspended markets
+  // Or settlement assets in markets that are not active and eligible for rewards
  const { gradientClassName, mainClassName } =
-    suspended || assetInSuspendedMarket || assetInSettledMarket
+    marketSuspended || !assetInActiveMarket
      ? {
          gradientClassName: 'from-vega-cdark-500 to-vega-clight-400',
          mainClassName: 'from-vega-cdark-400 dark:from-vega-cdark-600 to-20%',
@@ -449,12 +430,12 @@ export const ActiveRewardCard = ({
          <span data-testid="dispatch-metric-info">
            {DispatchMetricLabels[dispatchStrategy.dispatchMetric]} •{' '}
            <Tooltip
-              underline={suspended}
+              underline={marketSuspended}
              description={
-                (suspended || assetInSuspendedMarket) &&
+                (marketSuspended || !assetInActiveMarket) &&
                (specificMarkets
                  ? t('Eligible market(s) currently suspended')
-                  : assetInSuspendedMarket
+                  : !assetInActiveMarket
                  ? t('Currently no markets eligible for reward')
                  : '')
              }
@@ -487,7 +468,7 @@ export const ActiveRewardCard = ({
            }
          </div>
          {dispatchStrategy?.dispatchMetric && (
-            <span className="text-muted text-sm h-[2rem]">
+            <span className="text-muted text-sm h-[3rem]">
              {t(DispatchMetricDescription[dispatchStrategy?.dispatchMetric])}
            </span>
          )}
@@ -81,6 +81,7 @@ export const Settings = () => {
              intent={Intent.Primary}
              onClick={() => {
                localStorage.clear();
+                sessionStorage.clear();
                window.location.reload();
              }}
            >
@@ -17,6 +17,7 @@ import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../error-boundary';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';

 export enum ViewType {
  Order = 'Order',
@@ -26,9 +27,10 @@ export enum ViewType {
  Transfer = 'Transfer',
  Settings = 'Settings',
  ViewAs = 'ViewAs',
+  Close = 'Close',
 }

-type SidebarView =
+export type BarView =
  | {
      type: ViewType.Deposit;
      assetId?: string;
@@ -49,6 +51,9 @@ type SidebarView =
    }
  | {
      type: ViewType.Settings;
+    }
+  | {
+      type: ViewType.Close;
    };

 export const Sidebar = ({ options }: { options?: ReactNode }) => {
@@ -57,26 +62,52 @@ export const Sidebar = ({ options }: { options?: ReactNode }) => {
  const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
  const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
  const { pubKeys } = useVegaWallet();
+  const { isMobile } = useScreenDimensions();
+  const { getView } = useSidebar((store) => ({
+    setViews: store.setViews,
+    getView: store.getView,
+  }));
+  const currView = getView(currentRouteId);
  return (
-    <div className="flex h-full p-1 lg:flex-col gap-2" data-testid="sidebar">
-      {options && <nav className={navClasses}>{options}</nav>}
-      <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
-        <SidebarButton
-          view={ViewType.ViewAs}
-          onClick={() => {
-            setViewAsDialogOpen(true);
-          }}
-          icon={VegaIconNames.EYE}
-          tooltip={t('View as party')}
-          disabled={Boolean(pubKeys)}
-          routeId={currentRouteId}
-        />
-        <SidebarButton
-          view={ViewType.Settings}
-          icon={VegaIconNames.COG}
-          tooltip={t('Settings')}
-          routeId={currentRouteId}
-        />
+    <div className="flex h-full lg:flex-col gap-1" data-testid="sidebar">
+      {options && (
+        <nav className={classNames(navClasses, 'flex grow')}>{options}</nav>
+      )}
+      <nav
+        className={classNames(
+          navClasses,
+          'ml-auto lg:mt-auto lg:ml-0 shrink-0'
+        )}
+      >
+        {!isMobile ? (
+          <>
+            <SidebarButton
+              view={ViewType.ViewAs}
+              onClick={() => {
+                setViewAsDialogOpen(true);
+              }}
+              icon={VegaIconNames.EYE}
+              tooltip={t('View as party')}
+              disabled={Boolean(pubKeys)}
+              routeId={currentRouteId}
+            />
+            <SidebarButton
+              view={ViewType.Settings}
+              icon={VegaIconNames.COG}
+              tooltip={t('Settings')}
+              routeId={currentRouteId}
+            />
+          </>
+        ) : (
+          currView && (
+            <SidebarButton
+              view={ViewType.Close}
+              icon={VegaIconNames.ARROW_LEFT}
+              tooltip={t('Back')}
+              routeId={currentRouteId}
+            />
+          )
+        )}
        <NodeHealthContainer />
      </nav>
    </div>
@@ -103,7 +134,7 @@ export const SidebarButton = ({
    getView: store.getView,
  }));
  const currView = getView(routeId);
-  const onSelect = (view: SidebarView['type']) => {
+  const onSelect = (view: BarView['type']) => {
    if (view === currView?.type) {
      setViews(null, routeId);
    } else {
@@ -133,7 +164,7 @@ export const SidebarButton = ({
      <button
        className={buttonClasses}
        data-testid={view}
-        onClick={onClick || (() => onSelect(view as SidebarView['type']))}
+        onClick={onClick || (() => onSelect(view as BarView['type']))}
        disabled={disabled}
      >
        <VegaIcon name={icon} size={20} />
@@ -180,6 +211,10 @@ export const SidebarContent = () => {
    }
  }

+  if (view.type === ViewType.Close) {
+    return <CloseSidebar />;
+  }
+
  if (view.type === ViewType.Info) {
    if (params.marketId) {
      return (
@@ -267,9 +302,9 @@ const CloseSidebar = () => {
 };

 export const useSidebar = create<{
-  views: { [key: string]: SidebarView | null };
-  setViews: (view: SidebarView | null, routeId: string) => void;
-  getView: (routeId: string) => SidebarView | null | undefined;
+  views: { [key: string]: BarView | null };
+  setViews: (view: BarView | null, routeId: string) => void;
+  getView: (routeId: string) => BarView | null | undefined;
 }>()((set, get) => ({
  views: {},
  setViews: (x, routeId) =>
@@ -1,3 +1,3 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:latest
-VEGA_VERSION=v0.74.0-preview.8
+VEGA_VERSION=v0.74.0-preview.10
 LOCAL_SERVER=false
@@ -111,6 +111,7 @@ def init_vega(request=None):
                f"Container {container.id} started",
                extra={"worker_id": os.environ.get("PYTEST_XDIST_WORKER")},
            )
+            vega.container = container
            yield vega
        except APIError as e:
            logger.info(f"Container creation failed.")
@@ -177,10 +178,34 @@ def init_page(vega: VegaServiceNull, browser: Browser, request: pytest.FixtureRe

@pytest.fixture
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))
+        yield vega_instance


+
+def cleanup_container(vega_instance):
+    try:
+        # Attempt to stop the container if it's still running
+        if vega_instance.container.status == 'running':
+            print(f"Stopping container {vega_instance.container.id}")
+            vega_instance.container.stop()
+        else:
+            print(f"Container {vega_instance.container.id} is not running.")
+    except docker.errors.NotFound:
+        print(f"Container {vega_instance.container.id} not found, may have been stopped and removed.")
+    except Exception as e:
+        print(f"Error during cleanup: {str(e)}")
+
+    try:
+        # Attempt to remove the container
+        vega_instance.container.remove()
+        print(f"Container {vega_instance.container.id} removed.")
+    except docker.errors.NotFound:
+        print(f"Container {vega_instance.container.id} not found, may have been removed.")
+    except Exception as e:
+        print(f"Error during container removal: {str(e)}")
+
@pytest.fixture
 def page(vega, browser, request):
    with init_page(vega, browser, request) as page_instance:
@@ -2,7 +2,7 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from datetime import datetime, timedelta
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_continuous_market
 from actions.utils import wait_for_toast_confirmation

@@ -17,8 +17,10 @@ expire = "expire"

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+


@pytest.fixture(scope="module")
@@ -3,7 +3,7 @@ from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from datetime import datetime, timedelta
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_continuous_market

 stop_order_btn = "order-type-Stop"
@@ -259,9 +259,10 @@ def test_submit_stop_limit_order_cancel(

 class TestStopOcoValidation:
    @pytest.fixture(scope="class")
-    def vega(self, request):
-        with init_vega(request) as vega:
-            yield vega
+    def vega(request):
+        with init_vega(request) as vega_instance:
+            request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+            yield vega_instance

    @pytest.fixture(scope="class")
    def continuous_market(self, vega):
@@ -2,7 +2,7 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.utils import change_keys
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_continuous_market

 order_size = "order-size"
@@ -14,8 +14,9 @@ deal_ticket_deposit_dialog_button = "deal-ticket-deposit-dialog-button"

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="module")
@@ -33,7 +34,7 @@ def test_should_display_info_and_button_for_deposit(continuous_market, page: Pag
        "You may not have enough margin available to open this position.")
    page.get_by_test_id(deal_ticket_warning_margin).hover()
    expect(page.get_by_test_id("tooltip-content").nth(0)).to_have_text(
-        "1,661,896.6317 tDAI is currently required.You have only 1,000,000.00.Deposit tDAI")
+        "1,661,888.12901 tDAI is currently required.You have only 999,991.49731.Deposit tDAI")
    page.get_by_test_id(deal_ticket_deposit_dialog_button).nth(0).click()
    expect(page.get_by_test_id("sidebar-content")
           ).to_contain_text("DepositFrom")
@@ -4,7 +4,7 @@ from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from wallet_config import MM_WALLET
-from conftest import init_vega, init_page, auth_setup
+from conftest import init_vega, init_page, auth_setup, cleanup_container
 from actions.utils import next_epoch, change_keys, forward_time
 from fixtures.market import market_exists, setup_continuous_market

@@ -82,31 +82,36 @@ def market_ids():
@pytest.fixture(scope="module")
 def vega_volume_discount_tier_1(request):
    with init_vega(request) as vega_volume_discount_tier_1:
-        yield vega_volume_discount_tier_1
+            request.addfinalizer(lambda: cleanup_container(vega_volume_discount_tier_1))  # Register the cleanup function
+            yield vega_volume_discount_tier_1


@pytest.fixture(scope="module")
 def vega_volume_discount_tier_2(request):
    with init_vega(request) as vega_volume_discount_tier_2:
-        yield vega_volume_discount_tier_2
+            request.addfinalizer(lambda: cleanup_container(vega_volume_discount_tier_2))  # Register the cleanup function
+            yield vega_volume_discount_tier_2


@pytest.fixture(scope="module")
 def vega_referral_discount_tier_1(request):
    with init_vega(request) as vega_referral_discount_tier_1:
-        yield vega_referral_discount_tier_1
+            request.addfinalizer(lambda: cleanup_container(vega_referral_discount_tier_1))  # Register the cleanup function
+            yield vega_referral_discount_tier_1


@pytest.fixture(scope="module")
 def vega_referral_discount_tier_2(request):
    with init_vega(request) as vega_referral_discount_tier_2:
-        yield vega_referral_discount_tier_2
+            request.addfinalizer(lambda: cleanup_container(vega_referral_discount_tier_2))  # Register the cleanup function
+            yield vega_referral_discount_tier_2


@pytest.fixture(scope="module")
 def vega_referral_and_volume_discount(request):
    with init_vega(request) as vega_referral_and_volume_discount:
-        yield vega_referral_and_volume_discount
+            request.addfinalizer(lambda: cleanup_container(vega_referral_and_volume_discount))  # Register the cleanup function
+            yield vega_referral_and_volume_discount


@pytest.fixture
@@ -3,7 +3,7 @@ from playwright.sync_api import expect, Page
 import json
 from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_simple_market
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from actions.vega import submit_order
 from wallet_config import MM_WALLET, TERMINATE_WALLET, wallets
 import logging
@@ -12,9 +12,10 @@ logger = logging.getLogger()


@pytest.fixture(scope="class")
-def vega():
-    with init_vega() as vega:
-        yield vega
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="class")
@@ -2,8 +2,6 @@ import pytest
 from playwright.sync_api import expect, Page
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
-from conftest import init_vega
-from fixtures.market import setup_continuous_market
 from wallet_config import MM_WALLET2

 def hover_and_assert_tooltip(page: Page, element_text):
@@ -11,39 +9,30 @@ def hover_and_assert_tooltip(page: Page, element_text):
    element.hover()
    expect(page.get_by_role("tooltip")).to_be_visible()

-class TestIcebergOrdersValidations:
-    @pytest.fixture(scope="class")
-    def vega(self, request):
-        with init_vega(request) as vega:
-            yield vega

-    @pytest.fixture(scope="class")
-    def continuous_market(self, vega):
-        return setup_continuous_market(vega)
+@pytest.mark.usefixtures("auth", "risk_accepted")
+def test_iceberg_submit(continuous_market, vega: VegaServiceNull, page: Page):
+    page.goto(f"/#/markets/{continuous_market}")
+    page.get_by_test_id("iceberg").click()
+    page.get_by_test_id("order-peak-size").type("2")
+    page.get_by_test_id("order-minimum-size").type("1")
+    page.get_by_test_id("order-size").type("3")
+    page.get_by_test_id("order-price").type("107")
+    page.get_by_test_id("place-order").click()

-    @pytest.mark.usefixtures("auth", "risk_accepted")
-    def test_iceberg_submit(self, continuous_market, vega: VegaServiceNull, page: Page):
-        page.goto(f"/#/markets/{continuous_market}")
-        page.get_by_test_id("iceberg").click()
-        page.get_by_test_id("order-peak-size").type("2")
-        page.get_by_test_id("order-minimum-size").type("1")
-        page.get_by_test_id("order-size").type("3")
-        page.get_by_test_id("order-price").type("107")
-        page.get_by_test_id("place-order").click()
+    expect(page.get_by_test_id("toast-content")).to_have_text(
+        "Awaiting confirmationPlease wait for your transaction to be confirmedView in block explorer"
+    )

-        expect(page.get_by_test_id("toast-content")).to_have_text(
-            "Awaiting confirmationPlease wait for your transaction to be confirmedView in block explorer"
-        )
-
-        vega.wait_fn(1)
-        vega.wait_for_total_catchup()
-        expect(page.get_by_test_id("toast-content")).to_have_text(
-            "Order filledYour transaction has been confirmedView in block explorerSubmit order - filledBTC:DAI_2023+3 @ 107.00 tDAI"
-        )
-        page.get_by_test_id("All").click()
-        expect(
-            (page.get_by_role("row").locator('[col-id="type"]')).nth(1)
-        ).to_have_text("Limit (Iceberg)")
+    vega.wait_fn(1)
+    vega.wait_for_total_catchup()
+    expect(page.get_by_test_id("toast-content")).to_have_text(
+        "Order filledYour transaction has been confirmedView in block explorerSubmit order - filledBTC:DAI_2023+3 @ 107.00 tDAI"
+    )
+    page.get_by_test_id("All").click()
+    expect(
+        (page.get_by_role("row").locator('[col-id="type"]')).nth(1)
+    ).to_have_text("Limit (Iceberg)")

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_iceberg_open_order(continuous_market, vega: VegaServiceNull, page: Page):
@@ -1,15 +1,16 @@
 import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_continuous_market
 from actions.utils import next_epoch, truncate_middle, change_keys

-
@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+


@pytest.fixture(scope="module")
@@ -4,14 +4,15 @@ import vega_sim.api.governance as governance
 from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import Page, expect
 from fixtures.market import setup_continuous_market
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from actions.utils import next_epoch


@pytest.fixture(scope="class")
-def vega():
-    with init_vega() as vega:
-        yield vega
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="class")
@@ -3,15 +3,16 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_continuous_market
-from conftest import init_page, init_vega, risk_accepted_setup
+from conftest import init_page, init_vega, risk_accepted_setup, cleanup_container

 market_title_test_id = "accordion-title"


@pytest.fixture(scope="module")
-def vega():
-    with init_vega() as vega:
-        yield vega
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="module")
@@ -3,7 +3,7 @@ import vega_sim.api.governance as governance
 import re
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_simple_market
 from wallet_config import MM_WALLET

@@ -13,8 +13,10 @@ col_market_id = '[col-id="market"] [data-testid="stack-cell-primary"]'

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+


@pytest.fixture(scope="module")
@@ -3,7 +3,7 @@ from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from fixtures.market import setup_simple_market
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from actions.utils import wait_for_toast_confirmation, change_keys
 from wallet_config import MM_WALLET, MM_WALLET2

@@ -15,8 +15,10 @@ COL_ID_FEE = ".ag-center-cols-container [col-id='fee'] .ag-cell-value"

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+


@pytest.fixture(scope="module")
@@ -37,7 +37,7 @@ def test_market_lifecycle(proposed_market, vega: VegaServiceNull, page: Page):
    # 6002-MDET-004
    expect(page.get_by_test_id("market-change")).to_have_text("Change (24h)0.00%0.00")
    # 6002-MDET-005
-    expect(page.get_by_test_id("market-volume")).to_have_text("Volume (24h)-")
+    expect(page.get_by_test_id("market-volume")).to_have_text("Volume (24h)- (- BTC)")
    # 6002-MDET-008
    expect(page.get_by_test_id("market-settlement-asset")).to_have_text(
        "Settlement assettDAI"
@@ -1,13 +1,14 @@
 import pytest
 from playwright.sync_api import Page, expect, Locator

-from conftest import init_page, init_vega
+from conftest import init_page, init_vega, cleanup_container


@pytest.fixture(scope="module")
-def vega():
-    with init_vega() as vega:
-        yield vega
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


 # we can reuse single page instance in all tests
@@ -2,7 +2,7 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.service import PeggedOrder
 from vega_sim.null_service import VegaServiceNull
-from conftest import auth_setup, init_page, init_vega, risk_accepted_setup
+from conftest import auth_setup, init_page, init_vega, risk_accepted_setup, cleanup_container
 from fixtures.market import setup_continuous_market, setup_simple_market
 from actions.utils import wait_for_toast_confirmation

@@ -11,8 +11,9 @@ order_tab = "tab-orders"

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="module", autouse=True)
@@ -2,15 +2,16 @@ import pytest
 from playwright.sync_api import Page, expect
 from typing import List
 from actions.vega import submit_order, submit_liquidity, submit_multiple_orders
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_simple_market
 from wallet_config import MM_WALLET, MM_WALLET2


@pytest.fixture(scope="module")
-def vega():
-    with init_vega() as vega:
-        yield vega
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="module")
@@ -1,7 +1,7 @@
 import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_continuous_market

 TOOLTIP_LABEL = "margin-health-tooltip-label"
@@ -11,8 +11,10 @@ COL_ID_USED = ".ag-center-cols-container [col-id='used'] .ag-cell-value"

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+


@pytest.fixture(scope="module")
@@ -1,7 +1,7 @@
 import pytest
 from playwright.sync_api import Page
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from fixtures.market import setup_continuous_market, setup_simple_market
 from actions.utils import change_keys, create_and_faucet_wallet, forward_time, selector_contains_text
 from actions.vega import submit_order, submit_liquidity
@@ -14,8 +14,10 @@ BUY_ORDERS = [[1, 106], [1, 107], [1, 108]]

@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+


@pytest.fixture(scope="module")
@@ -2,7 +2,7 @@ import pytest

 import vega_sim.proto.vega as vega_protos
 from playwright.sync_api import Page, expect
-from conftest import init_vega, init_page, auth_setup
+from conftest import init_vega, init_page, auth_setup, cleanup_container
 from fixtures.market import setup_continuous_market, market_exists
 from actions.utils import next_epoch, change_keys
 from wallet_config import MM_WALLET, PARTY_A, PARTY_B, PARTY_C, PARTY_D
@@ -46,36 +46,42 @@ def market_ids():
@pytest.fixture(scope="module")
 def vega_activity_tier_0(request):
    with init_vega(request) as vega_activity_tier_0:
+        request.addfinalizer(lambda: cleanup_container(vega_activity_tier_0))  # Register the cleanup function
        yield vega_activity_tier_0


@pytest.fixture(scope="module")
 def vega_hoarder_tier_0(request):
    with init_vega(request) as vega_hoarder_tier_0:
+        request.addfinalizer(lambda: cleanup_container(vega_hoarder_tier_0))  # Register the cleanup function
        yield vega_hoarder_tier_0


@pytest.fixture(scope="module")
 def vega_combo_tier_0(request):
    with init_vega(request) as vega_combo_tier_0:
+        request.addfinalizer(lambda: cleanup_container(vega_combo_tier_0))  # Register the cleanup function
        yield vega_combo_tier_0


@pytest.fixture(scope="module")
 def vega_activity_tier_1(request):
    with init_vega(request) as vega_activity_tier_1:
+        request.addfinalizer(lambda: cleanup_container(vega_activity_tier_1))  # Register the cleanup function
        yield vega_activity_tier_1


@pytest.fixture(scope="module")
 def vega_hoarder_tier_1(request):
    with init_vega(request) as vega_hoarder_tier_1:
+        request.addfinalizer(lambda: cleanup_container(vega_hoarder_tier_1))  # Register the cleanup function
        yield vega_hoarder_tier_1


@pytest.fixture(scope="module")
 def vega_combo_tier_1(request):
    with init_vega(request) as vega_combo_tier_1:
+        request.addfinalizer(lambda: cleanup_container(vega_combo_tier_1))  # Register the cleanup function
        yield vega_combo_tier_1


@@ -0,0 +1,176 @@
+import pytest
+import vega_sim.proto.vega as vega_protos
+from playwright.sync_api import Page, expect
+from conftest import init_vega, init_page, auth_setup, risk_accepted_setup, cleanup_container
+from fixtures.market import setup_continuous_market
+from actions.utils import next_epoch, change_keys, create_and_faucet_wallet
+from wallet_config import MM_WALLET, WalletConfig
+from vega_sim.null_service import VegaServiceNull
+
+# region Constants
+ACTIVITY = "activity"
+HOARDER = "hoarder"
+COMBO = "combo"
+
+REWARDS_URL = "/#/rewards"
+
+# test IDs
+COMBINED_MULTIPLIERS = "combined-multipliers"
+TOTAL_REWARDS = "total-rewards"
+PRICE_TAKING_COL_ID = '[col-id="priceTaking"]'
+TOTAL_COL_ID = '[col-id="total"]'
+ROW = "row"
+STREAK_REWARD_MULTIPLIER_VALUE = "streak-reward-multiplier-value"
+HOARDER_REWARD_MULTIPLIER_VALUE = "hoarder-reward-multiplier-value"
+HOARDER_BONUS_TOTAL_HOARDED = "hoarder-bonus-total-hoarded"
+EARNED_BY_ME_BUTTON = "earned-by-me-button"
+TRANSFER_AMOUNT = "transfer-amount"
+EPOCH_STREAK = "epoch-streak"
+
+# endregion
+
+# Keys
+PARTY_A = "PARTY_A"
+PARTY_B = "PARTY_B"
+PARTY_C = "PARTY_C"
+PARTY_D = "PARTY_D"
+
+
+@pytest.fixture(scope="module")
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance
+
+
+
+@pytest.fixture(scope="module")
+def page(vega, browser, request):
+    with init_page(vega, browser, request) as page:
+        risk_accepted_setup(page)
+        auth_setup(vega, page)
+        page.goto(REWARDS_URL)
+        change_keys(page, vega, PARTY_B)
+        yield page
+
+
+@pytest.fixture(scope="module", autouse=True)
+def setup_market_with_reward_program(vega: VegaServiceNull):
+    tDAI_market = setup_continuous_market(vega)
+    PARTY_A, PARTY_B, PARTY_C, PARTY_D = keys(vega)
+    tDAI_asset_id = vega.find_asset_id(symbol="tDAI")
+    vega.mint(key_name=PARTY_B.name, asset=tDAI_asset_id, amount=100000)
+    vega.mint(key_name=PARTY_C.name, asset=tDAI_asset_id, amount=100000)
+    vega.mint(key_name=PARTY_A.name, asset=tDAI_asset_id, amount=100000)
+    vega.mint(key_name=PARTY_D.name, asset=tDAI_asset_id, amount=100000)
+    next_epoch(vega=vega)
+
+    vega.update_network_parameter(
+        proposal_key=MM_WALLET.name,
+        parameter="rewards.activityStreak.benefitTiers",
+        new_value=ACTIVITY_STREAKS,
+    )
+    print("update_network_parameter activity done")
+    next_epoch(vega=vega)
+
+    tDAI_asset_id = vega.find_asset_id(symbol="tDAI")
+    vega.update_network_parameter(
+        MM_WALLET.name, parameter="reward.asset", new_value=tDAI_asset_id
+    )
+
+    next_epoch(vega=vega)
+    vega.recurring_transfer(
+        from_key_name=PARTY_A.name,
+        from_account_type=vega_protos.vega.ACCOUNT_TYPE_GENERAL,
+        to_account_type=vega_protos.vega.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
+        asset=tDAI_asset_id,
+        reference="reward",
+        asset_for_metric=tDAI_asset_id,
+        metric=vega_protos.vega.DISPATCH_METRIC_MAKER_FEES_PAID,
+        amount=100,
+        factor=1.0,
+    )
+    vega.submit_order(
+        trading_key=PARTY_B.name,
+        market_id=tDAI_market,
+        order_type="TYPE_MARKET",
+        time_in_force="TIME_IN_FORCE_IOC",
+        side="SIDE_BUY",
+        volume=1,
+    )
+    vega.submit_order(
+        trading_key=PARTY_A.name,
+        market_id=tDAI_market,
+        order_type="TYPE_MARKET",
+        time_in_force="TIME_IN_FORCE_IOC",
+        side="SIDE_BUY",
+        volume=1,
+    )
+
+    vega.wait_for_total_catchup()
+
+    next_epoch(vega=vega)
+    return tDAI_market, tDAI_asset_id
+
+
+ACTIVITY_STREAKS = """
+{
+    "tiers": [
+        {
+            "minimum_activity_streak": 2, 
+            "reward_multiplier": "2.0", 
+            "vesting_multiplier": "1.1"
+        }
+    ]
+}
+"""
+
+
+def keys(vega):
+    PARTY_A = WalletConfig("PARTY_A", "PARTY_A")
+    create_and_faucet_wallet(vega=vega, wallet=PARTY_A)
+    PARTY_B = WalletConfig("PARTY_B", "PARTY_B")
+    create_and_faucet_wallet(vega=vega, wallet=PARTY_B)
+    PARTY_C = WalletConfig("PARTY_C", "PARTY_C")
+    create_and_faucet_wallet(vega=vega, wallet=PARTY_C)
+    PARTY_D = WalletConfig("PARTY_D", "PARTY_D")
+    create_and_faucet_wallet(vega=vega, wallet=PARTY_D)
+    return PARTY_A, PARTY_B, PARTY_C, PARTY_D
+
+
+@pytest.mark.xdist_group(name="test_rewards_activity_tier_0")
+def test_network_reward_pot(
+    page: Page,
+):
+    expect(page.get_by_test_id(TOTAL_REWARDS)).to_have_text("50.00 tDAI")
+
+
+@pytest.mark.xdist_group(name="test_rewards_activity_tier_0")
+def test_reward_multiplier(
+    page: Page,
+):
+    expect(page.get_by_test_id(COMBINED_MULTIPLIERS)).to_have_text("1x")
+    expect(page.get_by_test_id(STREAK_REWARD_MULTIPLIER_VALUE)).to_have_text("1x")
+    expect(page.get_by_test_id(HOARDER_REWARD_MULTIPLIER_VALUE)).to_have_text("1x")
+
+
+@pytest.mark.xdist_group(name="test_rewards_activity_tier_0")
+def test_activity_streak(
+    page: Page,
+):
+    expect(page.get_by_test_id(EPOCH_STREAK)).to_have_text(
+        "Active trader: 1 epochs so far "
+    )
+
+
+@pytest.mark.xdist_group(name="test_rewards_activity_tier_0")
+def test_reward_history(
+    page: Page,
+):
+    page.locator('[name="fromEpoch"]').fill("1")
+    expect((page.get_by_role(ROW).locator(PRICE_TAKING_COL_ID)).nth(1)).to_have_text(
+        "100.00100.00%"
+    )
+    expect((page.get_by_role(ROW).locator(TOTAL_COL_ID)).nth(1)).to_have_text("100.00")
+    page.get_by_test_id(EARNED_BY_ME_BUTTON).click()
+    expect((page.get_by_role(ROW).locator(TOTAL_COL_ID)).nth(1)).to_have_text("50.00")
@@ -1,12 +1,13 @@
 import pytest
 from playwright.sync_api import expect, Page
-from conftest import init_vega
+from conftest import init_vega, cleanup_container


@pytest.fixture(scope="module")
-def vega():
-    with init_vega() as vega:
-        yield vega
+def vega(request):
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.mark.usefixtures("risk_accepted")
@@ -2,17 +2,17 @@ import pytest
 from playwright.sync_api import expect, Page
 import vega_sim.proto.vega as vega_protos
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega
+from conftest import init_vega, cleanup_container
 from actions.utils import next_epoch, change_keys
 from fixtures.market import setup_continuous_market
 from conftest import auth_setup, init_page, init_vega, risk_accepted_setup
 from wallet_config import PARTY_A, PARTY_B, PARTY_C, PARTY_D, MM_WALLET

-
@pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega:
-        yield vega
+    with init_vega(request) as vega_instance:
+        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
+        yield vega_instance


@pytest.fixture(scope="module")
@@ -24,6 +24,7 @@ def team_page(vega, browser, request, setup_teams_and_games):
        page.goto(f"/#/competitions/teams/{team_id}")
        yield page

+
@pytest.fixture(scope="module")
 def competitions_page(vega, browser, request, setup_teams_and_games):
    with init_page(vega, browser, request) as page:
@@ -215,7 +216,8 @@ def test_team_page_games_table(team_page: Page):
    expect(team_page.get_by_test_id("games-toggle")).to_have_text("Games (1)")
    expect(team_page.get_by_test_id("rank-0")).to_have_text("2")
    expect(team_page.get_by_test_id("epoch-0")).to_have_text("19")
-    expect(team_page.get_by_test_id("type-0")).to_have_text("Price maker fees paid")
+    expect(team_page.get_by_test_id("type-0")
+           ).to_have_text("Price maker fees paid")
    expect(team_page.get_by_test_id("amount-0")).to_have_text("74")
    expect(team_page.get_by_test_id("participatingTeams-0")).to_have_text("2")
    expect(team_page.get_by_test_id("participatingMembers-0")).to_have_text("4")
@@ -223,7 +225,8 @@ def test_team_page_games_table(team_page: Page):

 def test_team_page_members_table(team_page: Page):
    team_page.get_by_test_id("members-toggle").click()
-    expect(team_page.get_by_test_id("members-toggle")).to_have_text("Members (4)")
+    expect(team_page.get_by_test_id("members-toggle")
+           ).to_have_text("Members (4)")
    expect(team_page.get_by_test_id("referee-0")).to_be_visible()
    expect(team_page.get_by_test_id("joinedAt-0")).to_be_visible()
    expect(team_page.get_by_test_id("joinedAtEpoch-0")).to_have_text("9")
@@ -234,12 +237,12 @@ def test_team_page_headline(team_page: Page, setup_teams_and_games):
    expect(team_page.get_by_test_id("team-name")).to_have_text(team_name)
    expect(team_page.get_by_test_id("members-count-stat")).to_have_text("4")

-    expect(team_page.get_by_test_id("total-games-stat")).to_have_text("2")
+    expect(team_page.get_by_test_id("total-games-stat")).to_have_text("1")

    # TODO this still seems wrong as its always 0
    expect(team_page.get_by_test_id("total-volume-stat")).to_have_text("0")

-    expect(team_page.get_by_test_id("rewards-paid-stat")).to_have_text("214")
+    expect(team_page.get_by_test_id("rewards-paid-stat")).to_have_text("78")


 def test_switch_teams(team_page: Page, vega: VegaServiceNull):
@@ -260,27 +263,32 @@ def test_leaderboard(competitions_page: Page, setup_teams_and_games):
        competitions_page.get_by_test_id("rank-0").locator(".text-yellow-300")
    ).to_have_count(1)
    expect(
-        competitions_page.get_by_test_id("rank-1").locator(".text-vega-clight-500")
+        competitions_page.get_by_test_id(
+            "rank-1").locator(".text-vega-clight-500")
    ).to_have_count(1)
    expect(competitions_page.get_by_test_id("team-1")).to_have_text(team_name)
    expect(competitions_page.get_by_test_id("status-1")).to_have_text("Open")

-    expect(competitions_page.get_by_test_id("earned-1")).to_have_text("160")
-    expect(competitions_page.get_by_test_id("games-1")).to_have_text("2")
+    #  FIXME: the numbers are different we need to clarify this with the backend
+    # expect(competitions_page.get_by_test_id("earned-1")).to_have_text("160")
+    expect(competitions_page.get_by_test_id("games-1")).to_have_text("1")

    # TODO  still odd that this is 0
    expect(competitions_page.get_by_test_id("volume-0")).to_have_text("-")


 def test_game_card(competitions_page: Page):
-    expect(competitions_page.get_by_test_id("active-rewards-card")).to_have_count(2)
+    expect(competitions_page.get_by_test_id(
+        "active-rewards-card")).to_have_count(2)
    game_1 = competitions_page.get_by_test_id("active-rewards-card").first
    expect(game_1).to_be_visible()
    expect(game_1.get_by_test_id("entity-scope")).to_have_text("Individual")
    expect(game_1.get_by_test_id("locked-for")).to_have_text("1 epoch")
    expect(game_1.get_by_test_id("reward-value")).to_have_text("100.00")
-    expect(game_1.get_by_test_id("distribution-strategy")).to_have_text("Pro rata")
-    expect(game_1.get_by_test_id("dispatch-metric-info")).to_have_text("Price maker fees paid • ")
+    expect(game_1.get_by_test_id("distribution-strategy")
+           ).to_have_text("Pro rata")
+    expect(game_1.get_by_test_id("dispatch-metric-info")
+           ).to_have_text("Price maker fees paid • tDAI")
    expect(game_1.get_by_test_id("assessed-over")).to_have_text("15 epochs")
    expect(game_1.get_by_test_id("scope")).to_have_text("In team")
    expect(game_1.get_by_test_id("staking-requirement")).to_have_text("0.00")
@@ -308,4 +316,3 @@ def test_create_team(competitions_page: Page, vega: VegaServiceNull):
    expect(competitions_page.get_by_test_id("team-id-display")).to_be_visible()
    competitions_page.get_by_test_id("view-team-button").click()
    expect(competitions_page.get_by_test_id("team-name")).to_have_text("e2e")
-
@@ -36,7 +36,9 @@ export const useTeams = (aggregationEpochs = DEFAULT_AGGREGATION_EPOCHS) => {
      ...stats.find((s) => s.teamId === t.teamId),
    }));

-    return orderBy(data, (d) => Number(d.totalQuantumRewards || 0), 'desc');
+    return orderBy(data, (d) => Number(d.totalQuantumRewards || 0), 'desc').map(
+      (d, i) => ({ ...d, rank: i + 1 })
+    );
  }, [teams, stats]);

  return {
@@ -14,7 +14,7 @@ import './styles.css';
 import { usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
-import { HashRouter, useLocation, Route, Routes } from 'react-router-dom';
+import { HashRouter, useLocation } from 'react-router-dom';
 import { Bootstrapper } from '../components/bootstrapper';
 import { AnnouncementBanner } from '../components/banner';
 import { Navbar } from '../components/navbar';
@@ -25,9 +25,7 @@ import {
  ProtocolUpgradeProposalNotification,
 } from '@vegaprotocol/proposals';
 import { ViewingBanner } from '../components/viewing-banner';
-import { NavHeader } from '../components/navbar/nav-header';
 import { Telemetry } from '../components/telemetry';
-import { Routes as AppRoutes } from '../lib/links';
 import { SSRLoader } from './ssr-loader';
 import { PartyActiveOrdersHandler } from './party-active-orders-handler';
 import { MaybeConnectEagerly } from './maybe-connect-eagerly';
@@ -73,16 +71,7 @@ function AppBody({ Component }: AppProps) {
      <Title />
      <div className={gridClasses}>
        <AnnouncementBanner />
-        <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'}>
-          <Routes>
-            <Route
-              path={AppRoutes.MARKETS}
-              // render nothing for markets/all, otherwise markets/:marketId will match with markets/all
-              element={null}
-            />
-            <Route path={AppRoutes.MARKET} element={<NavHeader />} />
-          </Routes>
-        </Navbar>
+        <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
        <div data-testid="banners">
          <ProtocolUpgradeProposalNotification
            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
@@ -24,11 +24,14 @@ export default function Document() {

        {/* scripts */}
        <script src="/theme-setter.js" type="text/javascript" async />
+
+        {/* manifest */}
+        <link rel="manifest" href="/apps/trading/public/manifest.json" />
      </Head>
      <Html>
        <body
-          // Nextjs will set body to display none until js runs. Because the entire app is client rendered
-          // and delivered via ipfs we override this to show a server side render loading animation until the
+          // Next.js will set body to display none until js runs. Because the entire app is client rendered
+          // and delivered via IPFS we override this to show a server side render loading animation until the
          // js is downloaded and react takes over rendering
          style={{ display: 'block' }}
          className="bg-white dark:bg-vega-cdark-900 text-default font-alpha"
@@ -23,8 +23,11 @@ import { NotFound as ReferralNotFound } from '../client-pages/referrals/error-bo
 import { compact } from 'lodash';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import { LiquidityHeader } from '../components/liquidity-header';
-import { MarketHeader } from '../components/market-header';
-import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
+import { MarketHeader, MobileMarketHeader } from '../components/market-header';
+import {
+  PortfolioMobileSidebar,
+  PortfolioSidebar,
+} from '../client-pages/portfolio/portfolio-sidebar';
 import { LiquiditySidebar } from '../client-pages/liquidity/liquidity-sidebar';
 import { MarketsSidebar } from '../client-pages/markets/markets-sidebar';
 import { useT } from '../lib/use-t';
@@ -33,8 +36,10 @@ import { CompetitionsTeams } from '../client-pages/competitions/competitions-tea
 import { CompetitionsTeam } from '../client-pages/competitions/competitions-team';
 import { CompetitionsCreateTeam } from '../client-pages/competitions/competitions-create-team';
 import { CompetitionsUpdateTeam } from '../client-pages/competitions/competitions-update-team';
+import { MarketsMobileSidebar } from '../client-pages/markets/mobile-buttons';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';

-// These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
+// These must remain dynamically imported as pennant cannot be compiled by Next.js due to ESM
 // Using dynamic imports is a workaround for this until pennant is published as ESM
 const MarketPage = lazy(() => import('../client-pages/market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
@@ -50,6 +55,20 @@ const NotFound = () => {

 export const useRouterConfig = (): RouteObject[] => {
  const featureFlags = useFeatureFlags((state) => state.flags);
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
+  const marketHeader = largeScreen ? <MarketHeader /> : <MobileMarketHeader />;
+  const marketsSidebar = largeScreen ? (
+    <MarketsSidebar />
+  ) : (
+    <MarketsMobileSidebar />
+  );
+  const portfolioSidebar = largeScreen ? (
+    <PortfolioSidebar />
+  ) : (
+    <PortfolioMobileSidebar />
+  );
+
  const routeConfig = compact([
    {
      index: true,
@@ -66,7 +85,7 @@ export const useRouterConfig = (): RouteObject[] => {
    featureFlags.REFERRALS
      ? {
          path: AppRoutes.REFERRALS,
-          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+          element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
          children: [
            {
              element: (
@@ -99,7 +118,7 @@ export const useRouterConfig = (): RouteObject[] => {
    featureFlags.TEAM_COMPETITION
      ? {
          path: AppRoutes.COMPETITIONS,
-          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+          element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
          children: [
            // pages with planets and stars
            {
@@ -130,7 +149,7 @@ export const useRouterConfig = (): RouteObject[] => {
      : undefined,
    {
      path: 'fees/*',
-      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
      children: [
        {
          index: true,
@@ -140,7 +159,7 @@ export const useRouterConfig = (): RouteObject[] => {
    },
    {
      path: 'rewards/*',
-      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
      children: [
        {
          index: true,
@@ -151,10 +170,7 @@ export const useRouterConfig = (): RouteObject[] => {
    {
      path: 'markets/*',
      element: (
-        <LayoutWithSidebar
-          header={<MarketHeader />}
-          sidebar={<MarketsSidebar />}
-        />
+        <LayoutWithSidebar header={marketHeader} sidebar={marketsSidebar} />
      ),
      children: [
        {
@@ -175,7 +191,7 @@ export const useRouterConfig = (): RouteObject[] => {
    },
    {
      path: 'portfolio/*',
-      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
      children: [
        {
          index: true,
@@ -0,0 +1,22 @@
+{
+  "name": "Vega Protocol - Trading",
+  "short_name": "Console",
+  "description": "Vega Protocol - Trading dApp",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "cover.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ]
+}
@@ -0,0 +1,18 @@
+query TransferFee(
+  $fromAccount: ID!
+  $fromAccountType: AccountType!
+  $toAccount: ID!
+  $amount: String!
+  $assetId: String!
+) {
+  estimateTransferFee(
+    fromAccount: $fromAccount
+    fromAccountType: $fromAccountType
+    toAccount: $toAccount
+    amount: $amount
+    assetId: $assetId
+  ) {
+    fee
+    discount
+  }
+}
@@ -0,0 +1,63 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type TransferFeeQueryVariables = Types.Exact<{
+  fromAccount: Types.Scalars['ID'];
+  fromAccountType: Types.AccountType;
+  toAccount: Types.Scalars['ID'];
+  amount: Types.Scalars['String'];
+  assetId: Types.Scalars['String'];
+}>;
+
+
+export type TransferFeeQuery = { __typename?: 'Query', estimateTransferFee?: { __typename?: 'EstimatedTransferFee', fee: string, discount: string } | null };
+
+
+export const TransferFeeDocument = gql`
+    query TransferFee($fromAccount: ID!, $fromAccountType: AccountType!, $toAccount: ID!, $amount: String!, $assetId: String!) {
+  estimateTransferFee(
+    fromAccount: $fromAccount
+    fromAccountType: $fromAccountType
+    toAccount: $toAccount
+    amount: $amount
+    assetId: $assetId
+  ) {
+    fee
+    discount
+  }
+}
+    `;
+
+/**
+ * __useTransferFeeQuery__
+ *
+ * To run a query within a React component, call `useTransferFeeQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTransferFeeQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTransferFeeQuery({
+ *   variables: {
+ *      fromAccount: // value for 'fromAccount'
+ *      fromAccountType: // value for 'fromAccountType'
+ *      toAccount: // value for 'toAccount'
+ *      amount: // value for 'amount'
+ *      assetId: // value for 'assetId'
+ *   },
+ * });
+ */
+export function useTransferFeeQuery(baseOptions: Apollo.QueryHookOptions<TransferFeeQuery, TransferFeeQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<TransferFeeQuery, TransferFeeQueryVariables>(TransferFeeDocument, options);
+      }
+export function useTransferFeeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TransferFeeQuery, TransferFeeQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<TransferFeeQuery, TransferFeeQueryVariables>(TransferFeeDocument, options);
+        }
+export type TransferFeeQueryHookResult = ReturnType<typeof useTransferFeeQuery>;
+export type TransferFeeLazyQueryHookResult = ReturnType<typeof useTransferFeeLazyQuery>;
+export type TransferFeeQueryResult = Apollo.QueryResult<TransferFeeQuery, TransferFeeQueryVariables>;
@@ -25,7 +25,6 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
  const t = useT();
  const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
  const { params } = useNetworkParams([
-    NetworkParams.transfer_fee_factor,
    NetworkParams.transfer_minTransferQuantumMultiple,
  ]);

@@ -72,7 +71,6 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
        pubKeys={pubKeys ? pubKeys?.map((pk) => pk.publicKey) : null}
        isReadOnly={isReadOnly}
        assetId={assetId}
-        feeFactor={params.transfer_fee_factor}
        minQuantumMultiple={params.transfer_minTransferQuantumMultiple}
        submitTransfer={transfer}
        accounts={sortedAccounts}
@@ -15,6 +15,30 @@ import {
 } from './transfer-form';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
+import type { TransferFeeQuery } from './__generated__/TransferFee';
+
+const feeFactor = 0.001;
+const mockUseTransferFeeQuery = jest.fn(
+  ({
+    variables: { amount },
+  }: {
+    variables: { amount: string };
+  }): { data: TransferFeeQuery } => {
+    return {
+      data: {
+        estimateTransferFee: {
+          discount: '0',
+          fee: (Number(amount) * feeFactor).toFixed(),
+        },
+      },
+    };
+  }
+);
+
+jest.mock('./__generated__/TransferFee', () => ({
+  useTransferFeeQuery: (props: { variables: { amount: string } }) =>
+    mockUseTransferFeeQuery(props),
+}));

 describe('TransferForm', () => {
  const renderComponent = (props: TransferFormProps) => {
@@ -56,7 +80,6 @@ describe('TransferForm', () => {
  const props = {
    pubKey,
    pubKeys: [pubKey, '2'.repeat(64)],
-    feeFactor: '0.001',
    submitTransfer: jest.fn(),
    accounts: [
      {
@@ -79,7 +102,6 @@ describe('TransferForm', () => {
      pubKey,
      'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
    ],
-    feeFactor: '0.001',
    submitTransfer: jest.fn(),
    accounts: [],
    minQuantumMultiple: '1',
@@ -96,15 +118,6 @@ describe('TransferForm', () => {
  });

  it.each([
-    {
-      targetText: 'Include transfer fee',
-      tooltipText:
-        'The fee will be taken from the amount you are transferring.',
-    },
-    {
-      targetText: 'Transfer fee',
-      tooltipText: /transfer\.fee\.factor/,
-    },
    {
      targetText: 'Amount to be transferred',
      tooltipText: /without the fee/,
@@ -114,9 +127,6 @@ describe('TransferForm', () => {
      tooltipText: /total amount taken from your account/,
    },
  ])('Tooltip for "$targetText" shows', async (o) => {
-    // 1003-TRAN-015
-    // 1003-TRAN-016
-    // 1003-TRAN-017
    // 1003-TRAN-018
    // 1003-TRAN-019
    renderComponent(props);
@@ -129,6 +139,10 @@ describe('TransferForm', () => {
    // Select asset
    await selectAsset(asset);

+    await userEvent.selectOptions(
+      screen.getByLabelText('From account'),
+      `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
+    );
    // set valid amount
    const amountInput = screen.getByLabelText('Amount');
    await userEvent.type(amountInput, amount);
@@ -219,9 +233,7 @@ describe('TransferForm', () => {
    // set valid amount
    await userEvent.clear(amountInput);
    await userEvent.type(amountInput, amount);
-    expect(screen.getByTestId('transfer-fee')).toHaveTextContent(
-      new BigNumber(props.feeFactor).times(amount).toFixed()
-    );
+    expect(screen.getByTestId('transfer-fee')).toHaveTextContent('1');

    await submit();

@@ -276,9 +288,6 @@ describe('TransferForm', () => {

    const amountInput = screen.getByLabelText('Amount');

-    const checkbox = screen.getByTestId('include-transfer-fee');
-    expect(checkbox).not.toBeChecked();
-
    await userEvent.clear(amountInput);
    await userEvent.type(amountInput, '50');

@@ -288,10 +297,7 @@ describe('TransferForm', () => {
    await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
    expect(amountInput).toHaveValue('100.00');

-    // If transfering from a vested account 'include fees' checkbox should
-    // be disabled and fees should be 0
-    expect(checkbox).not.toBeChecked();
-    expect(checkbox).toBeDisabled();
+    // If transfering from a vested account  fees should be 0
    const expectedFee = '0';
    const total = new BigNumber(amount).plus(expectedFee).toFixed();

@@ -397,120 +403,43 @@ describe('TransferForm', () => {
    });
  });

-  describe('IncludeFeesCheckbox', () => {
-    it('validates fields and submits when checkbox is checked', async () => {
-      const mockSubmit = jest.fn();
-      renderComponent({ ...props, submitTransfer: mockSubmit });
+  it('validates fields', async () => {
+    renderComponent(props);

-      // check current pubkey not shown
-      const keySelect = screen.getByLabelText<HTMLSelectElement>('To Vega key');
-      const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
-      expect(keySelect.children).toHaveLength(pubKeyOptions.length);
-      expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
-        pubKeyOptions
-      );
+    // check current pubkey not shown
+    const keySelect: HTMLSelectElement = screen.getByLabelText('To Vega key');
+    const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
+    expect(keySelect.children).toHaveLength(pubKeyOptions.length);
+    expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
+      pubKeyOptions
+    );

-      await submit();
-      expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value
+    await submit();
+    expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value

-      // Select a pubkey
-      await userEvent.selectOptions(
-        screen.getByLabelText('To Vega key'),
-        props.pubKeys[1]
-      );
+    // Select a pubkey
+    await userEvent.selectOptions(
+      screen.getByLabelText('To Vega key'),
+      props.pubKeys[1]
+    );

-      // Select asset
-      await selectAsset(asset);
+    // Select asset
+    await selectAsset(asset);

-      await userEvent.selectOptions(
-        screen.getByLabelText('From account'),
-        `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
-      );
+    await userEvent.selectOptions(
+      screen.getByLabelText('From account'),
+      `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
+    );

-      const amountInput = screen.getByLabelText('Amount');
-      const checkbox = screen.getByTestId('include-transfer-fee');
+    const amountInput = screen.getByLabelText('Amount');

-      // 1003-TRAN-022
-      expect(checkbox).not.toBeChecked();
-
-      await userEvent.clear(amountInput);
-      await userEvent.type(amountInput, amount);
-      await userEvent.click(checkbox);
-
-      expect(checkbox).toBeChecked();
-      const expectedFee = new BigNumber(amount)
-        .times(props.feeFactor)
-        .toFixed();
-      const expectedAmount = new BigNumber(amount).minus(expectedFee).toFixed();
-
-      // 1003-TRAN-020
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(
-        expectedAmount
-      );
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
-        amount
-      );
-
-      await submit();
-
-      await waitFor(() => {
-        // 1003-TRAN-023
-        expect(mockSubmit).toHaveBeenCalledTimes(1);
-        expect(mockSubmit).toHaveBeenCalledWith({
-          fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-          toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-          to: props.pubKeys[1],
-          asset: asset.id,
-          amount: removeDecimal(expectedAmount, asset.decimals),
-          oneOff: {},
-        });
-      });
-    });
-
-    it('validates fields when checkbox is not checked', async () => {
-      renderComponent(props);
-
-      // check current pubkey not shown
-      const keySelect: HTMLSelectElement = screen.getByLabelText('To Vega key');
-      const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
-      expect(keySelect.children).toHaveLength(pubKeyOptions.length);
-      expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
-        pubKeyOptions
-      );
-
-      await submit();
-      expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value
-
-      // Select a pubkey
-      await userEvent.selectOptions(
-        screen.getByLabelText('To Vega key'),
-        props.pubKeys[1]
-      );
-
-      // Select asset
-      await selectAsset(asset);
-
-      await userEvent.selectOptions(
-        screen.getByLabelText('From account'),
-        `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
-      );
-
-      const amountInput = screen.getByLabelText('Amount');
-      const checkbox = screen.getByTestId('include-transfer-fee');
-      expect(checkbox).not.toBeChecked();
-
-      await userEvent.type(amountInput, amount);
-      expect(checkbox).not.toBeChecked();
-      const expectedFee = new BigNumber(amount)
-        .times(props.feeFactor)
-        .toFixed();
-      const total = new BigNumber(amount).plus(expectedFee).toFixed();
-      // 1003-TRAN-021
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(amount);
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
-    });
+    await userEvent.type(amountInput, amount);
+    const expectedFee = new BigNumber(amount).times(feeFactor).toFixed();
+    const total = new BigNumber(amount).plus(expectedFee).toFixed();
+    // 1003-TRAN-021
+    expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
+    expect(screen.getByTestId('transfer-amount')).toHaveTextContent(amount);
+    expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
  });

  describe('AddressField', () => {
@@ -542,24 +471,29 @@ describe('TransferForm', () => {

  describe('TransferFee', () => {
    const props = {
-      amount: '200',
-      feeFactor: '0.001',
-      fee: '0.2',
-      transferAmount: '200',
-      decimals: 8,
+      amount: '20000',
+      discount: '0',
+      fee: '20',
+      decimals: 2,
    };
-    it('calculates and renders the transfer fee', () => {
+    it('calculates and renders amounts and fee', () => {
      render(<TransferFee {...props} />);
+      expect(screen.queryByTestId('discount')).not.toBeInTheDocument();
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent('0.2');
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent('200.00');
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
+        '200.20'
+      );
+    });

-      const expected = new BigNumber(props.amount)
-        .times(props.feeFactor)
-        .toFixed();
-      const total = new BigNumber(props.amount).plus(expected).toFixed();
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expected);
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(
-        props.amount
+    it('calculates and renders amounts, fee and discount', () => {
+      render(<TransferFee {...props} discount="10" />);
+      expect(screen.getByTestId('discount')).toHaveTextContent('0.1');
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent('0.2');
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent('200.00');
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
+        '200.10'
      );
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
    });
  });
 });
@@ -4,8 +4,9 @@ import {
  useRequired,
  useVegaPublicKey,
  addDecimal,
-  formatNumber,
  toBigNum,
+  removeDecimal,
+  addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
 import { useT } from './use-t';
 import {
@@ -15,17 +16,17 @@ import {
  TradingRichSelect,
  TradingSelect,
  Tooltip,
-  TradingCheckbox,
  TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
 import { normalizeTransfer } from '@vegaprotocol/wallet';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { AssetOption, Balance } from '@vegaprotocol/assets';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
+import { useTransferFeeQuery } from './__generated__/TransferFee';

 interface FormFields {
  toVegaKey: string;
@@ -52,7 +53,6 @@ export interface TransferFormProps {
    asset: Asset;
  }>;
  assetId?: string;
-  feeFactor: string | null;
  minQuantumMultiple: string | null;
  submitTransfer: (transfer: Transfer) => void;
 }
@@ -62,7 +62,6 @@ export const TransferForm = ({
  pubKeys,
  isReadOnly,
  assetId: initialAssetId,
-  feeFactor,
  submitTransfer,
  accounts,
  minQuantumMultiple,
@@ -135,32 +134,28 @@ export const TransferForm = ({
  const accountBalance =
    account && addDecimal(account.balance, account.asset.decimals);

-  const [includeFee, setIncludeFee] = useState(false);
-
  // Max amount given selected asset and from account
  const max = accountBalance ? new BigNumber(accountBalance) : new BigNumber(0);
+  const normalizedAmount =
+    (amount && asset && removeDecimal(amount, asset.decimals)) || '0';

-  const transferAmount = useMemo(() => {
-    if (!amount) return undefined;
-    if (includeFee && feeFactor) {
-      return new BigNumber(1).minus(feeFactor).times(amount).toString();
-    }
-    return amount;
-  }, [amount, includeFee, feeFactor]);
-
-  const fee = useMemo(() => {
-    if (!transferAmount) return undefined;
-    if (includeFee) {
-      return new BigNumber(amount).minus(transferAmount).toString();
-    }
-    return (
-      feeFactor && new BigNumber(feeFactor).times(transferAmount).toString()
-    );
-  }, [amount, includeFee, transferAmount, feeFactor]);
+  const transferFeeQuery = useTransferFeeQuery({
+    variables: {
+      fromAccount: pubKey || '',
+      fromAccountType: accountType || AccountType.ACCOUNT_TYPE_GENERAL,
+      amount: normalizedAmount,
+      assetId: asset?.id || '',
+      toAccount: selectedPubKey,
+    },
+    skip: !pubKey || !amount || !asset || !selectedPubKey || fromVested,
+  });
+  const transferFee = transferFeeQuery.loading
+    ? transferFeeQuery.data || transferFeeQuery.previousData
+    : transferFeeQuery.data;

  const onSubmit = useCallback(
    (fields: FormFields) => {
-      if (!transferAmount) {
+      if (!amount) {
        throw new Error('Submitted transfer with no amount selected');
      }

@@ -173,7 +168,7 @@ export const TransferForm = ({

      const transfer = normalizeTransfer(
        fields.toVegaKey,
-        transferAmount,
+        amount,
        type,
        AccountType.ACCOUNT_TYPE_GENERAL, // field is readonly in the form
        {
@@ -183,7 +178,7 @@ export const TransferForm = ({
      );
      submitTransfer(transfer);
    },
-    [submitTransfer, transferAmount, assets]
+    [submitTransfer, amount, assets]
  );

  // reset for placeholder workaround https://github.com/radix-ui/primitives/issues/1569
@@ -279,7 +274,6 @@ export const TransferForm = ({
                  ) {
                    setValue('toVegaKey', pubKey);
                    setToVegaKeyMode('select');
-                    setIncludeFee(false);
                  }
                }}
              >
@@ -449,30 +443,14 @@ export const TransferForm = ({
          </TradingInputError>
        )}
      </TradingFormGroup>
-      <div className="mb-4">
-        <Tooltip
-          description={t(
-            `The fee will be taken from the amount you are transferring.`
-          )}
-        >
-          <div>
-            <TradingCheckbox
-              name="include-transfer-fee"
-              disabled={!transferAmount || fromVested}
-              label={t('Include transfer fee')}
-              checked={includeFee}
-              onCheckedChange={() => setIncludeFee((x) => !x)}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      {transferAmount && fee && (
+      {(transferFee?.estimateTransferFee || fromVested) && amount && asset && (
        <TransferFee
-          amount={transferAmount}
-          transferAmount={transferAmount}
-          feeFactor={feeFactor}
-          fee={fromVested ? '0' : fee}
-          decimals={asset?.decimals}
+          amount={normalizedAmount}
+          fee={fromVested ? '0' : transferFee?.estimateTransferFee?.fee}
+          discount={
+            fromVested ? '0' : transferFee?.estimateTransferFee?.discount
+          }
+          decimals={asset.decimals}
        />
      )}
      <TradingButton type="submit" fill={true} disabled={isReadOnly}>
@@ -484,46 +462,44 @@ export const TransferForm = ({

 export const TransferFee = ({
  amount,
-  transferAmount,
-  feeFactor,
  fee,
+  discount,
  decimals,
 }: {
  amount: string;
-  transferAmount: string;
-  feeFactor: string | null;
  fee?: string;
-  decimals?: number;
+  discount?: string;
+  decimals: number;
 }) => {
  const t = useT();
-  if (!feeFactor || !amount || !transferAmount || !fee) return null;
-  if (
-    isNaN(Number(feeFactor)) ||
-    isNaN(Number(amount)) ||
-    isNaN(Number(transferAmount)) ||
-    isNaN(Number(fee))
-  ) {
+  if (!amount || !fee) return null;
+  if (isNaN(Number(amount)) || isNaN(Number(fee))) {
    return null;
  }

-  const totalValue = new BigNumber(transferAmount).plus(fee).toString();
+  const totalValue = (
+    BigInt(amount) +
+    BigInt(fee) -
+    BigInt(discount || '0')
+  ).toString();

  return (
    <div className="mb-4 flex flex-col gap-2 text-xs">
      <div className="flex flex-wrap items-center justify-between gap-1">
-        <Tooltip
-          description={t(
-            `The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}`,
-            { feeFactor }
-          )}
-        >
-          <div>{t('Transfer fee')}</div>
-        </Tooltip>
-
+        <div>{t('Transfer fee')}</div>
        <div data-testid="transfer-fee" className="text-muted">
-          {formatNumber(fee, decimals)}
+          {addDecimalsFormatNumber(fee, decimals)}
        </div>
      </div>
+      {discount && discount !== '0' && (
+        <div className="flex flex-wrap items-center justify-between gap-1">
+          <div>{t('Discount')}</div>
+          <div data-testid="discount" className="text-muted">
+            {addDecimalsFormatNumber(discount, decimals)}
+          </div>
+        </div>
+      )}
+
      <div className="flex flex-wrap items-center justify-between gap-1">
        <Tooltip
          description={t(
@@ -534,7 +510,7 @@ export const TransferFee = ({
        </Tooltip>

        <div data-testid="transfer-amount" className="text-muted">
-          {formatNumber(amount, decimals)}
+          {addDecimalsFormatNumber(amount, decimals)}
        </div>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-1">
@@ -547,7 +523,7 @@ export const TransferFee = ({
        </Tooltip>

        <div data-testid="total-transfer-fee" className="text-muted">
-          {formatNumber(totalValue, decimals)}
+          {addDecimalsFormatNumber(totalValue, decimals)}
        </div>
      </div>
    </div>
@@ -3,27 +3,13 @@ import { getAsset, getQuoteName } from '@vegaprotocol/markets';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { AccountBreakdownDialog } from '@vegaprotocol/accounts';
 import { formatRange, formatValue } from '@vegaprotocol/utils';
-import { marketMarginDataProvider } from '@vegaprotocol/accounts';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as Schema from '@vegaprotocol/types';
 import {
-  MARGIN_DIFF_TOOLTIP_TEXT,
-  DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
-  TOTAL_MARGIN_AVAILABLE,
  LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT,
-  EST_TOTAL_MARGIN_TOOLTIP_TEXT,
  MARGIN_ACCOUNT_TOOLTIP_TEXT,
 } from '../../constants';
 import { KeyValue } from './key-value';
-import {
-  Accordion,
-  AccordionChevron,
-  AccordionPanel,
-  ExternalLink,
-  Tooltip,
-} from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useT, ns } from '../../use-t';
 import { Trans } from 'react-i18next';
 import type { Market } from '@vegaprotocol/markets';
@@ -31,9 +17,9 @@ import { emptyValue } from './deal-ticket-fee-details';
 import type { EstimatePositionQuery } from '@vegaprotocol/positions';

 export interface DealTicketMarginDetailsProps {
-  generalAccountBalance?: string;
-  marginAccountBalance?: string;
-  orderMarginAccountBalance?: string;
+  generalAccountBalance: string;
+  marginAccountBalance: string;
+  orderMarginAccountBalance: string;
  market: Market;
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
  assetSymbol: string;
@@ -54,25 +40,13 @@ export const DealTicketMarginDetails = ({
  const t = useT();
  const [breakdownDialog, setBreakdownDialog] = useState(false);
  const { pubKey: partyId } = useVegaWallet();
-  const { data: currentMargins } = useDataProvider({
-    dataProvider: marketMarginDataProvider,
-    variables: { marketId: market.id, partyId: partyId || '' },
-    skip: !partyId,
-  });
-  const isInIsolatedMode =
-    positionEstimate?.margin.bestCase.marginMode ===
-    Schema.MarginMode.MARGIN_MODE_ISOLATED_MARGIN;
  const liquidationEstimate = positionEstimate?.liquidation;
-  const marginEstimate = positionEstimate?.margin;
  const totalMarginAccountBalance =
    BigInt(marginAccountBalance || '0') +
    BigInt(orderMarginAccountBalance || '0');
-  const totalBalance =
-    BigInt(generalAccountBalance || '0') + totalMarginAccountBalance;
+
  const asset = getAsset(market);
  const { decimals: assetDecimals, quantum } = asset;
-  let marginRequiredBestCase: string | undefined = undefined;
-  let marginRequiredWorstCase: string | undefined = undefined;

  const collateralIncreaseEstimateBestCase = BigInt(
    positionEstimate?.collateralIncreaseEstimate.bestCase ?? '0'
@@ -80,102 +54,6 @@ export const DealTicketMarginDetails = ({
  const collateralIncreaseEstimateWorstCase = BigInt(
    positionEstimate?.collateralIncreaseEstimate.worstCase ?? '0'
  );
-  const marginEstimateBestCase = isInIsolatedMode
-    ? totalMarginAccountBalance + collateralIncreaseEstimateBestCase
-    : BigInt(marginEstimate?.bestCase.initialLevel ?? 0);
-  const marginEstimateWorstCase = isInIsolatedMode
-    ? totalMarginAccountBalance + collateralIncreaseEstimateWorstCase
-    : BigInt(marginEstimate?.worstCase.initialLevel ?? 0);
-  if (isInIsolatedMode) {
-    marginRequiredBestCase = collateralIncreaseEstimateBestCase.toString();
-    marginRequiredWorstCase = collateralIncreaseEstimateWorstCase.toString();
-  } else if (marginEstimate) {
-    if (currentMargins) {
-      const currentMargin = BigInt(currentMargins.initialLevel);
-      marginRequiredBestCase = (
-        marginEstimateBestCase - currentMargin
-      ).toString();
-      if (marginRequiredBestCase.startsWith('-')) {
-        marginRequiredBestCase = '0';
-      }
-
-      marginRequiredWorstCase = (
-        marginEstimateWorstCase - currentMargin
-      ).toString();
-
-      if (marginRequiredWorstCase.startsWith('-')) {
-        marginRequiredWorstCase = '0';
-      }
-    } else {
-      marginRequiredBestCase = marginEstimateBestCase.toString();
-      marginRequiredWorstCase = marginEstimateWorstCase.toString();
-    }
-  }
-
-  const totalMarginAvailable = (
-    currentMargins
-      ? totalBalance - BigInt(currentMargins.maintenanceLevel)
-      : totalBalance
-  ).toString();
-
-  let deductionFromCollateral = null;
-  let projectedMargin = null;
-  if (totalMarginAccountBalance) {
-    const deductionFromCollateralBestCase =
-      marginEstimateBestCase - totalMarginAccountBalance;
-
-    const deductionFromCollateralWorstCase =
-      marginEstimateWorstCase - totalMarginAccountBalance;
-
-    deductionFromCollateral = (
-      <KeyValue
-        indent
-        label={t('Deduction from collateral')}
-        value={formatRange(
-          deductionFromCollateralBestCase > 0
-            ? deductionFromCollateralBestCase.toString()
-            : '0',
-          deductionFromCollateralWorstCase > 0
-            ? deductionFromCollateralWorstCase.toString()
-            : '0',
-          assetDecimals
-        )}
-        formattedValue={formatValue(
-          deductionFromCollateralWorstCase > 0
-            ? deductionFromCollateralWorstCase.toString()
-            : '0',
-          assetDecimals,
-          quantum
-        )}
-        symbol={assetSymbol}
-        labelDescription={t(
-          'DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT',
-          DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
-          { assetSymbol }
-        )}
-      />
-    );
-    projectedMargin = (
-      <KeyValue
-        label={t('Projected margin')}
-        value={formatRange(
-          marginEstimateBestCase.toString(),
-          marginEstimateWorstCase.toString(),
-          assetDecimals
-        )}
-        formattedValue={formatValue(
-          marginEstimateWorstCase.toString(),
-          assetDecimals,
-          quantum
-        )}
-        symbol={assetSymbol}
-        labelDescription={t(
-          'EST_TOTAL_MARGIN_TOOLTIP_TEXT',
-          EST_TOTAL_MARGIN_TOOLTIP_TEXT
-        )}
-      />
-    );
-  }

  let liquidationPriceEstimate = emptyValue;
  let liquidationPriceEstimateRange = emptyValue;
@@ -232,128 +110,50 @@ export const DealTicketMarginDetails = ({
  const quoteName = getQuoteName(market);

  return (
-    <div className="flex flex-col w-full gap-2">
-      <Accordion>
-        <AccordionPanel
-          itemId="margin"
-          trigger={
-            <AccordionPrimitive.Trigger
-              data-testid="accordion-toggle"
-              className={classNames(
-                'w-full pt-2',
-                'flex items-center gap-2 text-xs',
-                'group'
-              )}
-            >
-              <div
-                data-testid={`deal-ticket-fee-margin-required`}
-                key={'value-dropdown'}
-                className="flex items-center justify-between w-full gap-2"
-              >
-                <div className="flex items-center text-left gap-1">
-                  <Tooltip
-                    description={t(
-                      'MARGIN_DIFF_TOOLTIP_TEXT',
-                      MARGIN_DIFF_TOOLTIP_TEXT,
-                      { assetSymbol }
-                    )}
-                  >
-                    <span className="text-muted">{t('Margin required')}</span>
-                  </Tooltip>
-
-                  <AccordionChevron size={10} />
-                </div>
-                <Tooltip
-                  description={
-                    formatRange(
-                      marginRequiredBestCase,
-                      marginRequiredWorstCase,
-                      assetDecimals
-                    ) ?? '-'
-                  }
-                >
-                  <div className="font-mono text-right">
-                    {formatValue(
-                      marginRequiredWorstCase,
-                      assetDecimals,
-                      quantum
-                    )}{' '}
-                    {assetSymbol || ''}
-                  </div>
-                </Tooltip>
-              </div>
-            </AccordionPrimitive.Trigger>
-          }
-        >
-          <div className="flex flex-col w-full gap-2">
-            <KeyValue
-              label={t('Total margin available')}
-              indent
-              value={formatValue(totalMarginAvailable, assetDecimals)}
-              formattedValue={formatValue(
-                totalMarginAvailable,
-                assetDecimals,
-                quantum
-              )}
-              symbol={assetSymbol}
-              labelDescription={t(
-                'TOTAL_MARGIN_AVAILABLE',
-                TOTAL_MARGIN_AVAILABLE,
-                {
-                  generalAccountBalance: formatValue(
-                    generalAccountBalance,
-                    assetDecimals,
-                    quantum
-                  ),
-                  marginAccountBalance: formatValue(
-                    marginAccountBalance,
-                    assetDecimals,
-                    quantum
-                  ),
-                  orderMarginAccountBalance: formatValue(
-                    orderMarginAccountBalance,
-                    assetDecimals,
-                    quantum
-                  ),
-                  marginMaintenance: formatValue(
-                    currentMargins?.maintenanceLevel,
-                    assetDecimals,
-                    quantum
-                  ),
-                  assetSymbol,
-                }
-              )}
-            />
-            {deductionFromCollateral}
-            <KeyValue
-              label={t('Current margin allocation')}
-              indent
-              onClick={
-                generalAccountBalance
-                  ? () => setBreakdownDialog(true)
-                  : undefined
-              }
-              value={formatValue(
-                totalMarginAccountBalance.toString(),
-                assetDecimals
-              )}
-              symbol={assetSymbol}
-              labelDescription={t(
-                'MARGIN_ACCOUNT_TOOLTIP_TEXT',
-                MARGIN_ACCOUNT_TOOLTIP_TEXT
-              )}
-              formattedValue={formatValue(
-                totalMarginAccountBalance.toString(),
-                assetDecimals,
-                quantum
-              )}
-            />
-          </div>
-        </AccordionPanel>
-      </Accordion>
-      {projectedMargin}
+    <div className="flex flex-col w-full gap-2 mt-2">
      <KeyValue
-        label={t('Liquidation')}
+        label={t('Current margin')}
+        onClick={
+          generalAccountBalance ? () => setBreakdownDialog(true) : undefined
+        }
+        value={formatValue(totalMarginAccountBalance.toString(), assetDecimals)}
+        symbol={assetSymbol}
+        labelDescription={t(
+          'MARGIN_ACCOUNT_TOOLTIP_TEXT',
+          MARGIN_ACCOUNT_TOOLTIP_TEXT
+        )}
+        formattedValue={formatValue(
+          totalMarginAccountBalance.toString(),
+          assetDecimals,
+          quantum
+        )}
+      />
+      <KeyValue
+        label={t('Available collateral')}
+        value={formatValue(generalAccountBalance, assetDecimals)}
+        formattedValue={formatValue(
+          generalAccountBalance.toString(),
+          assetDecimals,
+          quantum
+        )}
+        symbol={assetSymbol}
+      />
+      <KeyValue
+        label={t('Additional margin required')}
+        value={formatRange(
+          collateralIncreaseEstimateBestCase.toString(),
+          collateralIncreaseEstimateWorstCase.toString(),
+          assetDecimals
+        )}
+        formattedValue={formatValue(
+          collateralIncreaseEstimateBestCase.toString(),
+          assetDecimals,
+          quantum
+        )}
+        symbol={assetSymbol}
+      />
+      <KeyValue
+        label={t('Liquidation estimate')}
        value={liquidationPriceEstimateRange}
        formattedValue={liquidationPriceEstimate}
        symbol={quoteName}
@@ -73,7 +73,7 @@ import {
 } from '../../hooks';
 import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
-import { isNonPersistentOrder } from '../../utils/time-in-force-persistance';
+import { isNonPersistentOrder } from '../../utils/time-in-force-persistence';
 import { KeyValue } from './key-value';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { useT } from '../../use-t';
@@ -177,12 +177,6 @@ export const DealTicket = ({
    loading: loadingGeneralAccountBalance,
  } = useAccountBalance(asset.id);

-  const balance = (
-    BigInt(marginAccountBalance) +
-    BigInt(generalAccountBalance) +
-    BigInt(orderMarginAccountBalance)
-  ).toString();
-
  const { marketState, marketTradingMode } = marketData;
  const timeInForce = watch('timeInForce');

@@ -729,17 +723,11 @@ export const DealTicket = ({
        error={summaryError}
        asset={asset}
        marketTradingMode={marketData.marketTradingMode}
-        balance={balance}
-        margin={(
-          BigInt(
-            positionEstimate?.estimatePosition?.margin.bestCase.initialLevel ||
-              '0'
-          ) +
-          BigInt(
-            positionEstimate?.estimatePosition?.margin.bestCase
-              .orderMarginLevel || '0'
-          )
-        ).toString()}
+        balance={generalAccountBalance}
+        margin={
+          positionEstimate?.estimatePosition?.collateralIncreaseEstimate
+            .bestCase || '0'
+        }
        isReadOnly={isReadOnly}
        pubKey={pubKey}
        onDeposit={onDeposit}
@@ -1,5 +1,4 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import classnames from 'classnames';
 import type { ReactNode } from 'react';

 export interface KeyValuePros {
@@ -19,7 +18,6 @@ export const KeyValue = ({
  value,
  labelDescription,
  symbol,
-  indent,
  onClick,
  formattedValue,
 }: KeyValuePros) => {
@@ -43,10 +41,7 @@ export const KeyValue = ({
          : id
      }`}
      key={typeof label === 'string' ? label : 'value-dropdown'}
-      className={classnames(
-        'text-xs flex justify-between items-center gap-4 flex-wrap text-right',
-        { 'ml-2': indent }
-      )}
+      className="text-xs flex justify-between items-center gap-4 flex-wrap text-right"
    >
      <Tooltip description={labelDescription}>
        <div className="text-muted text-left">{label}</div>
@@ -29,6 +29,7 @@ import { usePositionEstimate } from '../../hooks/use-position-estimate';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { getAsset, useMarket } from '@vegaprotocol/markets';
 import { NoWalletWarning } from './deal-ticket';
+import { DealTicketMarginDetails } from './deal-ticket-margin-details';

 const defaultLeverage = 10;

@@ -93,66 +94,78 @@ export const MarginChange = ({
    },
    skip
  );
-  if (
-    !asset ||
-    !estimateMargin?.estimatePosition?.collateralIncreaseEstimate.worstCase ||
-    estimateMargin.estimatePosition.collateralIncreaseEstimate.worstCase === '0'
-  ) {
+  if (!asset || !estimateMargin?.estimatePosition) {
    return null;
  }
  const collateralIncreaseEstimate = BigInt(
    estimateMargin.estimatePosition.collateralIncreaseEstimate.worstCase
  );
-  if (!collateralIncreaseEstimate) {
-    return null;
-  }
+
  let positionWarning = '';
-  if (orders?.length && openVolume !== '0') {
-    positionWarning = t(
-      'youHaveOpenPositionAndOrders',
-      'You have an existing position and open orders on this market.',
-      {
-        count: orders.length,
-      }
-    );
-  } else if (!orders?.length) {
-    positionWarning = t('You have an existing position on this market.');
-  } else {
-    positionWarning = t(
-      'youHaveOpenOrders',
-      'You have open orders on this market.',
-      {
-        count: orders.length,
-      }
-    );
-  }
  let marginChangeWarning = '';
-  const amount = addDecimalsFormatNumber(
-    collateralIncreaseEstimate.toString(),
-    asset?.decimals
-  );
-  const { symbol } = asset;
-  const interpolation = { amount, symbol };
-  if (marginMode === Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN) {
-    marginChangeWarning = t(
-      'Changing the margin mode will move {{amount}} {{symbol}} from your general account to fund the position.',
-      interpolation
-    );
-  } else {
-    marginChangeWarning = t(
-      'Changing the margin mode and leverage will move {{amount}} {{symbol}} from your general account to fund the position.',
-      interpolation
+  if (collateralIncreaseEstimate) {
+    if (orders?.length && openVolume !== '0') {
+      positionWarning = t(
+        'youHaveOpenPositionAndOrders',
+        'You have an existing position and open orders on this market.',
+        {
+          count: orders.length,
+        }
+      );
+    } else if (!orders?.length) {
+      positionWarning = t('You have an existing position on this market.');
+    } else {
+      positionWarning = t(
+        'youHaveOpenOrders',
+        'You have open orders on this market.',
+        {
+          count: orders.length,
+        }
+      );
+    }
+
+    const amount = addDecimalsFormatNumber(
+      collateralIncreaseEstimate.toString(),
+      asset?.decimals
    );
+    const { symbol } = asset;
+    const interpolation = { amount, symbol };
+    if (marginMode === Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN) {
+      marginChangeWarning = t(
+        'Changing the margin mode will move {{amount}} {{symbol}} from your general account to fund the position.',
+        interpolation
+      );
+    } else {
+      marginChangeWarning = t(
+        'Changing the margin mode and leverage will move {{amount}} {{symbol}} from your general account to fund the position.',
+        interpolation
+      );
+    }
  }
  return (
    <div className="mb-2">
-      <Notification
-        intent={Intent.Warning}
-        message={
-          <>
-            <p>{positionWarning}</p>
-            <p>{marginChangeWarning}</p>
-          </>
+      {positionWarning && marginChangeWarning && (
+        <Notification
+          intent={Intent.Warning}
+          message={
+            <>
+              <p>{positionWarning}</p>
+              <p>{marginChangeWarning}</p>
+            </>
+          }
+        />
+      )}
+      <DealTicketMarginDetails
+        marginAccountBalance={marginAccountBalance}
+        generalAccountBalance={generalAccountBalance}
+        orderMarginAccountBalance={orderMarginAccountBalance}
+        assetSymbol={asset.symbol}
+        market={market}
+        positionEstimate={estimateMargin.estimatePosition}
+        side={
+          openVolume.startsWith('-')
+            ? Schema.Side.SIDE_SELL
+            : Schema.Side.SIDE_BUY
        }
      />
    </div>
@@ -9,7 +9,7 @@ import type {
 } from '../hooks/use-form-values';
 import * as Schema from '@vegaprotocol/types';
 import { removeDecimal, toNanoSeconds } from '@vegaprotocol/utils';
-import { isPersistentOrder } from './time-in-force-persistance';
+import { isPersistentOrder } from './time-in-force-persistence';

 export const mapFormValuesToOrderSubmission = (
  order: OrderFormValues,
@@ -2,9 +2,9 @@ import { OrderTimeInForce } from '@vegaprotocol/types';
 import {
  isNonPersistentOrder,
  isPersistentOrder,
-} from './time-in-force-persistance';
+} from './time-in-force-persistence';

-it('isNonPeristentOrder', () => {
+it('isNonPersistentOrder', () => {
  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(true);
  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(true);
  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(false);
@@ -13,7 +13,7 @@ it('isNonPeristentOrder', () => {
  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(false);
 });

-it('isPeristentOrder', () => {
+it('isPersistentOrder', () => {
  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(false);
  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(false);
  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(true);
@@ -23,7 +23,6 @@ import {
  SUBSCRIPTION_TIMEOUT,
  useNodeBasicStatus,
  useNodeSubscriptionStatus,
-  useResponseTime,
 } from './row-data';
 import { BLOCK_THRESHOLD, RowData } from './row-data';
 import { CUSTOM_NODE_KEY } from '../../types';
@@ -162,19 +161,6 @@ describe('useNodeBasicStatus', () => {
  });
 });

-describe('useResponseTime', () => {
-  it('returns response time when url is valid', () => {
-    const { result } = renderHook(() =>
-      useResponseTime('https://localhost:1234')
-    );
-    expect(result.current.responseTime).toBe(50);
-  });
-  it('does not return response time when url is invalid', () => {
-    const { result } = renderHook(() => useResponseTime('nope'));
-    expect(result.current.responseTime).toBeUndefined();
-  });
-});
-
 describe('RowData', () => {
  const props = {
    id: '0',
@@ -1,4 +1,3 @@
-import { isValidUrl } from '@vegaprotocol/utils';
 import { TradingRadio } from '@vegaprotocol/ui-toolkit';
 import { useEffect, useState } from 'react';
 import { CUSTOM_NODE_KEY } from '../../types';
@@ -8,6 +7,7 @@ import {
 } from '../../utils/__generated__/NodeCheck';
 import { LayoutCell } from './layout-cell';
 import { useT } from '../../use-t';
+import { useResponseTime } from '../../utils/time';

 export const POLL_INTERVAL = 1000;
 export const SUBSCRIPTION_TIMEOUT = 3000;
@@ -108,20 +108,6 @@ export const useNodeBasicStatus = () => {
  };
 };

-export const useResponseTime = (url: string, trigger?: unknown) => {
-  const [responseTime, setResponseTime] = useState<number>();
-  useEffect(() => {
-    if (!isValidUrl(url)) return;
-    if (typeof window.performance.getEntriesByName !== 'function') return; // protection for test environment
-    const requestUrl = new URL(url);
-    const requests = window.performance.getEntriesByName(requestUrl.href);
-    const { duration } =
-      (requests.length && requests[requests.length - 1]) || {};
-    setResponseTime(duration);
-  }, [url, trigger]);
-  return { responseTime };
-};
-
 export const RowData = ({
  id,
  url,
@@ -10,6 +10,7 @@ import {
  getUserEnabledFeatureFlags,
  setUserEnabledFeatureFlag,
 } from './use-environment';
+import { canMeasureResponseTime, measureResponseTime } from '../utils/time';

 const noop = () => {
  /* no op*/
@@ -17,6 +18,10 @@ const noop = () => {

 jest.mock('@vegaprotocol/apollo-client');
 jest.mock('zustand');
+jest.mock('../utils/time');
+
+const mockCanMeasureResponseTime = canMeasureResponseTime as jest.Mock;
+const mockMeasureResponseTime = measureResponseTime as jest.Mock;

 const mockCreateClient = createClient as jest.Mock;
 const createDefaultMockClient = () => {
@@ -155,6 +160,14 @@ describe('useEnvironment', () => {
    const fastNode = 'https://api.n01.foo.vega.xyz';
    const fastWait = 1000;
    const nodes = [slowNode, fastNode];
+
+    mockCanMeasureResponseTime.mockImplementation(() => true);
+    mockMeasureResponseTime.mockImplementation((url: string) => {
+      if (url === slowNode) return slowWait;
+      if (url === fastNode) return fastWait;
+      return Infinity;
+    });
+
    // @ts-ignore: typscript doesn't recognise the mock implementation
    global.fetch.mockImplementation(setupFetch({ hosts: nodes }));

@@ -168,7 +181,7 @@ describe('useEnvironment', () => {
                statistics: {
                  chainId: 'chain-id',
                  blockHeight: '100',
-                  vegaTime: new Date().toISOString(),
+                  vegaTime: new Date(1).toISOString(),
                },
              },
            });
@@ -196,7 +209,8 @@ describe('useEnvironment', () => {
      expect(result.current.nodes).toEqual(nodes);
    });

-    jest.runAllTimers();
+    jest.advanceTimersByTime(2000);
+    // jest.runAllTimers();

    await waitFor(() => {
      expect(result.current.status).toEqual('success');
@@ -19,6 +19,9 @@ import { compileErrors } from '../utils/compile-errors';
 import { envSchema } from '../utils/validate-environment';
 import { tomlConfigSchema } from '../utils/validate-configuration';
 import uniq from 'lodash/uniq';
+import orderBy from 'lodash/orderBy';
+import first from 'lodash/first';
+import { canMeasureResponseTime, measureResponseTime } from '../utils/time';

 type Client = ReturnType<typeof createClient>;
 type ClientCollection = {
@@ -38,8 +41,17 @@ export type EnvStore = Env & Actions;

 const VERSION = 1;
 export const STORAGE_KEY = `vega_url_${VERSION}`;
+
+const QUERY_TIMEOUT = 3000;
 const SUBSCRIPTION_TIMEOUT = 3000;

+const raceAgainst = (timeout: number): Promise<false> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(false);
+    }, timeout);
+  });
+
 /**
 * Fetch and validate a vega node configuration
 */
@@ -64,53 +76,88 @@ const fetchConfig = async (url?: string) => {
 const findNode = async (clients: ClientCollection): Promise<string | null> => {
  const tests = Object.entries(clients).map((args) => testNode(...args));
  try {
-    const url = await Promise.any(tests);
-    return url;
-  } catch {
+    const nodes = await Promise.all(tests);
+    const responsiveNodes = nodes
+      .filter(([, q, s]) => q && s)
+      .map(([url, q]) => {
+        return {
+          url,
+          ...q,
+        };
+      });
+
+    // more recent and faster at the top
+    const ordered = orderBy(
+      responsiveNodes,
+      [(n) => n.blockHeight, (n) => n.vegaTime, (n) => n.responseTime],
+      ['desc', 'desc', 'asc']
+    );
+
+    const best = first(ordered);
+    return best ? best.url : null;
+  } catch (err) {
    // All tests rejected, no suitable node found
    return null;
  }
 };

+type Maybe<T> = T | false;
+type QueryTestResult = {
+  blockHeight: number;
+  vegaTime: Date;
+  responseTime: number;
+};
+type SubscriptionTestResult = true;
+type NodeTestResult = [
+  /** url */
+  string,
+  Maybe<QueryTestResult>,
+  Maybe<SubscriptionTestResult>
+];
 /**
 * Test a node for suitability for connection
 */
 const testNode = async (
  url: string,
  client: Client
-): Promise<string | null> => {
+): Promise<NodeTestResult> => {
  const results = await Promise.all([
-    // these promises will only resolve with true/false
-    testQuery(client),
+    testQuery(client, url),
    testSubscription(client),
  ]);
-  if (results[0] && results[1]) {
-    return url;
-  }
-
-  const message = `Tests failed for node: ${url}`;
-  console.warn(message);
-
-  // throwing here will mean this tests is ignored and a different
-  // node that hopefully does resolve will fulfill the Promise.any
-  throw new Error(message);
+  return [url, ...results];
 };

 /**
 * Run a test query on a client
 */
-const testQuery = async (client: Client) => {
-  try {
-    const result = await client.query<NodeCheckQuery>({
-      query: NodeCheckDocument,
-    });
-    if (!result || result.error) {
-      return false;
-    }
-    return true;
-  } catch (err) {
-    return false;
-  }
+const testQuery = (
+  client: Client,
+  url: string
+): Promise<Maybe<QueryTestResult>> => {
+  const test: Promise<Maybe<QueryTestResult>> = new Promise((resolve) =>
+    client
+      .query<NodeCheckQuery>({
+        query: NodeCheckDocument,
+      })
+      .then((result) => {
+        if (result && !result.error) {
+          const res = {
+            blockHeight: Number(result.data.statistics.blockHeight),
+            vegaTime: new Date(result.data.statistics.vegaTime),
+            // only after a request has been sent we can retrieve the response time
+            responseTime: canMeasureResponseTime(url)
+              ? measureResponseTime(url) || Infinity
+              : Infinity,
+          } as QueryTestResult;
+          resolve(res);
+        } else {
+          resolve(false);
+        }
+      })
+      .catch(() => resolve(false))
+  );
+  return Promise.race([test, raceAgainst(QUERY_TIMEOUT)]);
 };

 /**
@@ -118,7 +165,9 @@ const testQuery = async (client: Client) => {
 * that takes longer than SUBSCRIPTION_TIMEOUT ms to respond
 * is deemed a failure
 */
-const testSubscription = (client: Client) => {
+const testSubscription = (
+  client: Client
+): Promise<Maybe<SubscriptionTestResult>> => {
  return new Promise((resolve) => {
    const sub = client
      .subscribe<NodeCheckTimeUpdateSubscription>({
@@ -86,6 +86,7 @@ export const DocsLinks = VEGA_DOCS_URL
      POST_REDUCE_ONLY: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#conditional-order-parameters`,
      QUANTUM: `${VEGA_DOCS_URL}/concepts/assets/asset-framework#quantum`,
      REFERRALS: `${VEGA_DOCS_URL}/tutorials/proposals/referral-program-proposal`,
+      LIQUIDITY_FEE_PERCENTAGE: `${VEGA_DOCS_URL}/concepts/liquidity/rewards-penalties#determining-the-liquidity-fee-percentage`,
    }
  : undefined;

@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react';
+import { useResponseTime } from './time';
+
+const mockResponseTime = 50;
+global.performance.getEntriesByName = jest.fn().mockReturnValue([
+  {
+    duration: mockResponseTime,
+  },
+]);
+
+describe('useResponseTime', () => {
+  it('returns response time when url is valid', () => {
+    const { result } = renderHook(() =>
+      useResponseTime('https://localhost:1234')
+    );
+    expect(result.current.responseTime).toBe(50);
+  });
+  it('does not return response time when url is invalid', () => {
+    const { result } = renderHook(() => useResponseTime('nope'));
+    expect(result.current.responseTime).toBeUndefined();
+  });
+});
@@ -0,0 +1,25 @@
+import { isValidUrl } from '@vegaprotocol/utils';
+import { useEffect, useState } from 'react';
+
+export const useResponseTime = (url: string, trigger?: unknown) => {
+  const [responseTime, setResponseTime] = useState<number>();
+  useEffect(() => {
+    if (!canMeasureResponseTime(url)) return;
+    const duration = measureResponseTime(url);
+    setResponseTime(duration);
+  }, [url, trigger]);
+  return { responseTime };
+};
+
+export const canMeasureResponseTime = (url: string) => {
+  if (!isValidUrl(url)) return false;
+  if (typeof window.performance.getEntriesByName !== 'function') return false;
+  return true;
+};
+
+export const measureResponseTime = (url: string) => {
+  const requestUrl = new URL(url);
+  const requests = window.performance.getEntriesByName(requestUrl.href);
+  const { duration } = (requests.length && requests[requests.length - 1]) || {};
+  return duration;
+};
@@ -21,7 +21,6 @@
  "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.": "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.",
  "Enter manually": "Enter manually",
  "From account": "From account",
-  "Include transfer fee": "Include transfer fee",
  "initial level": "initial level",
  "maintenance level": "maintenance level",
  "Margin health": "Margin health",
@@ -33,11 +32,9 @@
  "release level": "release level",
  "search level": "search level",
  "Select from wallet": "Select from wallet",
-  "The fee will be taken from the amount you are transferring.": "The fee will be taken from the amount you are transferring.",
  "The total amount of each asset on this key. Includes used and available collateral.": "The total amount of each asset on this key. Includes used and available collateral.",
  "The total amount taken from your account. The amount to be transferred plus the fee.": "The total amount taken from your account. The amount to be transferred plus the fee.",
  "The total amount to be transferred (without the fee)": "The total amount to be transferred (without the fee)",
-  "The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}": "The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}",
  "To account": "To account",
  "To Vega key": "To Vega key",
  "Total": "Total",
@@ -110,6 +110,7 @@
  "Fills": "Fills",
  "Final commission rate": "Final commission rate",
  "Find out more": "Find out more",
+  "For more info, visit the documentation": "For more info, visit the documentation",
  "Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.": "Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.",
  "From epoch": "From epoch",
  "Fully decentralised high performance peer-to-network trading.": "Fully decentralised high performance peer-to-network trading.",
@@ -446,5 +447,9 @@
  "Choose a team": "Choose a team",
  "Join a team": "Join a team",
  "Solo team / lone wolf": "Solo team / lone wolf",
-  "Choose a team to get involved": "Choose a team to get involved"
+  "Choose a team to get involved": "Choose a team to get involved",
+  "Go back to the team's profile": "Go back to the team's profile",
+  "Go back to the competitions": "Go back to the competitions",
+  "Your team ID:": "Your team ID:",
+  "Changes successfully saved to your team.": "Changes successfully saved to your team."
 }
@@ -94,7 +94,7 @@ export const LiquidityTable = ({
      return `${addDecimalsFormatNumberQuantum(
        value,
        assetDecimalPlaces ?? 0,
-        quantum ?? 0
+        quantum ?? 1
      )}`;
    };

@@ -165,7 +165,7 @@ export const LiquidityTable = ({
      return `${addDecimalsFormatNumberQuantum(
        newValue,
        assetDecimalPlaces ?? 0,
-        quantum ?? 0
+        quantum ?? 1
      )}`;
    };

@@ -227,7 +227,7 @@ export const LiquidityTable = ({
            addDecimalsFormatNumberQuantum(
              pendingCommitmentAmount,
              assetDecimalPlaces ?? 0,
-              quantum ?? 0
+              quantum ?? 1
            );

          if (
@@ -238,7 +238,7 @@ export const LiquidityTable = ({
              addDecimalsFormatNumberQuantum(
                currentCommitmentAmount,
                assetDecimalPlaces ?? 0,
-                quantum ?? 0
+                quantum ?? 1
              );

            return (
@@ -286,7 +286,7 @@ export const LiquidityTable = ({
            addDecimalsFormatNumberQuantum(
              pendingCommitmentAmount,
              assetDecimalPlaces ?? 0,
-              quantum ?? 0
+              quantum ?? 1
            );

          if (
@@ -297,7 +297,7 @@ export const LiquidityTable = ({
              addDecimalsFormatNumberQuantum(
                currentCommitmentAmount,
                assetDecimalPlaces ?? 0,
-                quantum ?? 0
+                quantum ?? 1
              );

            return (
@@ -1,7 +1,7 @@
 import { DepthChart } from 'pennant';
 import throttle from 'lodash/throttle';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { addDecimal, getNumberFormat } from '@vegaprotocol/utils';
+import { addDecimal, formatNumber } from '@vegaprotocol/utils';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { marketDepthProvider } from './market-depth-provider';
@@ -216,13 +216,12 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {

  const volumeFormat = useCallback(
    (volume: number) =>
-      getNumberFormat(market?.positionDecimalPlaces || 0).format(volume),
+      formatNumber(volume, market?.positionDecimalPlaces || 0),
    [market?.positionDecimalPlaces]
  );

  const priceFormat = useCallback(
-    (price: number) =>
-      getNumberFormat(market?.decimalPlaces || 0).format(price),
+    (price: number) => formatNumber(price, market?.decimalPlaces || 0),
    [market?.decimalPlaces]
  );

@@ -18,12 +18,15 @@ interface Props {
  initialValue?: string[];
  isHeader?: boolean;
  noUpdate?: boolean;
+  // render prop for no price change
+  fallback?: React.ReactNode;
 }

 export const Last24hPriceChange = ({
  marketId,
  decimalPlaces,
  initialValue,
+  fallback,
 }: Props) => {
  const t = useT();
  const { oneDayCandles, error, fiveDaysCandles } = useCandles({
@@ -48,13 +51,13 @@ export const Last24hPriceChange = ({
          </span>
        }
      >
-        <span>-</span>
+        <span>{fallback}</span>
      </Tooltip>
    );
  }

  if (error || !isNumeric(decimalPlaces)) {
-    return <span>-</span>;
+    return <span>{fallback}</span>;
  }

  const candles = oneDayCandles?.map((c) => c.close) || initialValue || [];
@@ -1,5 +1,9 @@
-import { calcCandleVolume } from '../../market-utils';
-import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
+import { calcCandleVolume, calcCandleVolumePrice } from '../../market-utils';
+import {
+  addDecimalsFormatNumber,
+  formatNumber,
+  isNumeric,
+} from '@vegaprotocol/utils';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import { useCandles } from '../../hooks';
 import { useT } from '../../use-t';
@@ -9,13 +13,17 @@ interface Props {
  positionDecimalPlaces?: number;
  formatDecimals?: number;
  initialValue?: string;
+  marketDecimals?: number;
+  quoteUnit?: string;
 }

 export const Last24hVolume = ({
  marketId,
+  marketDecimals,
  positionDecimalPlaces,
  formatDecimals,
  initialValue,
+  quoteUnit,
 }: Props) => {
  const t = useT();
  const { oneDayCandles, fiveDaysCandles } = useCandles({
@@ -28,6 +36,11 @@ export const Last24hVolume = ({
    (!oneDayCandles || oneDayCandles?.length === 0)
  ) {
    const candleVolume = calcCandleVolume(fiveDaysCandles);
+    const candleVolumePrice = calcCandleVolumePrice(
+      fiveDaysCandles,
+      marketDecimals,
+      positionDecimalPlaces
+    );
    const candleVolumeValue =
      candleVolume && isNumeric(positionDecimalPlaces)
        ? addDecimalsFormatNumber(
@@ -42,8 +55,8 @@ export const Last24hVolume = ({
          <div>
            <span className="flex flex-col">
              {t(
-                '24 hour change is unavailable at this time. The volume change in the last 120 hours is {{candleVolumeValue}}',
-                { candleVolumeValue }
+                '24 hour change is unavailable at this time. The volume change in the last 120 hours is {{candleVolumeValue}} ({{candleVolumePrice}} {{quoteUnit}})',
+                { candleVolumeValue, candleVolumePrice, quoteUnit }
              )}
            </span>
          </div>
@@ -57,10 +70,18 @@ export const Last24hVolume = ({
    ? calcCandleVolume(oneDayCandles)
    : initialValue;

+  const candleVolumePrice = oneDayCandles
+    ? calcCandleVolumePrice(
+        oneDayCandles,
+        marketDecimals,
+        positionDecimalPlaces
+      )
+    : initialValue;
+
  return (
    <Tooltip
      description={t(
-        'The total number of contracts traded in the last 24 hours.'
+        'The total number of contracts traded in the last 24 hours. (Total value of contracts traded in the last 24 hours)'
      )}
    >
      <span>
@@ -70,7 +91,12 @@ export const Last24hVolume = ({
              positionDecimalPlaces,
              formatDecimals
            )
-          : '-'}
+          : '-'}{' '}
+        (
+        {candleVolumePrice && isNumeric(positionDecimalPlaces)
+          ? formatNumber(candleVolumePrice, formatDecimals)
+          : '-'}{' '}
+        {quoteUnit})
      </span>
    </Tooltip>
  );
@@ -171,6 +171,10 @@ query MarketInfo($marketId: ID!) {
        infrastructureFee
        liquidityFee
      }
+      liquidityFeeSettings {
+        feeConstant
+        method
+      }
    }
    priceMonitoringSettings {
      parameters {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matthew Russell	a688041b4c	chore: upgrade to 1.0.1	2024-02-09 12:20:30 -08:00
Matthew Russell	50e6052427	chore: update snap to 1.0.0	2024-02-09 12:19:17 -08:00
m.rayandcandida-d	0d850bd8b9	feat(trading): add LP fee settings (#5773 ) Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>	2024-02-09 19:44:15 +00:00
Bartłomiej Głownia	44189591fc	feat(accounts): get trasfer fee from estimateTransferFee API (#5721 )	2024-02-09 12:55:17 +00:00
Art	3ed2ec88d7	chore(explorer): remove voting column from proposal table (#5776 )	2024-02-09 10:32:54 +00:00
Bartłomiej Głownia	a21feea699	chore(utils): improve formatNumber to keep precision (#5761 )	2024-02-09 10:31:15 +00:00
m.rayandMatthew Russell	41fd14dd00	feat(trading): mobile layout and buttons (#5751 ) Co-authored-by: Matthew Russell <mattrussell36@gmail.com>	2024-02-09 10:30:24 +00:00
Edd	c5a27dc6a2	chore(trading): switch eth provider URL (#5779 )	2024-02-09 10:26:08 +00:00
Art	0a3b1cadba	fix(trading): keep leaderboard rank when filtering (#5775 )	2024-02-09 10:00:28 +01:00
Edd	b953de953a	feat(explorer): update party profile tx (#5719 )	2024-02-08 19:06:38 +00:00
Art	5ddcb613e2	chore(trading): create and update team form traversing (#5764 )	2024-02-08 14:07:48 +00:00
m.rayandMatthew Russell	76c07992d3	feat(trading): update mobile layout (#5718 ) Co-authored-by: Matthew Russell <mattrussell36@gmail.com>	2024-02-08 13:24:48 +00:00
Ben	46e2965fa2	chore(trading): fix test teardown (#5769 )	2024-02-08 12:25:16 +00:00
m.rayandbwallacee	532ad3a4b9	feat(trading): show value of the volume traded in the last 24hrs (#5766 ) Co-authored-by: bwallacee <ben@vega.xyz>	2024-02-07 11:07:24 +00:00
Madalina Raicu	3a8b40d7a5	Revert "feat(trading): show total value of the valume traded in last 24hrs" This reverts commit `be38813a33`.	2024-02-06 22:12:33 +00:00
Madalina Raicu	be38813a33	feat(trading): show total value of the valume traded in last 24hrs	2024-02-06 21:52:32 +00:00
m.ray Matthew Russell Edd Bartłomiej Głownia Art	bf70dc33ec	chore(trading): back merge main to develop (#5749 ) Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Edd <edd@vega.xyz> Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: Art <artur@vegaprotocol.io>	2024-02-06 14:41:48 +00:00
Art	d6084e75a0	fix(environment): pick best node (#5752 )	2024-02-06 14:40:14 +01:00
Art	75e7cea32a	fix(trading): trading view on multiple tabs (#5748 )	2024-02-06 12:31:12 +01:00
Bartłomiej Głownia	b4e98e285e	feat(deal-ticket): update fields in margin details (#5722 )	2024-02-06 08:42:11 +01:00
Edd	f62e29c67f	feat(explorer): batch proposal support (#5711 )	2024-02-05 17:35:12 +00:00
Bartłomiej Głownia m.ray Matthew Russell Edd	94e7ad489f	feat(trading): main to develop back merge (#5739 ) Co-authored-by: m.ray <16125548+MadalinaRaicu@users.noreply.github.com> Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Edd <edd@vega.xyz>	2024-02-05 16:06:33 +01:00