fix(trading): adjust full screen for mobile dialogs

Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>

.github/workflows/console-test-run.yml

@@ -19,7 +19,7 @@ jobs:
   create-docker-image:
     name: Create docker image for console-test
     runs-on: ubuntu-22.04
-    timeout-minutes: 90
+    timeout-minutes: 45
     steps:
       #----------------------------------------------
       #       check-out frontend-monorepo
@@ -138,7 +138,7 @@ jobs:
     name: run-tests
     runs-on: 8-cores
     needs: [create-docker-image, console-test-branch]
-    timeout-minutes: 90
+    timeout-minutes: 45
     steps:
       #----------------------------------------------
       #       load docker image
@@ -205,7 +205,7 @@ jobs:
       # run tests
       #----------------------------------------------
       - name: Run tests
-        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 2 --dist loadfile --durations=90
+        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 1 --dist loadfile --durations=45
         working-directory: apps/trading/e2e
       #----------------------------------------------
       # upload traces

apps/explorer/src/app/components/nested-data-list/nested-data-list.spec.tsx

@@ -1,9 +1,5 @@
 import { render, waitFor } from '@testing-library/react';
-import {
-  BORDER_COLOURS,
-  NestedDataList,
-  sortNestedDataByChildren,
-} from './nested-data-list';
+import { NestedDataList, sortNestedDataByChildren } from './nested-data-list';
 import userEvent from '@testing-library/user-event';
 
 const mockData = {
@@ -61,38 +57,6 @@ describe('NestedDataList', () => {
     expect(parent[0].querySelector('li')).toHaveClass('pl-4 border-l-4 pt-2');
   });
 
-  it('should repeat the border colours in the correct order', () => {
-    const colourMockData = {
-      t0: {
-        t1: {
-          t2: {
-            t3: {
-              t4: {
-                t5: {
-                  t6: {
-                    t7: {
-                      t8: {
-                        hello: 'world',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    };
-    const tree = render(<NestedDataList data={colourMockData} />);
-    const { getByTestId } = tree;
-
-    for (let i = 0; i < 8; i++) {
-      const item = getByTestId(`T${i}`);
-      const expected = BORDER_COLOURS.light[i % 5];
-      expect(item.style.borderColor.toUpperCase()).toBe(expected);
-    }
-  });
-
   it('should sort the data by values with children', () => {
     const mockData = {
       nonce: '5980890939790185837',

apps/explorer/src/app/components/txs/details/referrals/__generated__/code-owner.ts

@@ -0,0 +1,54 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerReferralCodeOwnerQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerReferralCodeOwnerQuery = { __typename?: 'Query', referralSets: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', createdAt: any, updatedAt: any, referrer: string } } | null> } };
+
+
+export const ExplorerReferralCodeOwnerDocument = gql`
+    query ExplorerReferralCodeOwner($id: ID!) {
+  referralSets(id: $id) {
+    edges {
+      node {
+        createdAt
+        updatedAt
+        referrer
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerReferralCodeOwnerQuery__
+ *
+ * To run a query within a React component, call `useExplorerReferralCodeOwnerQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerReferralCodeOwnerQuery` 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 } = useExplorerReferralCodeOwnerQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerReferralCodeOwnerQuery(baseOptions: Apollo.QueryHookOptions<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>(ExplorerReferralCodeOwnerDocument, options);
+      }
+export function useExplorerReferralCodeOwnerLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>(ExplorerReferralCodeOwnerDocument, options);
+        }
+export type ExplorerReferralCodeOwnerQueryHookResult = ReturnType<typeof useExplorerReferralCodeOwnerQuery>;
+export type ExplorerReferralCodeOwnerLazyQueryHookResult = ReturnType<typeof useExplorerReferralCodeOwnerLazyQuery>;
+export type ExplorerReferralCodeOwnerQueryResult = Apollo.QueryResult<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>;

apps/explorer/src/app/components/txs/details/referrals/code-owner.graphql

@@ -0,0 +1,11 @@
+query ExplorerReferralCodeOwner($id: ID!) {
+  referralSets(id: $id) {
+    edges {
+      node {
+        createdAt
+        updatedAt
+        referrer
+      }
+    }
+  }
+}

apps/explorer/src/app/components/txs/details/referrals/referral-code-owner.test.tsx

@@ -0,0 +1,95 @@
+import { render, waitFor } from '@testing-library/react';
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+import { ReferralCodeOwner } from './referral-code-owner';
+import type { ReferralCodeOwnerProps } from './referral-code-owner';
+import { ExplorerReferralCodeOwnerDocument } from './__generated__/code-owner';
+const renderComponent = (
+  props: ReferralCodeOwnerProps,
+  mocks: MockedResponse[]
+) => {
+  return render(
+    <MockedProvider mocks={mocks}>
+      <MemoryRouter>
+        <ReferralCodeOwner {...props} />
+      </MemoryRouter>
+    </MockedProvider>
+  );
+};
+
+describe('ReferralCodeOwner', () => {
+  it('should render loading state', () => {
+    const mocks = [
+      {
+        request: {
+          query: ExplorerReferralCodeOwnerDocument,
+          variables: {
+            id: 'ABC123',
+          },
+        },
+      },
+    ];
+
+    const { getByText } = renderComponent({ code: 'ABC123' }, mocks);
+
+    expect(getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render error state', async () => {
+    const errorMessage = 'Error fetching referrer: ABC123';
+    const mocks = [
+      {
+        request: {
+          query: ExplorerReferralCodeOwnerDocument,
+          variables: {
+            id: 'ABC123',
+          },
+        },
+        error: new Error('nope'),
+      },
+    ];
+    const { getByText } = renderComponent({ code: 'ABC123' }, mocks);
+
+    await waitFor(() => {
+      expect(getByText(errorMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('should render link to referring party', async () => {
+    const referrerId = 'DEF789';
+
+    const mocks = [
+      {
+        request: {
+          query: ExplorerReferralCodeOwnerDocument,
+          variables: {
+            id: 'ABC123',
+          },
+        },
+        result: {
+          data: {
+            referralSets: {
+              edges: [
+                {
+                  node: {
+                    __typename: 'ReferralSet',
+                    referrer: referrerId,
+                    createdAt: '123',
+                    updatedAt: '456',
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    ];
+
+    const { getByText } = renderComponent({ code: 'ABC123' }, mocks);
+
+    await waitFor(() => {
+      expect(getByText(referrerId)).toBeInTheDocument();
+    });
+  });
+});

apps/explorer/src/app/components/txs/details/referrals/referral-code-owner.tsx

@@ -0,0 +1,26 @@
+import { TableCell } from '../../../table';
+import { useExplorerReferralCodeOwnerQuery } from './__generated__/code-owner';
+import { PartyLink } from '../../../links';
+
+export interface ReferralCodeOwnerProps {
+  code: string;
+}
+
+/**
+ * Render the owner of a referral code
+ */
+export const ReferralCodeOwner = ({ code }: ReferralCodeOwnerProps) => {
+  const { data, error, loading } = useExplorerReferralCodeOwnerQuery({
+    variables: {
+      id: code,
+    },
+  });
+  const referrer = data?.referralSets.edges[0]?.node.referrer || '';
+  return (
+    <TableCell>
+      {loading && 'Loading...'}
+      {error && `Error fetching referrer: ${code}`}
+      {referrer.length > 0 && <PartyLink id={referrer} />}
+    </TableCell>
+  );
+};

apps/explorer/src/app/components/txs/details/referrals/team.test.tsx

@@ -0,0 +1,93 @@
+import { render } from '@testing-library/react';
+import { ReferralTeam } from './team';
+import type { CreateReferralSet } from './team';
+import { MockedProvider } from '@apollo/client/testing';
+
+describe('ReferralTeam', () => {
+  const team = {
+    name: 'Test Team',
+    teamUrl: 'https://example.com/team',
+    avatarUrl: 'https://example.com/avatar',
+    closed: false,
+  };
+
+  const mockTx: CreateReferralSet = {
+    team,
+  };
+
+  const mockId = '123456';
+  const mockCreator = 'JohnDoe';
+
+  it('should render the team name', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByText('Test Team')).toBeInTheDocument();
+  });
+
+  it('should render the team ID', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByText('Id')).toBeInTheDocument();
+    expect(getByText(mockId)).toBeInTheDocument();
+  });
+
+  it('should render the creator', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByText('Creator')).toBeInTheDocument();
+    expect(getByText(mockCreator)).toBeInTheDocument();
+  });
+
+  it('should render the team URL', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByText('Team URL')).toBeInTheDocument();
+    expect(getByText(team.teamUrl)).toBeInTheDocument();
+  });
+
+  it('should render the avatar URL', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByText('Avatar')).toBeInTheDocument();
+    expect(getByText(team.avatarUrl)).toBeInTheDocument();
+  });
+
+  it('should render the open status as a tick if closed is falsy', () => {
+    const { getByTestId } = render(
+      <MockedProvider>
+        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByTestId('open-yes')).toBeInTheDocument();
+  });
+
+  it('should render the open status as a cross if it is truthy', () => {
+    const m = {
+      team: {
+        closed: true,
+      },
+    };
+
+    const { getByTestId } = render(
+      <MockedProvider>
+        <ReferralTeam tx={m} id={mockId} creator={mockCreator} />
+      </MockedProvider>
+    );
+    expect(getByTestId('open-no')).toBeInTheDocument();
+  });
+});

apps/explorer/src/app/components/txs/details/referrals/team.tsx

@@ -0,0 +1,73 @@
+import {
+  VegaIcon,
+  Icon,
+  KeyValueTable,
+  KeyValueTableRow,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import type { components } from '../../../../../types/explorer';
+import Hash from '../../../links/hash';
+import { t } from 'i18next';
+import { PartyLink } from '../../../links';
+
+export type CreateReferralSet = components['schemas']['v1CreateReferralSet'];
+export type ReferralTeam = CreateReferralSet['team'];
+
+export interface ReferralTeamProps {
+  tx: CreateReferralSet;
+  id: string;
+  creator: string;
+}
+
+/**
+ * Renders the details for a team in a CreateReferralSet or UpdateReferralSet transaction.
+ *
+ * Intentionally does not render the avatar image or link to the team url.
+ */
+export const ReferralTeam = ({ tx, id, creator }: ReferralTeamProps) => {
+  if (!tx.team) {
+    return null;
+  }
+
+  return (
+    <section>
+      <div className="inline-block mr-2 leading-none">
+        <VegaIcon name={VegaIconNames.TEAM} />
+      </div>
+      {tx.team.name && (
+        <h3 className="inline-block leading-loose">{tx.team.name}</h3>
+      )}
+
+      <div className="min-w-fit max-w-2xl block">
+        <KeyValueTable>
+          <KeyValueTableRow>
+            {t('Id')}
+            <Hash text={id} truncate={false} />
+          </KeyValueTableRow>
+          <KeyValueTableRow>
+            {t('Creator')}
+            <PartyLink id={creator} truncate={false} />
+          </KeyValueTableRow>
+          {tx.team.teamUrl && (
+            <KeyValueTableRow>
+              {t('Team URL')}
+              <Hash text={tx.team.teamUrl} truncate={false} />
+            </KeyValueTableRow>
+          )}
+          {tx.team.avatarUrl && (
+            <KeyValueTableRow>
+              {t('Avatar')}
+              <Hash text={tx.team.avatarUrl} truncate={false} />
+            </KeyValueTableRow>
+          )}
+          <KeyValueTableRow>
+            {t('Open')}
+            <span data-testid={!tx.team.closed ? 'open-yes' : 'open-no'}>
+              {!tx.team.closed ? <Icon name="tick" /> : <Icon name="cross" />}
+            </span>
+          </KeyValueTableRow>
+        </KeyValueTable>
+      </div>
+    </section>
+  );
+};

apps/explorer/src/app/components/txs/details/shared/tx-details-shared.tsx

@@ -27,7 +27,8 @@ export const sharedHeaderProps = {
   className: 'align-top',
 };
 
-const Labels: Record<BlockExplorerTransactionResult['type'], string> = {
+// The incoming type field is usually the right thing to show. Exceptions are listed here
+const LabelOverrides: Record<BlockExplorerTransactionResult['type'], string> = {
   'Stop Orders Submission': 'Stop Order',
   'Stop Orders Cancellation': 'Cancel Stop Order',
 };
@@ -50,7 +51,7 @@ export const TxDetailsShared = ({
   const time: string = blockData?.result.block.header.time || '';
   const height: string = blockData?.result.block.header.height || txData.block;
 
-  const type = Labels[txData.type] || txData.type;
+  const type = LabelOverrides[txData.type] || txData.type;
 
   return (
     <>

apps/explorer/src/app/components/txs/details/tx-apply-referral-code.tsx

@@ -0,0 +1,47 @@
+import { t } from '@vegaprotocol/i18n';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import { ReferralCodeOwner } from './referrals/referral-code-owner';
+
+interface TxDetailsApplyReferralCodeProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * The signature can be turned in to an id with txSignatureToDeterministicId but
+ */
+export const TxDetailsApplyReferralCode = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsApplyReferralCodeProps) => {
+  if (!txData || !txData.command.applyReferralCode || !txData.signature) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const referralCode = txData.command.applyReferralCode.id;
+
+  return (
+    <div>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+        />
+        <TableRow modifier="bordered">
+          <TableCell>{t('Applied Code')}</TableCell>
+          <TableCell>{referralCode}</TableCell>
+        </TableRow>
+        <TableRow modifier="bordered">
+          <TableCell>{t('Referrer')}</TableCell>
+          <ReferralCodeOwner code={referralCode} />
+        </TableRow>
+      </TableWithTbody>
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/details/tx-create-referral-set.tsx

@@ -0,0 +1,52 @@
+import { t } from '@vegaprotocol/i18n';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import { ReferralTeam } from './referrals/team';
+
+interface TxDetailsCreateReferralProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * The signature can be turned in to an id with txSignatureToDeterministicId but
+ */
+export const TxDetailsCreateReferralSet = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsCreateReferralProps) => {
+  if (!txData || !txData.command.createReferralSet || !txData.signature) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const id = txSignatureToDeterministicId(txData.signature.value);
+
+  const isTeam = txData.command.createReferralSet.isTeam || false;
+
+  return (
+    <div>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+        />
+        <TableRow modifier="bordered">
+          <TableCell>{isTeam ? t('Team ID') : t('Referral code')}</TableCell>
+          <TableCell>{id}</TableCell>
+        </TableRow>
+      </TableWithTbody>
+
+      <ReferralTeam
+        tx={txData.command.createReferralSet}
+        id={id}
+        creator={txData.submitter}
+      />
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx

@@ -28,6 +28,10 @@ import { TxProposal } from './tx-proposal';
 import { TxDetailsTransfer } from './tx-transfer';
 import { TxDetailsStopOrderSubmission } from './tx-stop-order-submission';
 import { TxDetailsLiquiditySubmission } from './tx-liquidity-submission';
+import { TxDetailsCreateReferralSet } from './tx-create-referral-set';
+import { TxDetailsApplyReferralCode } from './tx-apply-referral-code';
+import { TxDetailsUpdateReferralSet } from './tx-update-referral-set';
+import { TxDetailsJoinTeam } from './tx-join-team';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -121,6 +125,14 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsStopOrderSubmission;
     case 'Transfer Funds':
       return TxDetailsTransfer;
+    case 'Create Referral Set':
+      return TxDetailsCreateReferralSet;
+    case 'Update Referral Set':
+      return TxDetailsUpdateReferralSet;
+    case 'Apply Referral Code':
+      return TxDetailsApplyReferralCode;
+    case 'Join Team':
+      return TxDetailsJoinTeam;
     default:
       return TxDetailsGeneric;
   }

apps/explorer/src/app/components/txs/details/tx-join-team.tsx

@@ -0,0 +1,47 @@
+import { t } from '@vegaprotocol/i18n';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import { ReferralCodeOwner } from './referrals/referral-code-owner';
+
+interface TxDetailsJoinTeamProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * The signature can be turned in to an id with txSignatureToDeterministicId but
+ */
+export const TxDetailsJoinTeam = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsJoinTeamProps) => {
+  if (!txData || !txData.command.joinTeam || !txData.signature) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const team = txData.command.joinTeam.id;
+
+  return (
+    <div>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+        />
+        <TableRow modifier="bordered">
+          <TableCell>{t('Team')}</TableCell>
+          <TableCell>{team}</TableCell>
+        </TableRow>
+        <TableRow modifier="bordered">
+          <TableCell>{t('Referrer')}</TableCell>
+          <ReferralCodeOwner code={team} />
+        </TableRow>
+      </TableWithTbody>
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/details/tx-update-referral-set.tsx

@@ -0,0 +1,54 @@
+import { t } from '@vegaprotocol/i18n';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import { ReferralTeam } from './referrals/team';
+
+interface TxDetailsUpdateReferralProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * A copy of create referral set, effectively.
+ * Updating a referral set without a team doesn't make sense,
+ * but is valid, so this component ignores sense.
+ */
+export const TxDetailsUpdateReferralSet = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsUpdateReferralProps) => {
+  if (!txData || !txData.command.updateReferralSet || !txData.signature) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const id = txSignatureToDeterministicId(txData.signature.value);
+
+  const isTeam = txData.command.updateReferralSet.isTeam || false;
+
+  return (
+    <div>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+        />
+        <TableRow modifier="bordered">
+          <TableCell>{isTeam ? t('Team ID') : t('Referral code')}</TableCell>
+          <TableCell>{id}</TableCell>
+        </TableRow>
+      </TableWithTbody>
+
+      <ReferralTeam
+        tx={txData.command.updateReferralSet}
+        id={id}
+        creator={txData.submitter}
+      />
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -28,6 +28,7 @@ export type FilterOption =
   | 'Delegate'
   | 'Ethereum Key Rotate Submission'
   | 'Issue Signatures'
+  | 'Join Team'
   | 'Key Rotate Submission'
   | 'Liquidity Provision Order'
   | 'Node Signature'
@@ -47,45 +48,46 @@ export type FilterOption =
   | 'Vote on Proposal'
   | 'Withdraw';
 
-// Alphabetised list of transaction types to appear at the top level
-export const PrimaryFilterOptions: FilterOption[] = [
-  'Amend LiquidityProvision Order',
-  'Amend Order',
-  'Batch Market Instructions',
-  'Cancel LiquidityProvision Order',
-  'Cancel Order',
-  'Cancel Transfer Funds',
-  'Delegate',
-  'Liquidity Provision Order',
-  'Proposal',
-  'Stop Orders Submission',
-  'Stop Orders Cancellation',
-  'Submit Oracle Data',
-  'Submit Order',
-  'Transfer Funds',
-  'Undelegate',
-  'Vote on Proposal',
-  'Withdraw',
-];
+export const filterOptions: Record<string, FilterOption[]> = {
+  'Market Instructions': [
+    'Amend LiquidityProvision Order',
+    'Amend Order',
+    'Batch Market Instructions',
+    'Cancel LiquidityProvision Order',
+    'Cancel Order',
+    'Liquidity Provision Order',
+    'Stop Orders Submission',
+    'Stop Orders Cancellation',
+    'Submit Order',
+  ],
+  'Transfers and Withdrawals': [
+    'Transfer Funds',
+    'Cancel Transfer Funds',
+    'Withdraw',
+  ],
+  Governance: ['Delegate', 'Undelegate', 'Vote on Proposal', 'Proposal'],
+  Referrals: [
+    'Apply Referral Code',
+    'Create Referral Set',
+    'Join Team',
+    'Update Referral Set',
+  ],
+  'External Data': ['Chain Event', 'Submit Oracle Data'],
+  Validators: [
+    'Ethereum Key Rotate Submission',
+    'Issue Signatures',
+    'Key Rotate Submission',
+    'Node Signature',
+    'Node Vote',
+    'Protocol Upgrade',
+    'Register new Node',
+    'State Variable Proposal',
+    'Validator Heartbeat',
+  ],
+};
 
-// Alphabetised list of transaction types to nest under a 'More...' submenu
-export const SecondaryFilterOptions: FilterOption[] = [
-  'Chain Event',
-  'Ethereum Key Rotate Submission',
-  'Issue Signatures',
-  'Key Rotate Submission',
-  'Node Signature',
-  'Node Vote',
-  'Protocol Upgrade',
-  'Register new Node',
-  'State Variable Proposal',
-  'Validator Heartbeat',
-];
-
-export const AllFilterOptions: FilterOption[] = [
-  ...PrimaryFilterOptions,
-  ...SecondaryFilterOptions,
-];
+export const AllFilterOptions: FilterOption[] =
+  Object.values(filterOptions).flat();
 
 export interface TxFilterProps {
   filters: Set<FilterOption>;
@@ -122,46 +124,33 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
             <DropdownMenuSeparator />
           </>
         )}
-        {PrimaryFilterOptions.map((f) => (
-          <DropdownMenuCheckboxItem
-            key={f}
-            checked={filters.has(f)}
-            onCheckedChange={() => {
-              // NOTE: These act like radio buttons until the API supports multiple filters
-              setFilters(new Set([f]));
-            }}
-            id={`radio-${f}`}
-          >
-            {f}
-            <DropdownMenuItemIndicator>
-              <Icon name="tick-circle" />
-            </DropdownMenuItemIndicator>
-          </DropdownMenuCheckboxItem>
+
+        {Object.entries(filterOptions).map(([key, value]) => (
+          <DropdownMenuSub key={key}>
+            <DropdownMenuSubTrigger>
+              {t(key)}
+              <Icon name="chevron-right" />
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              {value.map((f) => (
+                <DropdownMenuCheckboxItem
+                  key={f}
+                  checked={filters.has(f)}
+                  onCheckedChange={(checked) => {
+                    // NOTE: These act like radio buttons until the API supports multiple filters
+                    setFilters(new Set([f]));
+                  }}
+                  id={`radio-${f}`}
+                >
+                  {f}
+                  <DropdownMenuItemIndicator>
+                    <Icon name="tick-circle" className="inline" />
+                  </DropdownMenuItemIndicator>
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
         ))}
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            {t('More Types')}
-            <Icon name="chevron-right" />
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            {SecondaryFilterOptions.map((f) => (
-              <DropdownMenuCheckboxItem
-                key={f}
-                checked={filters.has(f)}
-                onCheckedChange={(checked) => {
-                  // NOTE: These act like radio buttons until the API supports multiple filters
-                  setFilters(new Set([f]));
-                }}
-                id={`radio-${f}`}
-              >
-                {f}
-                <DropdownMenuItemIndicator>
-                  <Icon name="tick-circle" className="inline" />
-                </DropdownMenuItemIndicator>
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
       </DropdownMenuContent>
     </DropdownMenu>
   );

apps/explorer/src/app/components/txs/tx-order-type.tsx

@@ -48,6 +48,8 @@ const displayString: StringMap = {
   StopOrdersSubmission: 'Stop',
   StopOrdersCancellation: 'Cancel stop',
   'Stop Orders Cancellation': 'Cancel stop',
+  'Apply Referral Code': 'Referral',
+  'Create Referral Set': 'Create referral',
 };
 
 export function getLabelForStopOrderType(

apps/explorer/src/app/routes/txs/id/index.tsx

@@ -31,6 +31,10 @@ const Tx = () => {
     }
   }
 
+  if (!data || !data?.transaction) {
+    errorMessage = 'Transaction not found';
+  }
+
   return (
     <section>
       <PageHeader
@@ -49,7 +53,7 @@ const Tx = () => {
         <TxDetails
           className="mb-28"
           txData={data?.transaction}
-          pubKey={data?.transaction.submitter}
+          pubKey={data?.transaction?.submitter}
         />
       </RenderFetched>
     </section>

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -11,8 +11,8 @@ interface TxDetailsProps {
 export const txDetailsTruncateLength = 30;
 
 export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  if (!txData || !pubKey) {
+    return <>{t('Transaction could not be found')}</>;
   }
   return (
     <section className="mb-10" key={txData.hash}>

apps/explorer/src/types/explorer.d.ts

@@ -8,13 +8,13 @@ type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 type XOR<T, U> = T | U extends object
   ? (Without<T, U> & U) | (Without<U, T> & T)
   : T | U;
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable  @typescript-eslint/no-explicit-any */
 type OneOf<T extends any[]> = T extends [infer Only]
   ? Only
   : T extends [infer A, infer B, ...infer Rest]
   ? OneOf<[XOR<A, B>, ...Rest]>
   : never;
-/* eslint-enable @typescript-eslint/no-explicit-any */
+/* eslint-enable  @typescript-eslint/no-explicit-any */
 
 export interface paths {
   '/info': {

apps/governance-e2e/src/integration/view/pubkey-view.cy.ts

@@ -47,7 +47,7 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
       .and('contain.text', 'USDC (fake)');
   });
 
-  it('Unable to submit proposal with public key', function () {
+  it.skip('Unable to submit proposal with public key', function () {
     const expectedErrorTxt = `You are connected in a view only state for public key: ${vegaWalletPubKey}. In order to send transactions you must connect to a real wallet.`;
 
     goToMakeNewProposal(governanceProposalType.RAW);
@@ -55,7 +55,10 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
     cy.getByTestId('dialog-content')
       .first()
       .within(() => {
-        cy.get('h1').should('have.text', 'Transaction failed');
+        cy.getByTestId('dialog-title').should(
+          'have.text',
+          'Transaction failed'
+        );
         cy.getByTestId('Error').should('have.text', expectedErrorTxt);
       });
   });

apps/governance-e2e/src/support/proposal.functions.ts

@@ -112,6 +112,7 @@ export function createNewMarketProposalTxBody(): ProposalSubmissionBody {
               performanceHysteresisEpochs: 2,
               slaCompetitionFactor: '0.1',
             },
+            // FIXME: workaround because of https://github.com/vegaprotocol/vega/issues/10343
             quadraticSlippageFactor: '0',
             instrument: {
               name: 'Token test market',
@@ -241,6 +242,7 @@ export function createSuccessorMarketProposalTxBody(
             decimalPlaces: '5',
             positionDecimalPlaces: '5',
             linearSlippageFactor: '0.001',
+            // FIXME: workaround because of https://github.com/vegaprotocol/vega/issues/10343
             quadraticSlippageFactor: '0',
             liquiditySlaParameters: {
               priceRange: '0.5',

apps/governance/src/app.tsx

@@ -26,7 +26,7 @@ import {
 } from '@vegaprotocol/web3';
 import { Web3Provider } from '@vegaprotocol/web3';
 import { VegaWalletDialogs } from './components/vega-wallet-dialogs';
-import { VegaWalletProvider } from '@vegaprotocol/wallet';
+import { VegaWalletProvider, useChainId } from '@vegaprotocol/wallet';
 import {
   useVegaTransactionManager,
   useVegaTransactionUpdater,
@@ -96,7 +96,9 @@ const cache: InMemoryCacheConfig = {
 const Web3Container = ({
   chainId,
 }: {
+  /** Ethereum chain id */
   chainId: number;
+  /** Ethereum provider url */
   providerUrl: string;
 }) => {
   const InitializeHandlers = () => {
@@ -123,6 +125,9 @@ const Web3Container = ({
     MOZILLA_EXTENSION_URL,
     VEGA_WALLET_URL,
   } = useEnvironment();
+
+  const vegaChainId = useChainId(VEGA_URL);
+
   useEffect(() => {
     if (chainId) {
       return initializeConnectors(
@@ -157,7 +162,8 @@ const Web3Container = ({
     !VEGA_EXPLORER_URL ||
     !DocsLinks ||
     !CHROME_EXTENSION_URL ||
-    !MOZILLA_EXTENSION_URL
+    !MOZILLA_EXTENSION_URL ||
+    !vegaChainId
   ) {
     return null;
   }
@@ -169,6 +175,7 @@ const Web3Container = ({
           config={{
             network: VEGA_ENV,
             vegaUrl: VEGA_URL,
+            chainId: vegaChainId,
             vegaWalletServiceUrl: VEGA_WALLET_URL,
             links: {
               explorer: VEGA_EXPLORER_URL,

apps/governance/src/lib/party.test.ts

@@ -0,0 +1,112 @@
+import type { ApolloError } from '@apollo/client';
+import {
+  PARTY_NOT_FOUND,
+  filterAcceptableGraphqlErrors,
+  isPartyNotFoundError,
+} from './party';
+import type { GraphQLError } from 'graphql';
+
+/**
+ *
+ * @param message
+ * @returns GraphQLError
+ */
+function createMockApolloErrors(message: string): GraphQLError {
+  return {
+    message,
+    extensions: {
+      code: message.toUpperCase().replace(/ /g, '_'),
+    },
+    locations: [],
+    originalError: new Error(message),
+    path: [],
+    nodes: [],
+    positions: [1],
+    name: message,
+    source: {
+      body: message,
+      name: message,
+      locationOffset: {
+        line: 1,
+        column: 1,
+      },
+    },
+  };
+}
+
+describe('filterAcceptableGraphqlErrors', () => {
+  it('should return undefined if the error is a party not found error', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [createMockApolloErrors('failed to get party for ID')],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the error if it is not a party not found error', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [createMockApolloErrors('Some other error')],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toEqual(error);
+  });
+
+  it('should return the error if there are multiple errors', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [
+        createMockApolloErrors('failed to get party for ID'),
+        createMockApolloErrors('Some other error'),
+      ],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toEqual(error);
+  });
+
+  it('should return the error if there are no errors', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toEqual(error);
+  });
+
+  it('should return undefined if the error is undefined', () => {
+    const result = filterAcceptableGraphqlErrors(undefined);
+
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('isPartyNotFoundError', () => {
+  it('should return true if the error message includes PARTY_NOT_FOUND', () => {
+    const error = { message: 'failed to get party for ID' };
+
+    const result = isPartyNotFoundError(error);
+
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the error message does not include PARTY_NOT_FOUND', () => {
+    const error = { message: 'Some other error' };
+
+    const result = isPartyNotFoundError(error);
+
+    expect(result).toBe(false);
+  });
+
+  // Will trip if the error message changes, which should not be a problem, but there
+  // might be logic that depends on it
+  it('expects party not found error to remain consistent', () => {
+    const error = 'failed to get party for ID';
+
+    expect(PARTY_NOT_FOUND).toStrictEqual(error);
+  });
+});

apps/governance/src/lib/party.ts

@@ -1,3 +1,5 @@
+import type { ApolloError } from '@apollo/client';
+
 export const PARTY_NOT_FOUND = 'failed to get party for ID';
 
 export const isPartyNotFoundError = (error: { message: string }) => {
@@ -6,3 +8,23 @@ export const isPartyNotFoundError = (error: { message: string }) => {
   }
   return false;
 };
+
+/**
+ * If a party has no accounts or data, then this GraphQL query believes it does not exist
+ * Not having any rewards is a valid state, so in some cases we can filter this error out.
+ *
+ * @param error ApolloError | undefined
+ * @returns ApolloError | undefined
+ */
+export function filterAcceptableGraphqlErrors(
+  error?: ApolloError
+): ApolloError | undefined {
+  // Currently the only error we expect is when a party has no accounts
+  if (error && error.graphQLErrors.length === 1) {
+    if (isPartyNotFoundError(error.graphQLErrors[0])) {
+      return;
+    }
+  }
+
+  return error;
+}

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -124,7 +124,7 @@ describe('Proposal header', () => {
       screen.queryByTestId('proposal-description')
     ).not.toBeInTheDocument();
     expect(screen.getByTestId('proposal-details')).toHaveTextContent(
-      'Market change: MarketId'
+      'Update to market ID: MarketId'
     );
   });
 

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -1,5 +1,11 @@
 import { useTranslation } from 'react-i18next';
-import { Lozenge, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import {
+  CopyWithTooltip,
+  Lozenge,
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { shorten } from '@vegaprotocol/utils';
 import { Heading, SubHeading } from '../../../../components/heading';
 import type { ReactNode } from 'react';
@@ -12,7 +18,12 @@ import {
   useNewTransferProposalDetails,
   useSuccessorMarketProposalDetails,
 } from '@vegaprotocol/proposals';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import {
+  CONSOLE_MARKET_PAGE,
+  DApp,
+  useFeatureFlags,
+  useLinks,
+} from '@vegaprotocol/environment';
 import Routes from '../../../routes';
 import { Link } from 'react-router-dom';
 import type { VoteState } from '../vote-details/use-user-vote';
@@ -32,6 +43,8 @@ export const ProposalHeader = ({
   const { t } = useTranslation();
   const change = proposal?.terms.change;
 
+  const consoleLink = useLinks(DApp.Console);
+
   let details: ReactNode;
   let proposalType = '';
   let fallbackTitle = '';
@@ -106,8 +119,33 @@ export const ProposalHeader = ({
       fallbackTitle = t('UpdateMarketProposal');
       details = (
         <>
-          <span>{t('MarketChange')}:</span>{' '}
-          <span>{truncateMiddle(change.marketId)}</span>
+          <span>{t('UpdateToMarket')}:</span>{' '}
+          <span className="inline-flex items-start gap-2">
+            <span className="break-all">{change.marketId} </span>
+            <span className="inline-flex items-end gap-0">
+              <CopyWithTooltip
+                text={change.marketId}
+                description={t('copyToClipboard')}
+              >
+                <button className="inline-block px-1">
+                  <VegaIcon size={20} name={VegaIconNames.COPY} />
+                </button>
+              </CopyWithTooltip>
+              <Tooltip description={t('OpenInConsole')} align="center">
+                <button
+                  className="inline-block px-1"
+                  onClick={() => {
+                    const marketPageLink = consoleLink(
+                      CONSOLE_MARKET_PAGE.replace(':marketId', change.marketId)
+                    );
+                    window.open(marketPageLink, '_blank');
+                  }}
+                >
+                  <VegaIcon size={20} name={VegaIconNames.OPEN_EXTERNAL} />
+                </button>
+              </Tooltip>
+            </span>
+          </span>
         </>
       );
       break;

apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx

@@ -48,6 +48,7 @@ const vegaWalletConfig: VegaWalletConfig = {
     chromeExtensionUrl: 'chrome',
     mozillaExtensionUrl: 'mozilla',
   },
+  chainId: 'VEGA_CHAIN_ID',
 };
 
 const renderComponent = (proposal: ProposalQuery['proposal']) => {

apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx

@@ -18,6 +18,7 @@ import { ProposalMinRequirements, ProposalUserAction } from '../shared';
 import { VoteTransactionDialog } from './vote-transaction-dialog';
 import { useVoteButtonsQuery } from './__generated__/Stake';
 import type { DialogProps, VegaTxState } from '@vegaprotocol/proposals';
+import { filterAcceptableGraphqlErrors } from '../../../../lib/party';
 
 interface VoteButtonsContainerProps {
   voteState: VoteState | null;
@@ -42,8 +43,10 @@ export const VoteButtonsContainer = (props: VoteButtonsContainerProps) => {
     skip: !pubKey,
   });
 
+  const filteredErrors = filterAcceptableGraphqlErrors(error);
+
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer loading={loading} error={filteredErrors} data={data}>
       <VoteButtons
         {...props}
         currentStakeAvailable={toBigNum(

apps/governance/src/routes/proposals/proposal/Proposal.graphql

@@ -212,7 +212,6 @@ query Proposal(
           }
           positionDecimalPlaces
           linearSlippageFactor
-          quadraticSlippageFactor
         }
         ... on UpdateMarket {
           marketId

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards.tsx

@@ -10,6 +10,7 @@ import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
 import { generateEpochIndividualRewardsList } from './generate-epoch-individual-rewards-list';
 import { calculateEpochOffset } from '../../../lib/epoch-pagination';
 import { useNetworkParam } from '@vegaprotocol/network-parameters';
+import { filterAcceptableGraphqlErrors } from '../../../lib/party';
 
 const EPOCHS_PAGE_SIZE = 10;
 
@@ -99,17 +100,24 @@ export const EpochIndividualRewards = ({
     prevEpochIdRef.current = epochId;
   }, [epochId, refetchData]);
 
+  // Workarounds for the error handling of AsyncRenderer
+  const filteredErrors = filterAcceptableGraphqlErrors(error);
+  const filteredData = data || [];
+
   return (
     <AsyncRenderer
       loading={loading}
-      error={error}
-      data={data}
+      error={filteredErrors}
+      data={filteredData}
       render={() => (
         <div>
           <p data-testid="connected-vega-key" className="mb-10">
             {t('Connected Vega key')}:{' '}
             <span className="text-white">{pubKey}</span>
           </p>
+          {epochIndividualRewardSummaries.length === 0 && (
+            <p>{t('No rewards for key')}</p>
+          )}
           {epochIndividualRewardSummaries.map(
             (epochIndividualRewardSummary) => (
               <EpochIndividualRewardsTable
@@ -118,17 +126,19 @@ export const EpochIndividualRewards = ({
               />
             )
           )}
-          <Pagination
-            isLoading={loading}
-            hasPrevPage={page > 1}
-            hasNextPage={page < totalPages}
-            onBack={() => refetchData(page - 1)}
-            onNext={() => refetchData(page + 1)}
-            onFirst={() => refetchData(1)}
-            onLast={() => refetchData(totalPages)}
-          >
-            {t('Page')} {page}
-          </Pagination>
+          {epochIndividualRewardSummaries.length > 0 && (
+            <Pagination
+              isLoading={loading}
+              hasPrevPage={page > 1}
+              hasNextPage={page < totalPages}
+              onBack={() => refetchData(page - 1)}
+              onNext={() => refetchData(page + 1)}
+              onFirst={() => refetchData(1)}
+              onLast={() => refetchData(totalPages)}
+            >
+              {t('Page')} {page}
+            </Pagination>
+          )}
         </div>
       )}
     />

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.spec.tsx

@@ -16,7 +16,7 @@ import type { ValidatorsView } from './validator-tables';
 const nodeFactory = (
   overrides?: PartialDeep<NodesFragmentFragment>
 ): NodesFragmentFragment => {
-  const defaultNode = {
+  const defaultNode: NodesFragmentFragment = {
     id: 'ccc022b7e63a4d0a6d3a193c3940c88574060e58a184964c994998d86835a1b4',
     name: 'high',
     avatarUrl: 'https://upload.wikimedia.org/wikipedia/en/2/25/Marvin-TV-3.jpg',
@@ -288,7 +288,7 @@ describe('Consensus validators table', () => {
 
     expect(
       grid.querySelector('[role="gridcell"][col-id="totalPenalties"]')
-    ).toHaveTextContent('10.07%');
+    ).toHaveTextContent('13.16%');
 
     expect(
       grid.querySelector('[role="gridcell"][col-id="normalisedVotingPower"]')

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -185,6 +185,15 @@ export const ConsensusValidatorsTable = ({
           const { rawValidatorScore: previousEpochValidatorScore } =
             getLastEpochScoreAndPerformance(previousEpochData, id);
 
+          const overstakingPenalty = calculateOverallPenalty(
+            id,
+            allNodesInPreviousEpoch
+          );
+          const totalPenalty = calculateOverstakedPenalty(
+            id,
+            allNodesInPreviousEpoch
+          );
+
           return {
             id,
             [ValidatorFields.RANKING_INDEX]: stakedTotalRanking,
@@ -213,11 +222,11 @@ export const ConsensusValidatorsTable = ({
               2
             ),
             [ValidatorFields.OVERSTAKING_PENALTY]: formatNumberPercentage(
-              calculateOverstakedPenalty(id, allNodesInPreviousEpoch),
+              overstakingPenalty,
               2
             ),
             [ValidatorFields.TOTAL_PENALTIES]: formatNumberPercentage(
-              calculateOverallPenalty(id, allNodesInPreviousEpoch),
+              totalPenalty,
               2
             ),
             [ValidatorFields.PENDING_STAKE]: pendingStake,

apps/governance/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

@@ -124,6 +124,15 @@ export const StandbyPendingValidatorsTable = ({
             }
           }
 
+          const overstakingPenalty = calculateOverallPenalty(
+            id,
+            allNodesInPreviousEpoch
+          );
+          const totalPenalty = calculateOverstakedPenalty(
+            id,
+            allNodesInPreviousEpoch
+          );
+
           return {
             id,
             [ValidatorFields.RANKING_INDEX]: stakedTotalRanking,
@@ -154,11 +163,11 @@ export const StandbyPendingValidatorsTable = ({
               2
             ),
             [ValidatorFields.OVERSTAKING_PENALTY]: formatNumberPercentage(
-              calculateOverstakedPenalty(id, allNodesInPreviousEpoch),
+              overstakingPenalty,
               2
             ),
             [ValidatorFields.TOTAL_PENALTIES]: formatNumberPercentage(
-              calculateOverallPenalty(id, allNodesInPreviousEpoch),
+              totalPenalty,
               2
             ),
             [ValidatorFields.PENDING_STAKE]: pendingStake,

apps/governance/src/routes/staking/node/validator-table.tsx

@@ -266,7 +266,9 @@ export const ValidatorTable = ({
 
                 <Tooltip description={t('OverstakedPenaltyDescription')}>
                   <span data-testid="overstaking-penalty">
-                    {formatNumberPercentage(penalties.overstaked, 2)}
+                    {penalties.overstaked
+                      ? formatNumberPercentage(penalties.overstaked, 2)
+                      : '-'}
                   </span>
                 </Tooltip>
               </KeyValueTableRow>
@@ -285,7 +287,9 @@ export const ValidatorTable = ({
                 </span>
                 <span data-testid="total-penalties">
                   <strong>
-                    {formatNumberPercentage(penalties.overall, 2)}
+                    {penalties.overall
+                      ? formatNumberPercentage(penalties.overall, 2)
+                      : '-'}
                   </strong>
                 </span>
               </KeyValueTableRow>

apps/governance/src/routes/staking/shared.spec.ts

@@ -3,11 +3,11 @@ import {
   getLastEpochScoreAndPerformance,
   getNormalisedVotingPower,
   getUnnormalisedVotingPower,
-  getOverstakingPenalty,
   getFormattedPerformanceScore,
   getPerformancePenalty,
-  getTotalPenalties,
   getStakePercentage,
+  calculateOverallPenalty,
+  calculateOverstakedPenalty,
 } from './shared';
 import * as Schema from '@vegaprotocol/types';
 
@@ -106,38 +106,6 @@ describe('getUnnormalisedVotingPower', () => {
   });
 });
 
-describe('getOverstakingPenalty', () => {
-  it('returns "0%" when both arguments are null or undefined', () => {
-    expect(getOverstakingPenalty(null, null)).toBe('0%');
-    expect(getOverstakingPenalty(undefined, undefined)).toBe('0%');
-    expect(getOverstakingPenalty(null, undefined)).toBe('0%');
-    expect(getOverstakingPenalty(undefined, null)).toBe('0%');
-  });
-
-  it('returns "0%" when one argument is null or undefined', () => {
-    expect(getOverstakingPenalty('10', null)).toBe('0%');
-    expect(getOverstakingPenalty(null, '20')).toBe('0%');
-    expect(getOverstakingPenalty('10', undefined)).toBe('0%');
-    expect(getOverstakingPenalty(undefined, '20')).toBe('0%');
-  });
-
-  it('returns "0%" when validatorScore or stakeScore is zero', () => {
-    expect(getOverstakingPenalty('0', '20')).toBe('0%');
-    expect(getOverstakingPenalty('10', '0')).toBe('0%');
-  });
-
-  it('returns the correct overstaking penalty', () => {
-    expect(getOverstakingPenalty('0.18', '0.2')).toBe('10.00%');
-    expect(getOverstakingPenalty('0.2', '0.2')).toBe('0.00%');
-    expect(getOverstakingPenalty('0.04', '0.2')).toBe('80.00%');
-  });
-
-  it('handles string numbers with decimals', () => {
-    expect(getOverstakingPenalty('7.5', '15')).toBe('50.00%');
-    expect(getOverstakingPenalty('12.5', '25')).toBe('50.00%');
-  });
-});
-
 describe('getFormattedPerformanceScore', () => {
   it('should return the formatted performance score', () => {
     expect(getFormattedPerformanceScore('0.25')).toEqual(new BigNumber(0.25));
@@ -152,17 +120,6 @@ describe('getPerformancePenalty', () => {
   });
 });
 
-describe('getTotalPenalties', () => {
-  it('should return the total penalties', () => {
-    expect(getTotalPenalties('0.25', '1', '5000', '10000')).toEqual('50.00%');
-    expect(getTotalPenalties('0.25', '0.5', '5000', '10000')).toEqual('75.00%');
-  });
-
-  it('should return 0 if the total penalties is negative', () => {
-    expect(getTotalPenalties('0.25', '0.5', '1000', '10000')).toEqual('0.00%');
-  });
-});
-
 describe('getStakePercentage', () => {
   it('should return the stake percentage', () => {
     expect(
@@ -182,3 +139,107 @@ describe('getStakePercentage', () => {
     );
   });
 });
+
+describe('calculateOverallPenalty', () => {
+  it('returns null if rewardScore is null', () => {
+    const res = calculateOverallPenalty('1', [
+      {
+        id: '1',
+        rewardScore: null,
+        stakedTotal: '',
+        rankingScore: {
+          stakeScore: '0.25',
+          performanceScore: '0.75',
+          status: Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          previousStatus:
+            Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          rankingScore: '',
+          votingPower: '',
+        },
+      },
+    ]);
+
+    expect(res).toBeNull();
+  });
+
+  it('returns null if rewardScore.rawValidatorScore is null (should not happen)', () => {
+    const res = calculateOverallPenalty('1', [
+      {
+        id: '1',
+        stakedTotal: '',
+        rewardScore: {
+          rawValidatorScore: '0.25',
+          performanceScore: '0.75',
+          multisigScore: '',
+          validatorScore: null as unknown as string,
+          normalisedScore: '',
+          validatorStatus:
+            Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+        },
+        rankingScore: {
+          stakeScore: '0.25',
+          performanceScore: '0.75',
+          status: Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          previousStatus:
+            Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          rankingScore: '',
+          votingPower: '',
+        },
+      },
+    ]);
+
+    expect(res).toBeNull();
+  });
+});
+
+describe('calculateOverstakedPenalty', () => {
+  it('returns null if rewardScore is null', () => {
+    const res = calculateOverstakedPenalty('1', [
+      {
+        id: '1',
+        rewardScore: null,
+        stakedTotal: '',
+        rankingScore: {
+          stakeScore: '0.25',
+          performanceScore: '0.75',
+          status: Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          previousStatus:
+            Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          rankingScore: '',
+          votingPower: '',
+        },
+      },
+    ]);
+
+    expect(res).toBeNull();
+  });
+
+  it('returns null if rewardScore.rawValidatorScore is null (should not happen)', () => {
+    const res = calculateOverstakedPenalty('1', [
+      {
+        id: '1',
+        stakedTotal: '',
+        rewardScore: {
+          rawValidatorScore: null as unknown as string,
+          performanceScore: '0.75',
+          multisigScore: '',
+          validatorScore: '',
+          normalisedScore: '',
+          validatorStatus:
+            Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+        },
+        rankingScore: {
+          stakeScore: '0.25',
+          performanceScore: '0.75',
+          status: Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          previousStatus:
+            Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+          rankingScore: '',
+          votingPower: '',
+        },
+      },
+    ]);
+
+    expect(res).toBeNull();
+  });
+});

apps/governance/src/routes/staking/shared.ts

@@ -5,6 +5,7 @@ import {
 import type { PreviousEpochQuery } from './__generated__/PreviousEpoch';
 import { BigNumber } from '../../lib/bignumber';
 import type { LastArrayElement } from 'type-fest';
+import isNull from 'lodash/isNull';
 
 type Node = NonNullable<
   LastArrayElement<
@@ -21,7 +22,10 @@ type Node = NonNullable<
  * @returns Theoretical stake score for given node based on the staked total
  * of all node of the same type (status)
  */
-const calculateTheoreticalStakeScore = (nodeId: string, nodes: Node[]) => {
+const calculateTheoreticalStakeScore = (
+  nodeId: string,
+  nodes: Node[]
+): BigNumber | null => {
   const node = nodes.find((n) => n.id === nodeId);
   if (!node) {
     return new BigNumber(0);
@@ -42,14 +46,25 @@ const calculateTheoreticalStakeScore = (nodeId: string, nodes: Node[]) => {
  * @param nodes A collection of all nodes - needed to calculate theoretical stake score
  * @returns %
  */
-export const calculateOverallPenalty = (nodeId: string, nodes: Node[]) => {
+export const calculateOverallPenalty = (
+  nodeId: string,
+  nodes: Node[]
+): BigNumber | null => {
   const node = nodes.find((n) => n.id === nodeId);
   const tts = calculateTheoreticalStakeScore(nodeId, nodes);
-  if (!node || tts.isZero()) {
+  if (
+    !node ||
+    isNull(tts) ||
+    !node.rewardScore ||
+    (node.rewardScore && isNull(node.rewardScore.validatorScore))
+  ) {
+    return null;
+  }
+  if (tts.isZero()) {
     return new BigNumber(0);
   }
   const penalty = new BigNumber(1)
-    .minus(new BigNumber(node.rewardScore?.validatorScore || 0).dividedBy(tts))
+    .minus(new BigNumber(node.rewardScore.validatorScore).dividedBy(tts))
     .times(100);
   return penalty.isLessThan(0) ? new BigNumber(0) : penalty;
 };
@@ -60,10 +75,21 @@ export const calculateOverallPenalty = (nodeId: string, nodes: Node[]) => {
  * @param nodes A collection of all nodes - needed to calculate theoretical stake score
  * @returns %
  */
-export const calculateOverstakedPenalty = (nodeId: string, nodes: Node[]) => {
+export const calculateOverstakedPenalty = (
+  nodeId: string,
+  nodes: Node[]
+): BigNumber | null => {
   const node = nodes.find((n) => n.id === nodeId);
   const tts = calculateTheoreticalStakeScore(nodeId, nodes);
-  if (!node || tts.isZero()) {
+  if (
+    !node ||
+    isNull(tts) ||
+    isNull(node.rewardScore) ||
+    (node.rewardScore && node.rewardScore.rawValidatorScore === null)
+  ) {
+    return null;
+  }
+  if (tts.isZero()) {
     return new BigNumber(0);
   }
   const penalty = new BigNumber(1)
@@ -78,7 +104,9 @@ export const calculateOverstakedPenalty = (nodeId: string, nodes: Node[]) => {
  * Calculates performance penalty based on the given performance score.
  * @returns %
  */
-export const calculatesPerformancePenalty = (performanceScore: string) => {
+export const calculatesPerformancePenalty = (
+  performanceScore: string
+): BigNumber => {
   const penalty = new BigNumber(1)
     .minus(new BigNumber(performanceScore))
     .times(100);
@@ -123,60 +151,6 @@ export const getPerformancePenalty = (performanceScore?: string) =>
     2
   );
 
-export const getOverstakingPenalty = (
-  validatorScore: string | null | undefined,
-  stakeScore: string | null | undefined
-) => {
-  if (!validatorScore || !stakeScore) {
-    return '0%';
-  }
-
-  // avoid division by zero
-  if (
-    new BigNumber(validatorScore).isZero() ||
-    new BigNumber(stakeScore).isZero()
-  ) {
-    return '0%';
-  }
-
-  return formatNumberPercentage(
-    BigNumber.max(
-      new BigNumber(1)
-        .minus(
-          new BigNumber(validatorScore).dividedBy(new BigNumber(stakeScore))
-        )
-        .times(100),
-      new BigNumber(0)
-    ),
-    2
-  );
-};
-
-export const getTotalPenalties = (
-  rawValidatorScore: string | null | undefined,
-  performanceScore: string | undefined,
-  stakedOnNode: string,
-  totalStake: string
-) => {
-  const calc =
-    rawValidatorScore &&
-    performanceScore &&
-    new BigNumber(totalStake).isGreaterThan(0)
-      ? new BigNumber(1).minus(
-          new BigNumber(performanceScore)
-            .times(new BigNumber(rawValidatorScore))
-            .dividedBy(
-              new BigNumber(stakedOnNode).dividedBy(new BigNumber(totalStake))
-            )
-        )
-      : new BigNumber(0);
-
-  return formatNumberPercentage(
-    calc.isPositive() ? calc.times(100) : new BigNumber(0),
-    2
-  );
-};
-
 export const getStakePercentage = (total: BigNumber, stakedOnNode: BigNumber) =>
   total.isEqualTo(0) || stakedOnNode.isEqualTo(0)
     ? '0%'

apps/governance/src/toasts-manager.tsx

@@ -1,14 +1,50 @@
-import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
+import {
+  Intent,
+  ToastsContainer,
+  TradingButton,
+  VegaIcon,
+  VegaIconNames,
+  useToasts,
+} from '@vegaprotocol/ui-toolkit';
+import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import {
   useEthereumTransactionToasts,
   useEthereumWithdrawApprovalsToasts,
   useVegaTransactionToasts,
+  useWalletDisconnectToastActions,
+  useWalletDisconnectedToasts,
 } from '@vegaprotocol/web3';
+import { useTranslation } from 'react-i18next';
+
+const WalletDisconnectAdditionalContent = () => {
+  const { t } = useTranslation();
+  const { hideToast } = useWalletDisconnectToastActions();
+  const openVegaWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+  return (
+    <p className="mt-2">
+      <TradingButton
+        data-testid="connect-vega-wallet"
+        onClick={() => {
+          hideToast();
+          openVegaWalletDialog();
+        }}
+        size="small"
+        intent={Intent.Danger}
+        icon={<VegaIcon name={VegaIconNames.ARROW_RIGHT} size={14} />}
+      >
+        <span className="whitespace-nowrap uppercase">{t('Connect')}</span>
+      </TradingButton>
+    </p>
+  );
+};
 
 export const ToastsManager = () => {
   useVegaTransactionToasts();
   useEthereumTransactionToasts();
   useEthereumWithdrawApprovalsToasts();
+  useWalletDisconnectedToasts(<WalletDisconnectAdditionalContent />);
 
   const toasts = useToasts((store) => store.toasts);
   return <ToastsContainer order="desc" toasts={toasts} />;

apps/trading/.env

@@ -21,8 +21,14 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
-# NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
-NX_TEAM_COMPETITION=true
+# NX_DISABLE_CLOSE_POSITION=false
+
+NX_TENDERMINT_URL=https://be.vega.community
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
+
+NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
+NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=

apps/trading/.env.capsule

@@ -21,6 +21,7 @@ NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supp
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
+NX_ISOLATED_MARGIN=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false

apps/trading/.env.devnet

@@ -20,6 +20,7 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true

apps/trading/.env.mainnet

@@ -21,6 +21,7 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=false
 NX_ICEBERG_ORDERS=true
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true

apps/trading/.env.mainnet-mirror

@@ -21,6 +21,7 @@ NX_APP_VERSION=v0.20.19-core-0.71.6
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=false
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false

apps/trading/.env.stagnet1

@@ -21,6 +21,7 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true

apps/trading/.env.testnet

@@ -22,6 +22,7 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true

apps/trading/.env.validators-testnet

@@ -22,6 +22,7 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
+NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=false

apps/trading/components/bootstrapper/bootstrapper.tsx

@@ -13,6 +13,7 @@ import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
 import { DataLoader } from './data-loader';
+import { useChainId } from '@vegaprotocol/wallet';
 
 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   const t = useT();
@@ -26,13 +27,16 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
     CHROME_EXTENSION_URL,
   } = useEnvironment();
 
+  const chainId = useChainId(VEGA_URL);
+
   if (
     !VEGA_URL ||
     !VEGA_WALLET_URL ||
     !VEGA_EXPLORER_URL ||
     !CHROME_EXTENSION_URL ||
     !MOZILLA_EXTENSION_URL ||
-    !DocsLinks
+    !DocsLinks ||
+    !chainId
   ) {
     return <AppLoader />;
   }
@@ -72,6 +76,7 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
               config={{
                 network: VEGA_ENV,
                 vegaUrl: VEGA_URL,
+                chainId,
                 vegaWalletServiceUrl: VEGA_WALLET_URL,
                 links: {
                   explorer: VEGA_EXPLORER_URL,

apps/trading/components/chart-container/chart-container.tsx

@@ -25,12 +25,12 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
     overlays,
     studies,
     studySizes,
-    tradingViewStudies,
     setInterval,
     setStudies,
     setStudySizes,
     setOverlays,
-    setTradingViewStudies,
+    state,
+    setState,
   } = useChartSettings();
 
   const pennantChart = (
@@ -64,13 +64,13 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
           libraryHash={CHARTING_LIBRARY_HASH}
           marketId={marketId}
           interval={toTradingViewResolution(interval)}
-          studies={tradingViewStudies}
           onIntervalChange={(newInterval) => {
             setInterval(fromTradingViewResolution(newInterval));
           }}
-          onAutoSaveNeeded={(data: { studies: string[] }) => {
-            setTradingViewStudies(data.studies);
+          onAutoSaveNeeded={(data) => {
+            setState(data);
           }}
+          state={state}
         />
       );
     }

apps/trading/components/chart-container/chart-menu.spec.tsx

@@ -27,10 +27,10 @@ describe('ChartMenu', () => {
 
     render(<ChartMenu />);
 
-    await userEvent.click(screen.getByRole('button', { name: 'TradingView' }));
+    await userEvent.click(screen.getByTestId('chartlib-toggle-button'));
     expect(useChartSettingsStore.getState().chartlib).toEqual('tradingview');
 
-    await userEvent.click(screen.getByRole('button', { name: 'Vega chart' }));
+    await userEvent.click(screen.getByTestId('chartlib-toggle-button'));
     expect(useChartSettingsStore.getState().chartlib).toEqual('pennant');
   });
 

apps/trading/components/chart-container/chart-menu.tsx

@@ -68,6 +68,7 @@ export const ChartMenu = () => {
         setChartlib(isPennant ? 'tradingview' : 'pennant');
       }}
       size="extra-small"
+      testId="chartlib-toggle-button"
     >
       {isPennant ? 'TradingView' : t('Vega chart')}
     </TradingButton>

apps/trading/components/chart-container/use-chart-settings.ts

@@ -9,6 +9,7 @@ type StudySizes = { [S in Study]?: number };
 export type Chartlib = 'pennant' | 'tradingview';
 
 interface StoredSettings {
+  state: object | undefined; // Don't see a better type provided from TradingView type definitions
   chartlib: Chartlib;
   // For interval we use the enum from @vegaprotocol/types, this is to make mapping between different
   // chart types easier and more consistent
@@ -17,7 +18,6 @@ interface StoredSettings {
   overlays: Overlay[];
   studies: Study[];
   studySizes: StudySizes;
-  tradingViewStudies: string[];
 }
 
 export const STUDY_SIZE = 90;
@@ -30,13 +30,13 @@ const STUDY_ORDER: Study[] = [
 ];
 
 export const DEFAULT_CHART_SETTINGS = {
+  state: undefined,
   chartlib: 'pennant' as const,
   interval: Interval.INTERVAL_I15M,
   type: ChartType.CANDLE,
   overlays: [Overlay.MOVING_AVERAGE],
   studies: [Study.MACD, Study.VOLUME],
   studySizes: {},
-  tradingViewStudies: ['Volume'],
 };
 
 export const useChartSettingsStore = create<
@@ -47,7 +47,7 @@ export const useChartSettingsStore = create<
     setStudies: (studies?: Study[]) => void;
     setStudySizes: (sizes: number[]) => void;
     setChartlib: (lib: Chartlib) => void;
-    setTradingViewStudies: (studies: string[]) => void;
+    setState: (state: object) => void;
   }
 >()(
   persist(
@@ -95,10 +95,8 @@ export const useChartSettingsStore = create<
           state.chartlib = lib;
         });
       },
-      setTradingViewStudies: (studies: string[]) => {
-        set((state) => {
-          state.tradingViewStudies = studies;
-        });
+      setState: (state) => {
+        set({ state });
       },
     })),
     {
@@ -147,13 +145,13 @@ export const useChartSettings = () => {
     overlays,
     studies,
     studySizes,
-    tradingViewStudies: settings.tradingViewStudies,
     setInterval: settings.setInterval,
     setType: settings.setType,
     setStudies: settings.setStudies,
     setOverlays: settings.setOverlays,
     setStudySizes: settings.setStudySizes,
     setChartlib: settings.setChartlib,
-    setTradingViewStudies: settings.setTradingViewStudies,
+    state: settings.state,
+    setState: settings.setState,
   };
 };

apps/trading/components/grid-settings/grid-settings.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GridSettings } from './grid-settings';
+import '@testing-library/jest-dom';
+
+describe('GridSettings', () => {
+  it('calls updateGridStore with correct arguments on button click', async () => {
+    const mockUpdateGridStore = jest.fn();
+    const { getByText } = render(
+      <GridSettings updateGridStore={mockUpdateGridStore} />
+    );
+
+    await userEvent.click(getByText('Reset Columns'));
+
+    expect(mockUpdateGridStore).toHaveBeenCalledWith({
+      columnState: undefined,
+      filterModel: undefined,
+    });
+  });
+});

apps/trading/components/navbar/navbar.tsx

@@ -162,6 +162,8 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
   const envNameMapping = useEnvNameMapping();
   const { VEGA_ENV, VEGA_NETWORKS, GITHUB_FEEDBACK_URL } = useEnvironment();
   const marketId = useGlobalStore((store) => store.marketId);
+  const GOVERNANCE_LINK = useLinks(DApp.Governance)();
+  const EXPLORER_LINK = useLinks(DApp.Explorer)();
 
   return (
     <div className="gap-3 lg:flex lg:h-full">
@@ -220,7 +222,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
           </NavbarLink>
         </NavbarItem>
         <NavbarItem>
-          <NavbarLinkExternal to={useLinks(DApp.Governance)()}>
+          <NavbarLinkExternal to={GOVERNANCE_LINK}>
             {t('Governance')}
           </NavbarLinkExternal>
         </NavbarItem>
@@ -228,6 +230,13 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
           <NavbarTrigger>{t('Resources')}</NavbarTrigger>
           <NavbarContent data-testid="navbar-content-resources">
             <ul className="lg:p-4">
+              {EXPLORER_LINK && (
+                <NavbarSubItem>
+                  <NavbarLinkExternal to={EXPLORER_LINK}>
+                    {t('Explorer')}
+                  </NavbarLinkExternal>
+                </NavbarSubItem>
+              )}
               {DocsLinks?.NEW_TO_VEGA && (
                 <NavbarSubItem>
                   <NavbarLinkExternal to={DocsLinks?.NEW_TO_VEGA}>

apps/trading/components/rewards-container/active-rewards.spec.tsx

@@ -98,6 +98,7 @@ describe('ActiveRewards', () => {
         transferNode={mockTransferNode}
         currentEpoch={1}
         kind={mockRecurringTransfer}
+        allMarkets={{}}
       />
     );
 

apps/trading/components/rewards-container/active-rewards.tsx

@@ -1,48 +1,46 @@
-import {
-  useActiveRewardsQuery,
-  useMarketForRewardsQuery,
-} from './__generated__/Rewards';
+import { useActiveRewardsQuery } from './__generated__/Rewards';
 import { useT } from '../../lib/use-t';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import classNames from 'classnames';
 import {
-  Icon,
   type IconName,
+  type VegaIconSize,
+  Icon,
   Intent,
   Tooltip,
   VegaIcon,
   VegaIconNames,
-  type VegaIconSize,
   TradingInput,
   TinyScroll,
 } from '@vegaprotocol/ui-toolkit';
 import { IconNames } from '@blueprintjs/icons';
 import {
+  type Maybe,
+  type Transfer,
+  type TransferNode,
+  type RecurringTransfer,
   DistributionStrategyDescriptionMapping,
   DistributionStrategyMapping,
   EntityScope,
   EntityScopeMapping,
-  type Maybe,
-  type Transfer,
-  type TransferNode,
   TransferStatus,
   TransferStatusMapping,
   DispatchMetric,
   DispatchMetricDescription,
   DispatchMetricLabels,
-  type RecurringTransfer,
   EntityScopeLabelMapping,
+  MarketState,
 } from '@vegaprotocol/types';
 import { Card } from '../card/card';
 import { useMemo, useState } from 'react';
 import {
   type AssetFieldsFragment,
-  useAssetDataProvider,
   useAssetsMapProvider,
 } from '@vegaprotocol/assets';
 import {
   type MarketFieldsFragment,
   useMarketsMapProvider,
+  getAsset,
 } from '@vegaprotocol/markets';
 
 export type Filter = {
@@ -74,7 +72,7 @@ export const isActiveReward = (node: TransferNode, currentEpoch: number) => {
 export const applyFilter = (
   node: TransferNode & {
     asset?: AssetFieldsFragment | null;
-    marketIds?: (MarketFieldsFragment | null)[];
+    markets?: (MarketFieldsFragment | null)[];
   },
   filter: Filter
 ) => {
@@ -85,6 +83,7 @@ export const applyFilter = (
   ) {
     return false;
   }
+
   if (
     DispatchMetricLabels[transfer.kind.dispatchStrategy.dispatchMetric]
       .toLowerCase()
@@ -98,7 +97,7 @@ export const applyFilter = (
     node.asset?.name
       .toLocaleLowerCase()
       .includes(filter.searchTerm.toLowerCase()) ||
-    node.marketIds?.some((m) =>
+    node.markets?.some((m) =>
       m?.tradableInstrument?.instrument?.name
         .toLocaleLowerCase()
         .includes(filter.searchTerm.toLowerCase())
@@ -124,7 +123,7 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
   const { data: assets } = useAssetsMapProvider();
   const { data: markets } = useMarketsMapProvider();
 
-  const transfers = activeRewardsData?.transfersConnection?.edges
+  const enrichedTransfers = activeRewardsData?.transfersConnection?.edges
     ?.map((e) => e?.node as TransferNode)
     .filter((node) => isActiveReward(node, currentEpoch))
     .map((node) => {
@@ -138,19 +137,19 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
           node.transfer.kind.dispatchStrategy?.dispatchMetricAssetId || ''
         ];
 
-      const marketIds =
+      const marketsInScope =
         node.transfer.kind.dispatchStrategy?.marketIdsInScope?.map(
           (id) => markets && markets[id]
         );
 
-      return { ...node, asset, marketIds };
+      return { ...node, asset, markets: marketsInScope };
     });
 
-  if (!transfers || !transfers.length) return null;
+  if (!enrichedTransfers || !enrichedTransfers.length) return null;
 
   return (
     <Card title={t('Active rewards')} className="lg:col-span-full">
-      {transfers.length > 1 && (
+      {enrichedTransfers.length > 1 && (
         <TradingInput
           onChange={(e) =>
             setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
@@ -166,7 +165,7 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
         />
       )}
       <TinyScroll className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(335px,_1fr))] max-h-[40rem] overflow-auto pr-2">
-        {transfers
+        {enrichedTransfers
           .filter((n) => applyFilter(n, filter))
           .map((node, i) => {
             const { transfer } = node;
@@ -184,6 +183,7 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
                   transferNode={node}
                   kind={transfer.kind}
                   currentEpoch={currentEpoch}
+                  allMarkets={markets || {}}
                 />
               )
             );
@@ -207,14 +207,8 @@ const StatusIndicator = ({
     switch (status) {
       case TransferStatus.STATUS_DONE:
         return { icon: IconNames.TICK_CIRCLE, intent: Intent.Success };
-      case TransferStatus.STATUS_CANCELLED:
-        return { icon: IconNames.MOON, intent: Intent.None };
-      case TransferStatus.STATUS_PENDING:
-        return { icon: IconNames.HELP, intent: Intent.Primary };
       case TransferStatus.STATUS_REJECTED:
         return { icon: IconNames.ERROR, intent: Intent.Danger };
-      case TransferStatus.STATUS_STOPPED:
-        return { icon: IconNames.ERROR, intent: Intent.Danger };
       default:
         return { icon: IconNames.HELP, intent: Intent.Primary };
     }
@@ -253,49 +247,117 @@ export const ActiveRewardCard = ({
   transferNode,
   currentEpoch,
   kind,
+  allMarkets,
 }: {
-  transferNode: TransferNode;
+  transferNode: TransferNode & {
+    asset?: AssetFieldsFragment | null;
+    markets?: (MarketFieldsFragment | null)[];
+  };
   currentEpoch: number;
   kind: RecurringTransfer;
+  allMarkets?: Record<string, MarketFieldsFragment | null>;
 }) => {
   const t = useT();
 
   const { transfer } = transferNode;
   const { dispatchStrategy } = kind;
-  const marketIds = dispatchStrategy?.marketIdsInScope;
 
-  const { data: marketNameData } = useMarketForRewardsQuery({
-    variables: {
-      marketId: marketIds ? marketIds[0] : '',
-    },
-  });
+  const marketIdsInScope = dispatchStrategy?.marketIdsInScope;
+  const firstMarketData = transferNode.markets?.[0];
 
-  const marketName = useMemo(() => {
-    if (marketNameData && marketIds && marketIds.length > 1) {
-      return 'Specific markets';
-    } else if (
-      marketNameData &&
-      marketIds &&
-      marketNameData &&
-      marketIds.length === 1
+  const specificMarkets = useMemo(() => {
+    if (
+      !firstMarketData ||
+      !marketIdsInScope ||
+      marketIdsInScope.length === 0
     ) {
-      return marketNameData?.market?.tradableInstrument?.instrument?.name || '';
+      return null;
     }
-    return '';
-  }, [marketIds, marketNameData]);
+    if (marketIdsInScope.length > 1) {
+      const marketNames =
+        allMarkets &&
+        marketIdsInScope
+          .map((id) => allMarkets[id]?.tradableInstrument?.instrument?.name)
+          .join(', ');
 
-  const { data: dispatchAsset } = useAssetDataProvider(
-    dispatchStrategy?.dispatchMetricAssetId || ''
-  );
+      return (
+        <Tooltip description={marketNames}>
+          <span>Specific markets</span>
+        </Tooltip>
+      );
+    }
+    return (
+      <span>{firstMarketData?.tradableInstrument?.instrument?.name || ''}</span>
+    );
+  }, [firstMarketData, marketIdsInScope, allMarkets]);
+
+  const dispatchAsset = transferNode.asset;
 
   if (!dispatchStrategy) {
     return null;
   }
 
-  const { gradientClassName, mainClassName } = getGradientClasses(
-    dispatchStrategy.dispatchMetric
+  // Gray out/hide the cards that are related to not trading markets
+  const marketSettled = transferNode.markets?.some(
+    (m) =>
+      m?.state &&
+      [
+        MarketState.STATE_TRADING_TERMINATED,
+        MarketState.STATE_SETTLED,
+        MarketState.STATE_CANCELLED,
+        MarketState.STATE_CLOSED,
+      ].includes(m.state)
   );
 
+  const assetInSettledMarket =
+    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 false;
+    });
+
+  if (marketSettled) {
+    return null;
+  }
+
+  // Gray out the cards that are related to suspended markets
+  const suspended = 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
+  const { gradientClassName, mainClassName } =
+    suspended || assetInSuspendedMarket || assetInSettledMarket
+      ? {
+          gradientClassName: 'from-vega-cdark-500 to-vega-clight-400',
+          mainClassName: 'from-vega-cdark-400 dark:from-vega-cdark-600 to-20%',
+        }
+      : getGradientClasses(dispatchStrategy.dispatchMetric);
+
   const entityScope = dispatchStrategy.entityScope;
   return (
     <div>
@@ -373,8 +435,20 @@ export const ActiveRewardCard = ({
 
           <span className="border-[0.5px] border-gray-700" />
           <span>
-            {DispatchMetricLabels[dispatchStrategy.dispatchMetric]}
-            {marketName ? ` • ${marketName}` : ` • ${dispatchAsset?.name}`}
+            {DispatchMetricLabels[dispatchStrategy.dispatchMetric]} •{' '}
+            <Tooltip
+              underline={suspended}
+              description={
+                (suspended || assetInSuspendedMarket) &&
+                (specificMarkets
+                  ? t('Eligible market(s) currently suspended')
+                  : assetInSuspendedMarket
+                  ? t('Currently no markets eligible for reward')
+                  : '')
+              }
+            >
+              <span>{specificMarkets || dispatchAsset?.name}</span>
+            </Tooltip>
           </span>
 
           <div className="flex items-center gap-8 flex-wrap">

apps/trading/e2e/poetry.lock

@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.6.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.7.1 and should not be changed by hand.
 
 [[package]]
 name = "certifi"
@@ -1161,7 +1161,7 @@ profile = ["pytest-profiling", "snakeviz"]
 type = "git"
 url = "https://github.com/vegaprotocol/vega-market-sim.git/"
 reference = "HEAD"
-resolved_reference = "2aed8c94b25d8fa2e376d3b63ca1f9193d28cdfd"
+resolved_reference = "4440abbb6ce0d3e80beba5cd01f20cd21983cbf8"
 
 [[package]]
 name = "websocket-client"

apps/trading/e2e/tests/deal_ticket/test_isolated_cross_margin.py

@@ -0,0 +1,53 @@
+import pytest
+from playwright.sync_api import Page, expect
+from vega_sim.null_service import VegaServiceNull
+from actions.vega import submit_order
+from actions.utils import next_epoch, wait_for_toast_confirmation
+
+tooltip_content = "tooltip-content"
+leverage_input = "#leverage-input"
+tab_positions = "tab-positions"
+margin_row = '[col-id="margin"]'
+
+
+def create_position(vega: VegaServiceNull, market_id):
+    submit_order(vega, "Key 1", market_id, "SIDE_SELL", 100, 110)
+    submit_order(vega, "Key 1", market_id, "SIDE_BUY", 100, 110)
+    vega.wait_fn(1)
+    vega.wait_for_total_catchup
+
+
+@pytest.mark.usefixtures("auth", "risk_accepted")
+def test_switch_cross_isolated_margin(
+        continuous_market, vega: VegaServiceNull, page: Page):
+    create_position(vega, continuous_market)
+    page.goto(f"/#/markets/{continuous_market}")
+    expect(page.locator(margin_row).nth(1)).to_have_text("874.21992Cross1.0x")
+    # tbd - tooltip is not visible without this wait
+    page.wait_for_timeout(1000)
+    page.get_by_test_id(tab_positions).get_by_text("Cross").hover()
+    expect(page.get_by_test_id(tooltip_content).nth(0)).to_have_text(
+        "Liquidation: 582.81328Margin: 874.21992General account: 998,084.95183"
+    )
+    page.get_by_role("button", name="Isolated 10x").click()
+    page.locator(leverage_input).clear()
+    page.locator(leverage_input).type("1")
+    page.get_by_role("button", name="Confirm").click()
+    wait_for_toast_confirmation(page)
+    next_epoch(vega=vega)
+    expect(page.get_by_test_id("toast-content")).to_have_text(
+        "ConfirmedYour transaction has been confirmedView in block explorerUpdate margin modeBTC:DAI_2023Isolated margin mode, leverage: 1.0x")
+    expect(page.locator(margin_row).nth(1)
+           ).to_have_text("11,109.99996Isolated1.0x")
+    # tbd - tooltip is not visible without this wait
+    page.wait_for_timeout(1000)
+    page.get_by_test_id(tab_positions).get_by_text("Isolated").hover()
+    expect(page.get_by_test_id(tooltip_content).nth(0)).to_have_text(
+        "Liquidation: 583.62409Margin: 11,109.99996Order: 11,000.00"
+    )
+    page.get_by_role("button", name="Cross").click()
+    page.get_by_role("button", name="Confirm").click()
+    wait_for_toast_confirmation(page)
+    next_epoch(vega=vega)
+    expect(page.locator(margin_row).nth(1)).to_have_text(
+        "22,109.99996Cross1.0x")

apps/trading/e2e/tests/fees/test_fees.py

@@ -681,4 +681,4 @@ def test_fills_taker_fee_tooltip_discount_program(
     row.locator(COL_FEE).hover()
     expect(page.get_by_test_id(FEE_BREAKDOWN_TOOLTIP)).to_have_text(
         f"If the market was activeFees to be paid by the taker; discounts are already applied.Infrastructure fee{infra_fee} tDAILiquidity fee0.00 tDAIMaker fee{maker_fee} tDAITotal fees{total_fee} tDAI"
-    )
+    )

apps/trading/e2e/tests/get_started/test_get_started.py

@@ -146,29 +146,6 @@ class TestGetStarted:
         # 0007-FUGS-007
         expect(page.get_by_test_id("dialog-content").nth(1)).to_be_visible()
 
-    def test_browser_wallet_installed(self, simple_market, page: Page):
-        page.add_init_script("window.vega = {}")
-        page.goto(f"/#/markets/{simple_market}")
-        locator = page.get_by_test_id("connect-vega-wallet")
-        page.wait_for_selector('[data-testid="connect-vega-wallet"]', state="attached")
-        expect(locator).to_be_enabled
-        expect(locator).to_be_visible
-        expect(locator).to_have_text("Connect")
-
-    @pytest.mark.usefixtures("risk_accepted")
-    def test_get_started_deal_ticket(self,simple_market, page: Page):
-        page.goto(f"/#/markets/{simple_market}")
-        expect(page.get_by_test_id("order-connect-wallet")).to_have_text("Connect wallet")
-
-
-    @pytest.mark.usefixtures("risk_accepted")
-    def test_browser_wallet_installed_deal_ticket(simple_market, page: Page):
-        page.add_init_script("window.vega = {}")
-        page.goto(f"/#/markets/{simple_market}")
-        # 0007-FUGS-013
-        page.wait_for_selector('[data-testid="sidebar-content"]', state="visible")
-        expect(page.get_by_test_id("get-started-banner")).not_to_be_visible()
-
     @pytest.mark.skip("tbd-market-sim")
     def test_redirect_default_market(self, continuous_market, vega: VegaServiceNull, page: Page):
         page.goto("/")
@@ -179,11 +156,3 @@ class TestGetStarted:
         page.get_by_test_id("icon-cross").click()
         # 0007-FUGS-018
         expect(page.get_by_test_id("welcome-dialog")).not_to_be_visible()
-
-class TestBrowseAll:
-    def test_get_started_browse_all(self, simple_market, vega: VegaServiceNull, page: Page):
-        page.goto("/")
-        print(simple_market)
-        page.get_by_test_id("browse-markets-button").click()
-        # 0007-FUGS-005
-        expect(page).to_have_url(f"http://localhost:{vega.console_port}/#/markets/{simple_market}")

apps/trading/e2e/tests/liquidity_provision/test_liquidity_provision.py

@@ -16,34 +16,44 @@ def vega(request):
 def continuous_market(vega):
     return setup_continuous_market(vega)
 
+
 @pytest.mark.usefixtures("auth", "risk_accepted")
-def test_liquidity_provision_amendment(continuous_market, vega: VegaServiceNull, page: Page):
+def test_liquidity_provision_amendment(
+    continuous_market, vega: VegaServiceNull, page: Page
+):
     # TODO Refactor asserting the grid
     page.goto(f"/#/liquidity/{continuous_market}")
     change_keys(page, vega, "market_maker")
-    row = page.get_by_test_id(
-        "tab-myLP").locator(".ag-center-cols-container .ag-row").first
-    expect(row).to_contain_text(
-        "Active"
+    row = (
+        page.get_by_test_id("tab-myLP")
+        .locator(".ag-center-cols-container .ag-row")
+        .first
     )
+    expect(row).to_contain_text("Active")
     # 5002-LIQP-006
-    expect(page.get_by_test_id("target-stake")
-           ).to_have_text("Target stake5.82757 tDAI")
+    expect(page.get_by_test_id("target-stake")).to_have_text("Target stake5.82757 tDAI")
     # 5002-LIQP-007
-    expect(page.get_by_test_id("supplied-stake")
-           ).to_have_text("Supplied stake10,000.00 tDAI")
+    expect(page.get_by_test_id("supplied-stake")).to_have_text(
+        "Supplied stake10,000.00 tDAI"
+    )
     # 5002-LIQP-008
-    expect(page.get_by_test_id("liquidity-supplied")
-           ).to_have_text("Liquidity supplied 171,598.11%")
+    expect(page.get_by_test_id("liquidity-supplied")).to_have_text(
+        "Liquidity supplied 171,598.11%"
+    )
     expect(page.get_by_test_id("fees-paid")).to_have_text("Fees paid-")
     # 5002-LIQP-009
-    expect(page.get_by_test_id("liquidity-market-id")
-           ).to_have_text("Market ID" + truncate_middle(continuous_market))
-    expect(page.get_by_test_id("liquidity-learn-more")
-           ).to_have_text("Learn moreProviding liquidity")
+    expect(page.get_by_test_id("liquidity-market-id")).to_have_text(
+        "Market ID" + truncate_middle(continuous_market)
+    )
+    expect(page.get_by_test_id("liquidity-learn-more")).to_have_text(
+        "Learn moreProviding liquidity"
+    )
     # 002-LIQP-010
-    expect(page.get_by_test_id("liquidity-learn-more").get_by_test_id("external-link")
-           ).to_have_attribute("href", "https://docs.vega.xyz/testnet/concepts/liquidity/provision")
+    expect(
+        page.get_by_test_id("liquidity-learn-more").get_by_test_id("external-link")
+    ).to_have_attribute(
+        "href", "https://docs.vega.xyz/testnet/concepts/liquidity/provision"
+    )
 
     vega.submit_simple_liquidity(
         key_name="market_maker",
@@ -56,41 +66,50 @@ def test_liquidity_provision_amendment(continuous_market, vega: VegaServiceNull,
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
     page.reload()
-    row = page.get_by_test_id(
-        "tab-myLP").locator(".ag-center-cols-container .ag-row").first
-    expect(row).to_contain_text(
-        "Updating next epoch"
+    row = (
+        page.get_by_test_id("tab-myLP")
+        .locator(".ag-center-cols-container .ag-row")
+        .first
+    )
+    expect(row).to_contain_text("Updating next epoch")
+    next_epoch(vega=vega)
+    page.reload()
+    expect(page.get_by_test_id("supplied-stake")).to_have_text(
+        "Supplied stake1.00001 tDAI"
+    )
+    expect(page.get_by_test_id("liquidity-supplied")).to_have_text(
+        "Liquidity supplied 17.16%"
+    )
+    row = (
+        page.get_by_test_id("tab-myLP")
+        .locator(".ag-center-cols-container .ag-row")
+        .first
+    )
+    expect(row).to_contain_text("Active")
+
+
+@pytest.mark.usefixtures("auth", "risk_accepted")
+def test_liquidity_provision_cancelled(
+    continuous_market, vega: VegaServiceNull, page: Page
+):
+    page.goto(f"/#/liquidity/{continuous_market}")
+    change_keys(page, vega, "market_maker")
+    row = (
+        page.get_by_test_id("tab-myLP")
+        .locator(".ag-center-cols-container .ag-row")
+        .first
+    )
+    expect(row).to_contain_text("Active")
+    vega.cancel_liquidity(
+        key_name="market_maker",
+        market_id=continuous_market,
     )
     next_epoch(vega=vega)
     page.reload()
-    expect(page.get_by_test_id("supplied-stake")
-           ).to_have_text("Supplied stake1.00001 tDAI")
-    expect(page.get_by_test_id("liquidity-supplied")
-           ).to_have_text("Liquidity supplied 17.16%")
-    row = page.get_by_test_id(
-        "tab-myLP").locator(".ag-center-cols-container .ag-row").first
-    expect(row).to_contain_text(
-        "Active"
+    expect(page.get_by_test_id("supplied-stake")).to_have_text(
+        "Supplied stake0.00 tDAI"
     )
-
-
-@pytest.mark.skip("Waiting for the ability to cancel LP")
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_liquidity_provision_inactive(continuous_market, vega: VegaServiceNull, page: Page):
-    # TODO Refactor asserting the grid
-    page.goto(f"/#/liquidity/{continuous_market}")
-    change_keys(page, vega, "market_maker")
-    row = page.get_by_test_id(
-        "tab-myLP").locator(".ag-center-cols-container .ag-row").first
-    expect(row).to_contain_text(
-        "Active"
+    expect(page.get_by_test_id("liquidity-supplied")).to_have_text(
+        "Liquidity supplied 0.00%"
     )
-    vega.submit_simple_liquidity(
-        key_name="market_maker",
-        market_id=continuous_market,
-        commitment_amount=0,
-        fee=0,
-        is_amendment=False,
-    )
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
+    expect(page.locator(".ag-overlay-panel")).to_have_text("No data")

apps/trading/e2e/tests/market/test_market.py

@@ -1,222 +0,0 @@
-import pytest
-from playwright.sync_api import Page, expect
-from vega_sim.null_service import VegaServiceNull
-from actions.vega import submit_order
-from actions.utils import change_keys
-from wallet_config import MM_WALLET, MM_WALLET2
-import logging
-
-logger = logging.getLogger()
-
-table_row_selector = (
-    '[data-testid="tab-open-markets"] .ag-center-cols-container .ag-row'
-)
-trading_mode_col = '[col-id="tradingMode"]'
-state_col = '[col-id="state"]'
-item_value = "item-value"
-price_monitoring_bounds_row = "key-value-table-row"
-market_trading_mode = "market-trading-mode"
-market_state = "market-state"
-liquidity_supplied = "liquidity-supplied"
-item_value = "item-value"
-price_monitoring_bounds_row = "key-value-table-row"
-market_trading_mode = "market-trading-mode"
-market_state = "market-state"
-liquidity_supplied = "liquidity-supplied"
-
-initial_commitment: float = 100
-initial_price: float = 1
-initial_volume: float = 1
-initial_spread: float = 0.1
-market_name = "BTC:DAI_2023"
-
-@pytest.mark.skip("tbd")
-@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_price_monitoring(simple_market, vega: VegaServiceNull, page: Page):
-    page.goto(f"/#/markets/all")
-    expect(page.locator(table_row_selector).locator(trading_mode_col)).to_have_text(
-        "Opening auction"
-    )
-    expect(page.locator(table_row_selector).locator('[col-id="state"]')).to_have_text(
-        "Pending"
-    )
-    result = page.get_by_text(market_name)
-    result.first.click()
-    page.get_by_test_id(market_trading_mode).get_by_text("Opening auction").hover()
-    expect(page.get_by_test_id("opening-auction-sub-status").first).to_have_text(
-        "Opening auction: Not enough liquidity to open"
-    )
-    logger.info(page.get_by_test_id("opening-auction-sub-status").inner_text)
-    vega.submit_liquidity(
-        key_name=MM_WALLET.name,
-        market_id=simple_market,
-        commitment_amount=initial_commitment,
-        fee=0.002,
-        is_amendment=False,
-    )
-
-    vega.submit_order(
-        market_id=simple_market,
-        trading_key=MM_WALLET.name,
-        side="SIDE_BUY",
-        order_type="TYPE_LIMIT",
-        price=initial_price - 0.0005,
-        wait=False,
-        time_in_force="TIME_IN_FORCE_GTC",
-        volume=99,
-    )
-    vega.submit_order(
-        market_id=simple_market,
-        trading_key=MM_WALLET.name,
-        side="SIDE_SELL",
-        order_type="TYPE_LIMIT",
-        price=initial_price + 0.0005,
-        wait=False,
-        time_in_force="TIME_IN_FORCE_GTC",
-        volume=99,
-    )
-    # 6002-MDET-009
-    expect(
-        page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
-    ).to_have_text("0.00 (0.00%)")
-
-    # add orders to provide liquidity
-    submit_order(
-        vega, MM_WALLET.name, simple_market, "SIDE_BUY", initial_volume, initial_price
-    )
-    submit_order(
-        vega, MM_WALLET.name, simple_market, "SIDE_SELL", initial_volume, initial_price
-    )
-    submit_order(
-        vega,
-        MM_WALLET.name,
-        simple_market,
-        "SIDE_BUY",
-        initial_volume,
-        initial_price + initial_spread / 2,
-    )
-    submit_order(
-        vega,
-        MM_WALLET.name,
-        simple_market,
-        "SIDE_SELL",
-        initial_volume,
-        initial_price + initial_spread / 2,
-    )
-    submit_order(
-        vega, MM_WALLET2.name, simple_market, "SIDE_SELL", initial_volume, initial_price
-    )
-    expect(
-        page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
-    ).to_have_text("100.00 (>100%)")
-    vega.forward("10s")
-    vega.wait_fn(10)
-    vega.wait_for_total_catchup()
-    expect(
-        page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
-    ).to_have_text("50.00 (>100%)")
-
-    page.goto(f"/#/markets/all")
-    # temporary skip
-    # expect(page.locator(table_row_selector).locator(trading_mode_col)).to_have_text(
-    #     "Continuous"
-    # )
-
-    # commented out because we have an issue #4233
-    # expect(page.locator(row_selector).locator(state_col)
-    #        ).to_have_text("Pending")
-
-    page.goto(f"/#/markets/all")
-    result = page.get_by_text(market_name)
-    result.first.click()
-
-    page.get_by_test_id("Info").click()
-    page.get_by_test_id("accordion-title").get_by_text(
-        "Price monitoring bounds 1"
-    ).click()
-    expect(
-        page.get_by_test_id(price_monitoring_bounds_row).first.get_by_text(
-            "1.32217 BTC"
-        )
-    ).to_be_visible()
-    expect(
-        page.get_by_test_id(price_monitoring_bounds_row).last.get_by_text("0.79245 BTC")
-    ).to_be_visible()
-
-    # add orders that change the price so that it goes beyond the limits of price monitoring
-    submit_order(vega, MM_WALLET.name, simple_market, "SIDE_SELL", 100, 110)
-    submit_order(vega, MM_WALLET2.name, simple_market, "SIDE_BUY", 100, 90)
-    submit_order(vega, MM_WALLET.name, simple_market, "SIDE_SELL", 100, 105)
-    submit_order(vega, MM_WALLET2.name, simple_market, "SIDE_BUY", 100, 95)
-
-    # add order at the current price so that it is possible to change the status to price monitoring
-    to_cancel = submit_order(vega, MM_WALLET2.name, simple_market, "SIDE_BUY", 1, 105)
-
-    vega.forward("10s")
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-    expect(
-        page.get_by_test_id(price_monitoring_bounds_row).first.get_by_text(
-            "135.44204 BTC"
-        )
-    ).to_be_visible()
-    expect(
-        page.get_by_test_id(price_monitoring_bounds_row).last.get_by_text(
-            "81.17758 BTC"
-        )
-    ).to_be_visible()
-    expect(
-        page.get_by_test_id(market_trading_mode).get_by_test_id(item_value)
-    ).to_have_text("Monitoring auction - price")
-    expect(page.get_by_test_id(market_state).get_by_test_id(item_value)).to_have_text(
-        "Suspended"
-    )
-    expect(
-        page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
-    ).to_have_text("50.00 (8.78%)")
-
-    # cancel order to increase liquidity
-    vega.cancel_order(MM_WALLET2.name, simple_market, to_cancel)
-
-    vega.forward("10s")
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-
-    expect(page.get_by_text(market_name).first).to_be_attached()
-    expect(
-        page.get_by_test_id(market_trading_mode).get_by_test_id(item_value)
-    ).to_have_text("Continuous")
-    expect(page.get_by_test_id(market_state).get_by_test_id(item_value)).to_have_text(
-        "Active"
-    )
-    # commented out because we have an issue #4233
-    # expect(page.get_by_text("Opening auction")).to_be_hidden()
-
-    # 6002-MDET-009
-    expect(
-        page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
-    ).to_have_text("50.00 (>100%)")
-
-
-COL_ID_FEE = ".ag-center-cols-container [col-id='fee'] .ag-cell-value"
-
-
-@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_auction_uncross_fees(continuous_market, vega: VegaServiceNull, page: Page):
-    page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id("Fills").click()
-    expect(page.locator(COL_ID_FEE)).to_have_text("0.00 tDAI")
-    # tbd - tooltip is not visible without this wait
-    page.wait_for_timeout(1000)
-    page.get_by_role("gridcell", name="0.00 tDAI").nth(0).hover()
-    expect(page.get_by_test_id("fee-breakdown-tooltip")).to_have_text(
-        "If the market was suspendedDuring auction, half the infrastructure and liquidity fees will be paid.Infrastructure fee0.00 tDAILiquidity fee0.00 tDAIMaker fee0.00 tDAITotal fees0.00 tDAI"
-    )
-    change_keys(page, vega, "market_maker")
-    expect(page.locator(COL_ID_FEE)).to_have_text("0.00 tDAI")
-    # tbd - tooltip is not visible without this wait
-    page.wait_for_timeout(1000)
-    page.get_by_role("gridcell", name="0.00 tDAI").nth(0).hover()
-    expect(page.get_by_test_id("fee-breakdown-tooltip")).to_have_text(
-        "If the market was suspendedDuring auction, half the infrastructure and liquidity fees will be paid.Infrastructure fee0.00 tDAILiquidity fee0.00 tDAIMaker fee0.00 tDAITotal fees0.00 tDAI"
-    )

apps/trading/e2e/tests/market/test_monitoring_auction_price_volatility_market.py

@@ -4,9 +4,14 @@ 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 actions.utils import wait_for_toast_confirmation
+from actions.utils import wait_for_toast_confirmation, change_keys
 from wallet_config import MM_WALLET, MM_WALLET2
 
+market_trading_mode = "market-trading-mode"
+market_state = "market-state"
+item_value = "item-value"
+
+COL_ID_FEE = ".ag-center-cols-container [col-id='fee'] .ag-cell-value"
 
 @pytest.fixture(scope="module")
 def vega(request):
@@ -133,3 +138,29 @@ def test_market_monitoring_auction_price_volatility_market_order(
         "This market is in auction due to high price volatility. Only limit orders are permitted when market is in auction."
     )
     expect(page.get_by_test_id("deal-ticket-error-message-type")).to_be_visible()
+
+@pytest.mark.usefixtures("risk_accepted", "auth", "setup_market_monitoring_auction")
+def test_market_price_volatility(
+    page: Page, simple_market, vega: VegaServiceNull
+):
+    page.goto(f"/#/markets/{simple_market}")
+    expect(
+        page.get_by_test_id(market_trading_mode).get_by_test_id(item_value)
+    ).to_have_text("Monitoring auction - price")
+    expect(page.get_by_test_id(market_state).get_by_test_id(item_value)).to_have_text(
+        "Suspended"
+    )
+
+@pytest.mark.usefixtures("risk_accepted", "auth", "setup_market_monitoring_auction")
+def test_auction_uncross_fees(simple_market, vega: VegaServiceNull, page: Page):
+    page.goto(f"/#/markets/{simple_market}")
+    change_keys(page, vega, "market_maker")
+    page.get_by_test_id("Fills").click()
+    row = page.locator('[row-index="3"]').nth(1)
+    expect(row.locator('[col-id="fee"]')).to_have_text("0.00 tDAI")
+    # tbd - tooltip is not visible without this wait
+    page.wait_for_timeout(1000)
+    row.locator('[col-id="fee"]').hover()
+    expect(page.get_by_test_id("fee-breakdown-tooltip")).to_have_text(
+        "If the market was suspendedDuring auction, half the infrastructure and liquidity fees will be paid.Infrastructure fee0.00 tDAILiquidity fee0.00 tDAIMaker fee0.00 tDAITotal fees0.00 tDAI"
+    )

apps/trading/e2e/tests/order/test_order_match.py

@@ -29,13 +29,15 @@ def verify_data_grid(page: Page, data_test_id, expected_pattern):
                 logger.info(f"Matched: {expected} == {actual}")
             else:
                 logger.info(f"Not Matched: {expected} != {actual}")
-                raise AssertionError(f"Pattern does not match: {expected} != {actual}")
+                raise AssertionError(
+                    f"Pattern does not match: {expected} != {actual}")
         else:  # it's not a regex, so we escape it
             if re.search(re.escape(expected), actual):
                 logger.info(f"Matched: {expected} == {actual}")
             else:
                 logger.info(f"Not Matched: {expected} != {actual}")
-                raise AssertionError(f"Pattern does not match: {expected} != {actual}")
+                raise AssertionError(
+                    f"Pattern does not match: {expected} != {actual}")
 
 
 def submit_order(vega: VegaServiceNull, wallet_name, market_id, side, volume, price):
@@ -91,7 +93,7 @@ def test_limit_order_trade_open_position(continuous_market, page: Page):
         "average_entry_price": "107.50",
         "mark_price": "107.50",
         "margin": "8.50269",
-        "leverage": "1.0x",
+        "leverage": "Cross1.0x",
         "liquidation": "0.00",
         "realised_pnl": "0.00",
         "unrealised_pnl": "0.00",
@@ -104,7 +106,8 @@ def test_limit_order_trade_open_position(continuous_market, page: Page):
     # 7004-POSI-002
 
     size_and_notional = table.locator("[col-id='openVolume']")
-    expect(size_and_notional.get_by_test_id(primary_id)).to_have_text(position["size"])
+    expect(size_and_notional.get_by_test_id(
+        primary_id)).to_have_text(position["size"])
     expect(size_and_notional.get_by_test_id(secondary_id)).to_have_text(
         position["notional"]
     )

apps/trading/e2e/tests/positions/test_collateral.py

@@ -28,8 +28,9 @@ def test_usage_breakdown(continuous_market, page: Page):
     usage_breakdown = page.get_by_test_id("usage-breakdown")
 
     # Verify headers
-    headers = ["Market", "Account type", "Balance", "Margin health"]
-    ag_headers = usage_breakdown.locator(".ag-header-cell-text").element_handles()
+    headers = ["Market", "Account type", "Balance"]
+    ag_headers = usage_breakdown.locator(
+        ".ag-header-cell-text").element_handles()
     for i, header_element in enumerate(ag_headers):
         header_text = header_element.text_content()
         assert header_text == headers[i]
@@ -38,30 +39,10 @@ def test_usage_breakdown(continuous_market, page: Page):
     expect(usage_breakdown.locator('[class="mb-2 text-sm"]')).to_have_text(
         "You have 1,000,000.00 tDAI in total."
     )
-    expect(usage_breakdown.locator(COL_ID_USED).first).to_have_text("8.50269 (0%)")
+    expect(usage_breakdown.locator(
+        COL_ID_USED).first).to_have_text("8.50269 (0%)")
     expect(usage_breakdown.locator(COL_ID_USED).nth(1)).to_have_text(
         "999,991.49731 (99%)"
     )
 
-    # Maintenance Level
-    expect(
-        usage_breakdown.locator(
-            ".ag-center-cols-container [col-id='market.id'] .ag-cell-value"
-        ).first
-    ).to_have_text("2.85556 above maintenance level")
-
-    # Margin health tooltip
-    usage_breakdown.get_by_test_id("margin-health-chart-track").hover()
-    tooltip_data = [
-        ("maintenance level", "5.64713"),
-        ("search level", "6.21184"),
-        ("initial level", "8.47069"),
-        ("balance", "8.50269"),
-        ("release level", "9.60012"),
-    ]
-
-    for index, (label, value) in enumerate(tooltip_data):
-        expect(page.get_by_test_id(TOOLTIP_LABEL).nth(index)).to_have_text(label)
-        expect(page.get_by_test_id(TOOLTIP_VALUE).nth(index)).to_have_text(value)
-
     page.get_by_test_id("dialog-close").click()

apps/trading/e2e/tests/rewards/test_filtered_cards.py

@@ -0,0 +1,67 @@
+import pytest
+import vega_sim.proto.vega as vega_protos
+from playwright.sync_api import Page, expect
+from vega_sim.null_service import VegaServiceNull
+from actions.utils import next_epoch
+from wallet_config import MM_WALLET, PARTY_A, PARTY_B
+from vega_sim.service import MarketStateUpdateType
+import vega_sim.api.governance as governance
+
+
+@pytest.mark.usefixtures("risk_accepted", "auth")
+def test_filtered_cards(continuous_market, vega: VegaServiceNull, page: Page):
+    tDAI_asset_id = vega.find_asset_id(symbol="tDAI")
+    vega.update_network_parameter(
+        MM_WALLET.name, parameter="reward.asset", new_value=tDAI_asset_id
+    )
+    vega.mint(key_name=PARTY_B.name, asset=tDAI_asset_id, amount=100000)
+    vega.mint(key_name=PARTY_A.name, asset=tDAI_asset_id, amount=100000)
+    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",
+        markets=[continuous_market],
+        asset_for_metric=tDAI_asset_id,
+        metric=vega_protos.vega.DISPATCH_METRIC_MAKER_FEES_PAID,
+        lock_period=5,
+        amount=100,
+        factor=1.0,
+    )
+    vega.submit_order(
+        trading_key=PARTY_B.name,
+        market_id=continuous_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=continuous_market,
+        order_type="TYPE_MARKET",
+        time_in_force="TIME_IN_FORCE_IOC",
+        side="SIDE_BUY",
+        volume=1,
+    )
+    next_epoch(vega=vega)
+
+    vega.update_market_state(
+        market_id=continuous_market,
+        proposal_key=MM_WALLET.name,
+        market_state=MarketStateUpdateType.Suspend,
+        forward_time_to_enactment=True,
+    )
+    next_epoch(vega=vega)
+    page.goto("/#/rewards")
+    expect(page.locator(".from-vega-cdark-400")).to_be_visible()
+    governance.submit_oracle_data(
+        wallet=vega.wallet,
+        payload={"trading.terminated": "true"},
+        key_name="FJMKnwfZdd48C8NqvYrG",
+    )
+    next_epoch(vega=vega)
+    page.reload()
+    expect(page.locator(".from-vega-cdark-400")).not_to_be_in_viewport()

apps/trading/e2e/tests/settings/test_column_settings.py

@@ -1,36 +0,0 @@
-import pytest
-from playwright.sync_api import expect, Page
-
-settings_icon = "icon-cog"
-settings_column_btn = "popover-trigger"
-settings_close_btn = "settings-close"
-split_view_view = "split-view-view"
-
-@pytest.mark.usefixtures("page", "continuous_market", "auth", "risk_accepted")
-def test_column_settings_is_visible(continuous_market, page: Page):
-    page.goto(f"/#/markets/{continuous_market}")
-    expect(page.get_by_test_id(split_view_view).get_by_test_id(settings_column_btn)).to_be_visible()
-    page.goto("/#/portfolio")
-    expect(page.get_by_test_id(split_view_view).get_by_test_id(settings_column_btn).nth(0)).to_be_visible()
-    expect(page.get_by_test_id(split_view_view).get_by_test_id(settings_column_btn).nth(1)).to_be_visible()
-    page.goto(f"/#/markets/all")
-    expect(page.get_by_test_id(settings_column_btn)).to_be_visible()
-    page.click('[data-testid="Proposed markets"]')
-    expect(page.get_by_test_id(settings_column_btn)).to_be_visible()
-    page.click('[data-testid="Closed markets"]')
-    expect(page.get_by_test_id(settings_column_btn)).to_be_visible()
-
-@pytest.mark.usefixtures("page", "continuous_market", "auth", "risk_accepted")
-def test_can_reset_columns_state(continuous_market, page: Page):
-    page.goto(f"/#/markets/all")
-    col_market = page.locator('[col-id="tradableInstrument.instrument.code"]').first
-    col_settlement_asset = page.locator('[col-id="tradableInstrument.instrument.product.settlementAsset.symbol"]').first
-    col_market.drag_to(col_settlement_asset)
-
-    # Check the attribute of the dragged element
-    attribute_value = col_market.get_attribute("aria-colindex")
-    assert attribute_value != "1"
-    page.get_by_test_id(settings_column_btn).click()
-    page.get_by_role("button", name="Reset Columns").click()
-    attribute_value_after_reset = col_market.get_attribute("aria-colindex")
-    assert attribute_value_after_reset  == "1"

apps/trading/e2e/tests/trade_history/test_trade_history.py

@@ -1,78 +0,0 @@
-import pytest
-import re
-import logging
-from playwright.sync_api import expect
-from actions.vega import submit_order
-from conftest import init_vega
-from playwright.sync_api import Page
-from vega_sim.null_service import VegaServiceNull
-
-logger = logging.getLogger()
-
-
-@pytest.fixture(scope="module")
-def vega():
-    with init_vega() as vega:
-        yield vega
-
-
-# Could be turned into a helper function in the future.
-def verify_data_grid(page: Page, data_test_id, expected_pattern):
-    page.get_by_test_id(data_test_id).click()
-    # Required so that we can get liquidation price
-    expect(
-        page.locator(
-            f'[data-testid^="tab-{data_test_id.lower()}"] >> .ag-center-cols-container .ag-row-first'
-        )
-    ).to_be_visible()
-    actual_text = page.locator(
-        f'[data-testid^="tab-{data_test_id.lower()}"] >> .ag-center-cols-container'
-    ).text_content()
-    lines = actual_text.strip().split("\n")
-    for expected, actual in zip(expected_pattern, lines):
-        # We are using regex so that we can run tests in different timezones.
-        if re.match(r"^\\d", expected):  # check if it's a regex
-            if re.search(expected, actual):
-                logger.info(f"Matched: {expected} == {actual}")
-            else:
-                logger.info(f"Not Matched: {expected} != {actual}")
-                raise AssertionError(f"Pattern does not match: {expected} != {actual}")
-        else:  # it's not a regex, so we escape it
-            if re.search(re.escape(expected), actual):
-                logger.info(f"Matched: {expected} == {actual}")
-            else:
-                logger.info(f"Not Matched: {expected} != {actual}")
-                raise AssertionError(f"Pattern does not match: {expected} != {actual}")
-
-
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_limit_order_new_trade_top_of_list(
-    continuous_market, vega: VegaServiceNull, page: Page
-):
-    submit_order(vega, "Key 1", continuous_market, "SIDE_BUY", 1, 110)
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-    page.goto(f"/#/markets/{continuous_market}")
-    expected_trade = [
-        "103.50",
-        "1",
-        r"\d{1,2}/\d{1,2}/\d{4},\s*\d{1,2}:\d{2}:\d{2}\s*(?:AM|PM)" "107.50",
-        "1",
-        r"\d{1,2}/\d{1,2}/\d{4},\s*\d{1,2}:\d{2}:\d{2}\s*(?:AM|PM)",
-    ]
-    # 6005-THIS-001
-    # 6005-THIS-002
-    # 6005-THIS-003
-    # 6005-THIS-004
-    # 6005-THIS-005
-    # 6005-THIS-006
-    verify_data_grid(page, "Trades", expected_trade)
-
-
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_price_copied_to_deal_ticket(continuous_market, page: Page):
-    page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id("Trades").click()
-    page.locator("[col-id=price]").nth(1).click()
-    # 6005-THIS-007
-    expect(page.get_by_test_id("order-price")).to_have_value("107.50000")

apps/trading/e2e/tests/wallet/test_wallet.py

@@ -1,133 +0,0 @@
-import pytest
-import re
-import json
-from playwright.sync_api import Page, expect, Route
-from conftest import init_vega
-from fixtures.market import setup_continuous_market
-
-order_size = "order-size"
-order_price = "order-price"
-place_order = "place-order"
-order_side_sell = "order-side-SIDE_SELL"
-market_order = "order-type-Market"
-tif = "order-tif"
-expire = "expire"
-api_request_match = r"http://localhost:\d+/api/v2/requests"
-
-
-@pytest.fixture(scope="module")
-def vega(request):
-    with init_vega(request) as vega:
-        yield vega
-
-
-@pytest.fixture(scope="module")
-def continuous_market(vega):
-    return setup_continuous_market(vega)
-
-
-def handle_route_connection_lost(route: Route, request):
-    if request.method == "POST" and re.match(api_request_match, request.url):
-        route.fulfill(
-            status=200,
-            headers={"Content-Type": "application/json"},
-            body='{"jsonrpc": "2.0", "id": "1"}',
-        )
-    else:
-        route.continue_()
-
-
-def handle_route_connection_rejected(route: Route, request):
-    if request.method == "POST" and re.match(api_request_match, request.url):
-        custom_response = {
-            "jsonrpc": "2.0",
-            "error": {
-                "code": 3001,
-                "data": "the user rejected the wallet connection",
-                "message": "User error",
-            },
-            "id": "0",
-        }
-        route.fulfill(
-            status=400,
-            headers={"Content-Type": "application/json"},
-            body=json.dumps(custom_response),
-        )
-    else:
-        route.continue_()
-
-
-def assert_connection_approve(route: Route, request, page: Page):
-    if request.method == "POST" and re.match(api_request_match, request.url):
-        expect(page.get_by_test_id("toast-content")).to_have_text(
-            "Please go to your Vega wallet application and approve or reject the transaction."
-        )
-    else:
-        route.continue_()
-
-
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_wallet_connection_error(continuous_market, page: Page):
-    page.goto(f"/#/markets/{continuous_market}")
-    page.route("**/*", handle_route_connection_lost)
-    page.get_by_test_id("connect-vega-wallet").click()
-    page.get_by_test_id("connector-jsonRpc").click()
-    expect(page.get_by_test_id("wallet-dialog-title")).to_have_text(
-        "Something went wrong"
-    )
-
-
-@pytest.mark.usefixtures("risk_accepted")
-def test_wallet_connection_rejected(continuous_market, page: Page):
-    # 0002-WCON-002
-    # 0002-WCON-005
-    # 0002-WCON-007
-    # 0002-WCON-015
-    page.goto(f"/#/markets/{continuous_market}")
-    page.route("**/*", handle_route_connection_rejected)
-    page.get_by_test_id("connect-vega-wallet").click()
-    page.get_by_test_id("connector-jsonRpc").click()
-    expect(page.get_by_test_id("dialog-content").nth(1)).to_have_text(
-        "User errorthe user rejected the wallet connectionTry againAbout the Vega wallet  | Supported browsers "
-    )
-
-
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_wallet_connection_error_transaction(continuous_market, page: Page):
-    # 0003-WTXN-009
-    # 0003-WTXN-011
-    # 0002-WCON-016
-    # 0003-WTXN-008
-    page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id(order_size).fill("10")
-    page.get_by_test_id(order_price).fill("120")
-    page.route("**/*", handle_route_connection_lost)
-    page.get_by_test_id(place_order).click()
-    expect(page.get_by_test_id("toast-content")).to_have_text(
-        "Wallet disconnectedThe connection to your Vega Wallet has been lost.Connect vega wallet"
-    )
-
-
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_wallet_transaction_rejected(continuous_market, page: Page):
-    # 0003-WTXN-007
-    page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id(order_size).fill("10")
-    page.get_by_test_id(order_price).fill("120")
-    page.route("**/*", handle_route_connection_rejected)
-    page.get_by_test_id(place_order).click()
-    expect(page.get_by_test_id("toast-content").nth(0)).to_have_text(
-        "Error occurredthe user rejected the wallet connection"
-    )
-
-
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_wallet_connection_approve(continuous_market, page: Page):
-    # 0002-WCON-005
-    # 0002-WCON-007
-    # 0002-WCON-009
-    page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id(order_size).fill("10")
-    page.get_by_test_id(order_price).fill("120")
-    page.route("**/*", assert_connection_approve)
-    page.get_by_test_id(place_order).click()

apps/trading/lib/hooks/use-wallet-disconnected-toasts.tsx

@@ -1,62 +0,0 @@
-import {
-  Intent,
-  useToasts,
-  ToastHeading,
-  CLOSE_AFTER,
-} from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEffect, useMemo } from 'react';
-import { useT } from '../use-t';
-import { VegaWalletConnectButton } from '../../components/vega-wallet-connect-button';
-
-const WALLET_DISCONNECTED_TOAST_ID = 'WALLET_DISCONNECTED_TOAST_ID';
-
-export const useWalletDisconnectedToasts = () => {
-  const t = useT();
-  const [hasToast, setToast, updateToast] = useToasts((state) => [
-    state.hasToast,
-    state.setToast,
-    state.update,
-  ]);
-  const { isAlive } = useVegaWallet();
-
-  const toast = useMemo(
-    () => ({
-      id: WALLET_DISCONNECTED_TOAST_ID,
-      intent: Intent.Danger,
-      content: (
-        <>
-          <ToastHeading>{t('Wallet connection lost')}</ToastHeading>
-          <p>{t('The connection to the Vega wallet has been lost.')}</p>
-          <p className="mt-2">
-            <VegaWalletConnectButton
-              intent={Intent.Danger}
-              onClick={() => {
-                updateToast(WALLET_DISCONNECTED_TOAST_ID, {
-                  hidden: true,
-                });
-              }}
-            />
-          </p>
-        </>
-      ),
-      onClose: () => {
-        updateToast(WALLET_DISCONNECTED_TOAST_ID, {
-          hidden: true,
-        });
-      },
-      closeAfter: CLOSE_AFTER,
-    }),
-    [t, updateToast]
-  );
-
-  useEffect(() => {
-    if (isAlive === false) {
-      if (hasToast(WALLET_DISCONNECTED_TOAST_ID)) {
-        updateToast(WALLET_DISCONNECTED_TOAST_ID, { hidden: false });
-      } else {
-        setToast(toast);
-      }
-    }
-  }, [hasToast, isAlive, setToast, t, toast, updateToast]);
-};

apps/trading/pages/toasts-manager.tsx

@@ -1,4 +1,4 @@
-import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
+import { Intent, ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
 import { useProposalToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
@@ -6,7 +6,26 @@ import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
 import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';
 import { Links } from '../lib/links';
 import { useReferralToasts } from '../client-pages/referrals/hooks/use-referral-toasts';
-import { useWalletDisconnectedToasts } from '../lib/hooks/use-wallet-disconnected-toasts';
+import {
+  useWalletDisconnectToastActions,
+  useWalletDisconnectedToasts,
+} from '@vegaprotocol/web3';
+import { VegaWalletConnectButton } from '../components/vega-wallet-connect-button';
+
+const WalletDisconnectAdditionalContent = () => {
+  const { hideToast } = useWalletDisconnectToastActions();
+  return (
+    <p className="mt-2">
+      <VegaWalletConnectButton
+        intent={Intent.Danger}
+        onClick={() => {
+          // hide toast when clicked on `Connect`
+          hideToast();
+        }}
+      />
+    </p>
+  );
+};
 
 export const ToastsManager = () => {
   useProposalToasts();
@@ -17,7 +36,7 @@ export const ToastsManager = () => {
     withdrawalsLink: Links.PORTFOLIO(),
   });
   useReferralToasts();
-  useWalletDisconnectedToasts();
+  useWalletDisconnectedToasts(<WalletDisconnectAdditionalContent />);
 
   const toasts = useToasts((store) => store.toasts);
   return <ToastsContainer order="desc" toasts={toasts} />;

libs/accounts/src/lib/Margins.graphql

@@ -3,6 +3,9 @@ fragment MarginFields on MarginLevels {
   searchLevel
   initialLevel
   collateralReleaseLevel
+  marginFactor
+  marginMode
+  orderMarginLevel
   asset {
     id
   }
@@ -33,6 +36,9 @@ subscription MarginsSubscription($partyId: ID!) {
     searchLevel
     initialLevel
     collateralReleaseLevel
+    marginFactor
+    marginMode
+    orderMarginLevel
     timestamp
   }
 }

libs/accounts/src/lib/__generated__/Margins.ts

@@ -3,21 +3,21 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type MarginFieldsFragment = { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } };
+export type MarginFieldsFragment = { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, marginFactor: string, marginMode: Types.MarginMode, orderMarginLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } };
 
 export type MarginsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type MarginsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, marginsConnection?: { __typename?: 'MarginConnection', edges?: Array<{ __typename?: 'MarginEdge', node: { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } } }> | null } | null } | null };
+export type MarginsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, marginsConnection?: { __typename?: 'MarginConnection', edges?: Array<{ __typename?: 'MarginEdge', node: { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, marginFactor: string, marginMode: Types.MarginMode, orderMarginLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } } }> | null } | null } | null };
 
 export type MarginsSubscriptionSubscriptionVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type MarginsSubscriptionSubscription = { __typename?: 'Subscription', margins: { __typename?: 'MarginLevelsUpdate', marketId: string, asset: string, partyId: string, maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, timestamp: any } };
+export type MarginsSubscriptionSubscription = { __typename?: 'Subscription', margins: { __typename?: 'MarginLevelsUpdate', marketId: string, asset: string, partyId: string, maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, marginFactor: string, marginMode: Types.MarginMode, orderMarginLevel: string, timestamp: any } };
 
 export const MarginFieldsFragmentDoc = gql`
     fragment MarginFields on MarginLevels {
@@ -25,6 +25,9 @@ export const MarginFieldsFragmentDoc = gql`
   searchLevel
   initialLevel
   collateralReleaseLevel
+  marginFactor
+  marginMode
+  orderMarginLevel
   asset {
     id
   }
@@ -85,6 +88,9 @@ export const MarginsSubscriptionDocument = gql`
     searchLevel
     initialLevel
     collateralReleaseLevel
+    marginFactor
+    marginMode
+    orderMarginLevel
     timestamp
   }
 }

libs/accounts/src/lib/accounts-data-provider.ts

@@ -105,6 +105,7 @@ export interface AccountFields extends Account {
 // The total balance of these accounts will be used for the 'used' column in the
 // collateral table
 const USE_ACCOUNT_TYPES = [
+  AccountType.ACCOUNT_TYPE_ORDER_MARGIN,
   AccountType.ACCOUNT_TYPE_MARGIN,
   AccountType.ACCOUNT_TYPE_BOND,
   AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,

libs/accounts/src/lib/breakdown-table.spec.tsx

@@ -4,14 +4,6 @@ import * as Types from '@vegaprotocol/types';
 import type { AccountFields } from './accounts-data-provider';
 import { getAccountData } from './accounts-data-provider';
 
-const marginHealthChartTestId = 'margin-health-chart';
-
-jest.mock('./margin-health-chart', () => ({
-  MarginHealthChart: () => {
-    return <div data-testid={marginHealthChartTestId}></div>;
-  },
-}));
-
 const singleRow = {
   __typename: 'AccountBalance',
   type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
@@ -49,10 +41,10 @@ describe('BreakdownTable', () => {
       render(<BreakdownTable data={singleRowData} />);
     });
     const headers = await screen.findAllByRole('columnheader');
-    expect(headers).toHaveLength(4);
+    expect(headers).toHaveLength(3);
     expect(
       headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
-    ).toEqual(['Market', 'Account type', 'Balance', 'Margin health']);
+    ).toEqual(['Market', 'Account type', 'Balance']);
   });
 
   it('should apply correct formatting', async () => {
@@ -70,24 +62,6 @@ describe('BreakdownTable', () => {
     cells.slice(0, -1).forEach((cell, i) => {
       expect(cell).toHaveTextContent(expectedValues[i]);
     });
-    expect(screen.getByTestId(marginHealthChartTestId)).toBeInTheDocument();
-  });
-
-  it('displays margin health chart only for margin account', async () => {
-    await act(async () => {
-      render(
-        <BreakdownTable
-          data={[
-            {
-              ...singleRow,
-              type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
-              market: null,
-            },
-          ]}
-        />
-      );
-    });
-    expect(screen.queryByTestId(marginHealthChartTestId)).toBeNull();
   });
 
   it('should get correct account data', () => {

libs/accounts/src/lib/breakdown-table.tsx

@@ -16,14 +16,13 @@ import { ProgressBarCell } from '@vegaprotocol/datagrid';
 import { AgGrid, PriceCell } from '@vegaprotocol/datagrid';
 import type { ColDef } from 'ag-grid-community';
 import { accountValuesComparator } from './accounts-table';
-import { MarginHealthChart } from './margin-health-chart';
 import { MarketNameCell } from '@vegaprotocol/datagrid';
-import { AccountType } from '@vegaprotocol/types';
 
 const defaultColDef = {
   resizable: true,
   sortable: true,
   minWidth: 100,
+  flex: 1,
 };
 
 interface BreakdownTableProps extends AgGridReactProps {
@@ -39,7 +38,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
         {
           headerName: t('Market'),
           field: 'market.tradableInstrument.instrument.code',
-          width: 90,
+          maxWidth: 150,
           pinned: true,
           sort: 'desc',
           cellRenderer: ({
@@ -111,23 +110,6 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
           },
           comparator: accountValuesComparator,
         },
-        {
-          headerName: t('Margin health'),
-          field: 'market.id',
-          maxWidth: 500,
-          sortable: false,
-          cellRenderer: ({
-            data,
-          }: VegaICellRendererParams<AccountFields, 'market.id'>) =>
-            data?.market?.id &&
-            data.type === AccountType['ACCOUNT_TYPE_MARGIN'] &&
-            data?.asset.id ? (
-              <MarginHealthChart
-                marketId={data.market.id}
-                assetId={data.asset.id}
-              />
-            ) : null,
-        },
       ];
       return defs;
     }, [t]);

libs/accounts/src/lib/margin-data-provider.ts

@@ -20,14 +20,20 @@ const update = (
   return produce(data || [], (draft) => {
     const { marketId } = delta;
     const index = draft.findIndex((node) => node.market.id === marketId);
+    const deltaData = {
+      maintenanceLevel: delta.maintenanceLevel,
+      searchLevel: delta.searchLevel,
+      initialLevel: delta.initialLevel,
+      collateralReleaseLevel: delta.collateralReleaseLevel,
+      marginFactor: delta.marginFactor,
+      marginMode: delta.marginMode,
+      orderMarginLevel: delta.orderMarginLevel,
+    };
     if (index !== -1) {
       const currNode = draft[index];
       draft[index] = {
         ...currNode,
-        maintenanceLevel: delta.maintenanceLevel,
-        searchLevel: delta.searchLevel,
-        initialLevel: delta.initialLevel,
-        collateralReleaseLevel: delta.collateralReleaseLevel,
+        ...deltaData,
       };
     } else {
       draft.unshift({
@@ -36,10 +42,7 @@ const update = (
           __typename: 'Market',
           id: delta.marketId,
         },
-        maintenanceLevel: delta.maintenanceLevel,
-        searchLevel: delta.searchLevel,
-        initialLevel: delta.initialLevel,
-        collateralReleaseLevel: delta.collateralReleaseLevel,
+        ...deltaData,
         asset: {
           __typename: 'Asset',
           id: delta.asset,

libs/accounts/src/lib/margin-heath-chart.spec.tsx

@@ -5,6 +5,7 @@ import {
 import { act, render, screen } from '@testing-library/react';
 import type { MarginFieldsFragment } from './__generated__/Margins';
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { MarginMode } from '@vegaprotocol/types';
 
 const asset: AssetFieldsFragment = {
   id: 'assetId',
@@ -18,6 +19,9 @@ const margins: MarginFieldsFragment = {
   initialLevel: '800',
   searchLevel: '600',
   maintenanceLevel: '400',
+  marginFactor: '',
+  marginMode: MarginMode.MARGIN_MODE_CROSS_MARGIN,
+  orderMarginLevel: '',
   market: {
     id: 'marketId',
   },

libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx

@@ -13,6 +13,7 @@ import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { DealTicket } from './deal-ticket';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import { useT } from '../../use-t';
+import { MarginModeSelector } from './margin-mode-selector';
 
 interface DealTicketContainerProps {
   marketId: string;
@@ -51,21 +52,31 @@ export const DealTicketContainer = ({
       reload={reload}
     >
       {market && marketData ? (
-        featureFlags.STOP_ORDERS && showStopOrder ? (
-          <StopOrder
-            market={market}
-            marketPrice={marketPrice}
-            submit={(stopOrdersSubmission) => create({ stopOrdersSubmission })}
-          />
-        ) : (
-          <DealTicket
-            {...props}
-            market={market}
-            marketPrice={marketPrice}
-            marketData={marketData}
-            submit={(orderSubmission) => create({ orderSubmission })}
-          />
-        )
+        <>
+          {featureFlags.ISOLATED_MARGIN && (
+            <>
+              <MarginModeSelector marketId={marketId} />
+              <hr className="border-vega-clight-500 dark:border-vega-cdark-500 mb-4" />
+            </>
+          )}
+          {featureFlags.STOP_ORDERS && showStopOrder ? (
+            <StopOrder
+              market={market}
+              marketPrice={marketPrice}
+              submit={(stopOrdersSubmission) =>
+                create({ stopOrdersSubmission })
+              }
+            />
+          ) : (
+            <DealTicket
+              {...props}
+              market={market}
+              marketPrice={marketPrice}
+              marketData={marketData}
+              submit={(orderSubmission) => create({ orderSubmission })}
+            />
+          )}
+        </>
       ) : (
         <p>{t('Could not load market')}</p>
       )}

libs/deal-ticket/src/components/deal-ticket/margin-mode-selector.tsx

@@ -0,0 +1,246 @@
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import {
+  TradingButton as Button,
+  TradingInput as Input,
+  FormGroup,
+  LeverageSlider,
+} from '@vegaprotocol/ui-toolkit';
+import { MarginMode, useVegaWallet } from '@vegaprotocol/wallet';
+import * as Types from '@vegaprotocol/types';
+import {
+  type VegaTransactionStore,
+  useVegaTransactionStore,
+} from '@vegaprotocol/web3';
+import { Dialog } from '@vegaprotocol/ui-toolkit';
+import { useEffect, useState } from 'react';
+import { useT } from '../../use-t';
+import classnames from 'classnames';
+import { marketMarginDataProvider } from '@vegaprotocol/accounts';
+import { useMaxLeverage } from '@vegaprotocol/positions';
+
+const defaultLeverage = 10;
+interface MarginDialogProps {
+  open: boolean;
+  onClose: () => void;
+  marketId: string;
+  partyId: string;
+  create: VegaTransactionStore['create'];
+}
+
+const CrossMarginModeDialog = ({
+  open,
+  onClose,
+  marketId,
+  create,
+}: MarginDialogProps) => {
+  const t = useT();
+  return (
+    <Dialog
+      title={t('Cross margin')}
+      size="small"
+      open={open}
+      onChange={(isOpen) => {
+        if (!isOpen) {
+          onClose();
+        }
+      }}
+    >
+      <div className="text-sm mb-4">
+        <p className="mb-1">
+          {t('You are setting this market to cross-margin mode.')}
+        </p>
+        <p className="mb-1">
+          {t(
+            'Your max leverage on each position will be determined by the risk model of the market.'
+          )}
+        </p>
+        <p>
+          {t(
+            'All available funds in your general account will be used to finance your margin if the market moves against you.'
+          )}
+        </p>
+      </div>
+      <Button
+        className="w-full"
+        onClick={() => {
+          create({
+            updateMarginMode: {
+              market_id: marketId,
+              mode: MarginMode.MARGIN_MODE_CROSS_MARGIN,
+            },
+          });
+          onClose();
+        }}
+      >
+        {t('Confirm')}
+      </Button>
+    </Dialog>
+  );
+};
+
+const IsolatedMarginModeDialog = ({
+  open,
+  onClose,
+  marketId,
+  partyId,
+  marginFactor,
+  create,
+}: MarginDialogProps & { marginFactor: string }) => {
+  const [leverage, setLeverage] = useState(
+    Number((1 / Number(marginFactor)).toFixed(1))
+  );
+  const { data: maxLeverage } = useMaxLeverage(marketId, partyId);
+  const max = Math.floor((maxLeverage || 1) * 10) / 10;
+  useEffect(() => {
+    setLeverage(Number((1 / Number(marginFactor)).toFixed(1)));
+  }, [marginFactor]);
+  useEffect(() => {
+    if (maxLeverage && leverage > max) {
+      setLeverage(max);
+    }
+  }, [max, maxLeverage, leverage]);
+
+  const t = useT();
+  return (
+    <Dialog
+      title={t('Isolated margin')}
+      size="small"
+      open={open}
+      onChange={(isOpen) => {
+        if (!isOpen) {
+          onClose();
+        }
+      }}
+    >
+      <div className="text-sm mb-4">
+        <p className="mb-1">
+          {t('You are setting this market to isolated margin mode.')}
+        </p>
+        <p className="mb-1">
+          {t(
+            'Set the leverage you want below. The maximum leverage you can take is determined by the risk model of the market.'
+          )}
+        </p>
+        <p className="mb-1">
+          {t(
+            'Only your allocated margin will be used to fund this position, and if the maintenance margin is breached you will be closed out.'
+          )}
+        </p>
+      </div>
+      <form
+        onSubmit={() => {
+          create({
+            updateMarginMode: {
+              market_id: marketId,
+              mode: MarginMode.MARGIN_MODE_ISOLATED_MARGIN,
+              marginFactor: `${1 / leverage}`,
+            },
+          });
+          onClose();
+        }}
+      >
+        <FormGroup label={t('Leverage')} labelFor="leverage-input" compact>
+          <div className="mb-2">
+            <LeverageSlider
+              max={max}
+              step={0.1}
+              value={[leverage]}
+              onValueChange={([value]) => setLeverage(value)}
+            />
+          </div>
+          <Input
+            type="number"
+            id="leverage-input"
+            min={1}
+            max={max}
+            step={0.1}
+            value={leverage}
+            onChange={(e) => setLeverage(Number(e.target.value))}
+          />
+        </FormGroup>
+        <Button className="w-full" type="submit">
+          {t('Confirm')}
+        </Button>
+      </form>
+    </Dialog>
+  );
+};
+
+export const MarginModeSelector = ({ marketId }: { marketId: string }) => {
+  const t = useT();
+  const [dialog, setDialog] = useState<'cross' | 'isolated' | ''>();
+  const { pubKey: partyId, isReadOnly } = useVegaWallet();
+  const { data: margin } = useDataProvider({
+    dataProvider: marketMarginDataProvider,
+    variables: {
+      partyId: partyId || '',
+      marketId,
+    },
+    skip: !partyId,
+  });
+  useEffect(() => {
+    if (!partyId) {
+      setDialog('');
+    }
+  }, [partyId]);
+  const create = useVegaTransactionStore((state) => state.create);
+  const marginMode = margin?.marginMode;
+  const marginFactor =
+    margin?.marginFactor && margin?.marginFactor !== '0'
+      ? margin?.marginFactor
+      : undefined;
+  const disabled = isReadOnly;
+  const onClose = () => setDialog(undefined);
+  const enabledModeClassName = 'bg-vega-clight-500 dark:bg-vega-cdark-500';
+
+  return (
+    <>
+      <div className="mb-4 grid h-8 leading-8 font-alpha text-xs grid-cols-2">
+        <button
+          disabled={disabled}
+          onClick={() => partyId && setDialog('cross')}
+          className={classnames('rounded', {
+            [enabledModeClassName]:
+              !marginMode ||
+              marginMode === Types.MarginMode.MARGIN_MODE_CROSS_MARGIN,
+          })}
+        >
+          {t('Cross')}
+        </button>
+        <button
+          disabled={disabled}
+          onClick={() => partyId && setDialog('isolated')}
+          className={classnames('rounded', {
+            [enabledModeClassName]:
+              marginMode === Types.MarginMode.MARGIN_MODE_ISOLATED_MARGIN,
+          })}
+        >
+          {t('Isolated {{leverage}}x', {
+            leverage: marginFactor
+              ? (1 / Number(marginFactor)).toFixed(1)
+              : defaultLeverage,
+          })}
+        </button>
+      </div>
+      {partyId && (
+        <CrossMarginModeDialog
+          partyId={partyId}
+          open={dialog === 'cross'}
+          onClose={onClose}
+          marketId={marketId}
+          create={create}
+        />
+      )}
+      {partyId && (
+        <IsolatedMarginModeDialog
+          partyId={partyId}
+          open={dialog === 'isolated'}
+          onClose={onClose}
+          marketId={marketId}
+          create={create}
+          marginFactor={marginFactor || `${1 / defaultLeverage}`}
+        />
+      )}
+    </>
+  );
+};

libs/deposits/src/lib/deposit-form.spec.tsx

@@ -1,10 +1,4 @@
-import {
-  waitFor,
-  fireEvent,
-  render,
-  screen,
-  act,
-} from '@testing-library/react';
+import { waitFor, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BigNumber from 'bignumber.js';
 import type { DepositFormProps } from './deposit-form';
@@ -89,7 +83,10 @@ describe('Deposit form', () => {
     render(<DepositForm {...props} />);
 
     // Assert default values (including) from/to provided by useVegaWallet and useWeb3React
-    expect(screen.getByText('From (Ethereum address)')).toBeInTheDocument();
+    // Wait for first value to show as form is rendered conditionally based on chainId
+    expect(
+      await screen.findByText('From (Ethereum address)')
+    ).toBeInTheDocument();
     expect(screen.getByTestId('ethereum-address')).toHaveTextContent(
       truncateMiddle(MOCK_ETH_ADDRESS)
     );
@@ -319,34 +316,40 @@ describe('Deposit form', () => {
 
   it('shows "View asset details" button when an asset is selected', async () => {
     render(<DepositForm {...props} selectedAsset={asset} />);
-    expect(await screen.getByTestId('view-asset-details')).toBeInTheDocument();
+    expect(await screen.findByTestId('view-asset-details')).toBeInTheDocument();
   });
 
   it('does not shows "View asset details" button when no asset is selected', async () => {
     render(<DepositForm {...props} />);
-    expect(await screen.queryAllByTestId('view-asset-details')).toHaveLength(0);
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('view-asset-details')).toHaveLength(0);
+    });
   });
 
-  it('renders a connect button if Ethereum wallet is not connected', () => {
+  it('renders a connect button if Ethereum wallet is not connected', async () => {
     (useWeb3React as jest.Mock).mockReturnValue({
       isActive: false,
       account: '',
     });
+
     render(<DepositForm {...props} />);
 
-    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
+    expect(
+      await screen.findByRole('button', { name: 'Connect' })
+    ).toBeInTheDocument();
     expect(
       screen.queryByLabelText('From (Ethereum address)')
     ).not.toBeInTheDocument();
   });
 
-  it('renders a disabled input if Ethereum wallet is connected', () => {
+  it('renders a disabled input if Ethereum wallet is connected', async () => {
     (useWeb3React as jest.Mock).mockReturnValue({
       isActive: true,
       account: MOCK_ETH_ADDRESS,
     });
     render(<DepositForm {...props} />);
 
+    expect(await screen.findByTestId('deposit-form')).toBeInTheDocument();
     expect(
       screen.queryByRole('button', { name: 'Connect' })
     ).not.toBeInTheDocument();
@@ -356,53 +359,56 @@ describe('Deposit form', () => {
     );
   });
 
-  it('prevents submission if you are on the wrong chain', () => {
+  it('prevents submission if you are on the wrong chain', async () => {
+    // Make mocks return a chain id mismatch
     (useWeb3React as jest.Mock).mockReturnValue({
       isActive: true,
       account: MOCK_ETH_ADDRESS,
       chainId: 1,
     });
-    (useWeb3ConnectStore as unknown as jest.Mock).mockImplementation(
+    (useWeb3ConnectStore as unknown as jest.Mock).mockImplementationOnce(
       // eslint-disable-next-line
       (selector: (result: ReturnType<typeof useWeb3ConnectStore>) => any) => {
         return selector({
           desiredChainId: 11155111,
           open: jest.fn(),
-          foo: 'asdf',
         });
       }
     );
     render(<DepositForm {...props} />);
-    expect(screen.getByTestId('chain-error')).toHaveTextContent(
+
+    expect(await screen.findByTestId('chain-error')).toHaveTextContent(
       /this app only works on/i
     );
+
+    expect(screen.queryByTestId('deposit-form')).not.toBeInTheDocument();
   });
 
   it('Remaining deposit allowance tooltip should be rendered', async () => {
     render(<DepositForm {...props} selectedAsset={asset} />);
-    await act(async () => {
-      await userEvent.hover(screen.getByText('Remaining deposit allowance'));
-    });
-    await waitFor(async () => {
-      await expect(
-        screen.getByRole('tooltip', {
-          name: /VEGA has a lifetime deposit limit of 20 asset-symbol per address/,
-        })
-      ).toBeInTheDocument();
-    });
+
+    expect(await screen.findByTestId('deposit-form')).toBeInTheDocument();
+
+    await userEvent.hover(screen.getByText('Remaining deposit allowance'));
+
+    expect(
+      await screen.findByRole('tooltip', {
+        name: /VEGA has a lifetime deposit limit of 20 asset-symbol per address/,
+      })
+    ).toBeInTheDocument();
   });
 
   it('Ethereum deposit cap tooltip should be rendered', async () => {
     render(<DepositForm {...props} selectedAsset={asset} />);
-    await act(async () => {
-      await userEvent.hover(screen.getByText('Ethereum deposit cap'));
-    });
-    await waitFor(async () => {
-      await expect(
-        screen.getByRole('tooltip', {
-          name: /The deposit cap is set when you approve an asset for use with this app/,
-        })
-      ).toBeInTheDocument();
-    });
+
+    expect(await screen.findByTestId('deposit-form')).toBeInTheDocument();
+
+    await userEvent.hover(screen.getByText('Ethereum deposit cap'));
+
+    expect(
+      await screen.findByRole('tooltip', {
+        name: /The deposit cap is set when you approve an asset for use with this app/,
+      })
+    ).toBeInTheDocument();
   });
 });

libs/deposits/src/lib/deposit-form.tsx

@@ -92,7 +92,9 @@ export const DepositForm = ({
   const maxSafe = useMaxSafe();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   const openDialog = useWeb3ConnectStore((store) => store.open);
-  const { isActive, account } = useWeb3React();
+  const { isActive, account, chainId } = useWeb3React();
+  const desiredChainId = useWeb3ConnectStore((store) => store.desiredChainId);
+  const invalidChain = isActive && chainId !== desiredChainId;
   const { pubKey, pubKeys: _pubKeys } = useVegaWallet();
   const [approveNotificationIntent, setApproveNotificationIntent] =
     useState<Intent>(Intent.Warning);
@@ -152,7 +154,20 @@ export const DepositForm = ({
   const approved =
     balances && balances.allowance.isGreaterThan(0) ? true : false;
 
-  return (
+  return invalidChain ? (
+    <div className="mb-2">
+      <Notification
+        intent={Intent.Danger}
+        testId="chain-error"
+        message={t(
+          'This app only works on {{chainId}}. Switch your Ethereum wallet to the correct network.',
+          {
+            chainId: getChainName(desiredChainId),
+          }
+        )}
+      />
+    </div>
+  ) : (
     <form
       onSubmit={handleSubmit(onSubmit)}
       noValidate={true}
@@ -417,7 +432,11 @@ export const DepositForm = ({
         intent={approveNotificationIntent}
         amount={amount}
       />
-      <FormButton approved={approved} selectedAsset={selectedAsset} />
+      <FormButton
+        approved={approved}
+        isActive={isActive}
+        selectedAsset={selectedAsset}
+      />
     </form>
   );
 };
@@ -425,35 +444,21 @@ export const DepositForm = ({
 interface FormButtonProps {
   approved: boolean;
   selectedAsset: AssetFieldsFragment | undefined;
+  isActive: boolean;
 }
 
-const FormButton = ({ approved, selectedAsset }: FormButtonProps) => {
+const FormButton = ({ approved, selectedAsset, isActive }: FormButtonProps) => {
   const t = useT();
-  const { isActive, chainId } = useWeb3React();
-  const desiredChainId = useWeb3ConnectStore((store) => store.desiredChainId);
-  const invalidChain = isActive && chainId !== desiredChainId;
+
   return (
-    <>
-      {invalidChain && (
-        <div className="mb-2">
-          <Notification
-            intent={Intent.Danger}
-            testId="chain-error"
-            message={t('This app only works on {{chainId}}.', {
-              chainId: getChainName(desiredChainId),
-            })}
-          />
-        </div>
-      )}
-      <TradingButton
-        type="submit"
-        data-testid="deposit-submit"
-        fill
-        disabled={!isActive || invalidChain}
-      >
-        {t('Deposit')}
-      </TradingButton>
-    </>
+    <TradingButton
+      type="submit"
+      data-testid="deposit-submit"
+      fill
+      disabled={!isActive}
+    >
+      {t('Deposit')}
+    </TradingButton>
   );
 };
 

libs/environment/src/hooks/use-environment.ts

@@ -323,6 +323,9 @@ export const compileFeatureFlags = (refresh = false): FeatureFlags => {
     STOP_ORDERS: TRUTHY.includes(
       windowOrDefault('NX_STOP_ORDERS', process.env['NX_STOP_ORDERS']) as string
     ),
+    ISOLATED_MARGIN: TRUTHY.includes(
+      windowOrDefault('NX_STOP_ORDERS', process.env['NX_STOP_ORDERS']) as string
+    ),
     SUCCESSOR_MARKETS: TRUTHY.includes(
       windowOrDefault(
         'NX_SUCCESSOR_MARKETS',

libs/environment/src/hooks/use-links.ts

@@ -131,6 +131,7 @@ export const useEtherscanLink = () => {
 export const CONSOLE_TRANSFER = '#/portfolio/assets/transfer';
 export const CONSOLE_TRANSFER_ASSET =
   '#/portfolio/assets/transfer?assetId=:assetId';
+export const CONSOLE_MARKET_PAGE = '#/markets/:marketId';
 
 // Governance pages
 export const TOKEN_NEW_MARKET_PROPOSAL = '/proposals/propose/new-market';

libs/environment/src/types.ts

@@ -19,6 +19,7 @@ export type FeatureFlags = z.infer<typeof featureFlagsSchema>;
 export type CosmicElevatorFlags = Pick<
   FeatureFlags,
   | 'ICEBERG_ORDERS'
+  | 'ISOLATED_MARGIN'
   | 'STOP_ORDERS'
   | 'SUCCESSOR_MARKETS'
   | 'PRODUCT_PERPETUALS'

libs/environment/src/utils/validate-environment.ts

@@ -76,6 +76,7 @@ export const envSchema = z
 const COSMIC_ELEVATOR_FLAGS = {
   SUCCESSOR_MARKETS: z.optional(z.boolean()),
   STOP_ORDERS: z.optional(z.boolean()),
+  ISOLATED_MARGIN: z.optional(z.boolean()),
   ICEBERG_ORDERS: z.optional(z.boolean()),
   PRODUCT_PERPETUALS: z.optional(z.boolean()),
   METAMASK_SNAPS: z.optional(z.boolean()),

libs/i18n/src/locales/en/deal-ticket.json

@@ -8,13 +8,17 @@
   "A release candidate for the staging environment": "A release candidate for the staging environment",
   "above": "above",
   "Advanced": "Advanced",
+  "All available funds in your general account will be used to finance your margin if the market moves against you.": "All available funds in your general account will be used to finance your margin if the market moves against you.",
   "An estimate of the most you would be expected to pay in fees, in the market's settlement asset {{assetSymbol}}. Fees estimated are \"taker\" fees and will only be payable if the order trades aggressively. Rebate equal to the maker portion will be paid to the trader if the order trades passively.": "An estimate of the most you would be expected to pay in fees, in the market's settlement asset {{assetSymbol}}. Fees estimated are \"taker\" fees and will only be payable if the order trades aggressively. Rebate equal to the maker portion will be paid to the trader if the order trades passively.",
   "Any orders placed now will not trade until the auction ends": "Any orders placed now will not trade until the auction ends",
   "below": "below",
   "Cancel": "Cancel",
   "Closed": "Closed",
   "Closing on {{time}}": "Closing on {{time}}",
+  "Confirm": "Confirm",
   "Could not load market": "Could not load market",
+  "Cross": "Cross",
+  "Cross margin": "Cross margin",
   "Current margin allocation": "Current margin allocation",
   "Custom": "Custom",
   "Deduction from collateral": "Deduction from collateral",
@@ -35,6 +39,9 @@
   "Iceberg": "Iceberg",
   "ICEBERG_TOOLTIP": "Trade only a fraction of the order size at once. After the peak size of the order has traded, the size is reset. This is repeated until the order is cancelled, expires, or its full volume trades away. For example, an iceberg order with a size of 1000 and a peak size of 100 will effectively be split into 10 orders with a size of 100 each. Note that the full volume of the order is not hidden and is still reflected in the order book.",
   "Infrastructure fee": "Infrastructure fee",
+  "Isolated {{leverage}}x": "Isolated {{leverage}}x",
+  "Isolated margin": "Isolated margin",
+  "Leverage": "Leverage",
   "Limit": "Limit",
   "Liquidation": "Liquidation",
   "LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT": "This is an approximation for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.",
@@ -59,6 +66,7 @@
   "OCO": "OCO",
   "One cancels another": "One cancels another",
   "Only limit orders are permitted when market is in auction": "Only limit orders are permitted when market is in auction",
+  "Only your allocated margin will be used to fund this position, and if the maintenance margin is breached you will be closed out.": "Only your allocated margin will be used to fund this position, and if the maintenance margin is breached you will be closed out.",
   "Peak size": "Peak size",
   "Peak size cannot be greater than the size ({{size}})": "Peak size cannot be greater than the size ({{size}})",
   "Peak size cannot be lower than {{stepSize}}": "Peak size cannot be lower than {{stepSize}}",
@@ -75,6 +83,7 @@
   "Public testnet run by the Vega team, often used for incentives": "Public testnet run by the Vega team, often used for incentives",
   "Reduce only": "Reduce only",
   "Referral discount": "Referral discount",
+  "Set the leverage you want below. The maximum leverage you can take is determined by the risk model of the market.": "Set the leverage you want below. The maximum leverage you can take is determined by the risk model of the market.",
   "Short": "Short",
   "Size": "Size",
   "Size cannot be lower than {{sizeStep}}": "Size cannot be lower than {{sizeStep}}",
@@ -128,6 +137,8 @@
   "VALIDATOR_TESTNET": "VALIDATOR_TESTNET",
   "Volume discount": "Volume discount",
   "When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.": "When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.",
+  "You are setting this market to cross-margin mode.": "You are setting this market to cross-margin mode.",
+  "You are setting this market to isolated margin mode.": "You are setting this market to isolated margin mode.",
   "You have only {{amount}}.": "You have only {{amount}}.",
   "You may not have enough margin available to open this position.": "You may not have enough margin available to open this position.",
   "You need {{symbol}} in your wallet to trade in this market.": "You need {{symbol}} in your wallet to trade in this market.",
@@ -137,5 +148,6 @@
   "You need to connect your own wallet to start trading on this market": "You need to connect your own wallet to start trading on this market",
   "You need to provide a minimum visible size": "You need to provide a minimum visible size",
   "You need to provide a peak size": "You need to provide a peak size",
-  "You need to provide a size": "You need to provide a size"
+  "You need to provide a size": "You need to provide a size",
+  "Your max leverage on each position will be determined by the risk model of the market.": "Your max leverage on each position will be determined by the risk model of the market."
 }

libs/i18n/src/locales/en/deposits.json

@@ -27,7 +27,7 @@
   "The {{symbol}} faucet is not available at this time": "The {{symbol}} faucet is not available at this time",
   "The deposit cap is set when you approve an asset for use with this app. To increase this cap, approve {{assetSymbol}} again and choose a higher cap. Check the documentation for your Ethereum wallet app for details.": "The deposit cap is set when you approve an asset for use with this app. To increase this cap, approve {{assetSymbol}} again and choose a higher cap. Check the documentation for your Ethereum wallet app for details.",
   "The faucet transaction was rejected by the connected Ethereum wallet": "The faucet transaction was rejected by the connected Ethereum wallet",
-  "This app only works on {{chainId}}.": "This app only works on {{chainId}}.",
+  "This app only works on {{chainId}}. Switch your Ethereum wallet to the correct network.": "This app only works on {{chainId}}. Switch your Ethereum wallet to the correct network.",
   "To (Vega key)": "To (Vega key)",
   "To date, {{currentDeposit}} {{assetSymbol}} has been deposited from this Ethereum address, so you can deposit up to {{remainingDeposit}} {{assetSymbol}} more.": "To date, {{currentDeposit}} {{assetSymbol}} has been deposited from this Ethereum address, so you can deposit up to {{remainingDeposit}} {{assetSymbol}} more.",
   "Use maximum": "Use maximum",

libs/i18n/src/locales/en/governance.json

@@ -799,6 +799,8 @@
   "unsupportedVersion": "Looks like you're running an outdated version of GoWallet. You're running {{version}} but {{requiredVersion}} is required.",
   "UpdateAsset": "Update asset",
   "UpdateAssetProposal": "Update asset proposal",
+  "UpdateToMarket": "Update to market ID",
+  "OpenInConsole": "Open in Console",
   "UpdateMarket": "Update market",
   "UpdateMarketProposal": "Update market proposal",
   "UpdateMarketState": "Update market state",

libs/i18n/src/locales/en/markets.json

@@ -30,6 +30,7 @@
   "How often the quality of liquidity supplied by each liquidity provider is evaluated and the fees arising from that period are earmarked for specific providers. This is a market parameter. ": "How often the quality of liquidity supplied by each liquidity provider is evaluated and the fees arising from that period are earmarked for specific providers. This is a market parameter. ",
   "Instrument": "Instrument",
   "Insurance pool": "Insurance pool",
+  "Insurance Pool Balance": "Insurance Pool Balance",
   "Internal conditions": "Internal conditions",
   "Invalid data source": "Invalid data source",
   "involvedInMarkets_one": "Involved in {{count}} market",

libs/i18n/src/locales/en/positions.json

@@ -1,11 +1,17 @@
 {
   "Best case": "Best case",
+  "Cross": "Cross",
   "Close position": "Close position",
   "Entry / Mark": "Entry / Mark",
+  "General account: {{balance}}": "General account: {{balance}}",
+  "Isolated": "Isolated",
   "Lifetime loss socialisation deductions: {{losses}}": "Lifetime loss socialisation deductions: {{losses}}",
+  "Liquidation: {{maintenanceLevel}}": "Liquidation: {{maintenanceLevel}}",
   "Maintained by network": "Maintained by network",
   "Margin / Leverage": "Margin / Leverage",
+  "Margin: {{balance}}": "Margin: {{balance}}",
   "Market": "Market",
+  "Order: {{balance}}": "Order: {{balance}}",
   "No positions": "No positions",
   "Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.": "Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.",
   "Read more about loss socialisation": "Read more about loss socialisation",

libs/i18n/src/locales/en/wallet.json

@@ -53,7 +53,7 @@
   "Use the Desktop App/CLI": "Use the Desktop App/CLI",
   "User rejected": "User rejected",
   "Vega browser extension not installed": "Vega browser extension not installed",
-  "Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
+  "Vega Wallet <0>full featured</0>": "Vega Wallet <0>full featured</0>",
   "Verifying chain": "Verifying chain",
   "View as party": "View as party",
   "VIEW AS VEGA USER": "VIEW AS VEGA USER",

libs/i18n/src/locales/en/web3.json

@@ -43,6 +43,7 @@
   "Go to your Ethereum wallet and connect to the network {{networkName}}": "Go to your Ethereum wallet and connect to the network {{networkName}}",
   "If the network is reset or has an outage, records of your withdrawal may be lost. It is recommended that you save these details in a safe place so you can still complete your withdrawal.": "If the network is reset or has an outage, records of your withdrawal may be lost. It is recommended that you save these details in a safe place so you can still complete your withdrawal.",
   "Invalid asset source: {{source}}": "Invalid asset source: {{source}}",
+  "Isolated margin mode, leverage: {{leverage}}x": "Isolated margin mode, leverage: {{leverage}}x",
   "Loading": "Loading",
   "MetaMask": "MetaMask",
   "MetaMask, Brave or other injected web wallet": "MetaMask, Brave or other injected web wallet",
@@ -79,6 +80,7 @@
   "Transfer": "Transfer",
   "Transfer complete": "Transfer complete",
   "Unknown": "Unknown",
+  "Update margin mode": "Update margin mode",
   "Vega confirmation": "Vega confirmation",
   "Vega is confirming your transaction...": "Vega is confirming your transaction...",
   "Verifying withdrawal approval": "Verifying withdrawal approval",

libs/markets/src/lib/components/market-info/MarketInfo.graphql

@@ -139,7 +139,6 @@ query MarketInfo($marketId: ID!) {
     state
     tradingMode
     linearSlippageFactor
-    quadraticSlippageFactor
     proposal {
       id
       rationale {

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -177,7 +177,7 @@ export const InsurancePoolInfoPanel = ({
   return (
     <MarketInfoTable
       data={{
-        balance: account.balance,
+        insurancePoolBalance: account.balance,
       }}
       assetSymbol={asset.symbol}
       decimalPlaces={asset.decimals}
@@ -551,7 +551,6 @@ export const MarginScalingFactorsPanel = ({
 }: MarketInfoProps) => {
   const data = {
     linearSlippageFactor: market.linearSlippageFactor,
-    quadraticSlippageFactor: market.quadraticSlippageFactor,
     searchLevel:
       market.tradableInstrument.marginCalculator?.scalingFactors.searchLevel,
     initialMargin:
@@ -564,7 +563,6 @@ export const MarginScalingFactorsPanel = ({
   const parentData = parentMarket
     ? {
         linearSlippageFactor: parentMarket?.linearSlippageFactor,
-        quadraticSlippageFactor: parentMarket?.quadraticSlippageFactor,
         searchLevel:
           parentMarket?.tradableInstrument.marginCalculator?.scalingFactors
             .searchLevel,

libs/markets/src/lib/components/market-info/market-info.mock.ts

@@ -24,7 +24,6 @@ export const marketInfoQuery = (
         },
       },
       linearSlippageFactor: '0.01',
-      quadraticSlippageFactor: '0.0001',
       marketTimestamps: {
         __typename: 'MarketTimestamps',
         open: '2022-11-15T02:15:24.543614154Z',

libs/positions/src/lib/positions-data-providers.spec.ts

@@ -174,13 +174,13 @@ const marketsData = [
 describe('getMetrics && rejoinPositionData', () => {
   it('returns positions metrics', () => {
     const positionsRejoined = rejoinPositionData(positions, marketsData);
-    const metrics = getMetrics(positionsRejoined, accounts || null);
+    const metrics = getMetrics(positionsRejoined, accounts || null, null);
     expect(metrics.length).toEqual(2);
   });
 
   it('calculates metrics', () => {
     const positionsRejoined = rejoinPositionData(positions, marketsData);
-    const metrics = getMetrics(positionsRejoined, accounts || null);
+    const metrics = getMetrics(positionsRejoined, accounts || null, null);
 
     expect(metrics[0].assetSymbol).toEqual('tDAI');
     expect(metrics[0].averageEntryPrice).toEqual('8993727');

libs/positions/src/lib/positions-data-providers.ts

@@ -1,19 +1,26 @@
 import isEqual from 'lodash/isEqual';
 import produce from 'immer';
-import BigNumber from 'bignumber.js';
 import sortBy from 'lodash/sortBy';
-import { type Account } from '@vegaprotocol/accounts';
+import {
+  marginsDataProvider,
+  type Account,
+  type MarginFieldsFragment,
+  marketMarginDataProvider,
+} from '@vegaprotocol/accounts';
 import { accountsDataProvider } from '@vegaprotocol/accounts';
 import { toBigNum, removePaginationWrapper } from '@vegaprotocol/utils';
 import {
   makeDataProvider,
   makeDerivedDataProvider,
+  useDataProvider,
 } from '@vegaprotocol/data-provider';
 import {
   type MarketMaybeWithData,
   type MarketDataQueryVariables,
   allMarketsWithLiveDataProvider,
   getAsset,
+  marketInfoProvider,
+  type MarketInfo,
 } from '@vegaprotocol/markets';
 import {
   PositionsDocument,
@@ -26,6 +33,7 @@ import {
 } from './__generated__/Positions';
 import {
   AccountType,
+  MarginMode,
   MarketState,
   type MarketTradingMode,
   type PositionStatus,
@@ -33,6 +41,8 @@ import {
 } from '@vegaprotocol/types';
 
 export interface Position {
+  marginMode: MarginFieldsFragment['marginMode'];
+  maintenanceLevel: MarginFieldsFragment['maintenanceLevel'] | undefined;
   assetId: string;
   assetSymbol: string;
   averageEntryPrice: string;
@@ -41,6 +51,8 @@ export interface Position {
   quantum: string;
   lossSocializationAmount: string;
   marginAccountBalance: string;
+  orderAccountBalance: string;
+  generalAccountBalance: string;
   marketDecimalPlaces: number;
   marketId: string;
   marketCode: string;
@@ -61,7 +73,8 @@ export interface Position {
 
 export const getMetrics = (
   data: ReturnType<typeof rejoinPositionData> | null,
-  accounts: Account[] | null
+  accounts: Account[] | null,
+  margins: MarginFieldsFragment[] | null
 ): Position[] => {
   if (!data || !data?.length) {
     return [];
@@ -75,8 +88,20 @@ export const getMetrics = (
     }
 
     const marketData = market?.data;
+    const margin = margins?.find((margin) => {
+      return margin.market?.id === market?.id;
+    });
     const marginAccount = accounts?.find((account) => {
-      return account.market?.id === market?.id;
+      return (
+        account.market?.id === market?.id &&
+        account.type === AccountType.ACCOUNT_TYPE_MARGIN
+      );
+    });
+    const orderAccount = accounts?.find((account) => {
+      return (
+        account.market?.id === market?.id &&
+        account.type === AccountType.ACCOUNT_TYPE_ORDER_MARGIN
+      );
     });
     const asset = getAsset(market);
     const generalAccount = accounts?.find(
@@ -93,6 +118,10 @@ export const getMetrics = (
       marginAccount?.balance ?? 0,
       asset.decimals
     );
+    const orderAccountBalance = toBigNum(
+      orderAccount?.balance ?? 0,
+      asset.decimals
+    );
     const generalAccountBalance = toBigNum(
       generalAccount?.balance ?? 0,
       asset.decimals
@@ -107,21 +136,33 @@ export const getMetrics = (
           : openVolume.multipliedBy(-1)
         ).multipliedBy(markPrice)
       : undefined;
-    const totalBalance = marginAccountBalance.plus(generalAccountBalance);
-    const currentLeverage = notional
-      ? totalBalance.isEqualTo(0)
-        ? new BigNumber(0)
-        : notional.dividedBy(totalBalance)
-      : undefined;
+    const totalBalance = marginAccountBalance
+      .plus(generalAccountBalance)
+      .plus(orderAccountBalance);
+    const marginMode =
+      margin?.marginMode || MarginMode.MARGIN_MODE_CROSS_MARGIN;
+    const marginFactor = margin?.marginFactor;
+    const currentLeverage =
+      marginMode === MarginMode.MARGIN_MODE_ISOLATED_MARGIN
+        ? (marginFactor && 1 / Number(marginFactor)) || undefined
+        : notional
+        ? totalBalance.isEqualTo(0)
+          ? 0
+          : notional.dividedBy(totalBalance).toNumber()
+        : undefined;
     metrics.push({
+      marginMode,
+      maintenanceLevel: margin?.maintenanceLevel,
       assetId: asset.id,
       assetSymbol: asset.symbol,
       averageEntryPrice: position.averageEntryPrice,
-      currentLeverage: currentLeverage ? currentLeverage.toNumber() : undefined,
+      currentLeverage,
       assetDecimals: asset.decimals,
       quantum: asset.quantum,
       lossSocializationAmount: position.lossSocializationAmount || '0',
       marginAccountBalance: marginAccount?.balance ?? '0',
+      orderAccountBalance: orderAccount?.balance ?? '0',
+      generalAccountBalance: generalAccount?.balance ?? '0',
       marketDecimalPlaces,
       marketId: market.id,
       marketCode: market.tradableInstrument.instrument.code,
@@ -291,6 +332,9 @@ export const positionsMarketsProvider = makeDerivedDataProvider<
   ).sort();
 });
 
+const firstOrSelf = (partyIds: string | string[]) =>
+  Array.isArray(partyIds) ? partyIds[0] : partyIds;
+
 export const positionsMetricsProvider = makeDerivedDataProvider<
   Position[],
   Position[],
@@ -301,18 +345,24 @@ export const positionsMetricsProvider = makeDerivedDataProvider<
       positionsDataProvider(callback, client, { partyIds: variables.partyIds }),
     (callback, client, variables) =>
       accountsDataProvider(callback, client, {
-        partyId: Array.isArray(variables.partyIds)
-          ? variables.partyIds[0]
-          : variables.partyIds,
+        partyId: firstOrSelf(variables.partyIds),
       }),
     (callback, client, variables) =>
       allMarketsWithLiveDataProvider(callback, client, {
         marketIds: variables.marketIds,
       }),
+    (callback, client, variables) =>
+      marginsDataProvider(callback, client, {
+        partyId: firstOrSelf(variables.partyIds),
+      }),
   ],
-  ([positions, accounts, marketsData], variables) => {
+  ([positions, accounts, marketsData, margins], variables) => {
     const positionsData = rejoinPositionData(positions, marketsData);
-    const metrics = getMetrics(positionsData, accounts as Account[] | null);
+    const metrics = getMetrics(
+      positionsData,
+      accounts as Account[] | null,
+      margins
+    );
     return preparePositions(metrics, variables.showClosed);
   },
   (data, delta, previousData) =>
@@ -323,3 +373,67 @@ export const positionsMetricsProvider = makeDerivedDataProvider<
       return !(previousRow && isEqual(previousRow, row));
     })
 );
+
+export const maxLeverageProvider = makeDerivedDataProvider<
+  number,
+  never,
+  { partyId: string; marketId: string }
+>(
+  [
+    (callback, client, { marketId }) =>
+      marketInfoProvider(callback, client, { marketId }),
+    (callback, client, { marketId, partyId }) =>
+      positionDataProvider(callback, client, { partyIds: partyId, marketId }),
+    marketMarginDataProvider,
+  ],
+  (parts) => {
+    const market: MarketInfo | null = parts[0];
+    const position: PositionFieldsFragment | null = parts[1];
+    const margin: MarginFieldsFragment | null = parts[2];
+    if (!market || !market?.riskFactors) {
+      return 1;
+    }
+    const maxLeverage =
+      1 /
+      (Math.max(
+        Number(market.riskFactors.long),
+        Number(market.riskFactors.short)
+      ) || 1);
+
+    if (
+      market &&
+      position?.openVolume &&
+      position?.openVolume !== '0' &&
+      margin
+    ) {
+      const asset = getAsset(market);
+      const { positionDecimalPlaces, decimalPlaces: marketDecimalPlaces } =
+        market;
+      const openVolume = toBigNum(
+        position.openVolume.replace(/^-/, ''),
+        positionDecimalPlaces
+      );
+      const averageEntryPrice = toBigNum(
+        position.averageEntryPrice,
+        marketDecimalPlaces
+      );
+      // https://github.com/vegaprotocol/specs/blob/nebula/protocol/0019-MCAL-margin_calculator.md#isolated-margin-mode
+      return Math.min(
+        averageEntryPrice
+          .multipliedBy(openVolume)
+          .dividedBy(toBigNum(margin.initialLevel, asset.decimals))
+          .toNumber(),
+        maxLeverage
+      );
+    }
+    return maxLeverage;
+  }
+);
+
+export const useMaxLeverage = (marketId: string, partyId?: string) => {
+  return useDataProvider({
+    dataProvider: maxLeverageProvider,
+    variables: { marketId, partyId: partyId || '' },
+    skip: !partyId,
+  });
+};

libs/positions/src/lib/positions-table.tsx

@@ -21,6 +21,7 @@ import {
   VegaIcon,
   VegaIconNames,
   Tooltip,
+  Lozenge,
 } from '@vegaprotocol/ui-toolkit';
 import {
   volumePrefix,
@@ -31,14 +32,17 @@ import {
 } from '@vegaprotocol/utils';
 import { type Position } from './positions-data-providers';
 import {
+  MarginMode,
   MarketTradingMode,
   PositionStatus,
   PositionStatusMapping,
 } from '@vegaprotocol/types';
-import { DocsLinks } from '@vegaprotocol/environment';
+import { DocsLinks, useFeatureFlags } from '@vegaprotocol/environment';
 import { PositionActionsDropdown } from './position-actions-dropdown';
 import { LiquidationPrice } from './liquidation-price';
 import { useT } from '../use-t';
+import classnames from 'classnames';
+import BigNumber from 'bignumber.js';
 
 interface Props extends TypedDataAgGrid<Position> {
   onClose?: (data: Position) => void;
@@ -74,6 +78,126 @@ const defaultColDef = {
   minWidth: 110,
 };
 
+interface MarginChartProps {
+  width?: number;
+  label: string;
+  other?: string;
+  marker?: number;
+  markerLabel?: string;
+  className?: string;
+}
+
+const MarginChart = ({
+  width,
+  label,
+  other,
+  marker,
+  markerLabel,
+  className,
+}: MarginChartProps) => {
+  return (
+    <div className={classnames('relative min-w-[208px]', className)}>
+      {markerLabel ? (
+        <div className="mb-1 whitespace-nowrap">{markerLabel}</div>
+      ) : null}
+      <div
+        className={classnames('flex relative h-2', {
+          'dark:bg-vega-clight-800 bg-vega-cdark-800': other,
+        })}
+      >
+        <div
+          style={{ width: `${width || 100}%` }}
+          className="dark:bg-vega-clight-400 bg-vega-cdark-400"
+        ></div>
+        {marker ? (
+          <div
+            className="absolute dark:border-t-vega-clight-400 border-t-vega-cdark-400 border-l-transparent border-r-transparent"
+            style={{
+              top: '-5px',
+              left: `${marker}%`,
+              borderWidth: '5px 5px 0px 5px',
+              transform: 'translateX(-5px)',
+              display: 'inline-block',
+            }}
+          ></div>
+        ) : null}
+      </div>
+      <div className="flex flex-wrap justify-between whitespace-nowrap">
+        <div className={classnames({ 'mr-1': other })}>{label}</div>
+        {other ? <div className="text-right">{other}</div> : null}
+      </div>
+    </div>
+  );
+};
+
+const PositionMargin = ({ data }: { data: Position }) => {
+  const t = useT();
+  const max =
+    data.marginMode === MarginMode.MARGIN_MODE_CROSS_MARGIN
+      ? (
+          BigInt(data.marginAccountBalance) + BigInt(data.generalAccountBalance)
+        ).toString()
+      : BigInt(data.marginAccountBalance) > BigInt(data.orderAccountBalance)
+      ? data.marginAccountBalance
+      : data.orderAccountBalance;
+  const getWidth = (balance: string) =>
+    BigNumber(balance).multipliedBy(100).dividedBy(max).toNumber();
+  const inCrossMode = data.marginMode === MarginMode.MARGIN_MODE_CROSS_MARGIN;
+  const hasOrderAccountBalance =
+    !inCrossMode && data.orderAccountBalance !== '0';
+
+  return (
+    <>
+      <MarginChart
+        width={inCrossMode ? getWidth(data.marginAccountBalance) : undefined}
+        label={t('Margin: {{balance}}', {
+          balance: addDecimalsFormatNumberQuantum(
+            data.marginAccountBalance,
+            data.assetDecimals,
+            data.quantum
+          ),
+        })}
+        other={
+          inCrossMode
+            ? t('General account: {{balance}}', {
+                balance: addDecimalsFormatNumberQuantum(
+                  data.generalAccountBalance,
+                  data.assetDecimals,
+                  data.quantum
+                ),
+              })
+            : undefined
+        }
+        className={classnames({ 'mb-2': hasOrderAccountBalance })}
+        marker={
+          data.maintenanceLevel ? getWidth(data.maintenanceLevel) : undefined
+        }
+        markerLabel={
+          data.maintenanceLevel &&
+          t('Liquidation: {{maintenanceLevel}}', {
+            maintenanceLevel: addDecimalsFormatNumberQuantum(
+              data.maintenanceLevel,
+              data.assetDecimals,
+              data.quantum
+            ),
+          })
+        }
+      />
+      {hasOrderAccountBalance ? (
+        <MarginChart
+          width={getWidth(data.orderAccountBalance)}
+          label={t('Order: {{balance}}', {
+            balance: addDecimalsFormatNumber(
+              data.orderAccountBalance,
+              data.assetDecimals
+            ),
+          })}
+        />
+      ) : null}
+    </>
+  );
+};
+
 export const PositionsTable = ({
   onClose,
   onMarketClick,
@@ -83,6 +207,7 @@ export const PositionsTable = ({
   pubKey,
   ...props
 }: Props) => {
+  const featureFlags = useFeatureFlags((state) => state.flags);
   const t = useT();
 
   const colDefs = useMemo<ColDef[]>(() => {
@@ -132,7 +257,8 @@ export const PositionsTable = ({
         cellClass: 'font-mono text-right',
         cellClassRules: signedNumberCssClassRules,
         filter: 'agNumberColumnFilter',
-        valueGetter: ({ data }: { data: Position }) => {
+        sortable: false,
+        filterValueGetter: ({ data }: { data: Position }) => {
           return data?.openVolume === undefined
             ? undefined
             : toBigNum(data?.openVolume, data.positionDecimalPlaces).toNumber();
@@ -209,7 +335,8 @@ export const PositionsTable = ({
         type: 'rightAligned',
         cellClass: 'font-mono text-right',
         filter: 'agNumberColumnFilter',
-        valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
+        sortable: false,
+        filterValueGetter: ({ data }: VegaValueGetterParams<Position>) => {
           return !data
             ? undefined
             : toBigNum(
@@ -233,7 +360,35 @@ export const PositionsTable = ({
 
           const lev = data?.currentLeverage ? data.currentLeverage : 1;
           const leverage = formatNumber(Math.max(1, lev), 1);
-          return <StackedCell primary={margin} secondary={leverage + 'x'} />;
+          return (
+            <Tooltip
+              description={
+                data &&
+                data.marginAccountBalance !== '0' && (
+                  <PositionMargin data={data} />
+                )
+              }
+            >
+              <div>
+                <StackedCell
+                  primary={margin}
+                  secondary={
+                    <>
+                      {featureFlags.ISOLATED_MARGIN && (
+                        <Lozenge className="mr-1">
+                          {data?.marginMode ===
+                          MarginMode.MARGIN_MODE_ISOLATED_MARGIN
+                            ? t('Isolated')
+                            : t('Cross')}
+                        </Lozenge>
+                      )}
+                      {leverage}x
+                    </>
+                  }
+                />
+              </div>
+            </Tooltip>
+          );
         },
       },
       {
@@ -406,7 +561,16 @@ export const PositionsTable = ({
     return columnDefs.filter<ColDef>(
       (colDef: ColDef | null): colDef is ColDef => colDef !== null
     );
-  }, [isReadOnly, multipleKeys, onClose, onMarketClick, pubKey, pubKeys, t]);
+  }, [
+    isReadOnly,
+    multipleKeys,
+    onClose,
+    onMarketClick,
+    pubKey,
+    pubKeys,
+    t,
+    featureFlags.ISOLATED_MARGIN,
+  ]);
 
   return (
     <AgGrid

libs/positions/src/lib/positions.mock.ts

@@ -130,6 +130,9 @@ const marginsFields: MarginFieldsFragment[] = [
     searchLevel: '0',
     initialLevel: '0',
     collateralReleaseLevel: '0',
+    marginFactor: '',
+    marginMode: Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN,
+    orderMarginLevel: '',
     market: {
       __typename: 'Market',
       id: 'market-0',
@@ -145,6 +148,9 @@ const marginsFields: MarginFieldsFragment[] = [
     searchLevel: '0',
     initialLevel: '0',
     collateralReleaseLevel: '0',
+    marginFactor: '',
+    marginMode: Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN,
+    orderMarginLevel: '',
     market: {
       __typename: 'Market',
       id: 'market-1',
@@ -160,6 +166,9 @@ const marginsFields: MarginFieldsFragment[] = [
     searchLevel: '0',
     initialLevel: '0',
     collateralReleaseLevel: '0',
+    marginFactor: '',
+    marginMode: Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN,
+    orderMarginLevel: '',
     market: {
       __typename: 'Market',
       id: 'market-2',
@@ -172,6 +181,10 @@ const marginsFields: MarginFieldsFragment[] = [
 ];
 
 export const singleRow: Position = {
+  generalAccountBalance: '12345600',
+  maintenanceLevel: '12300000',
+  marginMode: Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN,
+  orderAccountBalance: '0',
   partyId: 'partyId',
   assetId: 'asset-id',
   assetSymbol: 'BTC',