fix(trading): fills fees fixes for maker (#5405)

Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

.gitignore

@@ -52,3 +52,4 @@ cypress.env.json
 /apps/**/cypress/reports/
 /apps/**/cypress/downloads/
 /apps/**/fixtures/wallet/node**
+.nx/

apps/governance-e2e/src/fixtures/mocks/proposals.ts

@@ -133,7 +133,7 @@ export const proposalsData = {
               instrument: {
                 name: 'UNIDAI Monthly (Dec 2022)',
                 code: 'UNIDAI.MF21',
-                futureProduct: {
+                product: {
                   settlementAsset: { symbol: 'tDAI', __typename: 'Asset' },
                   __typename: 'FutureProduct',
                 },
@@ -240,7 +240,7 @@ export const proposalsData = {
               instrument: {
                 name: 'ETHBTC Quarterly (Feb 2023)',
                 code: 'ETHBTC.QM21',
-                futureProduct: {
+                product: {
                   settlementAsset: { symbol: 'tBTC', __typename: 'Asset' },
                   __typename: 'FutureProduct',
                 },

apps/governance/.env

@@ -35,6 +35,5 @@ NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=false
 NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
+NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=false
-NX_VOLUME_DISCOUNTS=false

apps/governance/.env.capsule

@@ -31,9 +31,8 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.devnet

@@ -28,4 +28,3 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.mainnet

@@ -22,9 +22,8 @@ NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/.env.mainnet-mirror

@@ -21,9 +21,8 @@ NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/.env.stagnet1

@@ -25,4 +25,3 @@ NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.testnet

@@ -29,4 +29,3 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.validators-testnet

@@ -20,9 +20,8 @@ NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/src/routes/home/index.tsx

@@ -189,7 +189,6 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

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

@@ -77,7 +77,7 @@ describe('Proposal header', () => {
               __typename: 'InstrumentConfiguration',
               name: 'Some market',
               code: 'FX:BTCUSD/DEC99',
-              futureProduct: {
+              product: {
                 __typename: 'FutureProduct',
                 settlementAsset: {
                   __typename: 'Asset',

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

@@ -39,6 +39,18 @@ export const ProposalHeader = ({
 
   const titleContent = shorten(title ?? '', 100);
 
+  const getAsset = (proposal: ProposalQuery['proposal']) => {
+    const terms = proposal?.terms;
+    if (
+      terms?.change.__typename === 'NewMarket' &&
+      (terms.change.instrument.product?.__typename === 'FutureProduct' ||
+        terms.change.instrument.product?.__typename === 'PerpetualProduct')
+    ) {
+      return terms.change.instrument.product.settlementAsset;
+    }
+    return undefined;
+  };
+
   switch (change?.__typename) {
     case 'NewMarket': {
       proposalType =
@@ -54,10 +66,10 @@ export const ProposalHeader = ({
           <span>
             {t('Code')}: {change.instrument.code}.
           </span>{' '}
-          {change.instrument.futureProduct?.settlementAsset.symbol ? (
+          {proposal?.terms && getAsset(proposal)?.symbol ? (
             <>
               <span className="font-semibold">
-                {change.instrument.futureProduct.settlementAsset.symbol}
+                {getAsset(proposal)?.symbol}
               </span>{' '}
               {t('settled future')}.
             </>

apps/governance/src/routes/proposals/components/proposal-volume-discount-program-details/proposal-volume-discount-program-details.tsx

@@ -78,7 +78,7 @@ export const ProposalVolumeDiscountProgramDetails = ({
               {t('BenefitTiers')}
             </h3>
             <KeyValueTable>
-              {benefitTiers
+              {[...benefitTiers]
                 .sort(
                   (a, b) =>
                     Number(a.minimumRunningNotionalTakerVolume) -

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.spec.tsx

@@ -8,7 +8,7 @@ import {
   networkParamsQueryMock,
   nextWeek,
 } from '../../test-helpers/mocks';
-import { VoteBreakdown } from './vote-breakdown';
+import { CompactVotes, VoteBreakdown } from './vote-breakdown';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { MockedResponse } from '@apollo/client/testing';
 import {
@@ -346,3 +346,22 @@ describe('VoteBreakdown', () => {
     expect(style.width).toBe(`${expectedProgress}%`);
   });
 });
+
+describe('CompactVotes', () => {
+  it.each([
+    [0, '0'],
+    [1, '1'],
+    [12, '12'],
+    [123, '123'],
+    [1234, '1.2K'],
+    [12345, '12.3K'],
+    [123456, '123.5K'],
+    [1234567, '1.2M'],
+    [12345678, '12.3M'],
+    [123456789, '123.5M'],
+    [1234567890, '1.2B'],
+  ])('compacts %s to %s', (input, output) => {
+    const { getByTestId } = render(<CompactVotes number={BigNumber(input)} />);
+    expect(getByTestId('compact-number').textContent).toBe(output);
+  });
+});

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -3,11 +3,21 @@ import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
 import { useVoteInformation } from '../../hooks';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { formatNumber, toBigNum } from '@vegaprotocol/utils';
+import { formatNumber } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
 import type { ReactNode } from 'react';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import { CompactNumber } from '@vegaprotocol/react-helpers';
+
+export const CompactVotes = ({ number }: { number: BigNumber }) => (
+  <CompactNumber
+    number={number}
+    decimals={number.isGreaterThan(1000) ? 1 : 0}
+    compactAbove={1000}
+    compactDisplay="short"
+  />
+);
 
 interface VoteBreakdownProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
@@ -198,10 +208,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                     )}
                   >
                     <button>
-                      {yesEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
+                      <CompactVotes number={yesEquityLikeShareWeight} />
                     </button>
                   </Tooltip>
                   <span>
@@ -226,10 +233,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                     )}
                   >
                     <button>
-                      {noEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
+                      <CompactVotes number={noEquityLikeShareWeight} />
                     </button>
                   </Tooltip>
                   <span>
@@ -279,10 +283,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
                     )}
                   >
                     <button>
-                      {totalEquityLikeShareWeight
-                        .dividedBy(toBigNum(10 ** 6, 0))
-                        .toFixed(1)}
-                      M
+                      <CompactVotes number={totalEquityLikeShareWeight} />
                     </button>
                   </Tooltip>
                   <span>
@@ -321,7 +322,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               <span>{t('tokenVotesFor')}:</span>
               <Tooltip description={formatNumber(yesTokens, defaultDP)}>
                 <button data-testid="num-votes-for">
-                  {yesTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
+                  <CompactVotes number={yesTokens} />
                 </button>
               </Tooltip>
               <span>
@@ -341,7 +342,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               <span>{t('tokenVotesAgainst')}:</span>
               <Tooltip description={formatNumber(noTokens, defaultDP)}>
                 <button data-testid="num-votes-against">
-                  {noTokens.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
+                  <CompactVotes number={noTokens} />
                 </button>
               </Tooltip>
               <span>
@@ -384,7 +385,7 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               <span>{t('totalTokensVoted')}:</span>
               <Tooltip description={formatNumber(totalTokensVoted, defaultDP)}>
                 <button data-testid="total-voted">
-                  {totalTokensVoted.dividedBy(toBigNum(10 ** 6, 0)).toFixed(1)}M
+                  <CompactVotes number={totalTokensVoted} />
                 </button>
               </Tooltip>
               <span data-testid="total-voted-percentage">

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

@@ -84,7 +84,6 @@ query Proposal(
   $includeNewMarketProductField: Boolean!
   $includeUpdateMarketState: Boolean!
   $includeUpdateReferralProgram: Boolean!
-  $includeUpdateVolumeDiscountProgram: Boolean!
 ) {
   proposal(id: $proposalId) {
     id
@@ -104,7 +103,6 @@ query Proposal(
     ...UpdateMarketState @include(if: $includeUpdateMarketState)
     ...UpdateReferralProgram @include(if: $includeUpdateReferralProgram)
     ...UpdateVolumeDiscountProgram
-      @include(if: $includeUpdateVolumeDiscountProgram)
     terms {
       closingDatetime
       enactmentDatetime
@@ -132,46 +130,25 @@ query Proposal(
           instrument {
             name
             code
-            futureProduct {
-              settlementAsset {
-                id
-                name
-                symbol
-                decimals
-                quantum
-              }
-              quoteName
-
-              dataSourceSpecForSettlementData {
-                sourceType {
-                  ... on DataSourceDefinitionInternal {
-                    sourceType {
-                      ... on DataSourceSpecConfigurationTime {
-                        conditions {
-                          operator
-                          value
-                        }
-                      }
-                    }
-                  }
-                  ... on DataSourceDefinitionExternal {
-                    sourceType {
-                      ... on DataSourceSpecConfiguration {
-                        signers {
-                          signer {
-                            ... on PubKey {
-                              key
-                            }
-                            ... on ETHAddress {
-                              address
-                            }
-                          }
-                        }
-                        filters {
-                          key {
-                            name
-                            type
-                          }
+            product {
+              ... on FutureProduct {
+                settlementAsset {
+                  id
+                  name
+                  symbol
+                  decimals
+                  quantum
+                }
+                quoteName
+                dataSourceSpecBinding {
+                  settlementDataProperty
+                  tradingTerminationProperty
+                }
+                dataSourceSpecForSettlementData {
+                  sourceType {
+                    ... on DataSourceDefinitionInternal {
+                      sourceType {
+                        ... on DataSourceSpecConfigurationTime {
                           conditions {
                             operator
                             value
@@ -179,52 +156,44 @@ query Proposal(
                         }
                       }
                     }
+                    ... on DataSourceDefinitionExternal {
+                      sourceType {
+                        ... on DataSourceSpecConfiguration {
+                          signers {
+                            signer {
+                              ... on PubKey {
+                                key
+                              }
+                              ... on ETHAddress {
+                                address
+                              }
+                            }
+                          }
+                          filters {
+                            key {
+                              name
+                              type
+                            }
+                            conditions {
+                              operator
+                              value
+                            }
+                          }
+                        }
+                      }
+                    }
                   }
                 }
               }
-              # dataSourceSpecForTradingTermination {
-              #   sourceType {
-              #     ... on DataSourceDefinitionInternal {
-              #       sourceType {
-              #         ... on DataSourceSpecConfigurationTime {
-              #           conditions {
-              #             operator
-              #             value
-              #           }
-              #         }
-              #       }
-              #     }
-              #     ... on DataSourceDefinitionExternal {
-              #       sourceType {
-              #         ... on DataSourceSpecConfiguration {
-              #           signers {
-              #             signer {
-              #               ... on PubKey {
-              #                 key
-              #               }
-              #               ... on ETHAddress {
-              #                 address
-              #               }
-              #             }
-              #           }
-              #           filters {
-              #             key {
-              #               name
-              #               type
-              #             }
-              #             conditions {
-              #               operator
-              #               value
-              #             }
-              #           }
-              #         }
-              #       }
-              #     }
-              #   }
-              # }
-              dataSourceSpecBinding {
-                settlementDataProperty
-                tradingTerminationProperty
+              ... on PerpetualProduct {
+                settlementAsset {
+                  id
+                  name
+                  symbol
+                  decimals
+                  quantum
+                }
+                quoteName
               }
             }
           }

apps/governance/src/routes/proposals/proposal/proposal-container.tsx

@@ -62,7 +62,6 @@ export const ProposalContainer = () => {
       includeNewMarketProductField: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketState: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralProgram: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountProgram: !!FLAGS.VOLUME_DISCOUNTS,
     },
     skip: !params.proposalId,
   });

apps/governance/src/routes/proposals/proposals/Proposals.graphql

@@ -101,9 +101,16 @@ fragment ProposalFields on Proposal {
         instrument {
           name
           code
-          futureProduct {
-            settlementAsset {
-              symbol
+          product {
+            ... on FutureProduct {
+              settlementAsset {
+                symbol
+              }
+            }
+            ... on PerpetualProduct {
+              settlementAsset {
+                symbol
+              }
             }
           }
         }
@@ -164,7 +171,6 @@ query Proposals(
   $includeNewMarketProductFields: Boolean!
   $includeUpdateMarketStates: Boolean!
   $includeUpdateReferralPrograms: Boolean!
-  $includeUpdateVolumeDiscountPrograms: Boolean!
 ) {
   proposalsConnection {
     edges {
@@ -174,7 +180,6 @@ query Proposals(
         ...UpdateMarketStates @include(if: $includeUpdateMarketStates)
         ...UpdateReferralPrograms @include(if: $includeUpdateReferralPrograms)
         ...UpdateVolumeDiscountPrograms
-          @include(if: $includeUpdateVolumeDiscountPrograms)
       }
     }
   }

apps/governance/src/routes/proposals/proposals/__generated__/Proposals.ts

@@ -11,17 +11,16 @@ export type UpdateReferralProgramsFragment = { __typename?: 'Proposal', terms: {
 
 export type UpdateVolumeDiscountProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } } };
 
-export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };
+export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, product?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename?: 'PerpetualProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename?: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };
 
 export type ProposalsQueryVariables = Types.Exact<{
   includeNewMarketProductFields: Types.Scalars['Boolean'];
   includeUpdateMarketStates: Types.Scalars['Boolean'];
   includeUpdateReferralPrograms: Types.Scalars['Boolean'];
-  includeUpdateVolumeDiscountPrograms: Types.Scalars['Boolean'];
 }>;
 
 
-export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null, product?: { __typename: 'FutureProduct' } | { __typename: 'PerpetualProduct' } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: any, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
+export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, product?: { __typename: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename: 'PerpetualProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: any, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
 
 export const NewMarketProductFieldsFragmentDoc = gql`
     fragment NewMarketProductFields on Proposal {
@@ -131,9 +130,16 @@ export const ProposalFieldsFragmentDoc = gql`
         instrument {
           name
           code
-          futureProduct {
-            settlementAsset {
-              symbol
+          product {
+            ... on FutureProduct {
+              settlementAsset {
+                symbol
+              }
+            }
+            ... on PerpetualProduct {
+              settlementAsset {
+                symbol
+              }
             }
           }
         }
@@ -191,7 +197,7 @@ export const ProposalFieldsFragmentDoc = gql`
 }
     `;
 export const ProposalsDocument = gql`
-    query Proposals($includeNewMarketProductFields: Boolean!, $includeUpdateMarketStates: Boolean!, $includeUpdateReferralPrograms: Boolean!, $includeUpdateVolumeDiscountPrograms: Boolean!) {
+    query Proposals($includeNewMarketProductFields: Boolean!, $includeUpdateMarketStates: Boolean!, $includeUpdateReferralPrograms: Boolean!) {
   proposalsConnection {
     edges {
       node {
@@ -199,7 +205,7 @@ export const ProposalsDocument = gql`
         ...NewMarketProductFields @include(if: $includeNewMarketProductFields)
         ...UpdateMarketStates @include(if: $includeUpdateMarketStates)
         ...UpdateReferralPrograms @include(if: $includeUpdateReferralPrograms)
-        ...UpdateVolumeDiscountPrograms @include(if: $includeUpdateVolumeDiscountPrograms)
+        ...UpdateVolumeDiscountPrograms
       }
     }
   }
@@ -225,7 +231,6 @@ ${UpdateVolumeDiscountProgramsFragmentDoc}`;
  *      includeNewMarketProductFields: // value for 'includeNewMarketProductFields'
  *      includeUpdateMarketStates: // value for 'includeUpdateMarketStates'
  *      includeUpdateReferralPrograms: // value for 'includeUpdateReferralPrograms'
- *      includeUpdateVolumeDiscountPrograms: // value for 'includeUpdateVolumeDiscountPrograms'
  *   },
  * });
  */

apps/governance/src/routes/proposals/proposals/proposals-container.tsx

@@ -50,7 +50,6 @@ export const ProposalsContainer = () => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/governance/src/routes/proposals/rejected/rejected-proposals-container.tsx

@@ -42,7 +42,6 @@ export const RejectedProposalsContainer = () => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/trading-e2e/src/integration/market-proposal-notification.cy.ts

@@ -2,8 +2,6 @@ import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { proposalListQuery, marketUpdateProposal } from '@vegaprotocol/mock';
 import * as Schema from '@vegaprotocol/types';
 
-const marketSummaryBlock = 'header-summary';
-
 describe('Market proposal notification', { tags: '@smoke' }, () => {
   before(() => {
     cy.setVegaWallet();
@@ -25,12 +23,13 @@ describe('Market proposal notification', { tags: '@smoke' }, () => {
     });
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
+    cy.getByTestId('Info').click();
     cy.wait('@MarketData');
-    cy.getByTestId(marketSummaryBlock).should('be.visible');
+    cy.getByTestId('sidebar-content').should('be.visible');
   });
 
   it('should display market proposal notification if proposal found', () => {
-    cy.getByTestId(marketSummaryBlock).within(() => {
+    cy.getByTestId('sidebar-content').within(() => {
       cy.getByTestId('market-proposal-notification').should(
         'contain.text',
         'Changes have been proposed for this market'

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

@@ -1,7 +1,6 @@
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { DocsLinks, useEnvironment } from '@vegaprotocol/environment';
 import { ButtonLink, ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
-import { MarketProposalNotification } from '@vegaprotocol/proposals';
 import type { Market } from '@vegaprotocol/markets';
 import {
   addDecimalsFormatNumber,
@@ -144,7 +143,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
           />
         </HeaderStat>
       )}
-      <MarketProposalNotification marketId={market.id} />
     </>
   );
 };

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

@@ -1,7 +1,5 @@
-import { Route, Routes, useParams } from 'react-router-dom';
-import { MarketState } from '@vegaprotocol/types';
+import { Route, Routes } from 'react-router-dom';
 import { t } from '@vegaprotocol/i18n';
-import { useMarket } from '@vegaprotocol/markets';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import {
   SidebarButton,
@@ -11,12 +9,7 @@ import {
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const MarketsSidebar = () => {
-  const { marketId } = useParams();
   const currentRouteId = useGetCurrentRouteId();
-  const { data } = useMarket(marketId);
-  const active =
-    data &&
-    [MarketState.STATE_ACTIVE, MarketState.STATE_PENDING].includes(data.state);
 
   return (
     <>
@@ -44,14 +37,12 @@ export const MarketsSidebar = () => {
           element={
             <>
               <SidebarDivider />
-              {active && (
-                <SidebarButton
-                  view={ViewType.Order}
-                  icon={VegaIconNames.TICKET}
-                  tooltip={t('Order')}
-                  routeId={currentRouteId}
-                />
-              )}
+              <SidebarButton
+                view={ViewType.Order}
+                icon={VegaIconNames.TICKET}
+                tooltip={t('Order')}
+                routeId={currentRouteId}
+              />
               <SidebarButton
                 view={ViewType.Info}
                 icon={VegaIconNames.BREAKDOWN}

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

@@ -75,22 +75,20 @@ export const useReferralProgram = () => {
 
   const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
     Number(t.referralRewardFactor)
-  )
-    .reverse()
-    .map((t, i) => {
-      return {
-        tier: i + 1,
-        rewardFactor: Number(t.referralRewardFactor),
-        commission: Number(t.referralRewardFactor) * 100 + '%',
-        discountFactor: Number(t.referralDiscountFactor),
-        discount: Number(t.referralDiscountFactor) * 100 + '%',
-        minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
-        volume: getNumberFormat(0).format(
-          Number(t.minimumRunningNotionalTakerVolume)
-        ),
-        epochs: Number(t.minimumEpochs),
-      };
-    });
+  ).map((t, i) => {
+    return {
+      tier: i + 1, // sorted in asc order, hence first is the lowest tier
+      rewardFactor: Number(t.referralRewardFactor),
+      commission: Number(t.referralRewardFactor) * 100 + '%',
+      discountFactor: Number(t.referralDiscountFactor),
+      discount: Number(t.referralDiscountFactor) * 100 + '%',
+      minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
+      volume: getNumberFormat(0).format(
+        Number(t.minimumRunningNotionalTakerVolume)
+      ),
+      epochs: Number(t.minimumEpochs),
+    };
+  });
 
   const stakingTiers = sortBy(
     data.currentReferralProgram.stakingTiers,

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

@@ -29,8 +29,8 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { t } from '@vegaprotocol/i18n';
-import maxBy from 'lodash/maxBy';
 import { DocsLinks } from '@vegaprotocol/environment';
+import minBy from 'lodash/minBy';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -124,7 +124,7 @@ export const Statistics = ({
   );
   const nextBenefitTierValue = currentBenefitTierValue
     ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
-    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
+    : minBy(benefitTiers, (bt) => bt.tier); //  min tier number is lowest tier
   const epochsValue =
     !isNaN(currentEpoch) && refereeInfo?.atEpoch
       ? currentEpoch - refereeInfo?.atEpoch

apps/trading/client-pages/referrals/tiers.tsx

@@ -199,13 +199,13 @@ const TiersTable = ({
         ...d,
         className: classNames({
           'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            d.tier === 1,
+            d.tier >= 3,
           'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
             d.tier === 2,
           'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-            d.tier === 3,
+            d.tier === 1,
           'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            d.tier > 3,
+            d.tier == 0,
         }),
       }))}
     />

apps/trading/components/fees-container/Fees.graphql

@@ -36,6 +36,22 @@ query Fees(
       }
     }
   }
+  referrer: referralSets(referrer: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
+  referee: referralSets(referee: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
   referralSetReferees(referee: $partyId) {
     edges {
       node {

apps/trading/components/fees-container/__generated__/Fees.ts

@@ -15,7 +15,7 @@ export type FeesQueryVariables = Types.Exact<{
 }>;
 
 
-export type FeesQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, volumeDiscountStats: { __typename?: 'VolumeDiscountStatsConnection', edges: Array<{ __typename?: 'VolumeDiscountStatsEdge', node: { __typename?: 'VolumeDiscountStats', atEpoch: number, discountFactor: string, runningVolume: string } } | null> }, referralSetReferees: { __typename?: 'ReferralSetRefereeConnection', edges: Array<{ __typename?: 'ReferralSetRefereeEdge', node: { __typename?: 'ReferralSetReferee', atEpoch: number } } | null> }, referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, discountFactor: string, referralSetRunningNotionalTakerVolume: string } } | null> } };
+export type FeesQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, volumeDiscountStats: { __typename?: 'VolumeDiscountStatsConnection', edges: Array<{ __typename?: 'VolumeDiscountStatsEdge', node: { __typename?: 'VolumeDiscountStats', atEpoch: number, discountFactor: string, runningVolume: string } } | null> }, referrer: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', id: string, referrer: string } } | null> }, referee: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', id: string, referrer: string } } | null> }, referralSetReferees: { __typename?: 'ReferralSetRefereeConnection', edges: Array<{ __typename?: 'ReferralSetRefereeEdge', node: { __typename?: 'ReferralSetReferee', atEpoch: number } } | null> }, referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, discountFactor: string, referralSetRunningNotionalTakerVolume: string } } | null> } };
 
 
 export const DiscountProgramsDocument = gql`
@@ -81,6 +81,22 @@ export const FeesDocument = gql`
       }
     }
   }
+  referrer: referralSets(referrer: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
+  referee: referralSets(referee: $partyId) {
+    edges {
+      node {
+        id
+        referrer
+      }
+    }
+  }
   referralSetReferees(referee: $partyId) {
     edges {
       node {

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

@@ -17,6 +17,14 @@ import { useReferralStats } from './use-referral-stats';
 import { formatPercentage, getAdjustedFee } from './utils';
 import { Table, Td, Th, THead, Tr } from './table';
 import BigNumber from 'bignumber.js';
+import { Links } from '../../lib/links';
+import { Link } from 'react-router-dom';
+import {
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 
 export const FeesContainer = () => {
   const { pubKey } = useVegaWallet();
@@ -28,7 +36,7 @@ export const FeesContainer = () => {
   const { data: markets, loading: marketsLoading } = useMarketList();
 
   const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery();
+    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
 
   const volumeDiscountWindowLength =
     programData?.currentVolumeDiscountProgram?.windowLength || 1;
@@ -56,16 +64,25 @@ export const FeesContainer = () => {
     referralTierIndex,
     referralTiers,
     epochsInSet,
+    code,
+    isReferrer,
   } = useReferralStats(
     feesData?.referralSetStats,
     feesData?.referralSetReferees,
     programData?.currentReferralProgram,
-    feesData?.epoch
+    feesData?.epoch,
+    feesData?.referrer,
+    feesData?.referee
   );
 
   const loading = paramsLoading || feesLoading || programLoading;
   const isConnected = Boolean(pubKey);
 
+  const isReferralProgramRunning = Boolean(programData?.currentReferralProgram);
+  const isVolumeDiscountProgramRunning = Boolean(
+    programData?.currentVolumeDiscountProgram
+  );
+
   return (
     <div className="grid auto-rows-min grid-cols-4 gap-3">
       {isConnected && (
@@ -90,6 +107,8 @@ export const FeesContainer = () => {
             <TotalDiscount
               referralDiscount={referralDiscount}
               volumeDiscount={volumeDiscount}
+              isReferralProgramRunning={isReferralProgramRunning}
+              isVolumeDiscountProgramRunning={isVolumeDiscountProgramRunning}
             />
           </FeeCard>
           <FeeCard
@@ -97,23 +116,37 @@ export const FeesContainer = () => {
             className="sm:col-span-2"
             loading={loading}
           >
-            <CurrentVolume
-              tiers={volumeTiers}
-              tierIndex={volumeTierIndex}
-              windowLengthVolume={volumeInWindow}
-              windowLength={volumeDiscountWindowLength}
-            />
+            {isVolumeDiscountProgramRunning ? (
+              <CurrentVolume
+                tiers={volumeTiers}
+                tierIndex={volumeTierIndex}
+                windowLengthVolume={volumeInWindow}
+                windowLength={volumeDiscountWindowLength}
+              />
+            ) : (
+              <p className="pt-3 text-sm text-muted">
+                {t('No volume discount program active')}
+              </p>
+            )}
           </FeeCard>
           <FeeCard
             title={t('Referral benefits')}
             className="sm:col-span-2"
             loading={loading}
           >
-            <ReferralBenefits
-              setRunningNotionalTakerVolume={referralVolumeInWindow}
-              epochsInSet={epochsInSet}
-              epochs={referralDiscountWindowLength}
-            />
+            {isReferrer ? (
+              <ReferrerInfo code={code} />
+            ) : isReferralProgramRunning ? (
+              <ReferralBenefits
+                setRunningNotionalTakerVolume={referralVolumeInWindow}
+                epochsInSet={epochsInSet}
+                epochs={referralDiscountWindowLength}
+              />
+            ) : (
+              <p className="pt-3 text-sm text-muted">
+                {t('No referral program active')}
+              </p>
+            )}
           </FeeCard>
         </>
       )}
@@ -142,7 +175,7 @@ export const FeesContainer = () => {
         />
       </FeeCard>
       <FeeCard
-        title={t('Liquidity fees')}
+        title={t('Fees by market')}
         className="lg:col-span-full"
         loading={marketsLoading}
       >
@@ -325,26 +358,64 @@ const ReferralBenefits = ({
 const TotalDiscount = ({
   referralDiscount,
   volumeDiscount,
+  isReferralProgramRunning,
+  isVolumeDiscountProgramRunning,
 }: {
   referralDiscount: number;
   volumeDiscount: number;
+  isReferralProgramRunning: boolean;
+  isVolumeDiscountProgramRunning: boolean;
 }) => {
+  const totalDiscount = 1 - (1 - volumeDiscount) * (1 - referralDiscount);
+  const totalDiscountDescription = t(
+    'The total discount is calculated according to the following formula: '
+  );
+  const formula = (
+    <span className="italic">
+      1 - (1 - d<sub>volume</sub>) ⋇ (1 - d<sub>referral</sub>)
+    </span>
+  );
+
   return (
     <div>
       <Stat
-        value={formatPercentage(referralDiscount + volumeDiscount) + '%'}
+        description={
+          <>
+            {totalDiscountDescription}
+            {formula}
+          </>
+        }
+        value={formatPercentage(totalDiscount) + '%'}
         highlight={true}
       />
       <table className="w-full mt-0.5 text-xs text-muted">
         <tbody>
           <tr>
             <th className="font-normal text-left">{t('Volume discount')}</th>
-            <td className="text-right">{formatPercentage(volumeDiscount)}%</td>
+            <td className="text-right">
+              {formatPercentage(volumeDiscount)}%
+              {!isVolumeDiscountProgramRunning && (
+                <Tooltip description={t('No active volume discount programme')}>
+                  <span className="cursor-help">
+                    {' '}
+                    <VegaIcon name={VegaIconNames.INFO} size={12} />
+                  </span>
+                </Tooltip>
+              )}
+            </td>
           </tr>
           <tr>
             <th className="font-normal text-left ">{t('Referral discount')}</th>
             <td className="text-right">
               {formatPercentage(referralDiscount)}%
+              {!isReferralProgramRunning && (
+                <Tooltip description={t('No active referral programme')}>
+                  <span className="cursor-help">
+                    {' '}
+                    <VegaIcon name={VegaIconNames.INFO} size={12} />
+                  </span>
+                </Tooltip>
+              )}
             </td>
           </tr>
         </tbody>
@@ -388,25 +459,19 @@ const VolumeTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
-            .reverse()
-            .map((tier, i) => {
-              const isUserTier = tiers.length - 1 - tierIndex === i;
+          {Array.from(tiers).map((tier, i) => {
+            const isUserTier = tiers.length - 1 - tierIndex === i;
 
-              return (
-                <Tr key={i}>
-                  <Td>{i + 1}</Td>
-                  <Td>
-                    {formatPercentage(Number(tier.volumeDiscountFactor))}%
-                  </Td>
-                  <Td>
-                    {formatNumber(tier.minimumRunningNotionalTakerVolume)}
-                  </Td>
-                  <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
-                  <Td>{isUserTier ? <YourTier /> : null}</Td>
-                </Tr>
-              );
-            })}
+            return (
+              <Tr key={i}>
+                <Td>{i + 1}</Td>
+                <Td>{formatPercentage(Number(tier.volumeDiscountFactor))}%</Td>
+                <Td>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</Td>
+                <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
+                <Td>{isUserTier ? <YourTier /> : null}</Td>
+              </Tr>
+            );
+          })}
         </tbody>
       </Table>
     </div>
@@ -447,37 +512,33 @@ const ReferralTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
-            .reverse()
-            .map((t, i) => {
-              const isUserTier = tiers.length - 1 - tierIndex === i;
+          {Array.from(tiers).map((t, i) => {
+            const isUserTier = tiers.length - 1 - tierIndex === i;
 
-              const requiredVolume = Number(
-                t.minimumRunningNotionalTakerVolume
+            const requiredVolume = Number(t.minimumRunningNotionalTakerVolume);
+            let unlocksIn = null;
+
+            if (
+              referralVolumeInWindow >= requiredVolume &&
+              epochsInSet < t.minimumEpochs
+            ) {
+              unlocksIn = (
+                <span className="text-muted">
+                  Unlocks in {t.minimumEpochs - epochsInSet} epochs
+                </span>
               );
-              let unlocksIn = null;
+            }
 
-              if (
-                referralVolumeInWindow >= requiredVolume &&
-                epochsInSet < t.minimumEpochs
-              ) {
-                unlocksIn = (
-                  <span className="text-muted">
-                    Unlocks in {t.minimumEpochs - epochsInSet} epochs
-                  </span>
-                );
-              }
-
-              return (
-                <Tr key={i}>
-                  <Td>{i + 1}</Td>
-                  <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
-                  <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
-                  <Td>{t.minimumEpochs}</Td>
-                  <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
-                </Tr>
-              );
-            })}
+            return (
+              <Tr key={i}>
+                <Td>{i + 1}</Td>
+                <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
+                <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
+                <Td>{t.minimumEpochs}</Td>
+                <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
+              </Tr>
+            );
+          })}
         </tbody>
       </Table>
     </div>
@@ -491,3 +552,31 @@ const YourTier = () => {
     </span>
   );
 };
+
+const ReferrerInfo = ({ code }: { code?: string }) => (
+  <div className="pt-3 text-sm text-vega-clight-200 dark:vega-cdark-200">
+    <p className="mb-1">
+      {t('Connected key is owner of the referral set')}
+      {code && (
+        <>
+          {' '}
+          <span className="text-transparent bg-rainbow bg-clip-text">
+            {truncateMiddle(code)}
+          </span>
+        </>
+      )}
+      {'. '}
+      {t('As owner, it is eligible for commission not fee discounts.')}
+    </p>
+    <p>
+      {t('See')}{' '}
+      <Link
+        className="underline text-black dark:text-white"
+        to={Links.REFERRALS()}
+      >
+        {t('Referrals')}
+      </Link>{' '}
+      {t('for more information.')}
+    </p>
+  </div>
+);

apps/trading/components/fees-container/stat.tsx

@@ -1,23 +1,31 @@
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 
 export const Stat = ({
   value,
   text,
   highlight,
+  description,
 }: {
   value: string | number;
   text?: string;
   highlight?: boolean;
+  description?: ReactNode;
 }) => {
+  const val = (
+    <span
+      className={classNames('inline-block text-3xl leading-none', {
+        'text-transparent bg-rainbow bg-clip-text': highlight,
+        'cursor-help': description,
+      })}
+    >
+      {value}
+    </span>
+  );
   return (
     <p className="pt-3 leading-none first:pt-6">
-      <span
-        className={classNames('inline-block text-3xl leading-none', {
-          'text-transparent bg-rainbow bg-clip-text': highlight,
-        })}
-      >
-        {value}
-      </span>
+      {description ? <Tooltip description={description}>{val}</Tooltip> : val}
       {text && (
         <small className="block mt-0.5 text-xs text-muted">{text}</small>
       )}

apps/trading/components/fees-container/use-referral-stats.spec.ts

@@ -73,6 +73,8 @@ describe('useReferralStats', () => {
       referralTierIndex: -1,
       referralTiers: [],
       epochsInSet: 0,
+      code: undefined,
+      isReferrer: false,
     });
   });
 
@@ -93,6 +95,8 @@ describe('useReferralStats', () => {
       referralTierIndex: 1,
       referralTiers: program.benefitTiers,
       epochsInSet: Number(epoch.id) - set.atEpoch,
+      code: undefined,
+      isReferrer: false,
     });
   });
 

apps/trading/components/fees-container/use-referral-stats.ts

@@ -2,12 +2,15 @@ import compact from 'lodash/compact';
 import maxBy from 'lodash/maxBy';
 import { getReferralBenefitTier } from './utils';
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
+import { first } from 'lodash';
 
 export const useReferralStats = (
   setStats?: FeesQuery['referralSetStats'],
   setReferees?: FeesQuery['referralSetReferees'],
   program?: DiscountProgramsQuery['currentReferralProgram'],
-  epoch?: FeesQuery['epoch']
+  epoch?: FeesQuery['epoch'],
+  setIfReferrer?: FeesQuery['referrer'],
+  setIfReferee?: FeesQuery['referee']
 ) => {
   const referralTiers = program?.benefitTiers || [];
 
@@ -18,9 +21,18 @@ export const useReferralStats = (
       referralTierIndex: -1,
       referralTiers,
       epochsInSet: 0,
+      code: undefined,
+      isReferrer: false,
     };
   }
 
+  const setIfReferrerData = first(
+    compact(setIfReferrer?.edges).map((e) => e.node)
+  );
+  const setIfRefereeData = first(
+    compact(setIfReferee?.edges).map((e) => e.node)
+  );
+
   const referralSetsStats = compact(setStats.edges).map((e) => e.node);
   const referralSets = compact(setReferees.edges).map((e) => e.node);
 
@@ -48,5 +60,7 @@ export const useReferralStats = (
     referralTierIndex,
     referralTiers,
     epochsInSet,
+    code: (setIfReferrerData || setIfRefereeData)?.id,
+    isReferrer: Boolean(setIfReferrerData),
   };
 };

apps/trading/components/fees-container/utils.spec.ts

@@ -21,7 +21,7 @@ describe('getAdjustedFee', () => {
       new BigNumber(referralDiscount),
     ];
 
-    // 1 - 0.5 - 0.5
+    // 1 - 0.5 = 0.5
     const v = new BigNumber(1).minus(new BigNumber(volumeDiscount));
 
     // 1 - 0.5 = 0.5
@@ -34,13 +34,15 @@ describe('getAdjustedFee', () => {
     // 0.1 + 0.1 + 0.1 = 0.3
     const totalFees = fees.reduce((sum, x) => sum.plus(x), new BigNumber(0));
 
-    // 0.3 * 0.75 = 0.225
-    const expected = new BigNumber(totalFees).times(factor).toNumber();
+    // (1 - 0.3) * 0.75 = 0.525
+    const expected = new BigNumber(totalFees)
+      .times(new BigNumber(1).minus(factor))
+      .toNumber();
 
     expect(getAdjustedFee(fees, discounts)).toBe(expected);
   });
 
-  it('combines discount factors multiplicativly', () => {
+  it('combines discount factors multiplicatively', () => {
     const volumeDiscount = 0.4;
     const referralDiscount = 0.1;
 
@@ -67,7 +69,9 @@ describe('getAdjustedFee', () => {
     // summed fees
     const totalFees = fees.reduce((sum, x) => sum.plus(x), new BigNumber(0));
 
-    const expected = new BigNumber(totalFees).times(factor).toNumber();
+    const expected = new BigNumber(totalFees)
+      .times(new BigNumber(1).minus(factor))
+      .toNumber();
 
     expect(getAdjustedFee(fees, discounts)).toBe(expected);
   });

apps/trading/components/fees-container/utils.ts

@@ -12,7 +12,9 @@ export const formatPercentage = (num: number) => {
   const pct = new BigNumber(num).times(100);
   const dps = pct.decimalPlaces();
   const formatter = new Intl.NumberFormat(getUserLocale(), {
-    minimumFractionDigits: dps || 0,
+    // set to 0 in order to remove the "trailing zeroes" for numbers such as:
+    // 0.123456789 -non-zero-min-> 12.3456800% -zero-min-> 12.34568%
+    minimumFractionDigits: 0,
     maximumFractionDigits: dps || 0,
   });
   return formatter.format(parseFloat(pct.toFixed(5)));
@@ -101,5 +103,7 @@ export const getAdjustedFee = (fees: BigNumber[], discounts: BigNumber[]) => {
 
   const totalFactor = new BigNumber(1).minus(combinedFactors);
 
-  return totalFee.times(BigNumber.max(0, totalFactor)).toNumber();
+  return totalFee
+    .times(new BigNumber(1).minus(BigNumber.max(0, totalFactor)))
+    .toNumber();
 };

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

@@ -15,15 +15,12 @@ export const LedgerContainer = () => {
   });
 
   const assets = (data?.party?.accountsConnection?.edges ?? [])
-    .map<PartyAssetFieldsFragment>(
-      (item) => item?.node?.asset ?? ({} as PartyAssetFieldsFragment)
-    )
-    .reduce((aggr, item) => {
-      if ('id' in item && 'symbol' in item) {
-        aggr[item.id as string] = item.symbol as string;
-      }
-      return aggr;
-    }, {} as Record<string, string>);
+    .map((item) => item?.node?.asset)
+    .filter((asset): asset is PartyAssetFieldsFragment => !!asset?.id)
+    .reduce(
+      (aggr, item) => Object.assign(aggr, { [item.id]: item.symbol }),
+      {} as Record<string, string>
+    );
 
   if (!pubKey) {
     return (

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

@@ -0,0 +1,12 @@
+import { Settings } from './settings';
+import { render, screen } from '@testing-library/react';
+
+describe('Settings', () => {
+  it('should the settings component with all the options', () => {
+    render(<Settings />);
+    expect(screen.getByText('Dark mode')).toBeInTheDocument();
+    expect(screen.getByText('Share usage data')).toBeInTheDocument();
+    expect(screen.getByText('Toast location')).toBeInTheDocument();
+    expect(screen.getByText('Reset to default')).toBeInTheDocument();
+  });
+});

apps/trading/components/settings/settings.tsx

@@ -1,12 +1,19 @@
 import { t } from '@vegaprotocol/i18n';
-import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
+import {
+  Dialog,
+  Intent,
+  Switch,
+  ToastPositionSetter,
+  TradingButton,
+} from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 
 export const Settings = () => {
   const { theme, setTheme } = useThemeSwitcher();
   const [isApproved, setIsApproved] = useTelemetryApproval();
+  const [open, setOpen] = useState(false);
   return (
     <div>
       <SettingsGroup label={t('Dark mode')}>
@@ -31,6 +38,52 @@ export const Settings = () => {
       <SettingsGroup label={t('Toast location')}>
         <ToastPositionSetter />
       </SettingsGroup>
+      <SettingsGroup label={t('Reset to default')}>
+        <TradingButton
+          name="reset-to-defaults"
+          size="small"
+          intent={Intent.None}
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          {t('Reset')}
+        </TradingButton>
+        <Dialog open={open} title={t('Reset')}>
+          <div className="mb-4">
+            <p>
+              {t(
+                'You will lose all persisted settings and you will be logged out.'
+              )}
+            </p>
+            <p>
+              {t('Are you sure you want to reset all settings to default?')}
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <TradingButton
+              name="reset-to-defaults-cancel"
+              intent={Intent.Primary}
+              onClick={() => {
+                localStorage.clear();
+                window.location.reload();
+              }}
+            >
+              {t('Yes, clear cache and refresh')}
+            </TradingButton>
+            <TradingButton
+              name="reset-to-defaults-cancel"
+              intent={Intent.None}
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              {t('No, keep settings')}
+            </TradingButton>
+          </div>
+        </Dialog>
+      </SettingsGroup>
     </div>
   );
 };

apps/trading/pages/styles.css

@@ -170,7 +170,7 @@ html [data-theme='dark'] {
 
 .ag-theme-balham,
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
+  --ag-grid-size: 3px; /* Used for compactness */
   --ag-row-height: 36px;
   --ag-header-height: 28px;
 }
@@ -184,7 +184,7 @@ html [data-theme='dark'] {
 
 /* Light variables */
 .ag-theme-balham {
-  --ag-background-color: transparent;
+  --ag-background-color: theme(colors.vega.clight.900);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
   --ag-odd-row-background-color: transparent;
@@ -196,7 +196,7 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-background-color: transparent;
+  --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);
   --ag-odd-row-background-color: transparent;

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

@@ -1,10 +1,23 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import * as Types from '@vegaprotocol/types';
 import type { AccountFields } from './accounts-data-provider';
 import { getAccountData } from './accounts-data-provider';
 import { AccountTable } from './accounts-table';
 import userEvent from '@testing-library/user-event';
-
+const asset1 = {
+  __typename: 'Asset',
+  id: 'asset-1',
+  symbol: 'tBTC',
+  decimals: 5,
+  name: 'T BTC',
+};
+const asset2 = {
+  __typename: 'Asset',
+  id: 'asset-2',
+  symbol: 'aBTC',
+  decimals: 5,
+  name: 'A BTC',
+};
 const singleRow = {
   __typename: 'AccountBalance',
   type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
@@ -13,12 +26,7 @@ const singleRow = {
     __typename: 'Market',
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
   },
-  asset: {
-    __typename: 'Asset',
-    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-    symbol: 'tBTC',
-    decimals: 5,
-  },
+  asset: asset1,
   available: '125600000',
   used: '125600000',
   total: '251200000',
@@ -33,12 +41,7 @@ const secondRow = {
     __typename: 'Market',
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
   },
-  asset: {
-    __typename: 'Asset',
-    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-    symbol: 'aBTC',
-    decimals: 5,
-  },
+  asset: asset2,
   available: '125600001',
   used: '125600001',
   total: '251200002',
@@ -134,7 +137,7 @@ describe('AccountsTable', () => {
 
   it('should sort assets', async () => {
     // 7001-COLL-010
-    const { container } = render(
+    render(
       <AccountTable
         rowData={multiRowData}
         onClickAsset={() => null}
@@ -142,13 +145,13 @@ describe('AccountsTable', () => {
       />
     );
 
-    const headerCell = screen.getByText('Asset');
-    await userEvent.click(headerCell);
-    const rows = container.querySelectorAll(
-      '.ag-center-cols-container .ag-row'
-    );
-    expect(rows[0].textContent).toContain('aBTC');
-    expect(rows[1].textContent).toContain('tBTC');
+    const headerCell = screen
+      .getAllByRole('columnheader')
+      .find((h) => h?.getAttribute('col-id') === 'asset.symbol') as HTMLElement;
+
+    await userEvent.click(within(headerCell).getByText(/asset/i));
+
+    expect(headerCell).toHaveAttribute('aria-sort', 'ascending');
   });
 
   it('should apply correct formatting in view as user mode', async () => {
@@ -176,12 +179,7 @@ describe('AccountsTable', () => {
         rowData={singleRowData}
         onClickAsset={() => null}
         isReadOnly={false}
-        pinnedAsset={{
-          decimals: 5,
-          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-          symbol: 'tBTC',
-          name: 'tBTC',
-        }}
+        pinnedAsset={asset1}
       />
     );
     await screen.findAllByRole('rowgroup');
@@ -213,23 +211,13 @@ describe('AccountsTable', () => {
     const result = getAccountData([singleRow]);
     const expected = [
       {
-        asset: {
-          __typename: 'Asset',
-          decimals: 5,
-          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-          symbol: 'tBTC',
-        },
+        asset: asset1,
         available: '0',
         balance: '0',
         breakdown: [
           {
             __typename: 'AccountBalance',
-            asset: {
-              __typename: 'Asset',
-              decimals: 5,
-              id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-              symbol: 'tBTC',
-            },
+            asset: asset1,
             available: '0',
             balance: '125600000',
             total: '125600000',

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

@@ -1,4 +1,10 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BigNumber from 'bignumber.js';
 import {
@@ -7,7 +13,7 @@ import {
   TransferForm,
   type TransferFormProps,
 } from './transfer-form';
-import { AccountType } from '@vegaprotocol/types';
+import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
 
 describe('TransferForm', () => {
@@ -39,8 +45,7 @@ describe('TransferForm', () => {
   };
 
   const amount = '100';
-  const pubKey =
-    '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680';
+  const pubKey = '1'.repeat(64);
   const asset = {
     id: 'eur',
     symbol: '€',
@@ -50,10 +55,7 @@ describe('TransferForm', () => {
   };
   const props = {
     pubKey,
-    pubKeys: [
-      pubKey,
-      'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
-    ],
+    pubKeys: [pubKey, '2'.repeat(64)],
     feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [
@@ -182,7 +184,7 @@ describe('TransferForm', () => {
 
     // Test use max button
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
-    expect(amountInput).toHaveValue('1000');
+    expect(amountInput).toHaveValue('1000.00');
 
     // Test amount validation
     await userEvent.clear(amountInput);
@@ -267,7 +269,7 @@ describe('TransferForm', () => {
 
     // Test use max button
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
-    expect(amountInput).toHaveValue('100');
+    expect(amountInput).toHaveValue('100.00');
 
     // If transfering from a vested account 'include fees' checkbox should
     // be disabled and fees should be 0
@@ -296,6 +298,88 @@ describe('TransferForm', () => {
     });
   });
 
+  it('handles lots of decimal places', async () => {
+    const balance = '904195168829277777';
+    const expectedBalance = '0.904195168829277777';
+
+    const longDecimalAsset = {
+      id: 'assetId',
+      symbol: 'VEGA',
+      name: 'VEGA',
+      decimals: 18,
+      quantum: '1',
+    };
+
+    const account = {
+      type: AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+      asset: longDecimalAsset,
+      balance,
+    };
+
+    const mockSubmit = jest.fn();
+
+    renderComponent({
+      ...props,
+      accounts: [account],
+      submitTransfer: mockSubmit,
+      minQuantumMultiple: '100000',
+    });
+
+    // Select a pubkey
+    await userEvent.selectOptions(
+      screen.getByLabelText('To Vega key'),
+      props.pubKeys[1] // Use not current pubkey so we can check it switches to current pubkey later
+    );
+
+    // Select asset
+    await selectAsset(longDecimalAsset);
+
+    const accountSelect = screen.getByLabelText('From account');
+    const option = within(accountSelect)
+      .getAllByRole('option')
+      .find(
+        (o) => o.getAttribute('value') === `${account.type}-${account.asset.id}`
+      );
+    // plus one for disabled 'please select' option
+
+    expect(option).toHaveTextContent(
+      `${AccountTypeMapping[account.type]} (${expectedBalance} ${
+        account.asset.symbol
+      })`
+    );
+
+    await userEvent.selectOptions(
+      accountSelect,
+      `${AccountType.ACCOUNT_TYPE_VESTED_REWARDS}-${longDecimalAsset.id}`
+    );
+
+    expect(accountSelect).toHaveValue(
+      `${AccountType.ACCOUNT_TYPE_VESTED_REWARDS}-${longDecimalAsset.id}`
+    );
+
+    // Check switch back to connected key
+    const amountInput = screen.getByLabelText('Amount');
+
+    // Test use max button
+    await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
+    expect(amountInput).toHaveValue(expectedBalance);
+
+    await submit();
+
+    await waitFor(() => {
+      // 1003-TRAN-023
+      expect(mockSubmit).toHaveBeenCalledTimes(1);
+      expect(mockSubmit).toHaveBeenCalledWith({
+        fromAccountType: AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+        toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+        to: props.pubKey,
+        asset: longDecimalAsset.id,
+        amount: balance,
+        oneOff: {},
+      });
+    });
+  });
+
   describe('IncludeFeesCheckbox', () => {
     it('validates fields and submits when checkbox is checked', async () => {
       const mockSubmit = jest.fn();

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

@@ -5,7 +5,6 @@ import {
   vegaPublicKey,
   addDecimal,
   formatNumber,
-  addDecimalsFormatNumber,
   toBigNum,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -214,12 +213,7 @@ export const TransferForm = ({
                 <AssetOption
                   key={a.key}
                   asset={a}
-                  balance={
-                    <Balance
-                      balance={formatNumber(a.balance, a.decimals)}
-                      symbol={a.symbol}
-                    />
-                  }
+                  balance={<Balance balance={a.balance} symbol={a.symbol} />}
                 />
               ))}
             </TradingRichSelect>
@@ -286,8 +280,8 @@ export const TransferForm = ({
                   return (
                     <option value={id} key={id}>
                       {AccountTypeMapping[a.type]} (
-                      {addDecimalsFormatNumber(a.balance, a.asset.decimals)}{' '}
-                      {a.asset.symbol})
+                      {addDecimal(a.balance, a.asset.decimals)} {a.asset.symbol}
+                      )
                     </option>
                   );
                 })}
@@ -413,7 +407,7 @@ export const TransferForm = ({
             type="button"
             className="absolute top-0 right-0 ml-auto text-xs underline"
             onClick={() =>
-              setValue('amount', parseFloat(accountBalance).toString(), {
+              setValue('amount', accountBalance, {
                 shouldValidate: true,
               })
             }

libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx

@@ -37,6 +37,9 @@ export const AgGridThemed = ({
     <div className={wrapperClasses}>
       <AgGridReact
         defaultColDef={defaultColDef}
+        overlayLoadingTemplate={t('Loading...')}
+        overlayNoRowsTemplate={t('No data')}
+        suppressDragLeaveHidesColumns
         ref={gridRef}
         {...defaultProps}
         {...props}

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

@@ -151,6 +151,7 @@ export const DealTicketMarginDetails = ({
   const { decimals: assetDecimals, quantum } = asset;
   let marginRequiredBestCase: string | undefined = undefined;
   let marginRequiredWorstCase: string | undefined = undefined;
+
   if (marginEstimate) {
     if (currentMargins) {
       marginRequiredBestCase = (
@@ -288,7 +289,7 @@ export const DealTicketMarginDetails = ({
   const quoteName = getQuoteName(market);
 
   return (
-    <div className="flex flex-col w-full gap-2">
+    <div className="flex flex-col w-full gap-2 pt-2">
       <Accordion>
         <AccordionPanel
           itemId="margin"
@@ -296,7 +297,7 @@ export const DealTicketMarginDetails = ({
             <AccordionPrimitive.Trigger
               data-testid="accordion-toggle"
               className={classNames(
-                'w-full pt-2',
+                'w-full',
                 'flex items-center gap-2 text-xs',
                 'group'
               )}

libs/fills/src/lib/fills-table.spec.tsx

@@ -35,6 +35,7 @@ const defaultFill: PartialDeep<Trade> = {
   },
   createdAt: new Date('2022-02-02T14:00:00').toISOString(),
 };
+
 describe('FillsTable', () => {
   it('correct columns are rendered', async () => {
     // 7005-FILL-001
@@ -271,96 +272,147 @@ describe('FillsTable', () => {
       .find((c) => c.getAttribute('col-id') === 'size');
     expect(sizeCell).toHaveTextContent('3,000,000,000');
   });
-});
 
-describe('FeesDiscountBreakdownTooltip', () => {
-  it('shows all discounts', () => {
-    const data = generateFill({
-      ...defaultFill,
-      buyer: {
-        id: partyId,
-      },
+  describe('FeesDiscountBreakdownTooltip', () => {
+    it('shows all discounts', () => {
+      const data = generateFill({
+        ...defaultFill,
+        buyer: {
+          id: partyId,
+        },
+      });
+      const props = {
+        data,
+        partyId,
+        value: data.market,
+      } as Parameters<typeof FeesDiscountBreakdownTooltip>['0'];
+      const { container } = render(<FeesDiscountBreakdownTooltip {...props} />);
+      const dt = container.querySelectorAll('dt');
+      const dd = container.querySelectorAll('dd');
+      const expectedDt = [
+        'Infrastructure Fee',
+        'Referral Discount',
+        'Volume Discount',
+        'Liquidity Fee',
+        'Referral Discount',
+        'Volume Discount',
+        'Maker Fee',
+        'Referral Discount',
+        'Volume Discount',
+      ];
+      const expectedDD = [
+        '0.05 BTC',
+        '0.06 BTC',
+        '0.01 BTC',
+        '0.02 BTC',
+        '0.03 BTC',
+        '0.04 BTC',
+      ];
+      expectedDt.forEach((label, i) => {
+        expect(dt[i]).toHaveTextContent(label);
+      });
+      expectedDD.forEach((label, i) => {
+        expect(dd[i]).toHaveTextContent(label);
+      });
     });
-    const props = {
-      data,
-      partyId,
-      value: data.market,
-    } as Parameters<typeof FeesDiscountBreakdownTooltip>['0'];
-    const { container } = render(<FeesDiscountBreakdownTooltip {...props} />);
-    const dt = container.querySelectorAll('dt');
-    const dd = container.querySelectorAll('dd');
-    const expectedDt = [
-      'Infrastructure Fee',
-      'Referral Discount',
-      'Volume Discount',
-      'Liquidity Fee',
-      'Referral Discount',
-      'Volume Discount',
-      'Maker Fee',
-      'Referral Discount',
-      'Volume Discount',
-    ];
-    const expectedDD = [
-      '0.05 BTC',
-      '0.06 BTC',
-      '0.01 BTC',
-      '0.02 BTC',
-      '0.03 BTC',
-      '0.04 BTC',
-    ];
-    expectedDt.forEach((label, i) => {
-      expect(dt[i]).toHaveTextContent(label);
+  });
+
+  describe('getFeesBreakdown', () => {
+    it('should return correct fees breakdown for a taker', () => {
+      const fees = {
+        makerFee: '1000',
+        infrastructureFee: '2000',
+        liquidityFee: '3000',
+      };
+      const expectedBreakdown = {
+        infrastructureFee: '2000',
+        liquidityFee: '3000',
+        makerFee: '1000',
+        totalFee: '6000',
+      };
+      expect(getFeesBreakdown('Taker', fees)).toEqual(expectedBreakdown);
     });
-    expectedDD.forEach((label, i) => {
-      expect(dd[i]).toHaveTextContent(label);
+
+    it('should return correct fees breakdown for a maker if market', () => {
+      const fees = {
+        makerFee: '1000',
+        infrastructureFee: '2000',
+        liquidityFee: '3000',
+      };
+      const expectedBreakdown = {
+        infrastructureFee: '0',
+        liquidityFee: '0',
+        makerFee: '-1000',
+        totalFee: '-1000',
+      };
+      expect(getFeesBreakdown('Maker', fees)).toEqual(expectedBreakdown);
+    });
+
+    it('should return correct fees breakdown for a maker if market is active', () => {
+      const fees = {
+        makerFee: '1000',
+        infrastructureFee: '2000',
+        liquidityFee: '3000',
+      };
+      const expectedBreakdown = {
+        infrastructureFee: '0',
+        liquidityFee: '0',
+        makerFee: '-1000',
+        totalFee: '-1000',
+      };
+      expect(
+        getFeesBreakdown('Maker', fees, Schema.MarketState.STATE_ACTIVE)
+      ).toEqual(expectedBreakdown);
+    });
+
+    it('should return correct fees breakdown for a maker if the market is suspended', () => {
+      const fees = {
+        infrastructureFee: '2000',
+        liquidityFee: '3000',
+        makerFee: '0',
+      };
+      const expectedBreakdown = {
+        infrastructureFee: '1000',
+        liquidityFee: '1500',
+        makerFee: '0',
+        totalFee: '2500',
+      };
+      expect(
+        getFeesBreakdown('Maker', fees, Schema.MarketState.STATE_SUSPENDED)
+      ).toEqual(expectedBreakdown);
+    });
+
+    it('should return correct fees breakdown for a taker if the market is suspended', () => {
+      const fees = {
+        infrastructureFee: '2000',
+        liquidityFee: '3000',
+        makerFee: '0',
+      };
+      const expectedBreakdown = {
+        infrastructureFee: '1000',
+        liquidityFee: '1500',
+        makerFee: '0',
+        totalFee: '2500',
+      };
+      expect(
+        getFeesBreakdown('Taker', fees, Schema.MarketState.STATE_SUSPENDED)
+      ).toEqual(expectedBreakdown);
+    });
+  });
+
+  describe('getTotalFeesDiscounts', () => {
+    it('should return correct total value', () => {
+      const fees = {
+        infrastructureFeeReferralDiscount: '1',
+        infrastructureFeeVolumeDiscount: '2',
+        liquidityFeeReferralDiscount: '3',
+        liquidityFeeVolumeDiscount: '4',
+        makerFeeReferralDiscount: '5',
+        makerFeeVolumeDiscount: '6',
+      };
+      expect(getTotalFeesDiscounts(fees as TradeFeeFieldsFragment)).toEqual(
+        (1 + 2 + 3 + 4 + 5 + 6).toString()
+      );
     });
   });
 });
-
-describe('getFeesBreakdown', () => {
-  it('should return correct fees breakdown for a taker', () => {
-    const fees = {
-      makerFee: '1000',
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-      makerFee: '1000',
-      totalFee: '6000',
-    };
-    expect(getFeesBreakdown('Taker', fees)).toEqual(expectedBreakdown);
-  });
-
-  it('should return correct fees breakdown for a maker', () => {
-    const fees = {
-      makerFee: '1000',
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-    };
-    const expectedBreakdown = {
-      infrastructureFee: '2000',
-      liquidityFee: '3000',
-      makerFee: '-1000',
-      totalFee: '4000',
-    };
-    expect(getFeesBreakdown('Maker', fees)).toEqual(expectedBreakdown);
-  });
-});
-
-describe('getTotalFeesDiscounts', () => {
-  it('should return correct total value', () => {
-    const fees = {
-      infrastructureFeeReferralDiscount: '1',
-      infrastructureFeeVolumeDiscount: '2',
-      liquidityFeeReferralDiscount: '3',
-      liquidityFeeVolumeDiscount: '4',
-      makerFeeReferralDiscount: '5',
-      makerFeeVolumeDiscount: '6',
-    };
-    expect(getTotalFeesDiscounts(fees as TradeFeeFieldsFragment)).toEqual(
-      (1 + 2 + 3 + 4 + 5 + 6).toString()
-    );
-  });
-});

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

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
-import type {
-  AgGridReact,
-  AgGridReactProps,
-  AgReactUiProps,
+import {
+  type AgGridReact,
+  type AgGridReactProps,
+  type AgReactUiProps,
 } from 'ag-grid-react';
-import type { ITooltipParams, ColDef } from 'ag-grid-community';
+import type { ColDef } from 'ag-grid-community';
+import type { ITooltipParams } from 'ag-grid-community';
 import {
   addDecimal,
   addDecimalsFormatNumber,
@@ -290,6 +291,7 @@ export const getRoleAndFees = ({
 }) => {
   let role: Role;
   let fees;
+
   if (data?.buyer.id === partyId) {
     if (data.aggressor === Schema.Side.SIDE_BUY) {
       role = TAKER;
@@ -315,7 +317,16 @@ export const getRoleAndFees = ({
   } else {
     return { role: '-', fees: undefined };
   }
-  return { role, fees };
+
+  // We make the assumption that the market state is active if the maker fee is zero on both sides
+  // This needs to be updated when we have a way to get the correct market state when that fill happened from the API
+  // because the maker fee factor can be set to 0 via governance
+  const marketState =
+    data?.buyerFee.makerFee === data.sellerFee.makerFee &&
+    new BigNumber(data?.buyerFee.makerFee).isZero()
+      ? Schema.MarketState.STATE_SUSPENDED
+      : Schema.MarketState.STATE_ACTIVE;
+  return { role, fees, marketState };
 };
 
 const FeesBreakdownTooltip = ({
@@ -329,16 +340,21 @@ const FeesBreakdownTooltip = ({
 
   const asset = getAsset(market);
 
-  const { role, fees } = getRoleAndFees({ data, partyId }) ?? {};
+  const { role, fees, marketState } = getRoleAndFees({ data, partyId }) ?? {};
   if (!fees) return null;
   const { infrastructureFee, liquidityFee, makerFee, totalFee } =
-    getFeesBreakdown(role, fees);
+    getFeesBreakdown(role, fees, marketState);
 
   return (
     <div
       data-testid="fee-breakdown-tooltip"
-      className="z-20 max-w-sm px-4 py-2 text-sm text-black border rounded bg-vega-light-100 dark:bg-vega-dark-100 border-vega-light-200 dark:border-vega-dark-200 break-word dark:text-white"
+      className="z-20 max-w-sm px-4 py-2 text-xs text-black border rounded bg-vega-light-100 dark:bg-vega-dark-100 border-vega-light-200 dark:border-vega-dark-200 break-word dark:text-white"
     >
+      <p className="mb-1 italic">
+        {t('If the market was %s', [
+          Schema.MarketStateMapping[marketState].toLowerCase(),
+        ])}
+      </p>
       {role === MAKER && (
         <>
           <p className="mb-1">{t('The maker will receive the maker fee.')}</p>
@@ -352,7 +368,7 @@ const FeesBreakdownTooltip = ({
       {role === TAKER && (
         <p className="mb-1">{t('Fees to be paid by the taker.')}</p>
       )}
-      {role === '-' && (
+      {(role === '-' || marketState === Schema.MarketState.STATE_SUSPENDED) && (
         <p className="mb-1">
           {t(
             'If the market is in monitoring auction, half of the infrastructure and liquidity fees will be paid.'
@@ -393,8 +409,8 @@ const FeesDiscountBreakdownTooltipItem = ({
 }) =>
   value && value !== '0' ? (
     <>
-      <dt className="col-span-1">{label}</dt>
-      <dd className="text-right col-span-1">
+      <dt className="col-span-2">{label}</dt>
+      <dd className="text-right col-span-2">
         {addDecimalsFormatNumber(value, asset.decimals)} {asset.symbol}
       </dd>
     </>
@@ -417,7 +433,7 @@ export const FeesDiscountBreakdownTooltip = ({
       data-testid="fee-discount-breakdown-tooltip"
       className="max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-4 py-2 z-20 rounded text-sm break-word text-black dark:text-white"
     >
-      <dl className="grid grid-cols-2 gap-x-1">
+      <dl className="grid grid-cols-6 gap-x-1 text-xs">
         {(fees.infrastructureFeeReferralDiscount || '0') !== '0' ||
         (fees.infrastructureFeeVolumeDiscount || '0') !== '0' ? (
           <dt className="col-span-2">{t('Infrastructure Fee')}</dt>
@@ -479,20 +495,36 @@ export const getTotalFeesDiscounts = (fees: TradeFeeFieldsFragment) => {
 
 export const getFeesBreakdown = (
   role: Role,
-  feesObj: TradeFeeFieldsFragment
+  feesObj: TradeFeeFieldsFragment,
+  marketState: Schema.MarketState = Schema.MarketState.STATE_ACTIVE
 ) => {
-  const makerFee =
-    role === MAKER
-      ? new BigNumber(feesObj.makerFee).times(-1).toString()
-      : feesObj.makerFee;
+  // If market is in auction we assume maker fee is zero
+  const isMarketActive = marketState === Schema.MarketState.STATE_ACTIVE;
 
-  const infrastructureFee = feesObj.infrastructureFee;
-  const liquidityFee = feesObj.liquidityFee;
+  // If role is taker, then these are the fees to be paid
+  let { makerFee, infrastructureFee, liquidityFee } = feesObj;
+
+  if (isMarketActive) {
+    if (role === MAKER) {
+      makerFee = new BigNumber(feesObj.makerFee).times(-1).toString();
+      infrastructureFee = '0';
+      liquidityFee = '0';
+    }
+  } else {
+    // If market is suspended (in monitoring auction), then half of the fees are paid
+    infrastructureFee = new BigNumber(infrastructureFee)
+      .dividedBy(2)
+      .toString();
+    liquidityFee = new BigNumber(liquidityFee).dividedBy(2).toString();
+    // maker fee is already zero
+    makerFee = '0';
+  }
 
   const totalFee = new BigNumber(infrastructureFee)
     .plus(makerFee)
     .plus(liquidityFee)
     .toString();
+
   return {
     infrastructureFee,
     liquidityFee,

libs/ledger/src/lib/ledger-export-form.spec.tsx

@@ -278,18 +278,4 @@ describe('createDownloadUrl', () => {
       )}&dateRange.endTimestamp=${toNanoSeconds(dateTo)}`
     );
   });
-
-  it('should throw if invalid args are provided', () => {
-    // invalid url
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, protohost: 'foo' });
-    }).toThrow();
-
-    // invalid partyId
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, partyId: 'z'.repeat(64) });
-    }).toThrow();
-  });
 });

libs/ledger/src/lib/ledger-export-form.tsx

@@ -1,18 +1,18 @@
-import { useRef, useState } from 'react';
-import { format, subDays } from 'date-fns';
+import { useRef, useCallback } from 'react';
+import { subDays } from 'date-fns';
+import { Controller, useForm } from 'react-hook-form';
 import {
+  InputError,
   Intent,
-  Loader,
   TradingButton,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
-import { z } from 'zod';
 import {
   formatForInput,
+  getDateTimeFormat,
   toNanoSeconds,
-  VEGA_ID_REGEX,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
@@ -35,18 +35,18 @@ const getProtoHost = (vegaurl: string) => {
   return `${loc.protocol}//${loc.host}`;
 };
 
-const downloadSchema = z.object({
-  protohost: z.string().url().nonempty(),
-  partyId: z.string().regex(VEGA_ID_REGEX).nonempty(),
-  assetId: z.string().regex(VEGA_ID_REGEX).nonempty(),
-  dateFrom: z.string().nonempty(),
-  dateTo: z.string().optional(),
-});
-
-export const createDownloadUrl = (args: z.infer<typeof downloadSchema>) => {
-  // check args from form inputs
-  downloadSchema.parse(args);
+type LedgerFormValues = {
+  assetId: string;
+  dateFrom: string;
+  dateTo?: string;
+};
 
+export const createDownloadUrl = (
+  args: LedgerFormValues & {
+    partyId: string;
+    protohost: string;
+  }
+) => {
   const params = new URLSearchParams();
   params.append('partyId', args.partyId);
   params.append('assetId', args.assetId);
@@ -71,114 +71,101 @@ interface Props {
 
 export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const now = useRef(new Date());
-  const [dateFrom, setDateFrom] = useState(() => {
-    return formatForInput(subDays(now.current, 7));
+  const { control, handleSubmit, watch } = useForm<LedgerFormValues>({
+    defaultValues: {
+      dateFrom: formatForInput(subDays(now.current, 7)),
+      dateTo: '',
+      assetId: Object.keys(assets)[0],
+    },
   });
-  const [dateTo, setDateTo] = useState('');
+  const dateTo = watch('dateTo');
   const maxFromDate = formatForInput(new Date(dateTo || now.current));
   const maxToDate = formatForInput(now.current);
-
-  const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
   const protohost = getProtoHost(vegaUrl);
-  const disabled = Boolean(!assetId);
 
   const hasItem = useLedgerDownloadFile((store) => store.hasItem);
   const updateDownloadQueue = useLedgerDownloadFile(
     (store) => store.updateQueue
   );
 
-  const assetDropDown = (
-    <TradingSelect
-      id="select-ledger-asset"
-      value={assetId}
-      onChange={(e) => {
-        setAssetId(e.target.value);
-      }}
-      className="w-full"
-      data-testid="select-ledger-asset"
-    >
-      {Object.keys(assets).map((assetKey) => (
-        <option key={assetKey} value={assetKey}>
-          {assets[assetKey]}
-        </option>
-      ))}
-    </TradingSelect>
-  );
+  const startDownload = useCallback(
+    async (formValues: LedgerFormValues) => {
+      const link = createDownloadUrl({
+        protohost,
+        partyId,
+        ...formValues,
+      });
 
-  const link = createDownloadUrl({
-    protohost,
-    partyId,
-    assetId,
-    dateFrom,
-    dateTo,
-  });
+      const dateTimeFormatter = getDateTimeFormat();
+      const title = t('Downloading for %s from %s till %s', [
+        assets[formValues.assetId],
+        dateTimeFormatter.format(new Date(formValues.dateFrom)),
+        dateTimeFormatter.format(new Date(formValues.dateTo || Date.now())),
+      ]);
 
-  const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const title = t('Downloading for %s from %s till %s', [
-      assets[assetId],
-      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
-      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
-    ]);
-
-    const downloadStoreItem = {
-      title,
-      link,
-      isChanged: true,
-    };
-    if (hasItem(link)) {
-      updateDownloadQueue(downloadStoreItem);
-      return;
-    }
-    const ts = setTimeout(() => {
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Warning,
-        isDelayed: true,
+      const downloadStoreItem = {
+        title,
+        link,
         isChanged: true,
-      });
-    }, 1000 * 30);
-
-    try {
-      updateDownloadQueue(downloadStoreItem);
-      const resp = await fetch(link);
-      if (!resp?.ok) {
-        if (resp?.status === 429) {
-          throw new Error('Too many requests. Try again later.');
-        }
-        throw new Error('Download of ledger entries failed');
+      };
+      if (hasItem(link)) {
+        updateDownloadQueue(downloadStoreItem);
+        return;
       }
-      const { headers } = resp;
-      const nameHeader = headers.get('content-disposition');
-      const filename = nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        filename,
-      });
-      const blob = await resp.blob();
-      if (blob) {
+      const ts = setTimeout(() => {
         updateDownloadQueue({
           ...downloadStoreItem,
-          blob,
-          isDownloaded: true,
+          intent: Intent.Warning,
+          isDelayed: true,
           isChanged: true,
-          intent: Intent.Success,
         });
+      }, 1000 * 30);
+
+      try {
+        updateDownloadQueue(downloadStoreItem);
+        const resp = await fetch(link);
+        if (!resp?.ok) {
+          if (resp?.status === 429) {
+            throw new Error('Too many requests. Try again later.');
+          }
+          throw new Error('Download of ledger entries failed');
+        }
+        const { headers } = resp;
+        const nameHeader = headers.get('content-disposition');
+        const filename =
+          nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
+        updateDownloadQueue({
+          ...downloadStoreItem,
+          filename,
+        });
+        const blob = await resp.blob();
+        if (blob) {
+          updateDownloadQueue({
+            ...downloadStoreItem,
+            blob,
+            isDownloaded: true,
+            isChanged: true,
+            intent: Intent.Success,
+          });
+        }
+      } catch (err) {
+        localLoggerFactory({ application: 'ledger' }).error(
+          'Download file',
+          err
+        );
+        updateDownloadQueue({
+          ...downloadStoreItem,
+          intent: Intent.Danger,
+          isError: true,
+          isChanged: true,
+          errorMessage: (err as Error).message || undefined,
+        });
+      } finally {
+        clearTimeout(ts);
       }
-    } catch (err) {
-      localLoggerFactory({ application: 'ledger' }).error('Download file', err);
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Danger,
-        isError: true,
-        isChanged: true,
-        errorMessage: (err as Error).message || undefined,
-      });
-    } finally {
-      clearTimeout(ts);
-    }
-  };
+    },
+    [assets, hasItem, partyId, protohost, updateDownloadQueue]
+  );
 
   if (!protohost || Object.keys(assets).length === 0) {
     return null;
@@ -187,49 +174,117 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const offset = new Date().getTimezoneOffset();
 
   return (
-    <form onSubmit={startDownload} className="p-4 w-[350px]">
+    <form
+      onSubmit={handleSubmit(startDownload)}
+      className="p-4 w-[350px]"
+      noValidate
+    >
       <h2 className="mb-4">{t('Export ledger entries')}</h2>
-      <TradingFormGroup label={t('Select asset')} labelFor="asset">
-        {assetDropDown}
-      </TradingFormGroup>
-      <TradingFormGroup label={t('Date from')} labelFor="date-from">
-        <TradingInput
-          type="datetime-local"
-          data-testid="date-from"
-          id="date-from"
-          value={dateFrom}
-          onChange={(e) => setDateFrom(e.target.value)}
-          max={maxFromDate}
-        />
-      </TradingFormGroup>
-      <TradingFormGroup label={t('Date to')} labelFor="date-to">
-        <TradingInput
-          type="datetime-local"
-          data-testid="date-to"
-          id="date-to"
-          value={dateTo}
-          onChange={(e) => setDateTo(e.target.value)}
-          max={maxToDate}
-        />
-      </TradingFormGroup>
+      <Controller
+        name="assetId"
+        control={control}
+        rules={{
+          required: t('You need to select an asset'),
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup
+              label={t('Select asset')}
+              labelFor="asset"
+              compact
+            >
+              <TradingSelect
+                {...field}
+                id="select-ledger-asset"
+                className="w-full"
+                data-testid="select-ledger-asset"
+              >
+                {Object.keys(assets).map((assetKey) => (
+                  <option key={assetKey} value={assetKey}>
+                    {assets[assetKey]}
+                  </option>
+                ))}
+              </TradingSelect>
+            </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
+      <Controller
+        name="dateFrom"
+        control={control}
+        rules={{
+          required: t('You need to provide a date from'),
+          max: {
+            value: maxFromDate,
+            message: dateTo
+              ? t('Date from cannot be greater than date to')
+              : t('Date from cannot be in the future'),
+          },
+          deps: ['dateTo'],
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup
+              label={t('Date from')}
+              labelFor="date-from"
+              compact
+            >
+              <TradingInput
+                {...field}
+                type="datetime-local"
+                data-testid="date-from"
+                id="date-from"
+                max={maxFromDate}
+              />
+            </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
+      <Controller
+        name="dateTo"
+        control={control}
+        rules={{
+          max: {
+            value: maxToDate,
+            message: t('Date to cannot be in the future'),
+          },
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-2">
+            <TradingFormGroup label={t('Date to')} labelFor="date-to" compact>
+              <TradingInput
+                {...field}
+                type="datetime-local"
+                data-testid="date-to"
+                id="date-to"
+                max={maxToDate}
+              />
+            </TradingFormGroup>
+            {fieldState.error && (
+              <InputError>{fieldState.error.message}</InputError>
+            )}
+          </div>
+        )}
+      />
       <div className="relative text-sm" title={t('Download all to .csv file')}>
-        <TradingButton
-          fill
-          disabled={disabled}
-          type="submit"
-          data-testid="ledger-download-button"
-        >
+        <TradingButton fill type="submit" data-testid="ledger-download-button">
           {t('Download')}
         </TradingButton>
       </div>
-      {offset && (
+      {offset ? (
         <p className="text-xs text-neutral-400 mt-1">
           {t(
             'The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC%s.',
             [toHoursAndMinutes(offset)]
           )}
         </p>
-      )}
+      ) : null}
     </form>
   );
 };

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

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
-  formatNumberPercentage,
   getDateTimeFormat,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -29,6 +28,12 @@ import { LiquidityProvisionStatus } from '@vegaprotocol/types';
 import { LiquidityProvisionStatusMapping } from '@vegaprotocol/types';
 import type { LiquidityProvisionData } from './liquidity-data-provider';
 
+const formatNumberPercentage = (value: BigNumber, decimals?: number) => {
+  const decimalPlaces =
+    typeof decimals === 'undefined' ? value.dp() || 0 : decimals;
+  return `${value.toFixed(decimalPlaces, 1)}%`;
+};
+
 const percentageFormatter = ({ value }: ValueFormatterParams) => {
   if (!value) return '-';
   return formatNumberPercentage(new BigNumber(value).times(100), 2) || '-';
@@ -101,9 +106,6 @@ export const LiquidityTable = ({
 
     const feesAccruedTooltip = ({ value, data }: ITooltipParams) => {
       if (!value) return '-';
-      const newValue = new BigNumber(value)
-        .times(Number(stakeToCcyVolume) || 1)
-        .toString();
       let lessThanFull = false,
         lessThanMinimum = false;
       if (data.sla) {
@@ -126,11 +128,11 @@ export const LiquidityTable = ({
               new BigNumber(data.sla.currentEpochFractionOfTimeOnBook).times(
                 100
               ),
-              2
+              4
             ),
             formatNumberPercentage(
               new BigNumber(data.commitmentMinTimeFraction).times(100),
-              2
+              4
             ),
           ]
         );
@@ -143,12 +145,12 @@ export const LiquidityTable = ({
               new BigNumber(data.sla.currentEpochFractionOfTimeOnBook).times(
                 100
               ),
-              2
+              4
             ),
           ]
         );
       }
-      return addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0);
+      return addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0);
     };
 
     const stakeToCcyVolumeQuantumFormatter = ({
@@ -394,7 +396,7 @@ export const LiquidityTable = ({
             headerTooltip: t(
               `The liquidity fees accrued by each provider, which will be distributed at the end of the epoch after applying any penalties.`
             ),
-            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            valueFormatter: assetDecimalsQuantumFormatter,
             tooltipValueGetter: feesAccruedTooltip,
             cellClassRules: {
               'text-warning': ({ data }: { data: LiquidityProvisionData }) => {

libs/markets/src/lib/__generated__/index.ts

@@ -6,4 +6,4 @@ export * from './markets-candles';
 export * from './markets-data';
 export * from './OracleMarketsSpec';
 export * from './OracleSpecDataConnection';
-export * from './SuccessorMarket'
+export * from './SuccessorMarket'

libs/markets/src/lib/market-utils.ts

@@ -28,6 +28,22 @@ export const getAsset = (market: Partial<Market>) => {
   throw new Error('Failed to retrieve asset. Invalid product type');
 };
 
+export const getProductType = (market: Partial<Market>) => {
+  if (!market.tradableInstrument?.instrument.product) {
+    throw new Error(
+      'Failed to retrieve product type. Invalid tradable instrument'
+    );
+  }
+
+  const type = market.tradableInstrument.instrument.product.__typename;
+
+  if (!type) {
+    throw new Error('Failed to retrieve asset. Invalid product type');
+  }
+
+  return type;
+};
+
 export const getQuoteName = (market: Partial<Market>) => {
   if (!market.tradableInstrument?.instrument.product) {
     throw new Error(

libs/markets/src/lib/markets-candles.graphql

@@ -1,12 +1,3 @@
-fragment MarketCandlesFields on Candle {
-  high
-  low
-  open
-  close
-  volume
-  periodStart
-}
-
 query MarketsCandles($interval: Interval!, $since: String!) {
   marketsConnection {
     edges {

libs/positions/src/lib/positions-manager.spec.tsx

@@ -27,7 +27,9 @@ jest.mock('@vegaprotocol/data-provider', () => ({
 }));
 
 describe('PositionsManager', () => {
-  it('should close position with max uint64', async () => {
+  // TODO: temporarily disable close position
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should close position with max uint64', async () => {
     render(<PositionsManager partyIds={['partyId']} isReadOnly={false} />, {
       wrapper: MockedProvider,
     });

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

@@ -29,6 +29,7 @@ export const PositionsManager = ({
 }: PositionsManagerProps) => {
   const { pubKeys, pubKey } = useVegaWallet();
   const create = useVegaTransactionStore((store) => store.create);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const onClose = useCallback(
     ({ marketId, openVolume }: { marketId: string; openVolume: string }) =>
       create({
@@ -73,7 +74,8 @@ export const PositionsManager = ({
       pubKeys={pubKeys}
       rowData={data}
       onMarketClick={onMarketClick}
-      onClose={onClose}
+      // TODO: temporarily disable close position
+      // onClose={onClose}
       isReadOnly={isReadOnly}
       multipleKeys={partyIds.length > 1}
       overlayNoRowsTemplate={error ? error.message : t('No positions')}

libs/proposals/src/components/market-proposal-notification.tsx

@@ -29,7 +29,7 @@ export const MarketProposalNotification = ({
       </div>
     );
     return (
-      <div className="border-l border-default pl-1 pr-1 pb-1 min-w-min whitespace-nowrap">
+      <div className="border-default min-w-min border-l pb-1 pl-1 pr-1">
         <Notification
           intent={Intent.Warning}
           message={message}

libs/proposals/src/components/proposals-list/proposal-list.spec.tsx

@@ -85,7 +85,6 @@ describe('ProposalsList', () => {
       'Settlement asset',
       'State',
       'Parent market',
-      'Voting',
       'Closing date',
       'Enactment date',
       '', // actions col

libs/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
-import BigNumber from 'bignumber.js';
 import type { ColDef } from 'ag-grid-community';
 import {
-  CenteredGridCellWrapper,
   COL_DEFS,
   DateRangeFilter,
   SetFilter,
@@ -11,33 +9,18 @@ import {
 import compact from 'lodash/compact';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import {
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import {
-  ProductTypeMapping,
-  ProductTypeShortName,
+  ProposalProductTypeShortName,
   ProposalStateMapping,
 } from '@vegaprotocol/types';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
-import { VoteProgress } from '../voting-progress';
 import { ProposalActionsDropdown } from '../proposal-actions-dropdown';
 
 export const useColumnDefs = () => {
-  const { params } = useNetworkParams([
-    NetworkParams.governance_proposal_market_requiredMajority,
-  ]);
-  const requiredMajorityPercentage = useMemo(() => {
-    const requiredMajority =
-      params?.governance_proposal_market_requiredMajority ?? 1;
-    return new BigNumber(requiredMajority).times(100);
-  }, [params?.governance_proposal_market_requiredMajority]);
-
   const columnDefs: ColDef[] = useMemo(() => {
     return compact([
       {
@@ -54,27 +37,38 @@ export const useColumnDefs = () => {
         }) => {
           if (!value || !data) return '-';
 
-          // TODO: update when we switch to ProductConfiguration
-          const productType = 'Future';
+          const getProductType = (data: ProposalListFieldsFragment) => {
+            if (
+              data.terms.__typename === 'ProposalTerms' &&
+              data.terms.change.__typename === 'NewMarket'
+            ) {
+              return data.terms.change.instrument.product?.__typename;
+            }
+            return undefined;
+          };
+
+          const productType = getProductType(data);
           return (
-            <StackedCell
-              primary={value}
-              secondary={
-                <span
-                  title={ProductTypeMapping[productType]}
-                  className="uppercase"
-                >
-                  {ProductTypeShortName[productType]}
-                </span>
-              }
-            />
+            productType && (
+              <StackedCell
+                primary={value}
+                secondary={
+                  <span
+                    title={ProposalProductTypeShortName[productType]}
+                    className="uppercase"
+                  >
+                    {ProposalProductTypeShortName[productType]}
+                  </span>
+                }
+              />
+            )
           );
         },
       },
       {
         colId: 'asset',
         headerName: t('Settlement asset'),
-        field: 'terms.change.instrument.futureProduct.settlementAsset.symbol',
+        field: 'terms.change.instrument.product.settlementAsset.symbol',
       },
       {
         colId: 'state',
@@ -94,32 +88,6 @@ export const useColumnDefs = () => {
         field: 'terms.change.successorConfiguration.parentMarketId',
         cellRenderer: 'ParentMarketCell',
       },
-      {
-        colId: 'voting',
-        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 (
-              <CenteredGridCellWrapper>
-                <VoteProgress
-                  threshold={requiredMajorityPercentage}
-                  progress={yesPercentage}
-                />
-              </CenteredGridCellWrapper>
-            );
-          }
-          return '-';
-        },
-        filter: false,
-      },
       {
         colId: 'closing-date',
         headerName: t('Closing date'),
@@ -156,7 +124,7 @@ export const useColumnDefs = () => {
         },
       },
     ]);
-  }, [requiredMajorityPercentage]);
+  }, []);
 
   return columnDefs;
 };

libs/proposals/src/lib/proposals-data-provider/Proposals.graphql

@@ -16,78 +16,90 @@ fragment NewMarketFields on NewMarket {
   instrument {
     name
     code
-    futureProduct {
-      settlementAsset {
-        id
-        name
-        symbol
-        decimals
-        quantum
-      }
-      quoteName
-      dataSourceSpecForSettlementData {
-        sourceType {
-          ... on DataSourceDefinitionExternal {
-            sourceType {
-              ... on DataSourceSpecConfiguration {
-                signers {
-                  signer {
-                    ... on PubKey {
-                      key
-                    }
-                    ... on ETHAddress {
-                      address
+    product {
+      ... on FutureProduct {
+        settlementAsset {
+          id
+          name
+          symbol
+          decimals
+          quantum
+        }
+        quoteName
+        dataSourceSpecForSettlementData {
+          sourceType {
+            ... on DataSourceDefinitionExternal {
+              sourceType {
+                ... on DataSourceSpecConfiguration {
+                  signers {
+                    signer {
+                      ... on PubKey {
+                        key
+                      }
+                      ... on ETHAddress {
+                        address
+                      }
                     }
                   }
-                }
-                filters {
-                  key {
-                    name
-                    type
-                  }
-                  conditions {
-                    operator
-                    value
+                  filters {
+                    key {
+                      name
+                      type
+                    }
+                    conditions {
+                      operator
+                      value
+                    }
                   }
                 }
               }
             }
           }
         }
-      }
-      dataSourceSpecForTradingTermination {
-        sourceType {
-          ... on DataSourceDefinitionExternal {
-            sourceType {
-              ... on DataSourceSpecConfiguration {
-                signers {
-                  signer {
-                    ... on PubKey {
-                      key
-                    }
-                    ... on ETHAddress {
-                      address
+        dataSourceSpecForTradingTermination {
+          sourceType {
+            ... on DataSourceDefinitionExternal {
+              sourceType {
+                ... on DataSourceSpecConfiguration {
+                  signers {
+                    signer {
+                      ... on PubKey {
+                        key
+                      }
+                      ... on ETHAddress {
+                        address
+                      }
                     }
                   }
-                }
-                filters {
-                  key {
-                    name
-                    type
-                  }
-                  conditions {
-                    operator
-                    value
+                  filters {
+                    key {
+                      name
+                      type
+                    }
+                    conditions {
+                      operator
+                      value
+                    }
                   }
                 }
               }
             }
           }
         }
+        dataSourceSpecBinding {
+          settlementDataProperty
+          tradingTerminationProperty
+        }
       }
-      dataSourceSpecBinding {
-        settlementDataProperty
-        tradingTerminationProperty
+      ... on PerpetualProduct {
+        settlementAsset {
+          id
+          name
+          symbol
+          decimals
+          quantum
+        }
+        quoteName
       }
     }
   }

libs/proposals/src/lib/proposals-data-provider/proposals.mock.ts

@@ -128,7 +128,7 @@ export const createProposalListFieldsFragment = (
     instrument: {
       code: 'ETHUSD',
       name: 'ETHUSD',
-      futureProduct: {
+      product: {
         settlementAsset: {
           id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
           name: 'tDAI TEST',
@@ -262,7 +262,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'ETHUSD',
           name: 'ETHUSD',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
               name: 'tDAI TEST',
@@ -352,7 +352,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'LINKUSD',
           name: 'LINKUSD',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'eb30d55e90e1f9e5c4727d6fa2a5a8cd36ab9ae9738eb8f3faf53e2bee4861ee',
               name: 'mUSDT-II',
@@ -442,7 +442,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'LINKUSD',
           name: 'LINKUSD',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'eb30d55e90e1f9e5c4727d6fa2a5a8cd36ab9ae9738eb8f3faf53e2bee4861ee',
               name: 'mUSDT-II',
@@ -532,7 +532,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'ETHUSD',
           name: 'ETHUSD',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
               name: 'tDAI TEST',
@@ -622,7 +622,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'LINKUSD',
           name: 'LINKUSD',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'eb30d55e90e1f9e5c4727d6fa2a5a8cd36ab9ae9738eb8f3faf53e2bee4861ee',
               name: 'mUSDT-II',
@@ -712,7 +712,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'ETHDAI.MF21',
           name: 'ETHDAI Monthly (Dec 2022)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
               name: 'tDAI TEST',
@@ -802,7 +802,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'AAPL.MF21',
           name: 'Apple Monthly (Dec 2022)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
               name: 'tUSDC TEST',
@@ -892,7 +892,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'BTCUSD.MF21',
           name: 'BTCUSD Monthly (Dec 2022)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
               name: 'tDAI TEST',
@@ -982,7 +982,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'TSLA.QM21',
           name: 'Tesla Quarterly (Feb 2023)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: '177e8f6c25a955bd18475084b99b2b1d37f28f3dec393fab7755a7e69c3d8c3b',
               name: 'tEURO TEST',
@@ -1072,7 +1072,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'AAVEDAI.MF21',
           name: 'AAVEDAI Monthly (Dec 2022)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
               name: 'tDAI TEST',
@@ -1162,7 +1162,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'ETHBTC.QM21',
           name: 'ETHBTC Quarterly (Feb 2023)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
               name: 'tBTC TEST',
@@ -1252,7 +1252,7 @@ const proposalListFields: ProposalListFieldsFragment[] = [
         instrument: {
           code: 'UNIDAI.MF21',
           name: 'UNIDAI Monthly (Dec 2022)',
-          futureProduct: {
+          product: {
             settlementAsset: {
               id: 'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
               name: 'tDAI TEST',

libs/react-helpers/src/lib/format/number.tsx

@@ -22,11 +22,13 @@ export const CompactNumber = ({
   decimals = 'infer',
   compactDisplay = 'short',
   testId = 'compact-number',
+  compactAbove = DEFAULT_COMPACT_ABOVE,
 }: {
   number: BigNumber;
   decimals?: number | 'infer';
   compactDisplay?: 'short' | 'long';
   testId?: string;
+  compactAbove?: number;
 }) => {
   if (!number.isFinite()) {
     return (
@@ -44,7 +46,7 @@ export const CompactNumber = ({
     return <span data-testid={testId}>{INFINITY}</span>;
   }
 
-  if (number.isLessThan(DEFAULT_COMPACT_ABOVE)) {
+  if (number.isLessThan(compactAbove)) {
     return (
       <span data-testid={testId}>{formatNumber(number, decimalPlaces)}</span>
     );

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

@@ -93,7 +93,7 @@ export const Notification = ({
       </div>
       <div
         className={classNames(
-          'flex flex-col items-start overflow-hidden gap-0 mt-1',
+          'flex flex-col items-start overflow-hidden gap-0',
           'text-vega-clight-50 dark:text-vega-cdark-50',
           'font-alpha',
           { 'text-sm': size === 'small', 'text-base': size === 'medium' }

libs/wallet/src/connect-dialog/use-chain-id.spec.ts

@@ -0,0 +1,72 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useVegaWallet } from '../use-vega-wallet';
+import { useChainId } from './use-chain-id';
+
+global.fetch = jest.fn();
+const mockFetch = global.fetch as jest.Mock;
+mockFetch.mockImplementation((url: string) => {
+  return Promise.resolve({ ok: true });
+});
+
+jest.mock('../use-vega-wallet', () => {
+  const original = jest.requireActual('../use-vega-wallet');
+  return {
+    ...original,
+    useVegaWallet: jest.fn(),
+  };
+});
+
+describe('useChainId', () => {
+  it('does not call fetch when statistics url could not be determined', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: '',
+    });
+    renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('calls fetch with correct statistics url', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost:1234/statistics'
+      );
+    });
+  });
+
+  it('does not return chain id when chain id is not present in response', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    const { result } = renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('returns chain id when chain id is present in response', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    mockFetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        json: () => ({
+          statistics: {
+            chainId: '1234',
+          },
+        }),
+      });
+    });
+    const { result } = renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(result.current).not.toBeUndefined();
+      expect(result.current).toEqual('1234');
+    });
+  });
+});

libs/wallet/src/connect-dialog/use-chain-id.ts

@@ -3,17 +3,37 @@ import { useVegaWallet } from '../use-vega-wallet';
 
 const cache: Record<string, string> = {};
 
+/**
+ * Gets the statistics url for a given vega url.
+ * Example:
+ * https://graphql.example.com/graphql -> https://graphql.example.com/statistics
+ */
+const getNodeStatisticsUrl = (vegaUrl: string) => {
+  try {
+    const url = new URL(vegaUrl);
+    url.pathname = 'statistics';
+    return url.toString();
+  } catch (err) {
+    return undefined;
+  }
+};
+
 export const useChainId = () => {
   const { vegaUrl } = useVegaWallet();
   const [chainId, setChainId] = useState<undefined | string>(cache[vegaUrl]);
   const [fetchAttempt, setFetchAttempt] = useState(1);
+
+  const statisticsUrl = getNodeStatisticsUrl(vegaUrl);
+
   useEffect(() => {
+    // abort when `/statistics` URL could not be determined
+    if (!statisticsUrl) return;
     let isCancelled = false;
     if (cache[vegaUrl]) {
       setChainId(cache[vegaUrl]);
       return;
     }
-    fetch(vegaUrl.replace('graphql', 'statistics'))
+    fetch(statisticsUrl)
       .then((response) => response.json())
       .then((response) => {
         if (isCancelled) {
@@ -32,6 +52,6 @@ export const useChainId = () => {
     return () => {
       isCancelled = true;
     };
-  }, [fetchAttempt, vegaUrl]);
+  }, [fetchAttempt, statisticsUrl, vegaUrl]);
   return chainId;
 };