test(explorer): add tests for games display

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

@@ -205,7 +205,7 @@ jobs:
       # run tests
       #----------------------------------------------
       - name: Run tests
-        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v --numprocesses 4 --dist loadfile --durations=45
+        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v --numprocesses 1 --dist loadfile --durations=45
         working-directory: apps/trading/e2e
       #----------------------------------------------
       # upload traces

apps/explorer-e2e/src/integration/proposal.cy.js

@@ -24,6 +24,10 @@ context('Proposal page', { tags: '@smoke' }, function () {
           cy.get_element_by_col_id('title').should('have.text', proposalTitle);
           cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
           cy.get_element_by_col_id('state').should('have.text', 'Enacted');
+          cy.getByTestId('vote-progress').should('be.visible');
+          cy.getByTestId('vote-progress-bar-for')
+            .invoke('attr', 'style')
+            .should('eq', 'width: 100%;');
           cy.get('[col-id="cDate"]')
             .invoke('text')
             .should('match', dateTimeRegex);
@@ -69,6 +73,10 @@ context('Proposal page', { tags: '@smoke' }, function () {
             'have.text',
             'Waiting for Node Vote'
           );
+          cy.getByTestId('vote-progress').should('be.visible');
+          cy.getByTestId('vote-progress-bar-against')
+            .invoke('attr', 'style')
+            .should('eq', 'width: 100%;');
           cy.get('[col-id="cDate"]')
             .invoke('text')
             .should('match', dateTimeRegex);

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -1,4 +1,5 @@
 import { type ProposalListFieldsFragment } from '@vegaprotocol/proposals';
+import { VoteProgress } from '@vegaprotocol/proposals';
 import { type AgGridReact } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGrid } from '@vegaprotocol/datagrid';
@@ -11,7 +12,12 @@ import { type ColDef } from 'ag-grid-community';
 import type { RowClickedEvent } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 import { ProposalStateMapping } from '@vegaprotocol/types';
+import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { JsonViewerDialog } from '../dialogs/json-viewer-dialog';
@@ -25,7 +31,15 @@ type ProposalsTableProps = {
   data: ProposalListFieldsFragment[] | null;
 };
 export const ProposalsTable = ({ data }: ProposalsTableProps) => {
+  const { params } = useNetworkParams([
+    NetworkParams.governance_proposal_market_requiredMajority,
+  ]);
   const tokenLink = useLinks(DApp.Governance);
+  const requiredMajorityPercentage = useMemo(() => {
+    const requiredMajority =
+      params?.governance_proposal_market_requiredMajority ?? 1;
+    return new BigNumber(requiredMajority).times(100);
+  }, [params?.governance_proposal_market_requiredMajority]);
 
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
@@ -76,6 +90,33 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
           return value ? ProposalStateMapping[value] : '-';
         },
       },
+      {
+        colId: 'voting',
+        maxWidth: 100,
+        hide: window.innerWidth <= BREAKPOINT_MD,
+        headerName: t('Voting'),
+        cellRenderer: ({
+          data,
+        }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+          if (data) {
+            const yesTokens = new BigNumber(data.votes.yes.totalTokens);
+            const noTokens = new BigNumber(data.votes.no.totalTokens);
+            const totalTokensVoted = yesTokens.plus(noTokens);
+            const yesPercentage = totalTokensVoted.isZero()
+              ? new BigNumber(0)
+              : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
+            return (
+              <div className="flex h-full items-center justify-center pt-2 uppercase">
+                <VoteProgress
+                  threshold={requiredMajorityPercentage}
+                  progress={yesPercentage}
+                />
+              </div>
+            );
+          }
+          return '-';
+        },
+      },
       {
         colId: 'cDate',
         maxWidth: 150,
@@ -143,7 +184,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
         },
       },
     ],
-    [tokenLink]
+    [requiredMajorityPercentage, tokenLink]
   );
   return (
     <>

apps/explorer/src/app/components/txs/details/proposal/summary.tsx

@@ -64,7 +64,9 @@ export const ProposalSummary = ({
   return (
     <div className="w-auto max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5">
       {id && <ProposalStatusIcon id={id} />}
-      {rationale?.title && <h1 className="text-xl pb-1">{rationale.title}</h1>}
+      {rationale?.title && (
+        <h1 className="text-xl pb-1 break-all">{rationale.title}</h1>
+      )}
       {rationale?.description && (
         <div className="pt-2 text-sm leading-tight">
           <ReactMarkdown

apps/explorer/src/app/components/txs/details/proposal/tx-update-party-profile.tsx

@@ -1,46 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { TxDetailsShared } from '../shared/tx-details-shared';
-import { TableWithTbody } from '../../../table';
-import type { components } from '../../../../../types/explorer';
-
-import type { BlockExplorerTransactionResult } from '../../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../../routes/blocks/tendermint-blocks-response';
-import { TableCell, TableRow } from '../../../table';
-
-type Update = components['schemas']['v1UpdatePartyProfile'];
-
-interface TxDetailsUpdatePartyProfileProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * Party profiles can be an alias and arbitrary key/values pairs.
- * This component displays the alias, if any, but not the metadata. When there is
- * some wider usage, we can decide how to render it. For now, it's available in the
- * full TX details.
- */
-export const TxDetailsUpdatePartyProfile = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsUpdatePartyProfileProps) => {
-  if (!txData?.command.updatePartyProfile) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const update: Update = txData.command.updatePartyProfile;
-
-  return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
-      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      {update.alias && (
-        <TableRow modifier="bordered">
-          <TableCell>{t('New alias')}</TableCell>
-          <TableCell>{update.alias}</TableCell>
-        </TableRow>
-      )}
-    </TableWithTbody>
-  );
-};

apps/explorer/src/app/components/txs/details/transfer/Transfer.graphql

@@ -0,0 +1,18 @@
+query ExplorerTransferStatus($id: ID!) {
+  transfer(id: $id) {
+    transfer {
+      reference
+      timestamp
+      status
+      reason
+      fromAccountType
+      from
+      to
+      toAccountType
+      asset {
+        id
+      }
+      amount
+    }
+  }
+}

apps/explorer/src/app/components/txs/details/transfer/__generated__/Transfer.ts

@@ -0,0 +1,61 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerTransferStatusQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerTransferStatusQuery = { __typename?: 'Query', transfer?: { __typename?: 'TransferNode', transfer: { __typename?: 'Transfer', reference?: string | null, timestamp: any, status: Types.TransferStatus, reason?: string | null, fromAccountType: Types.AccountType, from: string, to: string, toAccountType: Types.AccountType, amount: string, asset?: { __typename?: 'Asset', id: string } | null } } | null };
+
+
+export const ExplorerTransferStatusDocument = gql`
+    query ExplorerTransferStatus($id: ID!) {
+  transfer(id: $id) {
+    transfer {
+      reference
+      timestamp
+      status
+      reason
+      fromAccountType
+      from
+      to
+      toAccountType
+      asset {
+        id
+      }
+      amount
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerTransferStatusQuery__
+ *
+ * To run a query within a React component, call `useExplorerTransferStatusQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerTransferStatusQuery` 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 } = useExplorerTransferStatusQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerTransferStatusQuery(baseOptions: Apollo.QueryHookOptions<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>(ExplorerTransferStatusDocument, options);
+      }
+export function useExplorerTransferStatusLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>(ExplorerTransferStatusDocument, options);
+        }
+export type ExplorerTransferStatusQueryHookResult = ReturnType<typeof useExplorerTransferStatusQuery>;
+export type ExplorerTransferStatusLazyQueryHookResult = ReturnType<typeof useExplorerTransferStatusLazyQuery>;
+export type ExplorerTransferStatusQueryResult = Apollo.QueryResult<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>;

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-participants.tsx

@@ -111,7 +111,7 @@ export function TransferParticipants({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 9"
-                className="fill-vega-light-100 dark:fill-black"
+                className="fill-white dark:fill-black"
               >
                 <path d="M0,0L8,9l8,-9Z" />
               </svg>
@@ -120,7 +120,7 @@ export function TransferParticipants({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 9"
-                className="fill-vega-light-100 dark:fill-vega-dark-200"
+                className="fill-vega-light-200 dark:fill-vega-dark-200"
               >
                 <path d="M0,0L8,9l8,-9Z" />
               </svg>

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-rewards.tsx

@@ -1,97 +1,223 @@
 import { t } from '@vegaprotocol/i18n';
 import { AssetLink, MarketLink } from '../../../../links';
-import { headerClasses, wrapperClasses } from '../transfer-details';
 import type { components } from '../../../../../../types/explorer';
 import type { Recurring } from '../transfer-details';
-import { DispatchMetricLabels } from '@vegaprotocol/types';
-
+import {
+  DispatchMetricLabels,
+  DistributionStrategy,
+} from '@vegaprotocol/types';
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { formatNumber } from '@vegaprotocol/utils';
 export type Metric = components['schemas']['vegaDispatchMetric'];
 export type Strategy = components['schemas']['vegaDispatchStrategy'];
 
+export const wrapperClasses = 'border pv-2 w-full flex-auto basis-full';
+export const headerClasses =
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 text-center text-xl py-2 font-alpha calt';
+
 const metricLabels: Record<Metric, string> = {
   DISPATCH_METRIC_UNSPECIFIED: 'Unknown metric',
   ...DispatchMetricLabels,
 };
 
+// Maps the two (non-null) values of entityScope to the icon that represents it
+const entityScopeIcons: Record<
+  string,
+  typeof VegaIconNames[keyof typeof VegaIconNames]
+> = {
+  ENTITY_SCOPE_INDIVIDUALS: VegaIconNames.MAN,
+  ENTITY_SCOPE_TEAMS: VegaIconNames.TEAM,
+};
+
+const distributionStrategyLabel: Record<DistributionStrategy, string> = {
+  [DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA]: 'Pro Rata',
+  [DistributionStrategy.DISTRIBUTION_STRATEGY_RANK]: 'Ranked',
+};
+
 interface TransferRewardsProps {
   recurring: Recurring;
 }
 
 /**
- * Renderer for a transfer. These can vary quite
- * widely, essentially every field can be null.
+ * Renders recurring transfers/game details in a way that is, perhaps, easy to understand
  *
  * @param transfer A recurring transfer object
  */
 export function TransferRewards({ recurring }: TransferRewardsProps) {
-  const metric =
-    recurring?.dispatchStrategy?.metric || 'DISPATCH_METRIC_UNSPECIFIED';
-
   if (!recurring || !recurring.dispatchStrategy) {
     return null;
   }
 
+  // Destructure to make things a bit more readable
+  const {
+    entityScope,
+    individualScope,
+    teamScope,
+    distributionStrategy,
+    lockPeriod,
+    markets,
+    stakingRequirement,
+    windowLength,
+    notionalTimeWeightedAveragePositionRequirement,
+    rankTable,
+    nTopPerformers,
+  } = recurring.dispatchStrategy;
+
   return (
     <div className={wrapperClasses}>
-      <h2 className={headerClasses}>{t('Reward metrics')}</h2>
-      <ul className="relative block rounded-lg py-6 text-center p-6">
-        {recurring.dispatchStrategy.assetForMetric ? (
+      <h2 className={headerClasses}>{getRewardTitle(entityScope)}</h2>
+      <ul className="relative block rounded-lg py-6 text-left p-6">
+        {entityScope && entityScopeIcons[entityScope] ? (
           <li>
-            <strong>{t('Asset')}</strong>:{' '}
-            <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
+            <strong>{t('Scope')}</strong>:{' '}
+            <VegaIcon name={entityScopeIcons[entityScope]} />
+            &nbsp;
+            {individualScope ? individualScopeLabels[individualScope] : null}
+            {getScopeLabel(entityScope, teamScope)}
           </li>
         ) : null}
-        <li>
-          <strong>{t('Metric')}</strong>: {metricLabels[metric]}
-        </li>
-        {recurring.dispatchStrategy.markets &&
-        recurring.dispatchStrategy.markets.length > 0 ? (
+        {recurring.dispatchStrategy &&
+          recurring.dispatchStrategy.assetForMetric && (
+            <li>
+              <strong>{t('Asset for metric')}</strong>:{' '}
+              <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
+            </li>
+          )}
+        {recurring.dispatchStrategy.metric &&
+          metricLabels[recurring.dispatchStrategy.metric] && (
+            <li>
+              <strong>{t('Metric')}</strong>:{' '}
+              {metricLabels[recurring.dispatchStrategy.metric]}
+            </li>
+          )}
+        {lockPeriod && (
+          <li>
+            <strong>{t('Reward lock')}</strong>:&nbsp;
+            {recurring.dispatchStrategy.lockPeriod}{' '}
+            {recurring.dispatchStrategy.lockPeriod === '1'
+              ? t('epoch')
+              : t('epochs')}
+          </li>
+        )}
+
+        {markets && markets.length > 0 ? (
           <li>
             <strong>{t('Markets in scope')}</strong>:
-            <ul>
-              {recurring.dispatchStrategy.markets.map((m) => (
-                <li key={m}>
+            <ul className="inline-block ml-1">
+              {markets.map((m) => (
+                <li key={m} className="inline-block mr-2">
                   <MarketLink id={m} />
                 </li>
               ))}
             </ul>
           </li>
         ) : null}
-        <li>
-          <strong>{t('Factor')}</strong>: {recurring.factor}
-        </li>
+
+        {stakingRequirement && stakingRequirement !== '0' ? (
+          <li>
+            <strong>{t('Staking requirement')}</strong>: {stakingRequirement}
+          </li>
+        ) : null}
+
+        {windowLength && windowLength !== '0' ? (
+          <li>
+            <strong>{t('Window length')}</strong>:{' '}
+            {recurring.dispatchStrategy.windowLength}{' '}
+            {recurring.dispatchStrategy.windowLength === '1'
+              ? t('epoch')
+              : t('epochs')}
+          </li>
+        ) : null}
+
+        {notionalTimeWeightedAveragePositionRequirement &&
+        notionalTimeWeightedAveragePositionRequirement !== '' ? (
+          <li>
+            <strong>{t('Notional TWAP')}</strong>:{' '}
+            {notionalTimeWeightedAveragePositionRequirement}
+          </li>
+        ) : null}
+
+        {nTopPerformers && (
+          <li>
+            <strong>{t('Elligible team members:')}</strong> top{' '}
+            {`${formatNumber(Number(nTopPerformers) * 100, 0)}%`}
+          </li>
+        )}
+
+        {distributionStrategy &&
+          distributionStrategy !== 'DISTRIBUTION_STRATEGY_UNSPECIFIED' && (
+            <li>
+              <strong>{t('Distribution strategy')}</strong>:{' '}
+              {distributionStrategyLabel[distributionStrategy]}
+            </li>
+          )}
       </ul>
+      <div className="px-6 pt-1 pb-5">
+        {rankTable && rankTable.length > 0 ? (
+          <table className="border-collapse border border-gray-400 ">
+            <thead>
+              <tr>
+                <th className="border border-gray-300 bg-gray-300 px-3">
+                  <strong>{t('Start rank')}</strong>
+                </th>
+                <th className="border border-gray-300 bg-gray-300 px-3">
+                  <strong>{t('Share of reward pool')}</strong>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {rankTable.map((row, i) => {
+                return (
+                  <tr key={`rank-${i}`}>
+                    <td className="border border-slate-300 text-center">
+                      {row.startRank}
+                    </td>
+                    <td className="border border-slate-300 text-center">
+                      {row.shareRatio}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        ) : null}
+      </div>
     </div>
   );
 }
 
-interface TransferRecurringStrategyProps {
-  strategy: Strategy;
-}
-
-/**
- * Simple renderer for a dispatch strategy in a recurring transfer
- *
- * @param strategy Dispatch strategy object
- */
-export function TransferRecurringStrategy({
-  strategy,
-}: TransferRecurringStrategyProps) {
-  if (!strategy) {
-    return null;
+export function getScopeLabel(
+  scope: components['schemas']['vegaEntityScope'] | undefined,
+  teamScope: readonly string[] | undefined
+): string {
+  if (scope === 'ENTITY_SCOPE_TEAMS') {
+    if (teamScope && teamScope.length !== 0) {
+      return ` ${teamScope.length} teams`;
+    } else {
+      return t('All teams');
+    }
+  } else if (scope === 'ENTITY_SCOPE_INDIVIDUALS') {
+    return t('Individuals');
+  } else {
+    return '';
   }
-
-  return (
-    <>
-      {strategy.assetForMetric ? (
-        <li>
-          <strong>{t('Asset for metric')}</strong>:{' '}
-          <AssetLink assetId={strategy.assetForMetric} />
-        </li>
-      ) : null}
-      <li>
-        <strong>{t('Metric')}</strong>: {strategy.metric}
-      </li>
-    </>
-  );
 }
+export function getRewardTitle(
+  scope?: components['schemas']['vegaEntityScope']
+) {
+  if (scope === 'ENTITY_SCOPE_TEAMS') {
+    return t('Game');
+  }
+  return t('Reward metrics');
+}
+
+const individualScopeLabels: Record<
+  components['schemas']['vegaIndividualScope'],
+  string
+> = {
+  // Unspecified and All are not rendered
+  INDIVIDUAL_SCOPE_UNSPECIFIED: '',
+  INDIVIDUAL_SCOPE_ALL: '',
+  INDIVIDUAL_SCOPE_IN_TEAM: '(in team)',
+  INDIVIDUAL_SCOPE_NOT_IN_TEAM: '(not in team)',
+};

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-status.tsx

@@ -0,0 +1,84 @@
+import { t } from '@vegaprotocol/i18n';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import { Icon, Loader } from '@vegaprotocol/ui-toolkit';
+import type { IconName } from '@vegaprotocol/ui-toolkit';
+import type { ApolloError } from '@apollo/client';
+import { TransferStatus, TransferStatusMapping } from '@vegaprotocol/types';
+import { IconNames } from '@blueprintjs/icons';
+
+interface TransferStatusProps {
+  status: TransferStatus | undefined;
+  error: ApolloError | undefined;
+  loading: boolean;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferStatusView({ status, loading }: TransferStatusProps) {
+  if (!status) {
+    status = TransferStatus.STATUS_PENDING;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Status')}</h2>
+      <div className="relative block rounded-lg py-6 text-center p-6">
+        {loading ? (
+          <div className="leading-10 mt-12">
+            <Loader size={'small'} />
+          </div>
+        ) : (
+          <>
+            <p className="leading-10 my-2">
+              <Icon
+                name={getIconForStatus(status)}
+                className={getColourForStatus(status)}
+              />
+            </p>
+            <p className="leading-10 my-2">{TransferStatusMapping[status]}</p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Simple mapping from status to icon name
+ * @param status TransferStatus
+ * @returns IconName
+ */
+export function getIconForStatus(status: TransferStatus): IconName {
+  switch (status) {
+    case TransferStatus.STATUS_PENDING:
+      return IconNames.TIME;
+    case TransferStatus.STATUS_DONE:
+      return IconNames.TICK;
+    case TransferStatus.STATUS_REJECTED:
+      return IconNames.CROSS;
+    default:
+      return IconNames.TIME;
+  }
+}
+
+/**
+ * Simple mapping from status to colour
+ * @param status TransferStatus
+ * @returns string Tailwind classname
+ */
+export function getColourForStatus(status: TransferStatus): string {
+  switch (status) {
+    case TransferStatus.STATUS_PENDING:
+      return 'text-yellow-500';
+    case TransferStatus.STATUS_DONE:
+      return 'text-green-500';
+    case TransferStatus.STATUS_REJECTED:
+      return 'text-red-500';
+    default:
+      return 'text-yellow-500';
+  }
+}

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -2,12 +2,15 @@ import type { components } from '../../../../../types/explorer';
 import { TransferRepeat } from './blocks/transfer-repeat';
 import { TransferRewards } from './blocks/transfer-rewards';
 import { TransferParticipants } from './blocks/transfer-participants';
+import { useExplorerTransferStatusQuery } from './__generated__/Transfer';
+import { TransferStatusView } from './blocks/transfer-status';
+import { TransferStatus } from '@vegaprotocol/types';
 
 export type Recurring = components['schemas']['commandsv1RecurringTransfer'];
 export type Metric = components['schemas']['vegaDispatchMetric'];
 
 export const wrapperClasses =
-  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
+  'border border-vega-light-150 dark:border-vega-dark-200 pv-2 w-full sm:w-1/3 basis-1/3';
 export const headerClasses =
   'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
 
@@ -16,6 +19,7 @@ export type Transfer = components['schemas']['commandsv1Transfer'];
 interface TransferDetailsProps {
   transfer: Transfer;
   from: string;
+  id: string;
 }
 
 /**
@@ -24,13 +28,24 @@ interface TransferDetailsProps {
  *
  * @param transfer A recurring transfer object
  */
-export function TransferDetails({ transfer, from }: TransferDetailsProps) {
+export function TransferDetails({ transfer, from, id }: TransferDetailsProps) {
   const recurring = transfer.recurring;
 
+  // Currently all this is passed in to TransferStatus, but the extra details
+  // may be useful in the future.
+  const { data, error, loading } = useExplorerTransferStatusQuery({
+    variables: { id },
+  });
+
+  const status = error
+    ? TransferStatus.STATUS_REJECTED
+    : data?.transfer?.transfer.status;
+
   return (
-    <div className="flex gap-5 flex-wrap">
+    <div className="flex flex-wrap">
       <TransferParticipants from={from} transfer={transfer} />
       {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
+      <TransferStatusView status={status} error={error} loading={loading} />
       {recurring && recurring.dispatchStrategy ? (
         <TransferRewards recurring={transfer.recurring} />
       ) : null}

apps/explorer/src/app/components/txs/details/transfer/transfer-rewards.spec.tsx

@@ -0,0 +1,172 @@
+import {
+  getScopeLabel,
+  getRewardTitle,
+  TransferRewards,
+} from './blocks/transfer-rewards';
+import { render } from '@testing-library/react';
+import type { components } from '../../../../../types/explorer';
+import type { Recurring } from './transfer-details';
+import {
+  DispatchMetric,
+  DistributionStrategy,
+  EntityScope,
+  IndividualScope,
+} from '@vegaprotocol/types';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+
+describe('getScopeLabel', () => {
+  it('should return the correct label for ENTITY_SCOPE_TEAMS with teamScope', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const teamScope = ['team1', 'team2', 'team3'];
+    const expectedLabel = ' 3 teams';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return the correct label for ENTITY_SCOPE_TEAMS without teamScope', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const teamScope = undefined;
+    const expectedLabel = 'All teams';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return the correct label for ENTITY_SCOPE_INDIVIDUALS', () => {
+    const scope = 'ENTITY_SCOPE_INDIVIDUALS';
+    const teamScope = undefined;
+    const expectedLabel = 'Individuals';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return an empty string for unknown scope', () => {
+    const scope = 'UNKNOWN_SCOPE';
+    const teamScope = undefined;
+    const expectedLabel = '';
+
+    const result = getScopeLabel(
+      scope as unknown as components['schemas']['vegaEntityScope'],
+      teamScope
+    );
+
+    expect(result).toEqual(expectedLabel);
+  });
+});
+
+describe('getRewardTitle', () => {
+  it('should return the correct title for ENTITY_SCOPE_TEAMS', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const expectedTitle = 'Game';
+
+    const result = getRewardTitle(scope);
+
+    expect(result).toEqual(expectedTitle);
+  });
+
+  it('should return the correct title for other scopes', () => {
+    const scope = 'ENTITY_SCOPE_INDIVIDUALS';
+    const expectedTitle = 'Reward metrics';
+
+    const result = getRewardTitle(scope);
+
+    expect(result).toEqual(expectedTitle);
+  });
+});
+
+describe('TransferRewards', () => {
+  it('should render nothing if recurring dispatchStrategy is not provided', () => {
+    const { container } = render(
+      <TransferRewards recurring={null as unknown as Recurring} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render nothing if recurring.dispatchStrategy is not provided', () => {
+    const { container } = render(
+      <TransferRewards recurring={{} as unknown as Recurring} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render the reward details correctly', () => {
+    const recurring = {
+      dispatchStrategy: {
+        metric: DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION,
+        assetForMetric: '123',
+        entityScope: EntityScope.ENTITY_SCOPE_TEAMS,
+        individualScope: IndividualScope.INDIVIDUAL_SCOPE_IN_TEAM,
+        teamScope: [],
+        distributionStrategy:
+          DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
+        lockPeriod: 'lockPeriod',
+        markets: ['market1', 'market2'],
+        stakingRequirement: '1',
+        windowLength: 'windowLength',
+        notionalTimeWeightedAveragePositionRequirement:
+          'notionalTimeWeightedAveragePositionRequirement',
+        rankTable: [
+          { startRank: 1, shareRatio: 0.2 },
+          { startRank: 2, shareRatio: 0.3 },
+        ],
+        nTopPerformers: 'nTopPerformers',
+      },
+    };
+
+    const { getByText } = render(
+      <MemoryRouter>
+        <MockedProvider>
+          <TransferRewards recurring={recurring} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+
+    expect(getByText('Game')).toBeInTheDocument();
+    expect(getByText('Scope')).toBeInTheDocument();
+    expect(getByText('Asset for metric')).toBeInTheDocument();
+    expect(getByText('Metric')).toBeInTheDocument();
+    expect(getByText('Reward lock')).toBeInTheDocument();
+    expect(getByText('Markets in scope')).toBeInTheDocument();
+    expect(getByText('Staking requirement')).toBeInTheDocument();
+    expect(getByText('Window length')).toBeInTheDocument();
+    expect(getByText('Notional TWAP')).toBeInTheDocument();
+    expect(getByText('Elligible team members:')).toBeInTheDocument();
+    expect(getByText('Distribution strategy')).toBeInTheDocument();
+    expect(getByText('Start rank')).toBeInTheDocument();
+    expect(getByText('Share of reward pool')).toBeInTheDocument();
+  });
+
+  it('should not render a rank table if recurring.dispatchStrategy.rankTable is not provided', () => {
+    const recurring = {
+      dispatchStrategy: {
+        entityScope: EntityScope.ENTITY_SCOPE_INDIVIDUALS,
+        individualScope: IndividualScope.INDIVIDUAL_SCOPE_ALL,
+        teamScope: ['team1', 'team2', 'team3'],
+        distributionStrategy:
+          DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
+        lockPeriod: 'lockPeriod',
+        markets: ['market1', 'market2'],
+        stakingRequirement: 'stakingRequirement',
+        windowLength: 'windowLength',
+        notionalTimeWeightedAveragePositionRequirement:
+          'notionalTimeWeightedAveragePositionRequirement',
+        nTopPerformers: 'nTopPerformers',
+      },
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <MockedProvider>
+          <TransferRewards recurring={recurring} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(container.querySelector('table')).toBeNull();
+  });
+});

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

@@ -34,7 +34,6 @@ import { TxDetailsUpdateReferralSet } from './tx-update-referral-set';
 import { TxDetailsJoinTeam } from './tx-join-team';
 import { TxDetailsUpdateMarginMode } from './tx-update-margin-mode';
 import { TxBatchProposal } from './tx-batch-proposal';
-import { TxDetailsUpdatePartyProfile } from './proposal/tx-update-party-profile';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -140,8 +139,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsUpdateMarginMode;
     case 'Batch Proposal':
       return TxBatchProposal;
-    case 'Update Party Profile':
-      return TxDetailsUpdatePartyProfile;
     default:
       return TxDetailsGeneric;
   }

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

@@ -12,6 +12,8 @@ import { ProposalSignatureBundleNewAsset } from './proposal/signature-bundle-new
 import { ProposalSignatureBundleUpdateAsset } from './proposal/signature-bundle-update';
 import { MarketLink } from '../../links';
 import { formatNumber } from '@vegaprotocol/utils';
+import { TransferDetails } from './transfer/transfer-details';
+import { proposalToTransfer } from '../lib/proposal-to-transfer';
 
 export type Proposal = components['schemas']['v1ProposalSubmission'];
 export type ProposalTerms = components['schemas']['vegaProposalTerms'];
@@ -104,6 +106,12 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
     ? ProposalSignatureBundleNewAsset
     : ProposalSignatureBundleUpdateAsset;
 
+  let transfer, from;
+  if (proposal.terms?.newTransfer?.changes) {
+    transfer = proposalToTransfer(proposal.terms?.newTransfer.changes);
+    from = proposal.terms.newTransfer.changes.source;
+  }
+
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -149,14 +157,26 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
           </>
         ) : null}
       </TableWithTbody>
+
       <ProposalSummary
         id={deterministicId}
         rationale={proposal.rationale}
         terms={proposal?.terms}
       />
+
       {proposalRequiresSignatureBundle(proposal) && (
         <SignatureBundleComponent id={deterministicId} tx={tx} />
       )}
+
+      {transfer && (
+        <div className="mt-8">
+          <TransferDetails
+            transfer={transfer}
+            from={from || ''}
+            id={deterministicId}
+          />
+        </div>
+      )}
     </>
   );
 };

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

@@ -13,6 +13,7 @@ import {
   SPECIAL_CASE_NETWORK_ID,
 } from '../../links/party-link/party-link';
 import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import Hash from '../../links/hash';
 
 type Transfer = components['schemas']['commandsv1Transfer'];
 
@@ -60,7 +61,7 @@ export const TxDetailsTransfer = ({
   }
 
   const from = txData.submitter;
-
+  const id = txSignatureToDeterministicId(txData.signature.value);
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -71,7 +72,7 @@ export const TxDetailsTransfer = ({
         <TableRow modifier="bordered" data-testid="id">
           <TableCell {...sharedHeaderProps}>{t('Transfer ID')}</TableCell>
           <TableCell>
-            {txSignatureToDeterministicId(txData.signature.value)}
+            <Hash text={id} />
           </TableCell>
         </TableRow>
         <TxDetailsShared
@@ -105,7 +106,7 @@ export const TxDetailsTransfer = ({
           </TableRow>
         ) : null}
       </TableWithTbody>
-      <TransferDetails from={from} transfer={transfer} />
+      <TransferDetails from={from} transfer={transfer} id={id} />
     </>
   );
 };

apps/explorer/src/app/components/txs/lib/proposal-to-transfer.ts

@@ -0,0 +1,29 @@
+import type { components } from '../../../../types/explorer';
+
+type TransferProposal = components['schemas']['vegaNewTransferConfiguration'];
+type ActualTransfer = components['schemas']['commandsv1Transfer'];
+
+/**
+ * Converts a governance proposal for a transfer in to a transfer command that the
+ * TransferDetails component can then render. The types are very similar, but do not
+ * map precisely to each other due to some missing fields and some different field
+ * names.
+ *
+ * @param proposal Governance proposal for a transfer
+ * @returns transfer a Transfer object as if it had been submitted
+ */
+export function proposalToTransfer(proposal: TransferProposal): ActualTransfer {
+  return {
+    amount: proposal.amount,
+    asset: proposal.asset,
+    // On a transfer, 'from' is determined by the submitter, so there is no 'from' field
+    // fromAccountType does exist and is just named differently on the proposal
+    fromAccountType: proposal.sourceType,
+    oneOff: proposal.oneOff,
+    recurring: proposal.recurring,
+    // There is no reference applied on governance initiated transfers
+    reference: '',
+    to: proposal.destination,
+    toAccountType: proposal.destinationType,
+  };
+}

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

@@ -44,7 +44,6 @@ export type FilterOption =
   | 'Submit Order'
   | 'Transfer Funds'
   | 'Undelegate'
-  | 'Update Party Profile'
   | 'Update Referral Set'
   | 'Update Margin Mode'
   | 'Validator Heartbeat'
@@ -80,7 +79,6 @@ export const filterOptions: Record<string, FilterOption[]> = {
     'Apply Referral Code',
     'Create Referral Set',
     'Join Team',
-    'Update Party Profile',
     'Update Referral Set',
   ],
   'External Data': ['Chain Event', 'Submit Oracle Data'],

apps/explorer/src/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Explorer VEGA",
-  "name": "Vega Protocol - Explorer",
+  "short_name": "Mainnet Stats",
+  "name": "Vega Mainnet statistics",
   "icons": [
     {
       "src": "favicon.ico",

apps/governance/src/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Governance VEGA",
-  "name": "Vega Protocol - Governance",
+  "short_name": "Mainnet Stats",
+  "name": "Vega Mainnet statistics",
   "icons": [
     {
       "src": "favicon.ico",

apps/static/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Vega Protocol static assets</title>
+    <title>Vega Protocol static asseets</title>
     <link rel="stylesheet" href="fonts.css" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>

apps/trading/.env.mainnet

@@ -1,4 +1,4 @@
-NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.rpc.grove.city/v1/af6a2d529a11f8158bc8ca2a
+NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.gateway.pokt.network/v1/lb/af6a2d529a11f8158bc8ca2a
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613

apps/trading/assets/manifest.json

@@ -1,12 +1,6 @@
 {
-  "name": "Vega Protocol - Trading",
-  "short_name": "Console",
-  "description": "Vega Protocol - Trading dApp",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait",
-  "theme_color": "#000000",
-  "background_color": "#ffffff",
+  "short_name": "Mainnet Stats",
+  "name": "Vega Mainnet statistics",
   "icons": [
     {
       "src": "favicon.ico",
@@ -18,5 +12,9 @@
       "type": "image/png",
       "sizes": "192x192"
     }
-  ]
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
 }

apps/trading/client-pages/competitions/competitions-create-team.tsx

@@ -1,10 +1,5 @@
-import { Link, useSearchParams } from 'react-router-dom';
-import {
-  Intent,
-  TradingAnchorButton,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { useSearchParams } from 'react-router-dom';
+import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
@@ -35,19 +30,6 @@ export const CompetitionsCreateTeam = () => {
       <LayoutWithGradient>
         <div className="mx-auto md:w-2/3 max-w-xl">
           <Box className="flex flex-col gap-4">
-            <Link
-              to={Links.COMPETITIONS()}
-              className="text-xs inline-flex items-center gap-1 group"
-            >
-              <VegaIcon
-                name={VegaIconNames.CHEVRON_LEFT}
-                size={12}
-                className="text-vega-clight-100 dark:text-vega-cdark-100"
-              />{' '}
-              <span className="group-hover:underline">
-                {t('Go back to the competitions')}
-              </span>
-            </Link>
             <h1 className="calt text-2xl lg:text-3xl xl:text-4xl">
               {isSolo ? t('Create solo team') : t('Create a team')}
             </h1>
@@ -96,17 +78,15 @@ const CreateTeamFormContainer = ({ isSolo }: { isSolo: boolean }) => {
         <p className="text-sm">{t('Team creation transaction successful')}</p>
         {code && (
           <>
-            <dl>
-              <dt className="text-sm">{t('Your team ID:')}</dt>
-              <dl>
-                <span
-                  className="font-mono break-all bg-rainbow bg-clip-text text-transparent text-2xl"
-                  data-testid="team-id-display"
-                >
-                  {code}
-                </span>
-              </dl>
-            </dl>
+            <p className="text-sm">
+              Your team ID is:{' '}
+              <span
+                className="font-mono break-all"
+                data-testid="team-id-display"
+              >
+                {code}
+              </span>
+            </p>
             <TradingAnchorButton
               href={Links.COMPETITIONS_TEAM(code)}
               intent={Intent.Info}

apps/trading/client-pages/competitions/competitions-update-team.tsx

@@ -3,14 +3,7 @@ import { usePageTitle } from '../../lib/hooks/use-page-title';
 import { Box } from '../../components/competitions/box';
 import { useT } from '../../lib/use-t';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import {
-  Intent,
-  Loader,
-  Splash,
-  TradingAnchorButton,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { RainbowButton } from '../../components/rainbow-button';
 import { Link, Navigate, useParams } from 'react-router-dom';
 import { Links } from '../../lib/links';
@@ -18,7 +11,6 @@ import { useReferralSetTransaction } from '../../lib/hooks/use-referral-set-tran
 import { type FormFields, TeamForm, TransactionType } from './team-form';
 import { useTeam } from '../../lib/hooks/use-team';
 import { LayoutWithGradient } from '../../components/layouts-inner';
-import { useEffect, useState } from 'react';
 
 export const CompetitionsUpdateTeam = () => {
   const t = useT();
@@ -37,19 +29,6 @@ export const CompetitionsUpdateTeam = () => {
       <LayoutWithGradient>
         <div className="mx-auto md:w-2/3 max-w-xl">
           <Box className="flex flex-col gap-4">
-            <Link
-              to={Links.COMPETITIONS_TEAM(teamId)}
-              className="text-xs inline-flex items-center gap-1 group"
-            >
-              <VegaIcon
-                name={VegaIconNames.CHEVRON_LEFT}
-                size={12}
-                className="text-vega-clight-100 dark:text-vega-cdark-100"
-              />{' '}
-              <span className="group-hover:underline">
-                {t('Go back to the team profile')}
-              </span>
-            </Link>
             <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
               {t('Update a team')}
             </h1>
@@ -78,8 +57,7 @@ const UpdateTeamFormContainer = ({
   pubKey: string;
 }) => {
   const t = useT();
-  const [refetching, setRefetching] = useState<boolean>(false);
-  const { team, loading, error, refetch } = useTeam(teamId, pubKey);
+  const { team, loading, error } = useTeam(teamId, pubKey);
 
   const { err, status, onSubmit } = useReferralSetTransaction({
     onSuccess: () => {
@@ -87,15 +65,7 @@ const UpdateTeamFormContainer = ({
     },
   });
 
-  // refetch when saved
-  useEffect(() => {
-    if (refetch && status === 'confirmed') {
-      refetch();
-      setRefetching(true);
-    }
-  }, [refetch, status]);
-
-  if (loading && !refetching) {
+  if (loading) {
     return <Loader size="small" />;
   }
   if (error) {
@@ -114,33 +84,6 @@ const UpdateTeamFormContainer = ({
     return <Navigate to={Links.COMPETITIONS_TEAM(teamId)} />;
   }
 
-  if (status === 'confirmed') {
-    return (
-      <div
-        className="flex flex-col items-start gap-2"
-        data-testid="team-creation-success-message"
-      >
-        <p className="text-sm">
-          <VegaIcon
-            name={VegaIconNames.TICK}
-            size={18}
-            className="text-vega-green-500"
-          />{' '}
-          {t('Changes successfully saved to your team.')}
-        </p>
-
-        <TradingAnchorButton
-          href={Links.COMPETITIONS_TEAM(teamId)}
-          intent={Intent.Info}
-          size="small"
-          data-testid="view-team-button"
-        >
-          {t('View team')}
-        </TradingAnchorButton>
-      </div>
-    );
-  }
-
   const defaultValues: FormFields = {
     id: team.teamId,
     name: team.name,

apps/trading/client-pages/market/market-header-stats.tsx

@@ -56,7 +56,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         <Last24hPriceChange
           marketId={market.id}
           decimalPlaces={market.decimalPlaces}
-          fallback={<span>-</span>}
         />
       </HeaderStat>
       <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
@@ -113,7 +112,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
           heading={`${t('Funding Rate')} / ${t('Countdown')}`}
           testId="market-funding"
         >
-          <div className="flex gap-2">
+          <div className="flex justify-between gap-2">
             <FundingRate marketId={market.id} />
             <FundingCountdown marketId={market.id} />
           </div>

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

@@ -3,6 +3,7 @@ import { type Market } from '@vegaprotocol/markets';
 // TODO: handle oracle banner
 // import { OracleBanner } from '@vegaprotocol/markets';
 import { useState } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
 import {
   Popover,
@@ -11,21 +12,21 @@ import {
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
+import { MarketBanner } from '../../components/market-banner';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { type TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
+
 interface TradePanelsProps {
   market: Market;
   pinnedAsset?: PinnedAsset;
 }
 
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  const [topView, setTopView] = useState<TradingView>('chart');
-  const topViewCfg = TradingViews[topView];
-  const [bottomView, setBottomView] = useState<TradingView>('positions');
-  const bottomViewCfg = TradingViews[bottomView];
+  const [view, setView] = useState<TradingView>('chart');
+  const viewCfg = TradingViews[view];
 
-  const renderView = (view: TradingView) => {
+  const renderView = () => {
     const Component = TradingViews[view].component;
 
     if (!Component) {
@@ -38,13 +39,12 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
     // so watch out for clashes in props
     return (
       <ErrorBoundary feature={view}>
-        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />
+        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
       </ErrorBoundary>
     );
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const renderMenu = (viewCfg: any) => {
+  const renderMenu = () => {
     if ('menu' in viewCfg || 'settings' in viewCfg) {
       return (
         <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
@@ -69,80 +69,55 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
   };
 
   return (
-    <div className="h-full flex flex-col lg:grid grid-rows-[min-content_min-content_1fr_min-content]">
-      <div className="flex flex-col w-full overflow-hidden">
-        <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
-          {['chart', 'orderbook', 'trades', 'liquidity', 'fundingPayments']
-            // filter to control available views for the current market
-            // e.g. only perpetuals should get the funding views
-            .filter((_key) => {
-              const key = _key as TradingView;
-              const perpOnlyViews = ['funding', 'fundingPayments'];
-
-              if (
-                market?.tradableInstrument.instrument.product.__typename ===
-                'Perpetual'
-              ) {
-                return true;
-              }
-
-              if (perpOnlyViews.includes(key)) {
-                return false;
-              }
-
-              return true;
-            })
-            .map((_key) => {
-              const key = _key as TradingView;
-              const isActive = topView === key;
-              return (
-                <ViewButton
-                  key={key}
-                  view={key}
-                  isActive={isActive}
-                  onClick={() => {
-                    setTopView(key);
-                  }}
-                />
-              );
-            })}
-        </div>
-        <div className="h-[50vh] lg:h-full relative">
-          <div>{renderMenu(topViewCfg)}</div>
-          <div className="overflow-auto h-full">{renderView(topView)}</div>
-        </div>
+    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
+      <div>
+        <MarketBanner market={market} />
       </div>
-
-      <div className="flex flex-col w-full grow">
-        <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
-          {[
-            'positions',
-            'activeOrders',
-            'closedOrders',
-            'rejectedOrders',
-            'orders',
-            'stopOrders',
-            'collateral',
-            'fills',
-          ].map((_key) => {
+      <div>{renderMenu()}</div>
+      <div className="h-full relative">
+        <AutoSizer>
+          {({ width, height }) => (
+            <div style={{ width, height }} className="overflow-auto">
+              {renderView()}
+            </div>
+          )}
+        </AutoSizer>
+      </div>
+      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
+        {Object.keys(TradingViews)
+          // filter to control available views for the current market
+          // eg only perps should get the funding views
+          .filter((_key) => {
             const key = _key as TradingView;
-            const isActive = bottomView === key;
+            const perpOnlyViews = ['funding', 'fundingPayments'];
+
+            if (
+              market?.tradableInstrument.instrument.product.__typename ===
+              'Perpetual'
+            ) {
+              return true;
+            }
+
+            if (perpOnlyViews.includes(key)) {
+              return false;
+            }
+
+            return true;
+          })
+          .map((_key) => {
+            const key = _key as TradingView;
+            const isActive = view === key;
             return (
               <ViewButton
                 key={key}
                 view={key}
                 isActive={isActive}
                 onClick={() => {
-                  setBottomView(key);
+                  setView(key);
                 }}
               />
             );
           })}
-        </div>
-        <div className="relative grow">
-          <div className="flex flex-col">{renderMenu(bottomViewCfg)}</div>
-          <div className="overflow-auto h-full">{renderView(bottomView)}</div>
-        </div>
       </div>
     </div>
   );
@@ -182,7 +157,7 @@ const useViewLabel = (view: TradingView) => {
     depth: t('Depth'),
     liquidity: t('Liquidity'),
     funding: t('Funding'),
-    fundingPayments: t('Funding'),
+    fundingPayments: t('Funding Payments'),
     orderbook: t('Orderbook'),
     trades: t('Trades'),
     positions: t('Positions'),

apps/trading/client-pages/markets/mobile-buttons.tsx

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

apps/trading/client-pages/portfolio/portfolio-sidebar.tsx

@@ -2,7 +2,6 @@ import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { SidebarButton, ViewType } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
-import { MobileButton } from '../markets/mobile-buttons';
 
 export const PortfolioSidebar = () => {
   const t = useT();
@@ -31,28 +30,3 @@ export const PortfolioSidebar = () => {
     </>
   );
 };
-
-export const PortfolioMobileSidebar = () => {
-  const t = useT();
-  const currentRouteId = useGetCurrentRouteId();
-
-  return (
-    <div className="grid grid-cols-3 grow md:grow-0 md:flex lg:flex-col items-center gap-2 lg:gap-4 p-1">
-      <MobileButton
-        view={ViewType.Deposit}
-        tooltip={t('Deposit')}
-        routeId={currentRouteId}
-      />
-      <MobileButton
-        view={ViewType.Withdraw}
-        tooltip={t('Withdraw')}
-        routeId={currentRouteId}
-      />
-      <MobileButton
-        view={ViewType.Transfer}
-        tooltip={t('Transfer')}
-        routeId={currentRouteId}
-      />
-    </div>
-  );
-};

apps/trading/client-pages/referrals/hooks/use-referral-program.ts

@@ -1,4 +1,4 @@
-import { formatNumber } from '@vegaprotocol/utils';
+import { getNumberFormat } from '@vegaprotocol/utils';
 import sortBy from 'lodash/sortBy';
 import omit from 'lodash/omit';
 import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
@@ -107,7 +107,9 @@ export const useReferralProgram = () => {
       discountFactor: Number(t.referralDiscountFactor),
       discount: BigNumber(t.referralDiscountFactor).times(100).toFixed(2) + '%',
       minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
-      volume: formatNumber(t.minimumRunningNotionalTakerVolume, 0),
+      volume: getNumberFormat(0).format(
+        Number(t.minimumRunningNotionalTakerVolume)
+      ),
       epochs: Number(t.minimumEpochs),
     };
   });

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -14,9 +14,9 @@ import {
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import {
   addDecimalsFormatNumber,
-  formatNumber,
   getDateFormat,
   getDateTimeFormat,
+  getNumberFormat,
   getUserLocale,
   removePaginationWrapper,
 } from '@vegaprotocol/utils';
@@ -323,7 +323,7 @@ export const Statistics = ({
       }
       description={<QUSDTooltip />}
     >
-      {formatNumber(totalCommissionValue, 0)}
+      {getNumberFormat(0).format(Number(totalCommissionValue))}
     </StatTile>
   );
 
@@ -563,8 +563,8 @@ export const RefereesTable = ({
               )
                 .map((r) => ({
                   ...r,
-                  volume: formatNumber(r.volume, 0),
-                  commission: formatNumber(r.commission, 0),
+                  volume: getNumberFormat(0).format(r.volume),
+                  commission: getNumberFormat(0).format(r.commission),
                 }))
                 .reverse()}
             />

apps/trading/components/competitions/competitions-leaderboard.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-import { formatNumber } from '@vegaprotocol/utils';
+import { getNumberFormat } from '@vegaprotocol/utils';
 import { type useTeams } from '../../lib/hooks/use-teams';
 import { useT } from '../../lib/use-t';
 import { Table } from '../table';
@@ -15,7 +15,8 @@ export const CompetitionsLeaderboard = ({
 }) => {
   const t = useT();
 
-  const num = (n?: number | string) => (!n ? '-' : formatNumber(n, 0));
+  const num = (n?: number | string) =>
+    !n ? '-' : getNumberFormat(0).format(Number(n));
 
   if (!data || data.length === 0) {
     return <Splash>{t('Could not find any teams')}</Splash>;
@@ -32,9 +33,9 @@ export const CompetitionsLeaderboard = ({
         { name: 'status', displayName: t('Status') },
         { name: 'volume', displayName: t('Volume') },
       ]}
-      data={data.map((td) => {
+      data={data.map((td, i) => {
         // leaderboard place or medal
-        let rank: number | React.ReactNode = td.rank;
+        let rank: number | React.ReactNode = i + 1;
         if (rank === 1) rank = <Rank variant="gold" />;
         if (rank === 2) rank = <Rank variant="silver" />;
         if (rank === 3) rank = <Rank variant="bronze" />;

apps/trading/components/competitions/team-avatar.tsx

@@ -1,6 +1,4 @@
-import { isValidUrl } from '@vegaprotocol/utils';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
 
 const NUM_AVATARS = 20;
 const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';
@@ -13,26 +11,6 @@ export const getFallbackAvatar = (teamId: string) => {
   return AVATAR_PATHNAME_PATTERN.replace('{id}', avatarId);
 };
 
-const useAvatar = (teamId: string, url: string) => {
-  const fallback = getFallbackAvatar(teamId);
-  const [avatar, setAvatar] = useState<string>(fallback);
-
-  useEffect(() => {
-    if (!isValidUrl(url)) return;
-    fetch(url, { cache: 'force-cache' })
-      .then((response) => {
-        if (response.ok) {
-          setAvatar(url);
-        }
-      })
-      .catch(() => {
-        /** noop */
-      });
-  });
-
-  return avatar;
-};
-
 export const TeamAvatar = ({
   teamId,
   imgUrl,
@@ -44,7 +22,7 @@ export const TeamAvatar = ({
   alt?: string;
   size?: 'large' | 'small';
 }) => {
-  const img = useAvatar(teamId, imgUrl);
+  const img = imgUrl && imgUrl.length > 0 ? imgUrl : getFallbackAvatar(teamId);
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img

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

@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import { Sidebar, SidebarContent, useSidebar } from '../sidebar';
 import classNames from 'classnames';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+
 export const LayoutWithSidebar = ({
   header,
   sidebar,
@@ -16,7 +17,7 @@ export const LayoutWithSidebar = ({
   const sidebarOpen = sidebarView !== null;
   const gridClasses = classNames(
     'h-full relative z-0 grid',
-    'grid-rows-[min-content_1fr_50px]',
+    'grid-rows-[min-content_1fr_40px]',
     'lg:grid-rows-[min-content_1fr]',
     'lg:grid-cols-[1fr_280px_40px]',
     'xxxl:grid-cols-[1fr_320px_40px]'
@@ -26,13 +27,10 @@ export const LayoutWithSidebar = ({
     <div className={gridClasses}>
       <div className="col-span-full">{header}</div>
       <main
-        className={classNames(
-          'col-start-1 col-end-1 overflow-hidden lg:overflow-y-auto grow lg:grow-0',
-          {
-            'lg:col-end-3': !sidebarOpen,
-            'hidden lg:block lg:col-end-2': sidebarOpen,
-          }
-        )}
+        className={classNames('col-start-1 col-end-1 overflow-y-auto', {
+          'lg:col-end-3': !sidebarOpen,
+          'hidden lg:block lg:col-end-2': sidebarOpen,
+        })}
       >
         <Outlet />
       </main>

apps/trading/components/market-header/index.ts

@@ -1,2 +1 @@
 export * from './market-header';
-export * from './mobile-market-header';

apps/trading/components/market-header/mobile-market-header.tsx

@@ -1,133 +0,0 @@
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { MarketSelector } from '../market-selector';
-import {
-  Last24hPriceChange,
-  useMarket,
-  useMarketList,
-} from '@vegaprotocol/markets';
-import { useParams } from 'react-router-dom';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { useState } from 'react';
-import { useT } from '../../lib/use-t';
-import classNames from 'classnames';
-import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
-import { MarketMarkPrice } from '../market-mark-price';
-/**
- * This is only rendered for the mobile navigation
- */
-export const MobileMarketHeader = () => {
-  const t = useT();
-  const { marketId } = useParams();
-  const { data } = useMarket(marketId);
-  const [openMarket, setOpenMarket] = useState(false);
-  const [openPrice, setOpenPrice] = useState(false);
-
-  // Ensure that markets are kept cached so opening the list
-  // shows all markets instantly
-  useMarketList();
-
-  if (!marketId) return null;
-
-  return (
-    <div className="pl-3 pr-2 flex justify-between gap-2 h-10 bg-vega-clight-700 dark:bg-vega-cdark-700">
-      <FullScreenPopover
-        open={openMarket}
-        onOpenChange={(x) => {
-          setOpenMarket(x);
-        }}
-        trigger={
-          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-base leading-3 md:text-lg whitespace-nowrap">
-            {data
-              ? data.tradableInstrument.instrument.code
-              : t('Select market')}
-            <span
-              className={classNames(
-                'transition-transform ease-in-out duration-300 flex',
-                {
-                  'rotate-180': openMarket,
-                }
-              )}
-            >
-              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={16} />
-            </span>
-          </h1>
-        }
-      >
-        <MarketSelector
-          currentMarketId={marketId}
-          onSelect={() => setOpenMarket(false)}
-        />
-      </FullScreenPopover>
-      <FullScreenPopover
-        open={openPrice}
-        onOpenChange={(x) => {
-          setOpenPrice(x);
-        }}
-        trigger={
-          <span className="flex gap-2 items-end md:text-md whitespace-nowrap leading-3">
-            {data && (
-              <>
-                <span className="text-xs">
-                  <Last24hPriceChange
-                    marketId={data.id}
-                    decimalPlaces={data.decimalPlaces}
-                  />
-                </span>
-                <span className="flex items-center gap-1">
-                  <MarketMarkPrice
-                    marketId={data.id}
-                    decimalPlaces={data.decimalPlaces}
-                  />
-                  <VegaIcon
-                    name={VegaIconNames.CHEVRON_DOWN}
-                    size={16}
-                    className={classNames(
-                      'transition-transform ease-in-out duration-300',
-                      {
-                        'rotate-180': openPrice,
-                      }
-                    )}
-                  />
-                </span>
-              </>
-            )}
-          </span>
-        }
-      >
-        {data && (
-          <div className="px-3 py-6 text-sm grid grid-cols-2 items-center gap-x-4 gap-y-6">
-            <MarketHeaderStats market={data} />
-          </div>
-        )}
-      </FullScreenPopover>
-    </div>
-  );
-};
-
-export interface PopoverProps extends PopoverPrimitive.PopoverProps {
-  trigger: React.ReactNode | string;
-}
-
-export const FullScreenPopover = ({
-  trigger,
-  children,
-  open,
-  onOpenChange,
-}: PopoverProps) => {
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <PopoverPrimitive.Trigger data-testid="popover-trigger">
-        {trigger}
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          data-testid="popover-content"
-          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 border-y border-default"
-          sideOffset={0}
-        >
-          {children}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-};

apps/trading/components/navbar/index.tsx

@@ -1 +1,2 @@
 export * from './navbar';
+export * from './nav-header';

apps/trading/components/navbar/nav-header.tsx

@@ -0,0 +1,81 @@
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { MarketSelector } from '../market-selector';
+import { useMarket, useMarketList } from '@vegaprotocol/markets';
+import { useParams } from 'react-router-dom';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { useState } from 'react';
+import { useT } from '../../lib/use-t';
+import classNames from 'classnames';
+
+/**
+ * This is only rendered for the mobile navigation
+ */
+export const NavHeader = () => {
+  const t = useT();
+  const { marketId } = useParams();
+  const { data } = useMarket(marketId);
+  const [open, setOpen] = useState(false);
+
+  // Ensure that markets are kept cached so opening the list
+  // shows all markets instantly
+  useMarketList();
+
+  if (!marketId) return null;
+
+  return (
+    <FullScreenPopover
+      open={open}
+      onOpenChange={(x) => {
+        setOpen(x);
+      }}
+      trigger={
+        <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
+          {data ? data.tradableInstrument.instrument.code : t('Select market')}
+          <span
+            className={classNames(
+              'transition-transform ease-in-out duration-300',
+              {
+                'rotate-180': open,
+              }
+            )}
+          >
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
+          </span>
+        </h1>
+      }
+    >
+      <MarketSelector
+        currentMarketId={marketId}
+        onSelect={() => setOpen(false)}
+      />
+    </FullScreenPopover>
+  );
+};
+
+export interface PopoverProps extends PopoverPrimitive.PopoverProps {
+  trigger: React.ReactNode | string;
+}
+
+export const FullScreenPopover = ({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+}: PopoverProps) => {
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger data-testid="popover-trigger">
+        {trigger}
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          data-testid="popover-content"
+          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 text-default border border-default"
+          sideOffset={5}
+        >
+          {children}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+};

apps/trading/components/navbar/navbar.tsx

@@ -34,7 +34,13 @@ import { supportedLngs } from '../../lib/i18n';
 type MenuState = 'wallet' | 'nav' | null;
 type Theme = 'system' | 'yellow';
 
-export const Navbar = ({ theme = 'system' }: { theme?: Theme }) => {
+export const Navbar = ({
+  children,
+  theme = 'system',
+}: {
+  children?: ReactNode;
+  theme?: Theme;
+}) => {
   const i18n = useI18n();
   const t = useT();
   // menu state for small screens
@@ -69,6 +75,8 @@ export const Navbar = ({ theme = 'system' }: { theme?: Theme }) => {
       >
         <VLogo className="w-4" />
       </NavLink>
+      {/* Left section */}
+      <div className="flex items-center lg:hidden">{children}</div>
       {/* Used to show header in nav on mobile */}
       <div className="hidden lg:block">
         <NavbarMenu onClick={() => setMenu(null)} />

apps/trading/components/sidebar/sidebar.tsx

@@ -17,7 +17,6 @@ import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../error-boundary';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 export enum ViewType {
   Order = 'Order',
@@ -27,10 +26,9 @@ export enum ViewType {
   Transfer = 'Transfer',
   Settings = 'Settings',
   ViewAs = 'ViewAs',
-  Close = 'Close',
 }
 
-export type BarView =
+type SidebarView =
   | {
       type: ViewType.Deposit;
       assetId?: string;
@@ -51,9 +49,6 @@ export type BarView =
     }
   | {
       type: ViewType.Settings;
-    }
-  | {
-      type: ViewType.Close;
     };
 
 export const Sidebar = ({ options }: { options?: ReactNode }) => {
@@ -62,52 +57,26 @@ export const Sidebar = ({ options }: { options?: ReactNode }) => {
   const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
   const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
   const { pubKeys } = useVegaWallet();
-  const { isMobile } = useScreenDimensions();
-  const { getView } = useSidebar((store) => ({
-    setViews: store.setViews,
-    getView: store.getView,
-  }));
-  const currView = getView(currentRouteId);
   return (
-    <div className="flex h-full lg:flex-col gap-1" data-testid="sidebar">
-      {options && (
-        <nav className={classNames(navClasses, 'flex grow')}>{options}</nav>
-      )}
-      <nav
-        className={classNames(
-          navClasses,
-          'ml-auto lg:mt-auto lg:ml-0 shrink-0'
-        )}
-      >
-        {!isMobile ? (
-          <>
-            <SidebarButton
-              view={ViewType.ViewAs}
-              onClick={() => {
-                setViewAsDialogOpen(true);
-              }}
-              icon={VegaIconNames.EYE}
-              tooltip={t('View as party')}
-              disabled={Boolean(pubKeys)}
-              routeId={currentRouteId}
-            />
-            <SidebarButton
-              view={ViewType.Settings}
-              icon={VegaIconNames.COG}
-              tooltip={t('Settings')}
-              routeId={currentRouteId}
-            />
-          </>
-        ) : (
-          currView && (
-            <SidebarButton
-              view={ViewType.Close}
-              icon={VegaIconNames.ARROW_LEFT}
-              tooltip={t('Back')}
-              routeId={currentRouteId}
-            />
-          )
-        )}
+    <div className="flex h-full p-1 lg:flex-col gap-2" data-testid="sidebar">
+      {options && <nav className={navClasses}>{options}</nav>}
+      <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
+        <SidebarButton
+          view={ViewType.ViewAs}
+          onClick={() => {
+            setViewAsDialogOpen(true);
+          }}
+          icon={VegaIconNames.EYE}
+          tooltip={t('View as party')}
+          disabled={Boolean(pubKeys)}
+          routeId={currentRouteId}
+        />
+        <SidebarButton
+          view={ViewType.Settings}
+          icon={VegaIconNames.COG}
+          tooltip={t('Settings')}
+          routeId={currentRouteId}
+        />
         <NodeHealthContainer />
       </nav>
     </div>
@@ -134,7 +103,7 @@ export const SidebarButton = ({
     getView: store.getView,
   }));
   const currView = getView(routeId);
-  const onSelect = (view: BarView['type']) => {
+  const onSelect = (view: SidebarView['type']) => {
     if (view === currView?.type) {
       setViews(null, routeId);
     } else {
@@ -164,7 +133,7 @@ export const SidebarButton = ({
       <button
         className={buttonClasses}
         data-testid={view}
-        onClick={onClick || (() => onSelect(view as BarView['type']))}
+        onClick={onClick || (() => onSelect(view as SidebarView['type']))}
         disabled={disabled}
       >
         <VegaIcon name={icon} size={20} />
@@ -211,10 +180,6 @@ export const SidebarContent = () => {
     }
   }
 
-  if (view.type === ViewType.Close) {
-    return <CloseSidebar />;
-  }
-
   if (view.type === ViewType.Info) {
     if (params.marketId) {
       return (
@@ -302,9 +267,9 @@ const CloseSidebar = () => {
 };
 
 export const useSidebar = create<{
-  views: { [key: string]: BarView | null };
-  setViews: (view: BarView | null, routeId: string) => void;
-  getView: (routeId: string) => BarView | null | undefined;
+  views: { [key: string]: SidebarView | null };
+  setViews: (view: SidebarView | null, routeId: string) => void;
+  getView: (routeId: string) => SidebarView | null | undefined;
 }>()((set, get) => ({
   views: {},
   setViews: (x, routeId) =>

apps/trading/e2e/.env

@@ -1,3 +1,3 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:latest
-VEGA_VERSION=v0.74.0-preview.10
+VEGA_VERSION=v0.74.0-preview.8
 LOCAL_SERVER=false

apps/trading/e2e/conftest.py

@@ -111,7 +111,6 @@ def init_vega(request=None):
                 f"Container {container.id} started",
                 extra={"worker_id": os.environ.get("PYTEST_XDIST_WORKER")},
             )
-            vega.container = container
             yield vega
         except APIError as e:
             logger.info(f"Container creation failed.")
@@ -178,34 +177,10 @@ def init_page(vega: VegaServiceNull, browser: Browser, request: pytest.FixtureRe
 
 @pytest.fixture
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))
-        yield vega_instance
+    with init_vega(request) as vega:
+        yield vega
 
 
-
-def cleanup_container(vega_instance):
-    try:
-        # Attempt to stop the container if it's still running
-        if vega_instance.container.status == 'running':
-            print(f"Stopping container {vega_instance.container.id}")
-            vega_instance.container.stop()
-        else:
-            print(f"Container {vega_instance.container.id} is not running.")
-    except docker.errors.NotFound:
-        print(f"Container {vega_instance.container.id} not found, may have been stopped and removed.")
-    except Exception as e:
-        print(f"Error during cleanup: {str(e)}")
-
-    try:
-        # Attempt to remove the container
-        vega_instance.container.remove()
-        print(f"Container {vega_instance.container.id} removed.")
-    except docker.errors.NotFound:
-        print(f"Container {vega_instance.container.id} not found, may have been removed.")
-    except Exception as e:
-        print(f"Error during container removal: {str(e)}")
-
 @pytest.fixture
 def page(vega, browser, request):
     with init_page(vega, browser, request) as page_instance:

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

@@ -2,7 +2,7 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from datetime import datetime, timedelta
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_continuous_market
 from actions.utils import wait_for_toast_confirmation
 
@@ -17,10 +17,8 @@ expire = "expire"
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
-
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

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

@@ -3,7 +3,7 @@ from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from datetime import datetime, timedelta
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_continuous_market
 
 stop_order_btn = "order-type-Stop"
@@ -259,10 +259,9 @@ def test_submit_stop_limit_order_cancel(
 
 class TestStopOcoValidation:
     @pytest.fixture(scope="class")
-    def vega(request):
-        with init_vega(request) as vega_instance:
-            request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-            yield vega_instance
+    def vega(self, request):
+        with init_vega(request) as vega:
+            yield vega
 
     @pytest.fixture(scope="class")
     def continuous_market(self, vega):

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

@@ -2,7 +2,7 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.utils import change_keys
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_continuous_market
 
 order_size = "order-size"
@@ -14,10 +14,8 @@ deal_ticket_deposit_dialog_button = "deal-ticket-deposit-dialog-button"
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(
-            vega_instance))  # Register the cleanup function
-        yield vega_instance
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")
@@ -25,7 +23,6 @@ def continuous_market(vega):
     return setup_continuous_market(vega)
 
 
-@pytest.mark.skip("tbd - issue only on the sim, should work in vega 0.74.0")
 @pytest.mark.usefixtures("auth", "risk_accepted")
 def test_should_display_info_and_button_for_deposit(continuous_market, page: Page):
     page.goto(f"/#/markets/{continuous_market}")

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

@@ -4,7 +4,7 @@ from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from wallet_config import MM_WALLET
-from conftest import init_vega, init_page, auth_setup, cleanup_container
+from conftest import init_vega, init_page, auth_setup
 from actions.utils import next_epoch, change_keys, forward_time
 from fixtures.market import market_exists, setup_continuous_market
 
@@ -82,36 +82,31 @@ def market_ids():
 @pytest.fixture(scope="module")
 def vega_volume_discount_tier_1(request):
     with init_vega(request) as vega_volume_discount_tier_1:
-            request.addfinalizer(lambda: cleanup_container(vega_volume_discount_tier_1))  # Register the cleanup function
-            yield vega_volume_discount_tier_1
+        yield vega_volume_discount_tier_1
 
 
 @pytest.fixture(scope="module")
 def vega_volume_discount_tier_2(request):
     with init_vega(request) as vega_volume_discount_tier_2:
-            request.addfinalizer(lambda: cleanup_container(vega_volume_discount_tier_2))  # Register the cleanup function
-            yield vega_volume_discount_tier_2
+        yield vega_volume_discount_tier_2
 
 
 @pytest.fixture(scope="module")
 def vega_referral_discount_tier_1(request):
     with init_vega(request) as vega_referral_discount_tier_1:
-            request.addfinalizer(lambda: cleanup_container(vega_referral_discount_tier_1))  # Register the cleanup function
-            yield vega_referral_discount_tier_1
+        yield vega_referral_discount_tier_1
 
 
 @pytest.fixture(scope="module")
 def vega_referral_discount_tier_2(request):
     with init_vega(request) as vega_referral_discount_tier_2:
-            request.addfinalizer(lambda: cleanup_container(vega_referral_discount_tier_2))  # Register the cleanup function
-            yield vega_referral_discount_tier_2
+        yield vega_referral_discount_tier_2
 
 
 @pytest.fixture(scope="module")
 def vega_referral_and_volume_discount(request):
     with init_vega(request) as vega_referral_and_volume_discount:
-            request.addfinalizer(lambda: cleanup_container(vega_referral_and_volume_discount))  # Register the cleanup function
-            yield vega_referral_and_volume_discount
+        yield vega_referral_and_volume_discount
 
 
 @pytest.fixture

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

@@ -3,7 +3,7 @@ from playwright.sync_api import expect, Page
 import json
 from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_simple_market
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from actions.vega import submit_order
 from wallet_config import MM_WALLET, TERMINATE_WALLET, wallets
 import logging
@@ -12,10 +12,9 @@ logger = logging.getLogger()
 
 
 @pytest.fixture(scope="class")
-def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+def vega():
+    with init_vega() as vega:
+        yield vega
 
 
 @pytest.fixture(scope="class")

apps/trading/e2e/tests/iceberg_orders/test_iceberg_orders.py

@@ -2,6 +2,8 @@ import pytest
 from playwright.sync_api import expect, Page
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
+from conftest import init_vega
+from fixtures.market import setup_continuous_market
 from wallet_config import MM_WALLET2
 
 def hover_and_assert_tooltip(page: Page, element_text):
@@ -9,30 +11,39 @@ def hover_and_assert_tooltip(page: Page, element_text):
     element.hover()
     expect(page.get_by_role("tooltip")).to_be_visible()
 
+class TestIcebergOrdersValidations:
+    @pytest.fixture(scope="class")
+    def vega(self, request):
+        with init_vega(request) as vega:
+            yield vega
 
-@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_iceberg_submit(continuous_market, vega: VegaServiceNull, page: Page):
-    page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id("iceberg").click()
-    page.get_by_test_id("order-peak-size").type("2")
-    page.get_by_test_id("order-minimum-size").type("1")
-    page.get_by_test_id("order-size").type("3")
-    page.get_by_test_id("order-price").type("107")
-    page.get_by_test_id("place-order").click()
+    @pytest.fixture(scope="class")
+    def continuous_market(self, vega):
+        return setup_continuous_market(vega)
 
-    expect(page.get_by_test_id("toast-content")).to_have_text(
-        "Awaiting confirmationPlease wait for your transaction to be confirmedView in block explorer"
-    )
+    @pytest.mark.usefixtures("auth", "risk_accepted")
+    def test_iceberg_submit(self, continuous_market, vega: VegaServiceNull, page: Page):
+        page.goto(f"/#/markets/{continuous_market}")
+        page.get_by_test_id("iceberg").click()
+        page.get_by_test_id("order-peak-size").type("2")
+        page.get_by_test_id("order-minimum-size").type("1")
+        page.get_by_test_id("order-size").type("3")
+        page.get_by_test_id("order-price").type("107")
+        page.get_by_test_id("place-order").click()
 
-    vega.wait_fn(1)
-    vega.wait_for_total_catchup()
-    expect(page.get_by_test_id("toast-content")).to_have_text(
-        "Order filledYour transaction has been confirmedView in block explorerSubmit order - filledBTC:DAI_2023+3 @ 107.00 tDAI"
-    )
-    page.get_by_test_id("All").click()
-    expect(
-        (page.get_by_role("row").locator('[col-id="type"]')).nth(1)
-    ).to_have_text("Limit (Iceberg)")
+        expect(page.get_by_test_id("toast-content")).to_have_text(
+            "Awaiting confirmationPlease wait for your transaction to be confirmedView in block explorer"
+        )
+
+        vega.wait_fn(1)
+        vega.wait_for_total_catchup()
+        expect(page.get_by_test_id("toast-content")).to_have_text(
+            "Order filledYour transaction has been confirmedView in block explorerSubmit order - filledBTC:DAI_2023+3 @ 107.00 tDAI"
+        )
+        page.get_by_test_id("All").click()
+        expect(
+            (page.get_by_role("row").locator('[col-id="type"]')).nth(1)
+        ).to_have_text("Limit (Iceberg)")
 
 @pytest.mark.usefixtures("auth", "risk_accepted")
 def test_iceberg_open_order(continuous_market, vega: VegaServiceNull, page: Page):

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

@@ -1,16 +1,15 @@
 import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_continuous_market
 from actions.utils import next_epoch, truncate_middle, change_keys
 
+
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
-
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

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

@@ -4,15 +4,14 @@ import vega_sim.api.governance as governance
 from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import Page, expect
 from fixtures.market import setup_continuous_market
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from actions.utils import next_epoch
 
 
 @pytest.fixture(scope="class")
-def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+def vega():
+    with init_vega() as vega:
+        yield vega
 
 
 @pytest.fixture(scope="class")

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

@@ -3,16 +3,15 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_continuous_market
-from conftest import init_page, init_vega, risk_accepted_setup, cleanup_container
+from conftest import init_page, init_vega, risk_accepted_setup
 
 market_title_test_id = "accordion-title"
 
 
 @pytest.fixture(scope="module")
-def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+def vega():
+    with init_vega() as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

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

@@ -3,7 +3,7 @@ import vega_sim.api.governance as governance
 import re
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_simple_market
 from wallet_config import MM_WALLET
 
@@ -13,10 +13,8 @@ col_market_id = '[col-id="market"] [data-testid="stack-cell-primary"]'
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
-
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

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

@@ -3,7 +3,7 @@ from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from fixtures.market import setup_simple_market
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from actions.utils import wait_for_toast_confirmation, change_keys
 from wallet_config import MM_WALLET, MM_WALLET2
 
@@ -15,10 +15,8 @@ COL_ID_FEE = ".ag-center-cols-container [col-id='fee'] .ag-cell-value"
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
-
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

apps/trading/e2e/tests/navigation/test_navigation.py

@@ -1,14 +1,13 @@
 import pytest
 from playwright.sync_api import Page, expect, Locator
 
-from conftest import init_page, init_vega, cleanup_container
+from conftest import init_page, init_vega
 
 
 @pytest.fixture(scope="module")
-def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+def vega():
+    with init_vega() as vega:
+        yield vega
 
 
 # we can reuse single page instance in all tests

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

@@ -2,7 +2,7 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.service import PeggedOrder
 from vega_sim.null_service import VegaServiceNull
-from conftest import auth_setup, init_page, init_vega, risk_accepted_setup, cleanup_container
+from conftest import auth_setup, init_page, init_vega, risk_accepted_setup
 from fixtures.market import setup_continuous_market, setup_simple_market
 from actions.utils import wait_for_toast_confirmation
 
@@ -11,9 +11,8 @@ order_tab = "tab-orders"
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module", autouse=True)

apps/trading/e2e/tests/orderbook/test_orderbook.py

@@ -2,16 +2,15 @@ import pytest
 from playwright.sync_api import Page, expect
 from typing import List
 from actions.vega import submit_order, submit_liquidity, submit_multiple_orders
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_simple_market
 from wallet_config import MM_WALLET, MM_WALLET2
 
 
 @pytest.fixture(scope="module")
-def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+def vega():
+    with init_vega() as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

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

@@ -1,7 +1,7 @@
 import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_continuous_market
 
 TOOLTIP_LABEL = "margin-health-tooltip-label"
@@ -11,10 +11,8 @@ COL_ID_USED = ".ag-center-cols-container [col-id='used'] .ag-cell-value"
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
-
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

apps/trading/e2e/tests/referrals/test_referrals.py

@@ -1,7 +1,7 @@
 import pytest
 from playwright.sync_api import Page
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from fixtures.market import setup_continuous_market, setup_simple_market
 from actions.utils import change_keys, create_and_faucet_wallet, forward_time, selector_contains_text
 from actions.vega import submit_order, submit_liquidity
@@ -14,10 +14,8 @@ BUY_ORDERS = [[1, 106], [1, 107], [1, 108]]
 
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
-
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")

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

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

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

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

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

@@ -1,13 +1,12 @@
 import pytest
 from playwright.sync_api import expect, Page
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 
 
 @pytest.fixture(scope="module")
-def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+def vega():
+    with init_vega() as vega:
+        yield vega
 
 
 @pytest.mark.usefixtures("risk_accepted")

apps/trading/e2e/tests/teams/test_teams.py

@@ -2,17 +2,17 @@ import pytest
 from playwright.sync_api import expect, Page
 import vega_sim.proto.vega as vega_protos
 from vega_sim.null_service import VegaServiceNull
-from conftest import init_vega, cleanup_container
+from conftest import init_vega
 from actions.utils import next_epoch, change_keys
 from fixtures.market import setup_continuous_market
 from conftest import auth_setup, init_page, init_vega, risk_accepted_setup
 from wallet_config import PARTY_A, PARTY_B, PARTY_C, PARTY_D, MM_WALLET
 
+
 @pytest.fixture(scope="module")
 def vega(request):
-    with init_vega(request) as vega_instance:
-        request.addfinalizer(lambda: cleanup_container(vega_instance))  # Register the cleanup function
-        yield vega_instance
+    with init_vega(request) as vega:
+        yield vega
 
 
 @pytest.fixture(scope="module")
@@ -237,12 +237,12 @@ def test_team_page_headline(team_page: Page, setup_teams_and_games):
     expect(team_page.get_by_test_id("team-name")).to_have_text(team_name)
     expect(team_page.get_by_test_id("members-count-stat")).to_have_text("4")
 
-    expect(team_page.get_by_test_id("total-games-stat")).to_have_text("1")
+    expect(team_page.get_by_test_id("total-games-stat")).to_have_text("2")
 
     # TODO this still seems wrong as its always 0
     expect(team_page.get_by_test_id("total-volume-stat")).to_have_text("0")
 
-    expect(team_page.get_by_test_id("rewards-paid-stat")).to_have_text("78")
+    expect(team_page.get_by_test_id("rewards-paid-stat")).to_have_text("214")
 
 
 def test_switch_teams(team_page: Page, vega: VegaServiceNull):
@@ -271,7 +271,7 @@ def test_leaderboard(competitions_page: Page, setup_teams_and_games):
 
     #  FIXME: the numbers are different we need to clarify this with the backend
     # expect(competitions_page.get_by_test_id("earned-1")).to_have_text("160")
-    expect(competitions_page.get_by_test_id("games-1")).to_have_text("1")
+    expect(competitions_page.get_by_test_id("games-1")).to_have_text("2")
 
     # TODO  still odd that this is 0
     expect(competitions_page.get_by_test_id("volume-0")).to_have_text("-")

apps/trading/lib/hooks/use-teams.tsx

@@ -36,9 +36,7 @@ export const useTeams = (aggregationEpochs = DEFAULT_AGGREGATION_EPOCHS) => {
       ...stats.find((s) => s.teamId === t.teamId),
     }));
 
-    return orderBy(data, (d) => Number(d.totalQuantumRewards || 0), 'desc').map(
-      (d, i) => ({ ...d, rank: i + 1 })
-    );
+    return orderBy(data, (d) => Number(d.totalQuantumRewards || 0), 'desc');
   }, [teams, stats]);
 
   return {

apps/trading/pages/_app.page.tsx

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

apps/trading/pages/_document.page.tsx

@@ -24,14 +24,11 @@ export default function Document() {
 
         {/* scripts */}
         <script src="/theme-setter.js" type="text/javascript" async />
-
-        {/* manifest */}
-        <link rel="manifest" href="/apps/trading/public/manifest.json" />
       </Head>
       <Html>
         <body
-          // Next.js will set body to display none until js runs. Because the entire app is client rendered
-          // and delivered via IPFS we override this to show a server side render loading animation until the
+          // Nextjs will set body to display none until js runs. Because the entire app is client rendered
+          // and delivered via ipfs we override this to show a server side render loading animation until the
           // js is downloaded and react takes over rendering
           style={{ display: 'block' }}
           className="bg-white dark:bg-vega-cdark-900 text-default font-alpha"

apps/trading/pages/client-router.tsx

@@ -23,11 +23,8 @@ import { NotFound as ReferralNotFound } from '../client-pages/referrals/error-bo
 import { compact } from 'lodash';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import { LiquidityHeader } from '../components/liquidity-header';
-import { MarketHeader, MobileMarketHeader } from '../components/market-header';
-import {
-  PortfolioMobileSidebar,
-  PortfolioSidebar,
-} from '../client-pages/portfolio/portfolio-sidebar';
+import { MarketHeader } from '../components/market-header';
+import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
 import { LiquiditySidebar } from '../client-pages/liquidity/liquidity-sidebar';
 import { MarketsSidebar } from '../client-pages/markets/markets-sidebar';
 import { useT } from '../lib/use-t';
@@ -36,10 +33,8 @@ import { CompetitionsTeams } from '../client-pages/competitions/competitions-tea
 import { CompetitionsTeam } from '../client-pages/competitions/competitions-team';
 import { CompetitionsCreateTeam } from '../client-pages/competitions/competitions-create-team';
 import { CompetitionsUpdateTeam } from '../client-pages/competitions/competitions-update-team';
-import { MarketsMobileSidebar } from '../client-pages/markets/mobile-buttons';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
-// These must remain dynamically imported as pennant cannot be compiled by Next.js due to ESM
+// These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
 // Using dynamic imports is a workaround for this until pennant is published as ESM
 const MarketPage = lazy(() => import('../client-pages/market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
@@ -55,20 +50,6 @@ const NotFound = () => {
 
 export const useRouterConfig = (): RouteObject[] => {
   const featureFlags = useFeatureFlags((state) => state.flags);
-  const { screenSize } = useScreenDimensions();
-  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
-  const marketHeader = largeScreen ? <MarketHeader /> : <MobileMarketHeader />;
-  const marketsSidebar = largeScreen ? (
-    <MarketsSidebar />
-  ) : (
-    <MarketsMobileSidebar />
-  );
-  const portfolioSidebar = largeScreen ? (
-    <PortfolioSidebar />
-  ) : (
-    <PortfolioMobileSidebar />
-  );
-
   const routeConfig = compact([
     {
       index: true,
@@ -85,7 +66,7 @@ export const useRouterConfig = (): RouteObject[] => {
     featureFlags.REFERRALS
       ? {
           path: AppRoutes.REFERRALS,
-          element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
           children: [
             {
               element: (
@@ -118,7 +99,7 @@ export const useRouterConfig = (): RouteObject[] => {
     featureFlags.TEAM_COMPETITION
       ? {
           path: AppRoutes.COMPETITIONS,
-          element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
           children: [
             // pages with planets and stars
             {
@@ -149,7 +130,7 @@ export const useRouterConfig = (): RouteObject[] => {
       : undefined,
     {
       path: 'fees/*',
-      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
       children: [
         {
           index: true,
@@ -159,7 +140,7 @@ export const useRouterConfig = (): RouteObject[] => {
     },
     {
       path: 'rewards/*',
-      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
       children: [
         {
           index: true,
@@ -170,7 +151,10 @@ export const useRouterConfig = (): RouteObject[] => {
     {
       path: 'markets/*',
       element: (
-        <LayoutWithSidebar header={marketHeader} sidebar={marketsSidebar} />
+        <LayoutWithSidebar
+          header={<MarketHeader />}
+          sidebar={<MarketsSidebar />}
+        />
       ),
       children: [
         {
@@ -191,7 +175,7 @@ export const useRouterConfig = (): RouteObject[] => {
     },
     {
       path: 'portfolio/*',
-      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
       children: [
         {
           index: true,

apps/trading/public/manifest.json

@@ -1,22 +0,0 @@
-{
-  "name": "Vega Protocol - Trading",
-  "short_name": "Console",
-  "description": "Vega Protocol - Trading dApp",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait",
-  "theme_color": "#000000",
-  "background_color": "#ffffff",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "cover.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    }
-  ]
-}

libs/accounts/src/lib/TransferFee.graphql

@@ -1,18 +0,0 @@
-query TransferFee(
-  $fromAccount: ID!
-  $fromAccountType: AccountType!
-  $toAccount: ID!
-  $amount: String!
-  $assetId: String!
-) {
-  estimateTransferFee(
-    fromAccount: $fromAccount
-    fromAccountType: $fromAccountType
-    toAccount: $toAccount
-    amount: $amount
-    assetId: $assetId
-  ) {
-    fee
-    discount
-  }
-}

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

@@ -1,63 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type TransferFeeQueryVariables = Types.Exact<{
-  fromAccount: Types.Scalars['ID'];
-  fromAccountType: Types.AccountType;
-  toAccount: Types.Scalars['ID'];
-  amount: Types.Scalars['String'];
-  assetId: Types.Scalars['String'];
-}>;
-
-
-export type TransferFeeQuery = { __typename?: 'Query', estimateTransferFee?: { __typename?: 'EstimatedTransferFee', fee: string, discount: string } | null };
-
-
-export const TransferFeeDocument = gql`
-    query TransferFee($fromAccount: ID!, $fromAccountType: AccountType!, $toAccount: ID!, $amount: String!, $assetId: String!) {
-  estimateTransferFee(
-    fromAccount: $fromAccount
-    fromAccountType: $fromAccountType
-    toAccount: $toAccount
-    amount: $amount
-    assetId: $assetId
-  ) {
-    fee
-    discount
-  }
-}
-    `;
-
-/**
- * __useTransferFeeQuery__
- *
- * To run a query within a React component, call `useTransferFeeQuery` and pass it any options that fit your needs.
- * When your component renders, `useTransferFeeQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useTransferFeeQuery({
- *   variables: {
- *      fromAccount: // value for 'fromAccount'
- *      fromAccountType: // value for 'fromAccountType'
- *      toAccount: // value for 'toAccount'
- *      amount: // value for 'amount'
- *      assetId: // value for 'assetId'
- *   },
- * });
- */
-export function useTransferFeeQuery(baseOptions: Apollo.QueryHookOptions<TransferFeeQuery, TransferFeeQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<TransferFeeQuery, TransferFeeQueryVariables>(TransferFeeDocument, options);
-      }
-export function useTransferFeeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TransferFeeQuery, TransferFeeQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<TransferFeeQuery, TransferFeeQueryVariables>(TransferFeeDocument, options);
-        }
-export type TransferFeeQueryHookResult = ReturnType<typeof useTransferFeeQuery>;
-export type TransferFeeLazyQueryHookResult = ReturnType<typeof useTransferFeeLazyQuery>;
-export type TransferFeeQueryResult = Apollo.QueryResult<TransferFeeQuery, TransferFeeQueryVariables>;

libs/accounts/src/lib/transfer-container.tsx

@@ -25,6 +25,7 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
   const t = useT();
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
   const { params } = useNetworkParams([
+    NetworkParams.transfer_fee_factor,
     NetworkParams.transfer_minTransferQuantumMultiple,
   ]);
 
@@ -71,6 +72,7 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
         pubKeys={pubKeys ? pubKeys?.map((pk) => pk.publicKey) : null}
         isReadOnly={isReadOnly}
         assetId={assetId}
+        feeFactor={params.transfer_fee_factor}
         minQuantumMultiple={params.transfer_minTransferQuantumMultiple}
         submitTransfer={transfer}
         accounts={sortedAccounts}

libs/accounts/src/lib/transfer-form.spec.tsx

@@ -15,30 +15,6 @@ import {
 } from './transfer-form';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
-import type { TransferFeeQuery } from './__generated__/TransferFee';
-
-const feeFactor = 0.001;
-const mockUseTransferFeeQuery = jest.fn(
-  ({
-    variables: { amount },
-  }: {
-    variables: { amount: string };
-  }): { data: TransferFeeQuery } => {
-    return {
-      data: {
-        estimateTransferFee: {
-          discount: '0',
-          fee: (Number(amount) * feeFactor).toFixed(),
-        },
-      },
-    };
-  }
-);
-
-jest.mock('./__generated__/TransferFee', () => ({
-  useTransferFeeQuery: (props: { variables: { amount: string } }) =>
-    mockUseTransferFeeQuery(props),
-}));
 
 describe('TransferForm', () => {
   const renderComponent = (props: TransferFormProps) => {
@@ -80,6 +56,7 @@ describe('TransferForm', () => {
   const props = {
     pubKey,
     pubKeys: [pubKey, '2'.repeat(64)],
+    feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [
       {
@@ -102,6 +79,7 @@ describe('TransferForm', () => {
       pubKey,
       'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
     ],
+    feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [],
     minQuantumMultiple: '1',
@@ -118,6 +96,10 @@ describe('TransferForm', () => {
   });
 
   it.each([
+    {
+      targetText: 'Transfer fee',
+      tooltipText: /transfer\.fee\.factor/,
+    },
     {
       targetText: 'Amount to be transferred',
       tooltipText: /without the fee/,
@@ -127,6 +109,9 @@ describe('TransferForm', () => {
       tooltipText: /total amount taken from your account/,
     },
   ])('Tooltip for "$targetText" shows', async (o) => {
+    // 1003-TRAN-015
+    // 1003-TRAN-016
+    // 1003-TRAN-017
     // 1003-TRAN-018
     // 1003-TRAN-019
     renderComponent(props);
@@ -139,10 +124,6 @@ describe('TransferForm', () => {
     // Select asset
     await selectAsset(asset);
 
-    await userEvent.selectOptions(
-      screen.getByLabelText('From account'),
-      `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
-    );
     // set valid amount
     const amountInput = screen.getByLabelText('Amount');
     await userEvent.type(amountInput, amount);
@@ -233,7 +214,9 @@ describe('TransferForm', () => {
     // set valid amount
     await userEvent.clear(amountInput);
     await userEvent.type(amountInput, amount);
-    expect(screen.getByTestId('transfer-fee')).toHaveTextContent('1');
+    expect(screen.getByTestId('transfer-fee')).toHaveTextContent(
+      new BigNumber(props.feeFactor).times(amount).toFixed()
+    );
 
     await submit();
 
@@ -402,44 +385,47 @@ describe('TransferForm', () => {
       });
     });
   });
+  describe('IncludeFeesCheckbox', () => {
+    it('validates fields when checkbox is not checked', async () => {
+      renderComponent(props);
 
-  it('validates fields', async () => {
-    renderComponent(props);
+      // check current pubkey not shown
+      const keySelect: HTMLSelectElement = screen.getByLabelText('To Vega key');
+      const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
+      expect(keySelect.children).toHaveLength(pubKeyOptions.length);
+      expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
+        pubKeyOptions
+      );
 
-    // check current pubkey not shown
-    const keySelect: HTMLSelectElement = screen.getByLabelText('To Vega key');
-    const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
-    expect(keySelect.children).toHaveLength(pubKeyOptions.length);
-    expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
-      pubKeyOptions
-    );
+      await submit();
+      expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value
 
-    await submit();
-    expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value
+      // Select a pubkey
+      await userEvent.selectOptions(
+        screen.getByLabelText('To Vega key'),
+        props.pubKeys[1]
+      );
 
-    // Select a pubkey
-    await userEvent.selectOptions(
-      screen.getByLabelText('To Vega key'),
-      props.pubKeys[1]
-    );
+      // Select asset
+      await selectAsset(asset);
 
-    // Select asset
-    await selectAsset(asset);
+      await userEvent.selectOptions(
+        screen.getByLabelText('From account'),
+        `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
+      );
 
-    await userEvent.selectOptions(
-      screen.getByLabelText('From account'),
-      `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
-    );
+      const amountInput = screen.getByLabelText('Amount');
 
-    const amountInput = screen.getByLabelText('Amount');
-
-    await userEvent.type(amountInput, amount);
-    const expectedFee = new BigNumber(amount).times(feeFactor).toFixed();
-    const total = new BigNumber(amount).plus(expectedFee).toFixed();
-    // 1003-TRAN-021
-    expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
-    expect(screen.getByTestId('transfer-amount')).toHaveTextContent(amount);
-    expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
+      await userEvent.type(amountInput, amount);
+      const expectedFee = new BigNumber(amount)
+        .times(props.feeFactor)
+        .toFixed();
+      const total = new BigNumber(amount).plus(expectedFee).toFixed();
+      // 1003-TRAN-021
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(amount);
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
+    });
   });
 
   describe('AddressField', () => {
@@ -471,29 +457,24 @@ describe('TransferForm', () => {
 
   describe('TransferFee', () => {
     const props = {
-      amount: '20000',
-      discount: '0',
-      fee: '20',
-      decimals: 2,
+      amount: '200',
+      feeFactor: '0.001',
+      fee: '0.2',
+      transferAmount: '200',
+      decimals: 8,
     };
-    it('calculates and renders amounts and fee', () => {
+    it('calculates and renders the transfer fee', () => {
       render(<TransferFee {...props} />);
-      expect(screen.queryByTestId('discount')).not.toBeInTheDocument();
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent('0.2');
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent('200.00');
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
-        '200.20'
-      );
-    });
 
-    it('calculates and renders amounts, fee and discount', () => {
-      render(<TransferFee {...props} discount="10" />);
-      expect(screen.getByTestId('discount')).toHaveTextContent('0.1');
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent('0.2');
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent('200.00');
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
-        '200.10'
+      const expected = new BigNumber(props.amount)
+        .times(props.feeFactor)
+        .toFixed();
+      const total = new BigNumber(props.amount).plus(expected).toFixed();
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expected);
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(
+        props.amount
       );
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
     });
   });
 });

libs/accounts/src/lib/transfer-form.tsx

@@ -4,9 +4,8 @@ import {
   useRequired,
   useVegaPublicKey,
   addDecimal,
+  formatNumber,
   toBigNum,
-  removeDecimal,
-  addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
 import { useT } from './use-t';
 import {
@@ -22,11 +21,10 @@ import type { Transfer } from '@vegaprotocol/wallet';
 import { normalizeTransfer } from '@vegaprotocol/wallet';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { AssetOption, Balance } from '@vegaprotocol/assets';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
-import { useTransferFeeQuery } from './__generated__/TransferFee';
 
 interface FormFields {
   toVegaKey: string;
@@ -53,6 +51,7 @@ export interface TransferFormProps {
     asset: Asset;
   }>;
   assetId?: string;
+  feeFactor: string | null;
   minQuantumMultiple: string | null;
   submitTransfer: (transfer: Transfer) => void;
 }
@@ -62,6 +61,7 @@ export const TransferForm = ({
   pubKeys,
   isReadOnly,
   assetId: initialAssetId,
+  feeFactor,
   submitTransfer,
   accounts,
   minQuantumMultiple,
@@ -136,22 +136,11 @@ export const TransferForm = ({
 
   // Max amount given selected asset and from account
   const max = accountBalance ? new BigNumber(accountBalance) : new BigNumber(0);
-  const normalizedAmount =
-    (amount && asset && removeDecimal(amount, asset.decimals)) || '0';
 
-  const transferFeeQuery = useTransferFeeQuery({
-    variables: {
-      fromAccount: pubKey || '',
-      fromAccountType: accountType || AccountType.ACCOUNT_TYPE_GENERAL,
-      amount: normalizedAmount,
-      assetId: asset?.id || '',
-      toAccount: selectedPubKey,
-    },
-    skip: !pubKey || !amount || !asset || !selectedPubKey || fromVested,
-  });
-  const transferFee = transferFeeQuery.loading
-    ? transferFeeQuery.data || transferFeeQuery.previousData
-    : transferFeeQuery.data;
+  const fee = useMemo(
+    () => feeFactor && new BigNumber(feeFactor).times(amount).toString(),
+    [amount, feeFactor]
+  );
 
   const onSubmit = useCallback(
     (fields: FormFields) => {
@@ -443,14 +432,12 @@ export const TransferForm = ({
           </TradingInputError>
         )}
       </TradingFormGroup>
-      {(transferFee?.estimateTransferFee || fromVested) && amount && asset && (
+      {amount && fee && (
         <TransferFee
-          amount={normalizedAmount}
-          fee={fromVested ? '0' : transferFee?.estimateTransferFee?.fee}
-          discount={
-            fromVested ? '0' : transferFee?.estimateTransferFee?.discount
-          }
-          decimals={asset.decimals}
+          amount={amount}
+          feeFactor={feeFactor}
+          fee={fromVested ? '0' : fee}
+          decimals={asset?.decimals}
         />
       )}
       <TradingButton type="submit" fill={true} disabled={isReadOnly}>
@@ -462,44 +449,39 @@ export const TransferForm = ({
 
 export const TransferFee = ({
   amount,
+  feeFactor,
   fee,
-  discount,
   decimals,
 }: {
   amount: string;
+  feeFactor: string | null;
   fee?: string;
-  discount?: string;
-  decimals: number;
+  decimals?: number;
 }) => {
   const t = useT();
-  if (!amount || !fee) return null;
-  if (isNaN(Number(amount)) || isNaN(Number(fee))) {
+  if (!feeFactor || !amount || !fee) return null;
+  if (isNaN(Number(feeFactor)) || isNaN(Number(amount)) || isNaN(Number(fee))) {
     return null;
   }
 
-  const totalValue = (
-    BigInt(amount) +
-    BigInt(fee) -
-    BigInt(discount || '0')
-  ).toString();
+  const totalValue = new BigNumber(amount).plus(fee).toString();
 
   return (
     <div className="mb-4 flex flex-col gap-2 text-xs">
       <div className="flex flex-wrap items-center justify-between gap-1">
-        <div>{t('Transfer fee')}</div>
+        <Tooltip
+          description={t(
+            `The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}`,
+            { feeFactor }
+          )}
+        >
+          <div>{t('Transfer fee')}</div>
+        </Tooltip>
+
         <div data-testid="transfer-fee" className="text-muted">
-          {addDecimalsFormatNumber(fee, decimals)}
+          {formatNumber(fee, decimals)}
         </div>
       </div>
-      {discount && discount !== '0' && (
-        <div className="flex flex-wrap items-center justify-between gap-1">
-          <div>{t('Discount')}</div>
-          <div data-testid="discount" className="text-muted">
-            {addDecimalsFormatNumber(discount, decimals)}
-          </div>
-        </div>
-      )}
-
       <div className="flex flex-wrap items-center justify-between gap-1">
         <Tooltip
           description={t(
@@ -510,7 +492,7 @@ export const TransferFee = ({
         </Tooltip>
 
         <div data-testid="transfer-amount" className="text-muted">
-          {addDecimalsFormatNumber(amount, decimals)}
+          {formatNumber(amount, decimals)}
         </div>
       </div>
       <div className="flex flex-wrap items-center justify-between gap-1">
@@ -523,7 +505,7 @@ export const TransferFee = ({
         </Tooltip>
 
         <div data-testid="total-transfer-fee" className="text-muted">
-          {addDecimalsFormatNumber(totalValue, decimals)}
+          {formatNumber(totalValue, decimals)}
         </div>
       </div>
     </div>

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

@@ -281,7 +281,7 @@ export const DealTicket = ({
       marginFactor: margin?.marginFactor || '1',
       marginMode:
         margin?.marginMode || Schema.MarginMode.MARGIN_MODE_CROSS_MARGIN,
-      includeRequiredPositionMarginInAvailableCollateral: true,
+      includeCollateralIncreaseInAvailableCollateral: true,
     },
     !normalizedOrder ||
       (normalizedOrder.type !== Schema.OrderType.TYPE_MARKET &&

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

@@ -89,7 +89,7 @@ export const MarginChange = ({
       openVolume,
       marketId,
       orderMarginAccountBalance: orderMarginAccountBalance || '0',
-      includeRequiredPositionMarginInAvailableCollateral: true,
+      includeCollateralIncreaseInAvailableCollateral: true,
       orders,
     },
     skip

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

@@ -35,6 +35,7 @@
   "The total amount of each asset on this key. Includes used and available collateral.": "The total amount of each asset on this key. Includes used and available collateral.",
   "The total amount taken from your account. The amount to be transferred plus the fee.": "The total amount taken from your account. The amount to be transferred plus the fee.",
   "The total amount to be transferred (without the fee)": "The total amount to be transferred (without the fee)",
+  "The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}": "The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}",
   "To account": "To account",
   "To Vega key": "To Vega key",
   "Total": "Total",

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

@@ -446,9 +446,5 @@
   "Choose a team": "Choose a team",
   "Join a team": "Join a team",
   "Solo team / lone wolf": "Solo team / lone wolf",
-  "Choose a team to get involved": "Choose a team to get involved",
-  "Go back to the team's profile": "Go back to the team's profile",
-  "Go back to the competitions": "Go back to the competitions",
-  "Your team ID:": "Your team ID:",
-  "Changes successfully saved to your team.": "Changes successfully saved to your team."
+  "Choose a team to get involved": "Choose a team to get involved"
 }

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

@@ -94,7 +94,7 @@ export const LiquidityTable = ({
       return `${addDecimalsFormatNumberQuantum(
         value,
         assetDecimalPlaces ?? 0,
-        quantum ?? 1
+        quantum ?? 0
       )}`;
     };
 
@@ -165,7 +165,7 @@ export const LiquidityTable = ({
       return `${addDecimalsFormatNumberQuantum(
         newValue,
         assetDecimalPlaces ?? 0,
-        quantum ?? 1
+        quantum ?? 0
       )}`;
     };
 
@@ -227,7 +227,7 @@ export const LiquidityTable = ({
             addDecimalsFormatNumberQuantum(
               pendingCommitmentAmount,
               assetDecimalPlaces ?? 0,
-              quantum ?? 1
+              quantum ?? 0
             );
 
           if (
@@ -238,7 +238,7 @@ export const LiquidityTable = ({
               addDecimalsFormatNumberQuantum(
                 currentCommitmentAmount,
                 assetDecimalPlaces ?? 0,
-                quantum ?? 1
+                quantum ?? 0
               );
 
             return (
@@ -286,7 +286,7 @@ export const LiquidityTable = ({
             addDecimalsFormatNumberQuantum(
               pendingCommitmentAmount,
               assetDecimalPlaces ?? 0,
-              quantum ?? 1
+              quantum ?? 0
             );
 
           if (
@@ -297,7 +297,7 @@ export const LiquidityTable = ({
               addDecimalsFormatNumberQuantum(
                 currentCommitmentAmount,
                 assetDecimalPlaces ?? 0,
-                quantum ?? 1
+                quantum ?? 0
               );
 
             return (

libs/market-depth/src/lib/depth-chart.tsx

@@ -1,7 +1,7 @@
 import { DepthChart } from 'pennant';
 import throttle from 'lodash/throttle';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { addDecimal, formatNumber } from '@vegaprotocol/utils';
+import { addDecimal, getNumberFormat } from '@vegaprotocol/utils';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { marketDepthProvider } from './market-depth-provider';
@@ -216,12 +216,13 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
 
   const volumeFormat = useCallback(
     (volume: number) =>
-      formatNumber(volume, market?.positionDecimalPlaces || 0),
+      getNumberFormat(market?.positionDecimalPlaces || 0).format(volume),
     [market?.positionDecimalPlaces]
   );
 
   const priceFormat = useCallback(
-    (price: number) => formatNumber(price, market?.decimalPlaces || 0),
+    (price: number) =>
+      getNumberFormat(market?.decimalPlaces || 0).format(price),
     [market?.decimalPlaces]
   );
 

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -18,15 +18,12 @@ interface Props {
   initialValue?: string[];
   isHeader?: boolean;
   noUpdate?: boolean;
-  // render prop for no price change
-  fallback?: React.ReactNode;
 }
 
 export const Last24hPriceChange = ({
   marketId,
   decimalPlaces,
   initialValue,
-  fallback,
 }: Props) => {
   const t = useT();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
@@ -51,13 +48,13 @@ export const Last24hPriceChange = ({
           </span>
         }
       >
-        <span>{fallback}</span>
+        <span>-</span>
       </Tooltip>
     );
   }
 
   if (error || !isNumeric(decimalPlaces)) {
-    return <span>{fallback}</span>;
+    return <span>-</span>;
   }
 
   const candles = oneDayCandles?.map((c) => c.close) || initialValue || [];

libs/positions/src/lib/Positions.graphql

@@ -48,7 +48,7 @@ query EstimatePosition(
   $orderMarginAccountBalance: String!
   $marginMode: MarginMode!
   $marginFactor: String
-  $includeRequiredPositionMarginInAvailableCollateral: Boolean
+  $includeCollateralIncreaseInAvailableCollateral: Boolean
 ) {
   estimatePosition(
     marketId: $marketId
@@ -60,7 +60,7 @@ query EstimatePosition(
     orderMarginAccountBalance: $orderMarginAccountBalance
     marginMode: $marginMode
     marginFactor: $marginFactor
-    includeRequiredPositionMarginInAvailableCollateral: $includeRequiredPositionMarginInAvailableCollateral
+    includeCollateralIncreaseInAvailableCollateral: $includeCollateralIncreaseInAvailableCollateral
     # Everywhere in the codebase we expect price values of the underlying to have the right
     # number of digits for formatting with market.decimalPlaces. By default the estimatePosition
     # query will return a full value requiring formatting using asset.decimals. For consistency

libs/positions/src/lib/__generated__/Positions.ts

@@ -29,7 +29,7 @@ export type EstimatePositionQueryVariables = Types.Exact<{
   orderMarginAccountBalance: Types.Scalars['String'];
   marginMode: Types.MarginMode;
   marginFactor?: Types.InputMaybe<Types.Scalars['String']>;
-  includeRequiredPositionMarginInAvailableCollateral?: Types.InputMaybe<Types.Scalars['Boolean']>;
+  includeCollateralIncreaseInAvailableCollateral?: Types.InputMaybe<Types.Scalars['Boolean']>;
 }>;
 
 
@@ -130,7 +130,7 @@ export function usePositionsSubscriptionSubscription(baseOptions: Apollo.Subscri
 export type PositionsSubscriptionSubscriptionHookResult = ReturnType<typeof usePositionsSubscriptionSubscription>;
 export type PositionsSubscriptionSubscriptionResult = Apollo.SubscriptionResult<PositionsSubscriptionSubscription>;
 export const EstimatePositionDocument = gql`
-    query EstimatePosition($marketId: ID!, $openVolume: String!, $averageEntryPrice: String!, $orders: [OrderInfo!], $marginAccountBalance: String!, $generalAccountBalance: String!, $orderMarginAccountBalance: String!, $marginMode: MarginMode!, $marginFactor: String, $includeRequiredPositionMarginInAvailableCollateral: Boolean) {
+    query EstimatePosition($marketId: ID!, $openVolume: String!, $averageEntryPrice: String!, $orders: [OrderInfo!], $marginAccountBalance: String!, $generalAccountBalance: String!, $orderMarginAccountBalance: String!, $marginMode: MarginMode!, $marginFactor: String, $includeCollateralIncreaseInAvailableCollateral: Boolean) {
   estimatePosition(
     marketId: $marketId
     openVolume: $openVolume
@@ -141,7 +141,7 @@ export const EstimatePositionDocument = gql`
     orderMarginAccountBalance: $orderMarginAccountBalance
     marginMode: $marginMode
     marginFactor: $marginFactor
-    includeRequiredPositionMarginInAvailableCollateral: $includeRequiredPositionMarginInAvailableCollateral
+    includeCollateralIncreaseInAvailableCollateral: $includeCollateralIncreaseInAvailableCollateral
     scaleLiquidationPriceToMarketDecimals: true
   ) {
     collateralIncreaseEstimate {
@@ -185,7 +185,7 @@ export const EstimatePositionDocument = gql`
  *      orderMarginAccountBalance: // value for 'orderMarginAccountBalance'
  *      marginMode: // value for 'marginMode'
  *      marginFactor: // value for 'marginFactor'
- *      includeRequiredPositionMarginInAvailableCollateral: // value for 'includeRequiredPositionMarginInAvailableCollateral'
+ *      includeCollateralIncreaseInAvailableCollateral: // value for 'includeCollateralIncreaseInAvailableCollateral'
  *   },
  * });
  */

libs/types/src/__generated__/types.ts

@@ -14,6 +14,32 @@ export type Scalars = {
   Timestamp: any;
 };
 
+/** Margins for a hypothetical position not related to any existing party */
+export type AbstractMarginLevels = {
+  __typename?: 'AbstractMarginLevels';
+  /** Asset for the current margins */
+  asset: Asset;
+  /**
+   * If the margin of the party is greater than this level, then collateral will be released from the margin account into
+   * the general account of the party for the given asset.
+   */
+  collateralReleaseLevel: Scalars['String'];
+  /** This is the minimum margin required for a party to place a new order on the network, expressed as unsigned integer */
+  initialLevel: Scalars['String'];
+  /** Minimal margin for the position to be maintained in the network (unsigned integer) */
+  maintenanceLevel: Scalars['String'];
+  /** Margin factor, only relevant for isolated margin mode, else 0 */
+  marginFactor: Scalars['String'];
+  /** Margin mode of the party, cross margin or isolated margin */
+  marginMode: MarginMode;
+  /** Market in which the margin is required for this party */
+  market: Market;
+  /** When in isolated margin, the required order margin level, otherwise, 0 */
+  orderMarginLevel: Scalars['String'];
+  /** If the margin is between maintenance and search, the network will initiate a collateral search, expressed as unsigned integer */
+  searchLevel: Scalars['String'];
+};
+
 /** An account record */
 export type AccountBalance = {
   __typename?: 'AccountBalance';
@@ -359,6 +385,8 @@ export enum AuctionTrigger {
 
 export type BatchProposal = {
   __typename?: 'BatchProposal';
+  /** Terms of all the proposals in the batch */
+  batchTerms?: Maybe<BatchProposalTerms>;
   /** RFC3339Nano time and date when the proposal reached the network */
   datetime: Scalars['Timestamp'];
   /** Details of the rejection reason */
@@ -389,10 +417,10 @@ export type BatchProposal = {
   votes: ProposalVotes;
 };
 
-/** The rationale for the proposal */
+/** The terms for the batch proposal */
 export type BatchProposalTerms = {
   __typename?: 'BatchProposalTerms';
-  /** Actual changes being introduced by the proposal - actions the proposal triggers if passed and enacted. */
+  /** Actual changes being introduced by the batch proposal - actions the proposal triggers if passed and enacted. */
   changes: Array<Maybe<BatchProposalTermsChange>>;
   /**
    * RFC3339Nano time and date when voting closes for this proposal.
@@ -531,6 +559,22 @@ export type CompositePriceConfiguration = {
   decayWeight: Scalars['String'];
 };
 
+export type CompositePriceSource = {
+  __typename?: 'CompositePriceSource';
+  /** The source of the price */
+  PriceSource: Scalars['String'];
+  /** The last time the price source was updated in RFC3339Nano */
+  lastUpdated: Scalars['Timestamp'];
+  /** The current value of the composite source price */
+  price: Scalars['String'];
+};
+
+export type CompositePriceState = {
+  __typename?: 'CompositePriceState';
+  /** Underlying state of the composite price */
+  priceSources?: Maybe<Array<CompositePriceSource>>;
+};
+
 export enum CompositePriceType {
   /** Composite price is set to the last trade (legacy) */
   COMPOSITE_PRICE_TYPE_LAST_TRADE = 'COMPOSITE_PRICE_TYPE_LAST_TRADE',
@@ -2165,9 +2209,9 @@ export type MarginEdge = {
 export type MarginEstimate = {
   __typename?: 'MarginEstimate';
   /** Margin level estimate assuming no slippage */
-  bestCase: MarginLevels;
+  bestCase: AbstractMarginLevels;
   /** Margin level estimate assuming slippage cap is applied */
-  worstCase: MarginLevels;
+  worstCase: AbstractMarginLevels;
 };
 
 /** Margins for a given a party */
@@ -2439,6 +2483,8 @@ export type MarketData = {
   liquidityProviderSla?: Maybe<Array<LiquidityProviderSLA>>;
   /** The mark price (an unsigned integer) */
   markPrice: Scalars['String'];
+  /** State of the underlying internal composite price */
+  markPriceState?: Maybe<CompositePriceState>;
   /** The methodology used for the calculation of the mark price */
   markPriceType: CompositePriceType;
   /** Market of the associated mark price */
@@ -3053,6 +3099,8 @@ export type ObservableMarketData = {
   liquidityProviderSla?: Maybe<Array<ObservableLiquidityProviderSLA>>;
   /** The mark price (an unsigned integer) */
   markPrice: Scalars['String'];
+  /** State of the underlying internal composite price */
+  markPriceState?: Maybe<CompositePriceState>;
   /** The methodology used to calculated mark price */
   markPriceType: CompositePriceType;
   /** The market growth factor for the last market time window */
@@ -4021,6 +4069,8 @@ export type PerpetualData = {
   fundingRate?: Maybe<Scalars['String']>;
   /** Internal composite price used as input to the internal VWAP */
   internalCompositePrice: Scalars['String'];
+  /** The internal state of the underlying internal composite price */
+  internalCompositePriceState?: Maybe<CompositePriceState>;
   /** The methodology used to calculated internal composite price for perpetual markets */
   internalCompositePriceType: CompositePriceType;
   /** Time-weighted average price calculated from data points for this period from the internal data source. */
@@ -4031,6 +4081,8 @@ export type PerpetualData = {
   seqNum: Scalars['Int'];
   /** Time at which the funding period started */
   startTime: Scalars['Timestamp'];
+  /** The last value from the external oracle */
+  underlyingIndexPrice: Scalars['String'];
 };
 
 export type PerpetualProduct = {
@@ -4328,7 +4380,7 @@ export type ProposalDetail = {
   __typename?: 'ProposalDetail';
   /** Batch proposal ID that is provided by Vega once proposal reaches the network */
   batchId?: Maybe<Scalars['ID']>;
-  /** Terms of the proposal for a batch proposal */
+  /** Terms of all the proposals in the batch */
   batchTerms?: Maybe<BatchProposalTerms>;
   /** RFC3339Nano time and date when the proposal reached the Vega network */
   datetime: Scalars['Timestamp'];
@@ -4354,7 +4406,7 @@ export type ProposalDetail = {
   requiredParticipation: Scalars['String'];
   /** State of the proposal */
   state: ProposalState;
-  /** Terms of the proposal for proposal */
+  /** Terms of the proposal */
   terms?: Maybe<ProposalTerms>;
 };
 
@@ -5015,7 +5067,7 @@ export type QueryestimateOrderArgs = {
 export type QueryestimatePositionArgs = {
   averageEntryPrice: Scalars['String'];
   generalAccountBalance: Scalars['String'];
-  includeRequiredPositionMarginInAvailableCollateral?: InputMaybe<Scalars['Boolean']>;
+  includeCollateralIncreaseInAvailableCollateral?: InputMaybe<Scalars['Boolean']>;
   marginAccountBalance: Scalars['String'];
   marginFactor?: InputMaybe<Scalars['String']>;
   marginMode: MarginMode;

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

@@ -38,7 +38,7 @@ export function Dialog({
   );
   const wrapperClasses = classNames(
     // Dimensions
-    'max-w-[95vw] sm:max-w-[90vw] p-4 md:p-8',
+    'w-screen sm:max-w-[90vw] p-4 md:p-8',
     // Need to apply background and text colors again as content is rendered in a portal
     'dark:bg-black bg-white dark:text-white',
     getIntentBorder(intent),

libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx

@@ -1,5 +1,4 @@
 import { VegaIcon, VegaIconNames } from '../icon';
-import { TradingButton } from '../trading-button';
 import {
   TradingDropdown,
   TradingDropdownContent,
@@ -16,16 +15,6 @@ export const ActionsDropdownTrigger = () => {
   );
 };
 
-export const MobileActionsDropdownTrigger = () => {
-  return (
-    <TradingDropdownTrigger data-testid="dropdown-menu">
-      <TradingButton size="medium">
-        <VegaIcon name={VegaIconNames.KEBAB} />
-      </TradingButton>
-    </TradingDropdownTrigger>
-  );
-};
-
 type ActionMenuContentProps = React.ComponentProps<
   typeof TradingDropdownContent
 >;
@@ -37,11 +26,3 @@ export const ActionsDropdown = (props: ActionMenuContentProps) => {
     </TradingDropdown>
   );
 };
-
-export const MobileActionsDropdown = (props: ActionMenuContentProps) => {
-  return (
-    <TradingDropdown trigger={<MobileActionsDropdownTrigger />}>
-      <TradingDropdownContent {...props} side="bottom" align="end" />
-    </TradingDropdown>
-  );
-};

libs/ui-toolkit/src/components/trading-dropdown/index.ts

@@ -1,2 +1,2 @@
-export * from './actions-dropdown';
 export * from './trading-dropdown';
+export * from './actions-dropdown';

libs/utils/src/lib/format/number.spec.ts

@@ -23,7 +23,6 @@ describe('number utils', () => {
     { v: new BigNumber(123000), d: 1, o: '12,300.0' },
     { v: new BigNumber(123001), d: 2, o: '1,230.01' },
     { v: new BigNumber(123001000), d: 2, o: '1,230,010.00' },
-    { v: '100000000000000000001', d: 18, o: '100.000000000000000001' },
   ])(
     'formats with addDecimalsFormatNumber given number correctly',
     ({ v, d, o }) => {
@@ -32,10 +31,27 @@ describe('number utils', () => {
   );
 
   it.each([
-    { v: '1234000000000000000', d: 18, q: '1000000000000000000', o: '1.23' }, //vega
-    { v: '1235000000000000000', d: 18, q: '1000000000000000000', o: '1.24' }, //vega
-    { v: '1230012', d: 6, q: '1000000', o: '1.23' }, // USDT
-    { v: '1234560000000000000', d: 18, q: '500000000000000', o: '1.2346' }, // WEth
+    { v: new BigNumber(123000), d: 5, o: '1.23', q: 0.1 },
+    { v: new BigNumber(123000), d: 3, o: '123.00', q: 0.1 },
+    { v: new BigNumber(123000), d: 1, o: '12,300.00', q: 0.1 },
+    { v: new BigNumber(123001000), d: 2, o: '1,230,010.00', q: 0.1 },
+    { v: new BigNumber(123001), d: 2, o: '1,230.01', q: 100 },
+    { v: new BigNumber(123001), d: 2, o: '1,230.01', q: 0.1 },
+    { v: new BigNumber(123001), d: 2, o: '1,230.01', q: 1 },
+    {
+      v: BigNumber('123456789123456789'),
+      d: 10,
+      o: '12,345,678.91234568',
+      q: '0.00003846',
+    },
+    {
+      v: BigNumber('123456789123456789'),
+      d: 10,
+      o: '12,345,678.91234568',
+      q: '1',
+    },
+    // USDT / USDC
+    { v: new BigNumber(12345678), d: 6, o: '12.35', q: 1000000 },
   ])(
     'formats with addDecimalsFormatNumberQuantum given number correctly',
     ({ v, d, o, q }) => {

libs/utils/src/lib/format/number.ts

@@ -1,4 +1,5 @@
 import { BigNumber } from 'bignumber.js';
+import isNil from 'lodash/isNil';
 import memoize from 'lodash/memoize';
 
 import { getUserLocale } from '../get-user-locale';
@@ -52,36 +53,36 @@ export function removeDecimal(
   return new BigNumber(value || 0).times(times).toFixed(0);
 }
 
-export const getDecimalSeparator = memoize(
-  () =>
-    new Intl.NumberFormat(getUserLocale())
-      .formatToParts(1.1)
-      .find((part) => part.type === 'decimal')?.value ?? '.'
-);
-
-export const getGroupFormat = memoize(() => {
-  const parts = new Intl.NumberFormat(getUserLocale()).formatToParts(
-    100000000000.1
-  );
-  const groupSeparator = parts.find((part) => part.type === 'group')?.value;
-  const groupSize =
-    (groupSeparator &&
-      parts.reverse().find((part) => part.type === 'integer')?.value.length) ||
-    0;
-  return {
-    groupSize,
-    groupSeparator,
-  };
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+export const getNumberFormat = memoize((digits: number) => {
+  if (isNil(digits) || digits < 0) {
+    return new Intl.NumberFormat(getUserLocale());
+  }
+  return new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: Math.min(Math.max(0, digits), MIN_FRACTION_DIGITS),
+    maximumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS),
+  });
 });
 
-const getFormat = memoize(() => ({
-  decimalSeparator: getDecimalSeparator(),
-  ...getGroupFormat(),
-}));
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+export const getFixedNumberFormat = memoize((digits: number) => {
+  if (isNil(digits) || digits < 0) {
+    return new Intl.NumberFormat(getUserLocale());
+  }
+  return new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS),
+    maximumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS),
+  });
+});
 
-/**
- * formatNumber will format the number with maximum number of decimals
- * trailing zeros are removed but min(MIN_FRACTION_DIGITS, formatDecimals) decimal places will be kept
+export const getDecimalSeparator = memoize(
+  () =>
+    getNumberFormat(1)
+      .formatToParts(1.1)
+      .find((part) => part.type === 'decimal')?.value
+);
+
+/** formatNumber will format the number with fixed decimals
  * @param rawValue - should be a number that is not outside the safe range fail as in https://mikemcl.github.io/bignumber.js/#toN
  * @param formatDecimals - number of decimals to use
  */
@@ -89,23 +90,7 @@ export const formatNumber = (
   rawValue: string | number | BigNumber,
   formatDecimals = 0
 ) => {
-  const decimalPlaces = Math.min(
-    Math.max(0, formatDecimals),
-    MAX_FRACTION_DIGITS
-  );
-  const format = getFormat();
-  const formatted = new BigNumber(rawValue).toFormat(decimalPlaces, format);
-  // if there are no decimal places just return formatted value
-  if (!decimalPlaces) {
-    return formatted;
-  }
-  // minimum number of decimal places to keep when removing trailing zeros
-  const minimumFractionDigits = Math.min(decimalPlaces, MIN_FRACTION_DIGITS);
-  const parts = formatted.split(format.decimalSeparator);
-  parts[1] = (parts[1] || '')
-    .replace(/0+$/, '')
-    .padEnd(minimumFractionDigits, '0');
-  return parts.join(format.decimalSeparator);
+  return getNumberFormat(formatDecimals).format(Number(rawValue));
 };
 
 /** formatNumberFixed will format the number with fixed decimals
@@ -116,10 +101,7 @@ export const formatNumberFixed = (
   rawValue: string | number | BigNumber,
   formatDecimals = 0
 ) => {
-  return new BigNumber(rawValue).toFormat(
-    Math.min(Math.max(0, formatDecimals), MAX_FRACTION_DIGITS),
-    getFormat()
-  );
+  return getFixedNumberFormat(formatDecimals).format(Number(rawValue));
 };
 
 export const quantumDecimalPlaces = (
@@ -149,14 +131,9 @@ export const addDecimalsFormatNumberQuantum = (
   if (isNaN(Number(quantum))) {
     return addDecimalsFormatNumber(rawValue, decimalPlaces);
   }
-  const numberDP = Math.ceil(
-    Math.abs(Math.log10(toBigNum(quantum, decimalPlaces).toNumber()))
-  );
-  return addDecimalsFormatNumber(
-    rawValue,
-    decimalPlaces,
-    Math.max(MIN_FRACTION_DIGITS, numberDP)
-  );
+  const quantumValue = addDecimal(quantum, decimalPlaces);
+  const numberDP = Math.max(0, Math.log10(100 / Number(quantumValue)));
+  return addDecimalsFormatNumber(rawValue, decimalPlaces, Math.ceil(numberDP));
 };
 
 export const addDecimalsFormatNumber = (
@@ -164,10 +141,9 @@ export const addDecimalsFormatNumber = (
   decimalPlaces: number,
   formatDecimals: number = decimalPlaces
 ) => {
-  return formatNumber(
-    new BigNumber(rawValue || 0).dividedBy(Math.pow(10, decimalPlaces)),
-    formatDecimals
-  );
+  const x = addDecimal(rawValue, decimalPlaces);
+
+  return formatNumber(x, formatDecimals);
 };
 
 export const addDecimalsFixedFormatNumber = (

libs/utils/src/lib/format/range.spec.ts

@@ -10,24 +10,24 @@ describe('formatValue', () => {
     {
       v: '123456789123456789',
       d: 10,
-      o: '12,345,678.9123456789',
+      o: '12,345,678.91234568',
     },
   ])('formats values correctly', ({ v, d, o }) => {
     expect(formatValue(v, d)).toStrictEqual(o);
   });
 
   it.each([
-    { v: 123000, d: 5, o: '1.23', q: '1' },
-    { v: 123000, d: 3, o: '123.00', q: '1' },
-    { v: 123000, d: 1, o: '12,300.00', q: '1' },
-    { v: 123001000, d: 2, o: '1,230,010.00', q: '1' },
+    { v: 123000, d: 5, o: '1.23', q: '0.1' },
+    { v: 123000, d: 3, o: '123.00', q: '0.1' },
+    { v: 123000, d: 1, o: '12,300.00', q: '0.1' },
+    { v: 123001000, d: 2, o: '1,230,010.00', q: '0.1' },
     { v: 123001, d: 2, o: '1,230.01', q: '100' },
-    { v: 123001, d: 2, o: '1,230.01', q: '1' },
+    { v: 123001, d: 2, o: '1,230.01', q: '0.1' },
     {
       v: '123456789123456789',
       d: 10,
-      o: '12,345,678.91235',
-      q: '384600',
+      o: '12,345,678.91234568',
+      q: '0.00003846',
     },
   ])(
     'formats with formatValue with quantum given number correctly',
@@ -42,15 +42,15 @@ describe('formatRange', () => {
       min: 123000,
       max: 12300011111,
       d: 5,
-      o: '1.23 - 123,000.11',
-      q: '1000',
+      o: '1.23 - 123,000.11111',
+      q: '0.1',
     },
     {
       min: 123000,
       max: 12300011111,
       d: 3,
-      o: '123.00 - 12,300,011.11',
-      q: '100',
+      o: '123.00 - 12,300,011.111',
+      q: '0.1',
     },
     {
       min: 123000,

specs/1003-TRAN-transfer.md

@@ -40,6 +40,8 @@
 
 ## Transfer
 
+- **Must** display tooltip for "Transfer fee when hovered over.(<a name="1003-TRAN-017" href="#1003-TRAN-017">1003-TRAN-017</a>)
+
 - **Must** display tooltip for "Amount to be transferred" when hovered over.(<a name="1003-TRAN-018" href="#1003-TRAN-018">1003-TRAN-018</a>)
 
 - **Must** display tooltip for "Total amount (with fee)" when hovered over.(<a name="1003-TRAN-019" href="#1003-TRAN-019">1003-TRAN-019</a>)