chore: rename asset unit to base quote

fix: quote base unit for size
feat(explorer): add determinsitic id to transfer tx (#5112 )
2023-10-25 12:35:53 +01:00 · 2023-10-25 12:13:31 +01:00 · 2023-10-24 16:48:17 +01:00 · 2023-10-24 17:43:33 +02:00 · 2023-10-24 10:32:07 +01:00 · 2023-10-23 16:57:18 +02:00
64 changed files with 2349 additions and 1272 deletions
@@ -12,6 +12,7 @@ import {
  SPECIAL_CASE_NETWORK,
  SPECIAL_CASE_NETWORK_ID,
 } from '../../links/party-link/party-link';
+import { txSignatureToDeterministicId } from '../lib/deterministic-ids';

 type Transfer = components['schemas']['commandsv1Transfer'];

@@ -63,10 +64,16 @@ export const TxDetailsTransfer = ({
  return (
    <>
      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TableRow modifier="bordered">
+        <TableRow modifier="bordered" data-testid="type">
          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
          <TableCell>{getTypeLabelForTransfer(transfer)}</TableCell>
        </TableRow>
+        <TableRow modifier="bordered" data-testid="id">
+          <TableCell {...sharedHeaderProps}>{t('Transfer ID')}</TableCell>
+          <TableCell>
+            {txSignatureToDeterministicId(txData.signature.value)}
+          </TableCell>
+        </TableRow>
        <TxDetailsShared
          txData={txData}
          pubKey={pubKey}
@@ -74,7 +81,7 @@ export const TxDetailsTransfer = ({
          hideTypeRow={true}
        />
        {from ? (
-          <TableRow modifier="bordered">
+          <TableRow modifier="bordered" data-testid="from">
            <TableCell>{t('From')}</TableCell>
            <TableCell>
              <PartyLink id={from} />
@@ -82,7 +89,7 @@ export const TxDetailsTransfer = ({
          </TableRow>
        ) : null}
        {transfer.to ? (
-          <TableRow modifier="bordered">
+          <TableRow modifier="bordered" data-testid="to">
            <TableCell>{t('To')}</TableCell>
            <TableCell>
              <PartyLink id={transfer.to} />
@@ -90,7 +97,7 @@ export const TxDetailsTransfer = ({
          </TableRow>
        ) : null}
        {transfer.asset && transfer.amount ? (
-          <TableRow modifier="bordered">
+          <TableRow modifier="bordered" data-testid="amount">
            <TableCell>{t('Amount')}</TableCell>
            <TableCell>
              <SizeInAsset assetId={transfer.asset} size={transfer.amount} />
@@ -1,6 +1,15 @@
-import { getTypeLabelForTransfer } from './details/tx-transfer';
+import type { BlockExplorerTransactionResult } from '../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../routes/blocks/tendermint-blocks-response';
 import type { components } from '../../../types/explorer';

+import {
+  TxDetailsTransfer,
+  getTypeLabelForTransfer,
+} from './details/tx-transfer';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
 type Transfer = components['schemas']['commandsv1Transfer'];

 describe('TX: Transfer: getLabelForTransfer', () => {
@@ -56,3 +65,70 @@ describe('TX: Transfer: getLabelForTransfer', () => {
    expect(getTypeLabelForTransfer(mock)).toEqual('Transfer');
  });
 });
+
+describe('TxDetailsTransfer', () => {
+  const mockBlockData = {
+    result: {
+      block: {
+        header: {
+          height: '123',
+        },
+      },
+    },
+  };
+
+  const mockTxData: Partial<BlockExplorerTransactionResult> = {
+    hash: 'test',
+    submitter:
+      'e1943eea46fed576cf2be42972f3c5515ad3d0ac7ac013f56677c12a53a1b3ed',
+    command: {
+      nonce: '5188810881378065222',
+      blockHeight: '14951513',
+      transfer: {
+        fromAccountType: 'ACCOUNT_TYPE_GENERAL',
+        to: '78432a2808f20b18a46ccc6a917bdc4d63c2b9e7007f777bdcab5a9f462c5ba6',
+        toAccountType: 'ACCOUNT_TYPE_GENERAL',
+        asset:
+          'dd20590509d30d20bdbbe64dc1090c1140c7690121a9b9940bc66f62dfa2e599',
+        amount: '4800000000',
+        reference: '',
+        oneOff: {
+          deliverOn: '0',
+        },
+      },
+    },
+    signature: {
+      value:
+        '610c2e196a7d4fed4413b9e82af267b1ff3e30e943df3a3d28096fd60604d430d752fbaf6dd4f84d496be78885bb6118f40560bff7832c06bd7a3d67b718b700',
+    },
+  };
+
+  it('renders basic transfer details', () => {
+    const { getByTestId } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsTransfer
+            txData={mockTxData as BlockExplorerTransactionResult}
+            pubKey={mockTxData.command.submitter}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    const id = getByTestId('id');
+    expect(id.children[0].textContent).toEqual('Transfer ID');
+    expect(id.children[1].textContent).toEqual(
+      '51f3bab5eb2637651012507a64d497790a734248792c16e5cf36df8984074fbd'
+    );
+
+    const type = getByTestId('type');
+    expect(type.children[1].textContent).toEqual('Transfer');
+
+    const from = getByTestId('from');
+    expect(from.children[1].textContent).toEqual(mockTxData.submitter);
+
+    const to = getByTestId('to');
+    expect(to.children[1].textContent).toEqual(mockTxData.command.transfer.to);
+  });
+});
@@ -128,9 +128,7 @@ describe('<ProposalReferralProgramDetails />', () => {
  it('should not render if there are no relevant fields', () => {
    const incompleteProposal = generateProposal({
      terms: {
-        change: {
-          __typename: 'UpdateReferralProgram',
-        },
+        change: {},
      },
    });

@@ -7,7 +7,7 @@ export type NewMarketProductFieldsFragment = { __typename?: 'Proposal', terms: {

 export type UpdateMarketStatesFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __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' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };

-export type UpdateReferralProgramsFragment = { __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', windowLength: number, endOfProgram: string, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
+export type UpdateReferralProgramsFragment = { __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', 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' } } };

 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 }> } } };

@@ -21,7 +21,7 @@ export type ProposalsQueryVariables = Types.Exact<{
 }>;


-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: string, 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, 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 const NewMarketProductFieldsFragmentDoc = gql`
    fragment NewMarketProductFields on Proposal {
@@ -142,6 +142,12 @@ export const generateYesVotes = (
                })
                .toString(),
        },
+        vestingBalancesSummary: {
+          __typename: 'PartyVestingBalancesSummary',
+          epoch: null,
+          lockedBalances: [],
+          vestingBalances: [],
+        },
      },
      datetime: faker.date.past().toISOString(),
    };
@@ -192,6 +198,12 @@ export const generateNoVotes = (
                })
                .toString(),
        },
+        vestingBalancesSummary: {
+          __typename: 'PartyVestingBalancesSummary',
+          epoch: null,
+          lockedBalances: [],
+          vestingBalances: [],
+        },
      },
      datetime: faker.date.past().toISOString(),
    };
@@ -69,7 +69,7 @@ describe(
      cy.contains('Something went wrong').should('not.exist');
      cy.contains('Application error').should('not.exist');
      cy.getByTestId('tab-liquidity').within(() => {
-        cy.get('[col-id="party.id"]').eq(1).should('not.be.empty');
+        cy.get('[col-id="partyId"]').eq(1).should('not.be.empty');
      });
    });
  }
@@ -12,8 +12,7 @@ const marketSummaryBlock = 'header-summary';
 const itemValue = 'item-value';
 const itemHeader = 'item-header';
 const colCommitmentAmount = '[col-id="commitmentAmount"]';
-const colAverageEntryValuation = '[col-id="averageEntryValuation"]';
-const colEquityLikeShare = '[col-id="equityLikeShare"]';
+const colEquityLikeShare = '[col-id="feeShare.equityLikeShare"]';
 const colFee = '[col-id="fee"]';
 const colCommitmentAmount_1 = '[col-id="commitmentAmount_1"]';
 const colBalance = '[col-id="balance"]';
@@ -24,11 +23,16 @@ const colUpdatedAt = '[col-id="updatedAt"] button';
 const headers = [
  'Party',
  'Commitment (tDAI)',
-  'Share',
-  'Proposed fee',
-  'Market valuation at entry',
  'Obligation',
-  'Supplied',
+  'Fee',
+  'Adjusted stake share',
+  'Share',
+  'Live supplied liquidity',
+  'Live time fraction on book',
+  'Live liquidity quality score (%)',
+  'Last time fraction on the book',
+  'Last fee penalty',
+  'Last bond penalty',
  'Status',
  'Created',
  'Updated',
@@ -64,11 +68,8 @@ describe('liquidity table - trading', { tags: '@smoke' }, () => {
    // 5002-LIQP-002
    cy.get(rowSelector)
      .first()
-      .find('[col-id="party.id"]')
-      .should(
-        'have.text',
-        '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f'
-      );
+      .find('[col-id="partyId"]')
+      .should('have.text', '69464e…dc6f');

    cy.get(rowSelector)
      .first()
@@ -82,12 +83,6 @@ describe('liquidity table - trading', { tags: '@smoke' }, () => {

    cy.get(rowSelector).first().find(colFee).should('have.text', '0.09%');

-    // 5002-LIQP-013
-    cy.get(rowSelector)
-      .first()
-      .find(colAverageEntryValuation)
-      .should('have.text', '685,852.93692');
-
    cy.get(rowSelector)
      .first()
      .find(colCommitmentAmount_1)
@@ -104,7 +99,8 @@ describe('liquidity table - trading', { tags: '@smoke' }, () => {
    cy.get(rowSelector).first().find(colCreatedAt).should('not.be.empty');
    cy.get(rowSelector).first().find(colUpdatedAt).should('not.be.empty');
  });
-  it.skip('liquidity status column should be sorted properly', () => {
+
+  it('liquidity status column should be sorted properly', () => {
    // 5002-LIQP-003
    const liquidityColDefault = ['Active', 'Pending'];
    const liquidityColAsc = ['Active', 'Pending'];
@@ -220,11 +216,8 @@ describe('liquidity table view', { tags: '@smoke' }, () => {
      // 5002-LIQP-011
      cy.get(rowSelectorLiquidityActive)
        .first()
-        .find('[col-id="party.id"]')
-        .should(
-          'have.text',
-          '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f'
-        );
+        .find('[col-id="partyId"]')
+        .should('have.text', '69464e…dc6f');

      cy.get(rowSelectorLiquidityActive)
        .first()
@@ -241,12 +234,6 @@ describe('liquidity table view', { tags: '@smoke' }, () => {
        .find(colFee)
        .should('have.text', '0.09%');

-      // 5002-LIQP-013
-      cy.get(rowSelectorLiquidityActive)
-        .first()
-        .find(colAverageEntryValuation)
-        .should('have.text', '685,852.93692');
-
      cy.get(rowSelectorLiquidityActive)
        .first()
        .find(colCommitmentAmount_1)
@@ -277,11 +264,8 @@ describe('liquidity table view', { tags: '@smoke' }, () => {
      cy.getByTestId('Inactive').click();
      cy.get(rowSelectorLiquidityInactive)
        .first()
-        .find('[col-id="party.id"]')
-        .should(
-          'have.text',
-          'cc464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f'
-        );
+        .find('[col-id="partyId"]')
+        .should('have.text', 'cc464e…dc6f');

      cy.get(rowSelectorLiquidityInactive)
        .first()
@@ -298,11 +282,6 @@ describe('liquidity table view', { tags: '@smoke' }, () => {
        .find(colFee)
        .should('have.text', '0.40%');

-      cy.get(rowSelectorLiquidityInactive)
-        .first()
-        .find(colAverageEntryValuation)
-        .should('have.text', '685,852.93692');
-
      cy.get(rowSelectorLiquidityInactive)
        .first()
        .find(colCommitmentAmount_1)
@@ -30,11 +30,11 @@ import {
  blockStatisticsQuery,
  networkParamQuery,
  liquidityProvisionsQuery,
-  liquidityProviderFeeShareQuery,
  successorMarketQuery,
  parentMarketIdQuery,
  successorMarketIdsQuery,
  successorMarketProposalDetailsQuery,
+  liquidityProvidersQuery,
 } from '@vegaprotocol/mock';
 import type { PartialDeep } from 'type-fest';
 import type { MarketDataQuery, MarketsQuery } from '@vegaprotocol/markets';
@@ -162,11 +162,7 @@ const mockTradingPage = (
  aliasGQLQuery(req, 'Trades', tradesQuery());
  aliasGQLQuery(req, 'Chart', chartQuery());
  aliasGQLQuery(req, 'LiquidityProvisions', liquidityProvisionsQuery());
-  aliasGQLQuery(
-    req,
-    'LiquidityProviderFeeShare',
-    liquidityProviderFeeShareQuery
-  );
+  aliasGQLQuery(req, 'LiquidityProviders', liquidityProvidersQuery());
  aliasGQLQuery(req, 'Candles', candlesQuery());
  aliasGQLQuery(req, 'Withdrawals', withdrawalsQuery());
  aliasGQLQuery(req, 'NetworkParams', networkParamsQuery());
@@ -3,21 +3,21 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
-NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
-NX_VEGA_ENV=STAGNET1
-NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
+NX_VEGA_ENV=TESTNET
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
-NX_VEGA_TOKEN_URL=https://governance.stagnet1.vega.rocks
+NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
-
+NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72

 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
@@ -319,7 +319,8 @@ describe('Closed', () => {
    );
  });

-  it('successor marked should be visible', async () => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('successor marked should be visible', async () => {
    const marketsWithSuccessorID = [
      {
        __typename: 'MarketEdge' as const,
@@ -1,21 +1,42 @@
 import {
  Input,
  InputError,
+  Loader,
  VegaIcon,
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { FieldValues } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import classNames from 'classnames';
-import { Navigate, useSearchParams } from 'react-router-dom';
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { Button } from './buttons';
-import { useVegaWallet } from '@vegaprotocol/wallet';
+import { RainbowButton } from './buttons';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
+import { t } from '@vegaprotocol/i18n';
+import { Statistics } from './referral-statistics';
+
+const RELOAD_DELAY = 3000;
+
+const validateCode = (value: string) => {
+  const number = +`0x${value}`;
+  if (!value || value.length !== 64) {
+    return t('Code must be 64 characters in length');
+  } else if (Number.isNaN(number)) {
+    return t('Code must be be valid hex');
+  }
+  return true;
+};

 export const ApplyCodeForm = () => {
+  const navigate = useNavigate();
+  const openWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+
  const [status, setStatus] = useState<
    'requested' | 'failed' | 'successful' | null
  >(null);
@@ -27,11 +48,17 @@ export const ApplyCodeForm = () => {
    formState: { errors },
    setValue,
    setError,
+    watch,
  } = useForm();
  const [params] = useSearchParams();

-  const { data: referee } = useReferral(pubKey, 'referee');
-  const { data: referrer } = useReferral(pubKey, 'referrer');
+  const { data: referee } = useReferral({ pubKey, role: 'referee' });
+  const { data: referrer } = useReferral({ pubKey, role: 'referrer' });
+
+  const codeField = watch('code');
+  const { data: previewData, loading: previewLoading } = useReferral({
+    code: validateCode(codeField) ? codeField : undefined,
+  });

  useEffect(() => {
    const code = params.get('code');
@@ -54,7 +81,7 @@ export const ApplyCodeForm = () => {
        if (!res) {
          setError('code', {
            type: 'required',
-            message: 'The transaction could not be sent',
+            message: t('The transaction could not be sent'),
          });
        }
        if (res) {
@@ -65,9 +92,13 @@ export const ApplyCodeForm = () => {
        if (err.message.includes('user rejected')) {
          setStatus(null);
        } else {
+          setStatus(null);
          setError('code', {
            type: 'required',
-            message: 'Your code has been rejected',
+            message:
+              err instanceof Error
+                ? err.message
+                : t('Your code has been rejected'),
          });
        }
      });
@@ -99,10 +130,21 @@ export const ApplyCodeForm = () => {
      }),
  });

+  // go to main page when successfully applied
+  useEffect(() => {
+    if (status === 'successful') {
+      setTimeout(() => {
+        navigate(Routes.REFERRALS);
+      }, RELOAD_DELAY);
+    }
+  }, [navigate, status]);
+
+  // go to main page if the current pubkey is already a referrer or referee
  if (referee || referrer) {
    return <Navigate to={Routes.REFERRALS} />;
  }

+  // show "code applied" message when successfully applied
  if (status === 'successful') {
    return (
      <div className="w-1/2 mx-auto">
@@ -110,61 +152,94 @@ export const ApplyCodeForm = () => {
          <span className="text-vega-green-500">
            <VegaIcon name={VegaIconNames.TICK} size={20} />
          </span>{' '}
-          <span className="pt-1">Code applied</span>
+          <span className="pt-1">{t('Code applied')}</span>
        </h3>
      </div>
    );
  }

  const getButtonProps = () => {
-    if (isReadOnly || !pubKey) {
+    if (!pubKey) {
+      return {
+        disabled: false,
+        children: t('Connect wallet'),
+        type: 'button' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
+        onClick: ((event) => {
+          event.preventDefault();
+          openWalletDialog();
+        }) as MouseEventHandler,
+      };
+    }
+
+    if (isReadOnly) {
      return {
        disabled: true,
-        children: 'Apply',
+        children: t('Apply a code'),
+        type: 'submit' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
      };
    }

    if (status === 'requested') {
      return {
        disabled: true,
-        children: 'Confirm in wallet...',
+        children: t('Confirm in wallet...'),
+        type: 'submit' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
      };
    }

    return {
      disabled: false,
-      children: 'Apply',
+      children: t('Apply a code'),
+      type: 'submit' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
    };
  };

  return (
-    <div className="w-1/2 mx-auto">
-      <h3 className="mb-5 text-xl text-center uppercase calt">
-        Apply a referral code
-      </h3>
-      <p className="mb-6 text-center">Enter a referral code</p>
-      <form
-        className={classNames('w-full flex flex-col gap-3', {
-          'animate-shake': Boolean(errors.code),
-        })}
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <label className="flex-grow">
-          <span className="block mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
-            Your referral code
-          </span>
-          <Input
-            hasError={Boolean(errors.code)}
-            {...register('code', {
-              required: 'You have to provide a code to apply it.',
-            })}
-          />
-        </label>
-        <Button className="w-full" type="submit" {...getButtonProps()} />
-      </form>
-      {errors.code && (
-        <InputError>{errors.code.message?.toString()}</InputError>
-      )}
-    </div>
+    <>
+      <div className="w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg">
+        <h3 className="mb-4 text-2xl text-center calt">
+          {t('Apply a referral code')}
+        </h3>
+        <p className="mb-4 text-center text-base">
+          {t('Enter a referral code to get trading discounts.')}
+        </p>
+        <form
+          className={classNames('w-full flex flex-col gap-4', {
+            'animate-shake': Boolean(errors.code),
+          })}
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <label>
+            <span className="sr-only">{t('Your referral code')}</span>
+            <Input
+              hasError={Boolean(errors.code)}
+              {...register('code', {
+                required: t('You have to provide a code to apply it.'),
+                validate: validateCode,
+              })}
+              placeholder="Enter a code"
+              className="mb-2 bg-vega-clight-900 dark:bg-vega-cdark-700"
+            />
+          </label>
+          <RainbowButton variant="border" {...getButtonProps()} />
+        </form>
+        {errors.code && (
+          <InputError className="break-words overflow-auto">
+            {errors.code.message?.toString()}
+          </InputError>
+        )}
+      </div>
+      {previewLoading && !previewData ? (
+        <div className="mt-10">
+          <Loader />
+        </div>
+      ) : null}
+      {previewData ? (
+        <div className="mt-10">
+          <h2 className="text-2xl mb-5">{t('You are joining')}</h2>
+          <Statistics data={previewData} as="referee" />
+        </div>
+      ) : null}
+    </>
  );
 };
@@ -16,20 +16,23 @@ export const RainbowButton = ({
 }: RainbowButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) => (
  <button
    className={classNames(
-      'bg-rainbow hover:bg-none hover:bg-rainbow enabled:hover:bg-vega-pink-500 rounded-lg overflow-hidden disabled:opacity-40',
+      'bg-rainbow rounded-lg overflow-hidden disabled:opacity-40',
+      'hover:bg-rainbow-180 hover:animate-spin-rainbow',
      {
        'px-5 py-3 text-white': variant === 'full',
        'p-[0.125rem]': variant === 'border',
-      },
-      className
+      }
    )}
    {...props}
  >
    <div
-      className={classNames({
-        'bg-white dark:bg-vega-cdark-900 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
-          variant === 'border',
-      })}
+      className={classNames(
+        {
+          'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
+            variant === 'border',
+        },
+        className
+      )}
    >
      {children}
    </div>
@@ -55,6 +58,20 @@ const DISABLED_RAINBOW_TAB_STYLE = classNames(
  '[&.active]:text-white'
 );

+const TAB_STYLE = classNames(
+  'inline-block',
+  'bg-transparent',
+  'text-vega-clight-200 dark:text-vega-cdark-200',
+  'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100',
+  'data-[state="active"]:text-black dark:data-[state="active"]:text-white',
+  'data-[state="active"]:border-b-2 data-[state="active"]:border-b-black dark:data-[state="active"]:border-b-white',
+  '[&.active]:text-black dark:[&.active]:text-white',
+  '[&.active]:border-b-2 [&.active]:border-b-black dark:[&.active]:border-b-white',
+  'mx-4 px-0 py-3',
+  'uppercase'
+);
+const DISABLED_TAB_STYLE = classNames('pointer-events-none');
+
 export const RainbowTabButton = forwardRef<
  HTMLButtonElement,
  { disabled?: boolean } & ButtonHTMLAttributes<HTMLButtonElement>
@@ -93,6 +110,26 @@ export const RainbowTabLink = ({
  </NavLink>
 );

+export const TabLink = ({
+  to,
+  children,
+  className,
+  disabled = false,
+  ...props
+}: { disabled?: boolean } & ComponentProps<typeof NavLink>) => (
+  <NavLink
+    to={to}
+    className={classNames(
+      TAB_STYLE,
+      disabled && DISABLED_TAB_STYLE,
+      typeof className === 'string' ? className : undefined
+    )}
+    {...props}
+  >
+    {children}
+  </NavLink>
+);
+
 export const Button = forwardRef<
  HTMLButtonElement,
  ComponentProps<typeof TradingButton>
@@ -4,3 +4,8 @@ export const GRADIENT =

 export const SKY_BACKGROUND =
  'bg-[url(/sky-light.png)] dark:bg-[url(/sky-dark.png)] bg-[40%_0px] bg-[length:1440px] bg-no-repeat bg-local';
+
+// TODO: Update the links to use the correct referral related pages
+export const REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
+export const ABOUT_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
+export const DISCLAIMER_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
@@ -19,70 +19,58 @@ import {
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
 import { useStakeAvailable } from './hooks/use-stake-available';
+import {
+  ABOUT_REFERRAL_DOCS_LINK,
+  DISCLAIMER_REFERRAL_DOCS_LINK,
+} from './constants';
+import { useReferral } from './hooks/use-referral';
+import { t } from '@vegaprotocol/i18n';

 export const CreateCodeContainer = () => {
-  const { stakeAvailable, requiredStake } = useStakeAvailable();
-  if (stakeAvailable == null || requiredStake == null) {
-    return null;
-  }
-
-  return (
-    <CreateCodeForm
-      currentStakeAvailable={stakeAvailable}
-      requiredStake={requiredStake}
-    />
-  );
+  return <CreateCodeForm />;
 };

-export const CreateCodeForm = ({
-  currentStakeAvailable,
-  requiredStake,
-}: {
-  currentStakeAvailable: bigint;
-  requiredStake: bigint;
-}) => {
+export const CreateCodeForm = () => {
  const [dialogOpen, setDialogOpen] = useState(false);
  const openWalletDialog = useVegaWalletDialogStore(
    (store) => store.openVegaWalletDialog
  );
-  const { pubKey } = useVegaWallet();
+  const { pubKey, isReadOnly } = useVegaWallet();

  return (
-    <div className="w-1/2 mx-auto">
-      <h3 className="mb-5 text-xl text-center uppercase calt">
-        Create a referral code
+    <div className="w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg">
+      <h3 className="mb-4 text-2xl text-center calt">
+        {t('Create a referral code')}
      </h3>
-      <p className="mb-6 text-center">
-        Generate a referral code to share with your friends and start earning
-        commission.
+      <p className="mb-4 text-center text-base">
+        {t(
+          'Generate a referral code to share with your friends and start earning commission.'
+        )}
      </p>
-      <div className="mb-5">
-        <div className="text-center">
-          <RainbowButton
-            variant="border"
-            onClick={() => {
-              if (pubKey) {
-                setDialogOpen(true);
-              } else {
-                openWalletDialog();
-              }
-            }}
-          >
-            {pubKey ? 'Create a referral code' : 'Connect wallet'}
-          </RainbowButton>
-        </div>
+
+      <div className="w-full flex flex-col">
+        <RainbowButton
+          variant="border"
+          disabled={isReadOnly}
+          onClick={() => {
+            if (pubKey) {
+              setDialogOpen(true);
+            } else {
+              openWalletDialog();
+            }
+          }}
+        >
+          {pubKey ? t('Create a referral code') : t('Connect wallet')}
+        </RainbowButton>
      </div>
+
      <Dialog
-        title="Create a referral code"
+        title={t('Create a referral code')}
        open={dialogOpen}
        onChange={() => setDialogOpen(false)}
        size="small"
      >
-        <CreateCodeDialog
-          currentStakeAvailable={currentStakeAvailable}
-          setDialogOpen={setDialogOpen}
-          requiredStake={requiredStake}
-        />
+        <CreateCodeDialog setDialogOpen={setDialogOpen} />
      </Dialog>
    </div>
  );
@@ -90,21 +78,21 @@ export const CreateCodeForm = ({

 const CreateCodeDialog = ({
  setDialogOpen,
-  currentStakeAvailable,
-  requiredStake,
 }: {
  setDialogOpen: (open: boolean) => void;
-  currentStakeAvailable: bigint;
-  requiredStake: bigint;
 }) => {
  const createLink = useLinks(DApp.Governance);
  const { isReadOnly, pubKey, sendTx } = useVegaWallet();
+  const { refetch } = useReferral({ pubKey, role: 'referrer' });
  const [err, setErr] = useState<string | null>(null);
  const [code, setCode] = useState<string | null>(null);
  const [status, setStatus] = useState<
    'idle' | 'loading' | 'success' | 'error'
  >('idle');

+  const { stakeAvailable: currentStakeAvailable, requiredStake } =
+    useStakeAvailable();
+
  const onSubmit = () => {
    if (isReadOnly || !pubKey) {
      setErr('Not connected');
@@ -140,45 +128,60 @@ const CreateCodeDialog = ({
  const getButtonProps = () => {
    if (status === 'idle' || status === 'error') {
      return {
-        children: 'Generate code',
+        children: t('Generate code'),
        onClick: () => onSubmit(),
      };
    }

    if (status === 'loading') {
      return {
-        children: 'Confirm in wallet...',
+        children: t('Confirm in wallet...'),
        disabled: true,
      };
    }

    if (status === 'success') {
      return {
-        children: 'Close',
+        children: t('Close'),
        intent: Intent.Success,
-        onClick: () => setDialogOpen(false),
+        onClick: () => {
+          refetch();
+          setDialogOpen(false);
+        },
      };
    }
  };

-  // TODO: Add when network parameters are updated
-  if (
-    currentStakeAvailable === BigInt(0) ||
-    currentStakeAvailable < requiredStake
-  ) {
+  if (!pubKey || currentStakeAvailable == null || requiredStake == null) {
+    return (
+      <div className="flex flex-col gap-4">
+        <p>{t('You must be connected to the Vega wallet.')}</p>
+        <TradingButton
+          intent={Intent.Primary}
+          onClick={() => setDialogOpen(false)}
+        >
+          {t('Close')}
+        </TradingButton>
+      </div>
+    );
+  }
+
+  if (currentStakeAvailable < requiredStake) {
    return (
      <div className="flex flex-col gap-4">
        <p>
-          You need at least{' '}
-          {addDecimalsFormatNumber(requiredStake.toString(), 18)} VEGA staked to
-          generate a referral code and participate in the referral program.
+          {t('You need at least')}{' '}
+          {addDecimalsFormatNumber(requiredStake.toString(), 18)}{' '}
+          {t(
+            'VEGA staked to generate a referral code and participate in the referral program.'
+          )}
        </p>
        <TradingAnchorButton
          href={createLink(TokenStaticLinks.ASSOCIATE)}
          intent={Intent.Primary}
          target="_blank"
        >
-          Stake some $VEGA now
+          {t('Stake some $VEGA now')}
        </TradingAnchorButton>
      </div>
    );
@@ -188,8 +191,9 @@ const CreateCodeDialog = ({
    <div className="flex flex-col gap-4">
      {(status === 'idle' || status === 'loading' || status === 'error') && (
        <p>
-          Generate a referral code to share with your friends and start earning
-          commission.
+          {t(
+            'Generate a referral code to share with your friends and start earning commission.'
+          )}
        </p>
      )}
      {status === 'success' && code && (
@@ -204,7 +208,7 @@ const CreateCodeDialog = ({
              className="text-sm no-underline"
              icon={<VegaIcon name={VegaIconNames.COPY} />}
            >
-              <span>Copy</span>
+              <span>{t('Copy')}</span>
            </TradingButton>
          </CopyWithTooltip>
        </div>
@@ -215,10 +219,13 @@ const CreateCodeDialog = ({
        {...getButtonProps()}
      />
      {err && <InputError>{err}</InputError>}
-      {/* TODO: Add links */}
      <div className="flex justify-center pt-5 mt-2 text-sm border-t gap-4 text-default border-default">
-        <ExternalLink>About the referral program</ExternalLink>
-        <ExternalLink>Disclaimer</ExternalLink>
+        <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
+          {t('About the referral program')}
+        </ExternalLink>
+        <ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
+          {t('Disclaimer')}
+        </ExternalLink>
      </div>
    </div>
  );
@@ -3,6 +3,7 @@ import { RainbowButton } from './buttons';
 import { AnimatedDudeWithWire } from './graphics/dude';
 import { LayoutWithSky } from './layout';
 import { Routes } from '../../lib/links';
+import { t } from '@vegaprotocol/i18n';

 export const ErrorBoundary = () => {
  const error = useRouteError();
@@ -39,7 +40,7 @@ export const ErrorBoundary = () => {
          variant="border"
          className="text-xs"
        >
-          Go back and try again
+          {t('Go back and try again')}
        </RainbowButton>
      </p>
    </LayoutWithSky>
@@ -60,7 +61,7 @@ export const NotFound = () => {
      <h1 className="text-6xl font-alpha calt mb-10">{'Not found'}</h1>

      <p className="text-lg mb-10">
-        {"The page you're looking for doesn't exists."}
+        {t("The page you're looking for doesn't exists.")}
      </p>

      <p className="text-lg mb-10">
@@ -69,7 +70,7 @@ export const NotFound = () => {
          variant="border"
          className="text-xs"
        >
-          Go back and try again
+          {t('Go back and try again')}
        </RainbowButton>
      </p>
    </div>
@@ -0,0 +1,19 @@
+query ReferralProgram {
+  currentReferralProgram {
+    id
+    version
+    endOfProgramTimestamp
+    windowLength
+    endedAt
+    benefitTiers {
+      minimumEpochs
+      minimumRunningNotionalTakerVolume
+      referralDiscountFactor
+      referralRewardFactor
+    }
+    stakingTiers {
+      minimumStakedTokens
+      referralRewardMultiplier
+    }
+  }
+}
@@ -0,0 +1,9 @@
+query CurrentEpochInfo {
+  epoch {
+    id
+    timestamps {
+      start
+      end
+    }
+  }
+}
@@ -0,0 +1,14 @@
+query Referees($code: ID!, $aggregationDays: Int) {
+  referralSetReferees(id: $code, aggregationDays: $aggregationDays) {
+    edges {
+      node {
+        referralSetId
+        refereeId
+        joinedAt
+        atEpoch
+        totalRefereeNotionalTakerVolume
+        totalRefereeGeneratedRewards
+      }
+    }
+  }
+}
@@ -0,0 +1,16 @@
+query ReferralSetStats($code: ID!, $epoch: Int) {
+  referralSetStats(setId: $code, epoch: $epoch) {
+    edges {
+      node {
+        atEpoch
+        partyId
+        discountFactor
+        rewardFactor
+        epochNotionalTakerVolume
+        referralSetRunningNotionalTakerVolume
+        rewardsMultiplier
+        rewardsFactorMultiplier
+      }
+    }
+  }
+}
@@ -0,0 +1,12 @@
+query ReferralSets($id: ID, $referrer: ID, $referee: ID) {
+  referralSets(id: $id, referrer: $referrer, referee: $referee) {
+    edges {
+      node {
+        id
+        referrer
+        createdAt
+        updatedAt
+      }
+    }
+  }
+}
@@ -0,0 +1,59 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ReferralProgramQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ReferralProgramQuery = { __typename?: 'Query', currentReferralProgram?: { __typename?: 'CurrentReferralProgram', id: string, version: number, endOfProgramTimestamp: any, windowLength: number, endedAt?: any | null, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | null };
+
+
+export const ReferralProgramDocument = gql`
+    query ReferralProgram {
+  currentReferralProgram {
+    id
+    version
+    endOfProgramTimestamp
+    windowLength
+    endedAt
+    benefitTiers {
+      minimumEpochs
+      minimumRunningNotionalTakerVolume
+      referralDiscountFactor
+      referralRewardFactor
+    }
+    stakingTiers {
+      minimumStakedTokens
+      referralRewardMultiplier
+    }
+  }
+}
+    `;
+
+/**
+ * __useReferralProgramQuery__
+ *
+ * To run a query within a React component, call `useReferralProgramQuery` and pass it any options that fit your needs.
+ * When your component renders, `useReferralProgramQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useReferralProgramQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useReferralProgramQuery(baseOptions?: Apollo.QueryHookOptions<ReferralProgramQuery, ReferralProgramQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ReferralProgramQuery, ReferralProgramQueryVariables>(ReferralProgramDocument, options);
+      }
+export function useReferralProgramLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ReferralProgramQuery, ReferralProgramQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ReferralProgramQuery, ReferralProgramQueryVariables>(ReferralProgramDocument, options);
+        }
+export type ReferralProgramQueryHookResult = ReturnType<typeof useReferralProgramQuery>;
+export type ReferralProgramLazyQueryHookResult = ReturnType<typeof useReferralProgramLazyQuery>;
+export type ReferralProgramQueryResult = Apollo.QueryResult<ReferralProgramQuery, ReferralProgramQueryVariables>;
@@ -0,0 +1,49 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type CurrentEpochInfoQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CurrentEpochInfoQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null } } };
+
+
+export const CurrentEpochInfoDocument = gql`
+    query CurrentEpochInfo {
+  epoch {
+    id
+    timestamps {
+      start
+      end
+    }
+  }
+}
+    `;
+
+/**
+ * __useCurrentEpochInfoQuery__
+ *
+ * To run a query within a React component, call `useCurrentEpochInfoQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCurrentEpochInfoQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCurrentEpochInfoQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useCurrentEpochInfoQuery(baseOptions?: Apollo.QueryHookOptions<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>(CurrentEpochInfoDocument, options);
+      }
+export function useCurrentEpochInfoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>(CurrentEpochInfoDocument, options);
+        }
+export type CurrentEpochInfoQueryHookResult = ReturnType<typeof useCurrentEpochInfoQuery>;
+export type CurrentEpochInfoLazyQueryHookResult = ReturnType<typeof useCurrentEpochInfoLazyQuery>;
+export type CurrentEpochInfoQueryResult = Apollo.QueryResult<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>;
@@ -0,0 +1,59 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type RefereesQueryVariables = Types.Exact<{
+  code: Types.Scalars['ID'];
+  aggregationDays?: Types.InputMaybe<Types.Scalars['Int']>;
+}>;
+
+
+export type RefereesQuery = { __typename?: 'Query', referralSetReferees: { __typename?: 'ReferralSetRefereeConnection', edges: Array<{ __typename?: 'ReferralSetRefereeEdge', node: { __typename?: 'ReferralSetReferee', referralSetId: string, refereeId: string, joinedAt: any, atEpoch: number, totalRefereeNotionalTakerVolume: string, totalRefereeGeneratedRewards: string } } | null> } };
+
+
+export const RefereesDocument = gql`
+    query Referees($code: ID!, $aggregationDays: Int) {
+  referralSetReferees(id: $code, aggregationDays: $aggregationDays) {
+    edges {
+      node {
+        referralSetId
+        refereeId
+        joinedAt
+        atEpoch
+        totalRefereeNotionalTakerVolume
+        totalRefereeGeneratedRewards
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useRefereesQuery__
+ *
+ * To run a query within a React component, call `useRefereesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useRefereesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useRefereesQuery({
+ *   variables: {
+ *      code: // value for 'code'
+ *      aggregationDays: // value for 'aggregationDays'
+ *   },
+ * });
+ */
+export function useRefereesQuery(baseOptions: Apollo.QueryHookOptions<RefereesQuery, RefereesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<RefereesQuery, RefereesQueryVariables>(RefereesDocument, options);
+      }
+export function useRefereesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RefereesQuery, RefereesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<RefereesQuery, RefereesQueryVariables>(RefereesDocument, options);
+        }
+export type RefereesQueryHookResult = ReturnType<typeof useRefereesQuery>;
+export type RefereesLazyQueryHookResult = ReturnType<typeof useRefereesLazyQuery>;
+export type RefereesQueryResult = Apollo.QueryResult<RefereesQuery, RefereesQueryVariables>;
@@ -0,0 +1,61 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ReferralSetStatsQueryVariables = Types.Exact<{
+  code: Types.Scalars['ID'];
+  epoch?: Types.InputMaybe<Types.Scalars['Int']>;
+}>;
+
+
+export type ReferralSetStatsQuery = { __typename?: 'Query', referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, partyId: string, discountFactor: string, rewardFactor: string, epochNotionalTakerVolume: string, referralSetRunningNotionalTakerVolume: string, rewardsMultiplier: string, rewardsFactorMultiplier: string } } | null> } };
+
+
+export const ReferralSetStatsDocument = gql`
+    query ReferralSetStats($code: ID!, $epoch: Int) {
+  referralSetStats(setId: $code, epoch: $epoch) {
+    edges {
+      node {
+        atEpoch
+        partyId
+        discountFactor
+        rewardFactor
+        epochNotionalTakerVolume
+        referralSetRunningNotionalTakerVolume
+        rewardsMultiplier
+        rewardsFactorMultiplier
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useReferralSetStatsQuery__
+ *
+ * To run a query within a React component, call `useReferralSetStatsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useReferralSetStatsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useReferralSetStatsQuery({
+ *   variables: {
+ *      code: // value for 'code'
+ *      epoch: // value for 'epoch'
+ *   },
+ * });
+ */
+export function useReferralSetStatsQuery(baseOptions: Apollo.QueryHookOptions<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>(ReferralSetStatsDocument, options);
+      }
+export function useReferralSetStatsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>(ReferralSetStatsDocument, options);
+        }
+export type ReferralSetStatsQueryHookResult = ReturnType<typeof useReferralSetStatsQuery>;
+export type ReferralSetStatsLazyQueryHookResult = ReturnType<typeof useReferralSetStatsLazyQuery>;
+export type ReferralSetStatsQueryResult = Apollo.QueryResult<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>;
@@ -0,0 +1,59 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ReferralSetsQueryVariables = Types.Exact<{
+  id?: Types.InputMaybe<Types.Scalars['ID']>;
+  referrer?: Types.InputMaybe<Types.Scalars['ID']>;
+  referee?: Types.InputMaybe<Types.Scalars['ID']>;
+}>;
+
+
+export type ReferralSetsQuery = { __typename?: 'Query', referralSets: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', id: string, referrer: string, createdAt: any, updatedAt: any } } | null> } };
+
+
+export const ReferralSetsDocument = gql`
+    query ReferralSets($id: ID, $referrer: ID, $referee: ID) {
+  referralSets(id: $id, referrer: $referrer, referee: $referee) {
+    edges {
+      node {
+        id
+        referrer
+        createdAt
+        updatedAt
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useReferralSetsQuery__
+ *
+ * To run a query within a React component, call `useReferralSetsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useReferralSetsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useReferralSetsQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *      referrer: // value for 'referrer'
+ *      referee: // value for 'referee'
+ *   },
+ * });
+ */
+export function useReferralSetsQuery(baseOptions?: Apollo.QueryHookOptions<ReferralSetsQuery, ReferralSetsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ReferralSetsQuery, ReferralSetsQueryVariables>(ReferralSetsDocument, options);
+      }
+export function useReferralSetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ReferralSetsQuery, ReferralSetsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ReferralSetsQuery, ReferralSetsQueryVariables>(ReferralSetsDocument, options);
+        }
+export type ReferralSetsQueryHookResult = ReturnType<typeof useReferralSetsQuery>;
+export type ReferralSetsLazyQueryHookResult = ReturnType<typeof useReferralSetsLazyQuery>;
+export type ReferralSetsQueryResult = Apollo.QueryResult<ReferralSetsQuery, ReferralSetsQueryVariables>;
@@ -1,32 +1,8 @@
-import { gql, useQuery } from '@apollo/client';
 import { getNumberFormat } from '@vegaprotocol/utils';
 import { addDays } from 'date-fns';
 import sortBy from 'lodash/sortBy';
 import omit from 'lodash/omit';
-
-// TODO: Generate query
-// eslint-disable-next-line
-const REFERRAL_PROGRAM_QUERY = gql`
-  query ReferralProgram {
-    currentReferralProgram {
-      id
-      version
-      endOfProgramTimestamp
-      windowLength
-      endedAt
-      benefitTiers {
-        minimumEpochs
-        minimumRunningNotionalTakerVolume
-        referralDiscountFactor
-        referralRewardFactor
-      }
-      stakingTiers {
-        minimumStakedTokens
-        referralRewardMultiplier
-      }
-    }
-  }
-`;
+import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';

 const STAKING_TIERS_MAPPING: Record<number, string> = {
  1: 'Tradestarter',
@@ -83,11 +59,11 @@ const MOCK = {
 };

 export const useReferralProgram = () => {
-  const { data, loading, error } = useQuery(REFERRAL_PROGRAM_QUERY, {
+  const { data, loading, error } = useReferralProgramQuery({
    fetchPolicy: 'cache-and-network',
  });

-  if (!data) {
+  if (!data || !data.currentReferralProgram) {
    return {
      benefitTiers: [],
      stakingTiers: [],
@@ -104,11 +80,15 @@ export const useReferralProgram = () => {
    .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),
      };
    });

@@ -123,10 +103,16 @@ export const useReferralProgram = () => {
    };
  });

+  const details = omit(
+    data.currentReferralProgram,
+    'benefitTiers',
+    'stakingTiers'
+  );
+
  return {
    benefitTiers,
    stakingTiers,
-    details: omit(data.currentReferralProgram, 'benefitTiers', 'stakingTiers'),
+    details,
    loading,
    error,
  };
@@ -1,114 +1,116 @@
-import { gql, useQuery } from '@apollo/client';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
+import { useCallback } from 'react';
+import { useRefereesQuery } from './__generated__/Referees';
+import compact from 'lodash/compact';
+import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
+import { useReferralSetsQuery } from './__generated__/ReferralSets';

-const REFERRER_QUERY = gql`
-  query ReferralSets($partyId: ID!) {
-    referralSets(referrer: $partyId) {
-      edges {
-        node {
-          id
-          referrer
-          createdAt
-          updatedAt
-        }
-      }
-    }
-  }
-`;
+const DEFAULT_AGGREGATION_DAYS = 30;

-const REFEREE_QUERY = gql`
-  query ReferralSets($partyId: ID!) {
-    referralSets(referee: $partyId) {
-      edges {
-        node {
-          id
-          referrer
-          createdAt
-          updatedAt
-        }
-      }
-    }
-  }
-`;
-
-const REFEREES_QUERY = gql`
-  query ReferralSets($code: ID!) {
-    referralSetReferees(id: $code) {
-      edges {
-        node {
-          referralSetId
-          refereeId
-          joinedAt
-          atEpoch
-        }
-      }
-    }
-  }
-`;
-
-// TODO: generate types after perps work is merged
-export type ReferralData = {
-  code: string;
-  referees: Array<{
-    refereeId: string;
-    joinedAt: string;
-    atEpoch: number;
-  }>;
+export type Role = 'referrer' | 'referee';
+type UseReferralArgs = (
+  | { code: string }
+  | { pubKey: string | null; role: Role }
+) & {
+  aggregationDays?: number;
 };

-export const useReferral = (
-  pubKey: string | null,
-  role: 'referrer' | 'referee'
-) => {
-  const query = {
-    referrer: REFERRER_QUERY,
-    referee: REFEREE_QUERY,
-  };
+const prepareVariables = (
+  args: UseReferralArgs
+): [ReferralSetsQueryVariables, boolean] => {
+  const byCode = 'code' in args;
+  const byRole = 'pubKey' in args && 'role' in args;
+  let variables = {};
+  let skip = true;
+  if (byCode) {
+    variables = {
+      id: args.code,
+    };
+    skip = !args.code;
+  }
+  if (byRole) {
+    if (args.role === 'referee') {
+      variables = { referee: args.pubKey };
+    }
+    if (args.role === 'referrer') {
+      variables = { referrer: args.pubKey };
+    }
+    skip = !args.pubKey;
+  }
+
+  return [variables, skip];
+};
+
+export const useReferral = (args: UseReferralArgs) => {
+  const [variables, skip] = prepareVariables(args);

  const {
    data: referralData,
    loading: referralLoading,
    error: referralError,
-  } = useQuery(query[role], {
-    variables: {
-      partyId: pubKey,
-    },
-    skip: !pubKey,
+    refetch: referralRefetch,
+  } = useReferralSetsQuery({
+    variables,
+    skip,
    fetchPolicy: 'cache-and-network',
  });

  // A user can only have 1 active referral program at a time
-  const referral = referralData?.referralSets.edges.length
-    ? referralData.referralSets.edges[0].node
-    : undefined;
+  const referralSet =
+    referralData?.referralSets.edges &&
+    referralData.referralSets.edges.length > 0
+      ? referralData.referralSets.edges[0]?.node
+      : undefined;

  const {
    data: refereesData,
    loading: refereesLoading,
    error: refereesError,
-  } = useQuery(REFEREES_QUERY, {
+    refetch: refereesRefetch,
+  } = useRefereesQuery({
    variables: {
-      code: referral?.id,
+      code: referralSet?.id as string,
+      aggregationDays:
+        args.aggregationDays != null
+          ? args.aggregationDays
+          : DEFAULT_AGGREGATION_DAYS,
    },
-    skip: !referral?.id,
+    skip: !referralSet?.id,
    fetchPolicy: 'cache-and-network',
+    context: { isEnlargedTimeout: true },
  });

-  const referees = removePaginationWrapper(
-    refereesData?.referralSetReferees.edges
+  const referees = compact(
+    removePaginationWrapper(refereesData?.referralSetReferees.edges)
  );

+  const refetch = useCallback(() => {
+    referralRefetch();
+    refereesRefetch();
+  }, [refereesRefetch, referralRefetch]);
+
+  const byReferee =
+    'role' in args && 'pubKey' in args && args.role === 'referee';
+  const referee = byReferee
+    ? referees.find((r) => r.refereeId === args.pubKey) || null
+    : null;
+
  const data =
-    referral && refereesData
+    referralSet && refereesData
      ? {
-          code: referral.id,
+          code: referralSet.id,
+          role: 'role' in args ? args.role : null,
+          referee: referee,
+          referrerId: referralSet.referrer,
+          createdAt: referralSet.createdAt,
          referees,
        }
      : undefined;

  return {
-    data: data as ReferralData | undefined,
+    data,
    loading: referralLoading || refereesLoading,
    error: referralError || refereesError,
+    refetch,
  };
 };
@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/i18n';
 import { Table } from './table';

 export const HowItWorksTable = () => (
@@ -13,7 +14,9 @@ export const HowItWorksTable = () => (
            1
          </span>
        ),
-        step: 'Referrers generate a code assigned to their key via an on chain transaction',
+        step: t(
+          'Referrers generate a code assigned to their key via an on chain transaction'
+        ),
      },
      {
        number: (
@@ -21,7 +24,9 @@ export const HowItWorksTable = () => (
            2
          </span>
        ),
-        step: 'Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction',
+        step: t(
+          'Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction'
+        ),
      },
      {
        number: (
@@ -29,7 +34,9 @@ export const HowItWorksTable = () => (
            3
          </span>
        ),
-        step: 'Discounts are applied automatically during trading based on the key(s) used',
+        step: t(
+          'Discounts are applied automatically during trading based on the key(s) used'
+        ),
      },
      {
        number: (
@@ -37,7 +44,9 @@ export const HowItWorksTable = () => (
            4
          </span>
        ),
-        step: 'Referrers earn commission based on a percentage of the taker fees their referees pay',
+        step: t(
+          'Referrers earn commission based on a percentage of the taker fees their referees pay'
+        ),
      },
      {
        number: (
@@ -45,7 +54,9 @@ export const HowItWorksTable = () => (
            5
          </span>
        ),
-        step: 'The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee',
+        step: t(
+          'The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee'
+        ),
      },
    ]}
  ></Table>
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { AnimatedDudeWithWire } from './graphics/dude';
+import { t } from '@vegaprotocol/i18n';

 export const LandingBanner = () => {
  return (
@@ -13,16 +14,17 @@ export const LandingBanner = () => {
        </div>
        <div className="pt-32 sm:w-[50%]">
          <h1 className="text-6xl font-alpha calt mb-10">
-            Earn commission & stake rewards
+            {t('Earn commission & stake rewards')}
          </h1>
          <p className="text-lg mb-10">
-            Invite friends and earn commission in the form of Vega rewards from
-            the trading fees they pay. Stake those rewards to earn multipliers
-            on future rewards.
+            {t(
+              'Invite friends and earn commission in the form of Vega rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
+            )}
          </p>
          <p className="text-lg">
-            Any friends that join using the code will receive discounts off
-            trading fees.
+            {t(
+              'Any friends that join using the code will receive discounts off trading fees.'
+            )}
          </p>
        </div>
      </div>
@@ -1,66 +1,45 @@
-import { Tile } from './tile';
+import { CodeTile, StatTile } from './tile';
 import {
-  CopyWithTooltip,
-  Input,
  VegaIcon,
  VegaIconNames,
+  truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
-import { Button, RainbowButton } from './buttons';

-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import type { ReferralData } from './hooks/use-referral';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
 import { CreateCodeContainer } from './create-code-form';
 import classNames from 'classnames';
-
-const CodeTile = ({
-  code,
-  as,
-}: {
-  code: string;
-  as: 'referrer' | 'referee';
-}) => {
-  return (
-    <Tile variant="rainbow">
-      <h3 className="mb-1 text-lg calt">Your referral code</h3>
-      {as === 'referrer' && (
-        <p className="mb-3 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
-          Share this code with friends
-        </p>
-      )}
-      <div className="flex gap-2">
-        <Input size={1} readOnly value={code} />
-        <CopyWithTooltip text={code}>
-          <Button
-            className="text-sm no-underline"
-            icon={<VegaIcon name={VegaIconNames.COPY} />}
-          >
-            <span>Copy</span>
-          </Button>
-        </CopyWithTooltip>
-      </div>
-    </Tile>
-  );
-};
+import { Table } from './table';
+import {
+  addDecimalsFormatNumber,
+  getDateFormat,
+  getDateTimeFormat,
+  getNumberFormat,
+  getUserLocale,
+  removePaginationWrapper,
+} from '@vegaprotocol/utils';
+import { useReferralSetStatsQuery } from './hooks/__generated__/ReferralSetStats';
+import compact from 'lodash/compact';
+import { useReferralProgram } from './hooks/use-referral-program';
+import { useStakeAvailable } from './hooks/use-stake-available';
+import sortBy from 'lodash/sortBy';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
+import BigNumber from 'bignumber.js';
+import { t } from '@vegaprotocol/i18n';

 export const ReferralStatistics = () => {
-  const openWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
  const { pubKey } = useVegaWallet();

-  const { data: referee } = useReferral(pubKey, 'referee');
-  const { data: referrer } = useReferral(pubKey, 'referrer');
+  const { data: referee } = useReferral({
+    pubKey,
+    role: 'referee',
+  });
+  const { data: referrer } = useReferral({
+    pubKey,
+    role: 'referrer',
+  });

-  if (!pubKey) {
-    return (
-      <div className="text-center">
-        <RainbowButton variant="border" onClick={() => openWalletDialog()}>
-          Connect wallet
-        </RainbowButton>
-      </div>
-    );
-  }
  if (referee?.code) {
    return <Statistics data={referee} as="referee" />;
  }
@@ -72,42 +51,265 @@ export const ReferralStatistics = () => {
  return <CreateCodeContainer />;
 };

-const Statistics = ({
+export const Statistics = ({
  data,
  as,
 }: {
-  data: ReferralData;
+  data: NonNullable<ReturnType<typeof useReferral>['data']>;
  as: 'referrer' | 'referee';
 }) => {
-  return (
-    <div
-      className={classNames('grid grid-cols-1 grid-rows-1 gap-5 mx-auto', {
-        'md:w-1/2': as === 'referee',
-        'md:w-2/3': as === 'referrer',
-      })}
+  const { data: epochData } = useCurrentEpochInfoQuery();
+  const { stakeAvailable } = useStakeAvailable();
+  const { benefitTiers } = useReferralProgram();
+  const { data: statsData } = useReferralSetStatsQuery({
+    variables: {
+      code: data.code,
+    },
+    skip: !data?.code,
+    fetchPolicy: 'cache-and-network',
+  });
+
+  const currentEpoch = Number(epochData?.epoch.id);
+
+  const stats =
+    statsData?.referralSetStats.edges &&
+    compact(removePaginationWrapper(statsData.referralSetStats.edges));
+  const refereeInfo = data.referee;
+  const refereeStats = stats?.find(
+    (r) => r.partyId === data.referee?.refereeId
+  );
+
+  const statsAvailable = stats && stats.length > 0 && stats[0];
+  const baseCommissionValue = statsAvailable
+    ? Number(statsAvailable.rewardFactor)
+    : 0;
+  const runningVolumeValue = statsAvailable
+    ? Number(statsAvailable.referralSetRunningNotionalTakerVolume)
+    : 0;
+  const multiplier = statsAvailable
+    ? Number(statsAvailable.rewardsMultiplier)
+    : 1;
+  const finalCommissionValue = !isNaN(multiplier)
+    ? baseCommissionValue
+    : multiplier * baseCommissionValue;
+
+  const discountFactorValue = refereeStats?.discountFactor
+    ? Number(refereeStats.discountFactor)
+    : 0;
+  const currentBenefitTierValue = benefitTiers.find(
+    (t) =>
+      !isNaN(discountFactorValue) &&
+      !isNaN(t.discountFactor) &&
+      t.discountFactor === discountFactorValue
+  );
+  const nextBenefitTierValue =
+    currentBenefitTierValue &&
+    benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1);
+  const epochsValue =
+    !isNaN(currentEpoch) && refereeInfo?.atEpoch
+      ? currentEpoch - refereeInfo?.atEpoch
+      : 0;
+  const nextBenefitTierVolumeValue = nextBenefitTierValue
+    ? nextBenefitTierValue.minimumVolume - runningVolumeValue
+    : 0;
+  const nextBenefitTierEpochsValue = nextBenefitTierValue
+    ? nextBenefitTierValue.epochs - epochsValue
+    : 0;
+
+  const baseCommissionTile = (
+    <StatTile title={t('Base commission rate')}>
+      {baseCommissionValue * 100}%
+    </StatTile>
+  );
+  const stakingMultiplierTile = (
+    <StatTile
+      title={t('Staking multiplier')}
+      description={`(${addDecimalsFormatNumber(
+        stakeAvailable?.toString() || 0,
+        18
+      )} $VEGA staked)`}
    >
-      <div
-        className={classNames('grid grid-rows-1 gap-5', {
-          'grid-cols-2': as === 'referrer',
-          'grid-cols-1': as === 'referee',
-        })}
-      >
-        {as === 'referrer' && data?.referees && (
-          <Tile className="py-3 h-full">
-            <div className="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]">
-              <h3 className="mb-1 text-6xl text-center">
-                {data.referees.length}
-              </h3>
-              <p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
-                {data.referees.length === 1
-                  ? 'Trader referred'
-                  : 'Total traders referred'}
-              </p>
-            </div>
-          </Tile>
-        )}
-        <CodeTile code={data?.code} as={as} />
+      {multiplier || t('None')}
+    </StatTile>
+  );
+  const finalCommissionTile = (
+    <StatTile title={t('Final commission rate')}>
+      {finalCommissionValue * 100}%
+    </StatTile>
+  );
+  const numberOfTradersValue = data.referees.length;
+  const numberOfTradersTile = (
+    <StatTile title={t('Number of traders')}>{numberOfTradersValue}</StatTile>
+  );
+
+  const codeTile = <CodeTile code={data?.code} />;
+  const createdAtTile = (
+    <StatTile title={t('Created at')}>
+      <span className="text-3xl">
+        {getDateFormat().format(new Date(data.createdAt))}
+      </span>
+    </StatTile>
+  );
+
+  const totalCommissionValue = data.referees
+    .map((r) => new BigNumber(r.totalRefereeGeneratedRewards))
+    .reduce((all, r) => all.plus(r), new BigNumber(0));
+  const totalCommissionTile = (
+    <StatTile
+      title={t('Total commission (last 30 days)')}
+      description={t('(qUSD)')}
+    >
+      {getNumberFormat(0).format(Number(totalCommissionValue))}
+    </StatTile>
+  );
+
+  const referrerTiles = (
+    <>
+      <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
+        {baseCommissionTile}
+        {stakingMultiplierTile}
+        {finalCommissionTile}
      </div>
-    </div>
+
+      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+        {codeTile}
+        {createdAtTile}
+        {numberOfTradersTile}
+        {totalCommissionTile}
+      </div>
+    </>
+  );
+
+  const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    notation: 'compact',
+    compactDisplay: 'short',
+  });
+
+  const currentBenefitTierTile = (
+    <StatTile title={t('Current tier')}>
+      {currentBenefitTierValue?.tier || '-'}
+    </StatTile>
+  );
+  const discountFactorTile = (
+    <StatTile title={t('Discount')}>{discountFactorValue * 100}%</StatTile>
+  );
+  const runningVolumeTile = (
+    <StatTile title={t('Combined volume')}>
+      {compactNumFormat.format(runningVolumeValue)}
+    </StatTile>
+  );
+  const epochsTile = (
+    <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
+  );
+  const nextTierVolumeTile = (
+    <StatTile title={t('Volume to next tier')}>
+      {nextBenefitTierVolumeValue <= 0
+        ? '0'
+        : compactNumFormat.format(nextBenefitTierVolumeValue)}
+    </StatTile>
+  );
+  const nextTierEpochsTile = (
+    <StatTile title={t('Epochs to next tier')}>
+      {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
+    </StatTile>
+  );
+
+  const refereeTiles = (
+    <>
+      <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
+        {currentBenefitTierTile}
+        {discountFactorTile}
+        {codeTile}
+      </div>
+      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+        {runningVolumeTile}
+        {nextTierVolumeTile}
+        {epochsTile}
+        {nextTierEpochsTile}
+      </div>
+    </>
+  );
+
+  const [collapsed, setCollapsed] = useState(false);
+  const tableRef = useRef<HTMLTableElement>(null);
+  useLayoutEffect(() => {
+    if ((tableRef.current?.getBoundingClientRect().height || 0) > 384) {
+      setCollapsed(true);
+    }
+  }, []);
+
+  return (
+    <>
+      {/* Stats tiles */}
+      <div
+        className={classNames(
+          'grid grid-cols-1 grid-rows-1 gap-5 mx-auto mb-20'
+        )}
+      >
+        {as === 'referrer' && referrerTiles}
+        {as === 'referee' && refereeTiles}
+      </div>
+
+      {/* Referees (only for referrer view) */}
+      {as === 'referrer' && data.referees.length > 0 && (
+        <div className="mt-20 mb-20">
+          <h2 className="text-2xl mb-5">{t('Referees')}</h2>
+          <div
+            className={classNames(
+              collapsed && [
+                'relative max-h-96 overflow-hidden',
+                'after:w-full after:h-20 after:absolute after:bottom-0 after:left-0',
+                'after:bg-gradient-to-t after:from-white after:dark:from-vega-cdark-900 after:to-transparent',
+              ]
+            )}
+          >
+            <button
+              className={classNames(
+                'absolute left-1/2 bottom-0 z-10 p-2 translate-x-[-50%]',
+                {
+                  hidden: !collapsed,
+                }
+              )}
+              onClick={() => setCollapsed(false)}
+            >
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={24} />
+            </button>
+            <Table
+              ref={tableRef}
+              columns={[
+                { name: 'party', displayName: t('Trader') },
+                { name: 'joined', displayName: t('Date Joined') },
+                { name: 'volume', displayName: t('Volume (last 30 days)') },
+                {
+                  name: 'commission',
+                  displayName: t('Commission earned (last 30 days)'),
+                },
+              ]}
+              data={sortBy(
+                data.referees.map((r) => ({
+                  party: (
+                    <span title={r.refereeId}>
+                      {truncateMiddle(r.refereeId)}
+                    </span>
+                  ),
+                  joined: getDateTimeFormat().format(new Date(r.joinedAt)),
+                  volume: Number(r.totalRefereeNotionalTakerVolume),
+                  commission: Number(r.totalRefereeGeneratedRewards),
+                })),
+                (r) => r.volume
+              )
+                .map((r) => ({
+                  ...r,
+                  volume: getNumberFormat(0).format(r.volume),
+                  commission: getNumberFormat(0).format(r.commission),
+                }))
+                .reverse()}
+            />
+          </div>
+        </div>
+      )}
+    </>
  );
 };
@@ -1,4 +1,5 @@
 import {
+  Loader,
  TradingAnchorButton,
  VegaIcon,
  VegaIconNames,
@@ -6,51 +7,99 @@ import {
 import { HowItWorksTable } from './how-it-works-table';
 import { LandingBanner } from './landing-banner';
 import { TiersContainer } from './tiers';
-import { RainbowTabLink } from './buttons';
+import { TabLink } from './buttons';
 import { Outlet } from 'react-router-dom';
 import { Routes } from '../../lib/links';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
+import { REFERRAL_DOCS_LINK } from './constants';
+import classNames from 'classnames';
+import { usePageTitleStore } from '../../stores';
+import { useEffect } from 'react';
+import { titlefy } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+
+const Nav = () => (
+  <div className="flex justify-center border-b border-vega-cdark-500">
+    <TabLink end to={Routes.REFERRALS}>
+      {t('I want a code')}
+    </TabLink>
+    <TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
+  </div>
+);

 export const Referrals = () => {
  const { pubKey } = useVegaWallet();
-  const { data: referee } = useReferral(pubKey, 'referee');
-  const { data: referrer } = useReferral(pubKey, 'referrer');
+
+  const {
+    data: referee,
+    loading: refereeLoading,
+    error: refereeError,
+  } = useReferral({
+    pubKey,
+    role: 'referee',
+  });
+  const {
+    data: referrer,
+    loading: referrerLoading,
+    error: referrerError,
+  } = useReferral({
+    pubKey,
+    role: 'referrer',
+  });
+
+  const error = refereeError || referrerError;
+  const loading = refereeLoading || referrerLoading;
+  const showNav = !loading && !error && !referrer && !referee;
+
+  const { updateTitle } = usePageTitleStore((store) => ({
+    updateTitle: store.updateTitle,
+  }));
+
+  useEffect(() => {
+    updateTitle(titlefy([t('Referrals')]));
+  }, [updateTitle]);

  return (
    <>
      <LandingBanner />
-      <div>
-        <div className="flex justify-center">
-          <RainbowTabLink end to={Routes.REFERRALS}>
-            Your referrals
-          </RainbowTabLink>
-          <RainbowTabLink
-            disabled={Boolean(referee || referrer)}
-            to={Routes.REFERRALS_APPLY_CODE}
-          >
-            Apply a code
-          </RainbowTabLink>
-        </div>
-        <div className="py-16 border-t border-b border-vega-cdark-500">
+
+      {showNav && <Nav />}
+      <div
+        className={classNames({
+          'py-16': showNav,
+          'h-[300px] relative': loading || error,
+        })}
+      >
+        {loading ? (
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+            <Loader />
+          </div>
+        ) : error ? (
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
+            <p>{t('Something went wrong')}</p>
+            <span className="text-xs">{error.message}</span>
+          </div>
+        ) : (
          <Outlet />
-        </div>
+        )}
      </div>

      <TiersContainer />

      <div className="mt-10 mb-5 text-center">
-        <h2 className="text-2xl">How it works</h2>
+        <h2 className="text-2xl">{t('How it works')}</h2>
      </div>
      <div className="md:w-[60%] mx-auto">
        <HowItWorksTable />
        <div className="mt-5">
          <TradingAnchorButton
            className="mx-auto w-max"
-            href="https://docs.vega.xyz/"
+            href={REFERRAL_DOCS_LINK}
            target="_blank"
          >
-            Read the terms <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+            {t('Read the terms')}{' '}
+            <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
          </TradingAnchorButton>
        </div>
      </div>
@@ -1,6 +1,6 @@
 import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 import { BORDER_COLOR, GRADIENT } from './constants';

 type TableColumnDefinition = {
@@ -19,98 +19,108 @@ type TableProps = {

 const INNER_BORDER_STYLE = `border-b ${BORDER_COLOR}`;

-export const Table = ({
-  columns,
-  data,
-  noHeader = false,
-  noCollapse = false,
-  className,
-  ...props
-}: TableProps & HTMLAttributes<HTMLTableElement>) => {
-  const header = (
-    <thead className={classNames({ 'max-md:hidden': !noCollapse })}>
-      <tr>
-        {columns.map(({ displayName, name, tooltip }) => (
-          <th
-            key={name}
-            col-id={name}
-            className={classNames(
-              'px-5 py-3 text-sm  text-vega-clight-100 dark:text-vega-cdark-100',
-              INNER_BORDER_STYLE
-            )}
-          >
-            <span className="flex flex-row gap-2 items-center">
-              <span>{displayName}</span>
-              {tooltip ? (
-                <Tooltip description={tooltip}>
-                  <button className="text-vega-clight-400 dark:text-vega-cdark-400 no-underline decoration-transparent w-[12px] h-[12px] inline-flex">
-                    <VegaIcon size={12} name={VegaIconNames.INFO} />
-                  </button>
-                </Tooltip>
-              ) : null}
-            </span>
-          </th>
-        ))}
-      </tr>
-    </thead>
-  );
-  return (
-    <table
-      className={classNames(
-        'w-full',
-        'border-separate border rounded-md border-spacing-0',
-        BORDER_COLOR,
-        GRADIENT,
-        className
-      )}
-      {...props}
-    >
-      {!noHeader && header}
-      <tbody>
-        {data.map((d, i) => (
-          <tr
-            key={i}
-            className={classNames(d['className'] as string, {
-              'max-md:flex flex-col w-full': !noCollapse,
-            })}
-          >
-            {columns.map(({ name, displayName, className }, j) => (
-              <td
-                className={classNames(
-                  'px-5 py-3 text-base',
-                  {
-                    'max-md:flex max-md:flex-col max-md:justify-between':
-                      !noCollapse,
-                  },
-                  INNER_BORDER_STYLE,
-                  {
-                    'border-none': i === data.length - 1 && noCollapse,
-                    'md:border-none': i === data.length - 1,
-                    'max-md:border-none':
-                      i === data.length - 1 && j === columns.length - 1,
-                  },
-                  className
-                )}
-                key={`${i}-${name}`}
-              >
-                {/** display column name in mobile view */}
-                {!noCollapse &&
-                  !noHeader &&
-                  displayName &&
-                  displayName.length > 0 && (
-                    <span
-                      aria-hidden
-                      className="md:hidden  font-mono text-xs px-0 text-vega-clight-100 dark:text-vega-cdark-100"
-                    >
-                      {displayName}
-                    </span>
+export const Table = forwardRef<
+  HTMLTableElement,
+  TableProps & HTMLAttributes<HTMLTableElement>
+>(
+  (
+    {
+      columns,
+      data,
+      noHeader = false,
+      noCollapse = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const header = (
+      <thead className={classNames({ 'max-md:hidden': !noCollapse })}>
+        <tr>
+          {columns.map(({ displayName, name, tooltip }) => (
+            <th
+              key={name}
+              col-id={name}
+              className={classNames(
+                'px-5 py-3 text-sm  text-vega-clight-100 dark:text-vega-cdark-100 font-normal',
+                INNER_BORDER_STYLE
+              )}
+            >
+              <span className="flex flex-row gap-2 items-center">
+                <span>{displayName}</span>
+                {tooltip ? (
+                  <Tooltip description={tooltip}>
+                    <button className="text-vega-clight-400 dark:text-vega-cdark-400 no-underline decoration-transparent w-[12px] h-[12px] inline-flex">
+                      <VegaIcon size={12} name={VegaIconNames.INFO} />
+                    </button>
+                  </Tooltip>
+                ) : null}
+              </span>
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+    return (
+      <table
+        ref={ref}
+        className={classNames(
+          'w-full',
+          'border-separate border rounded-md border-spacing-0',
+          BORDER_COLOR,
+          GRADIENT,
+          className
+        )}
+        {...props}
+      >
+        {!noHeader && header}
+        <tbody>
+          {data.map((d, i) => (
+            <tr
+              key={i}
+              className={classNames(d['className'] as string, {
+                'max-md:flex flex-col w-full': !noCollapse,
+              })}
+            >
+              {columns.map(({ name, displayName, className }, j) => (
+                <td
+                  className={classNames(
+                    'px-5 py-3 text-base',
+                    {
+                      'max-md:flex max-md:flex-col max-md:justify-between':
+                        !noCollapse,
+                    },
+                    INNER_BORDER_STYLE,
+                    {
+                      'border-none': i === data.length - 1 && noCollapse,
+                      'md:border-none': i === data.length - 1,
+                      'max-md:border-none':
+                        i === data.length - 1 && j === columns.length - 1,
+                    },
+                    className
                  )}
-                <span>{d[name]}</span>
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
+                  key={`${i}-${name}`}
+                >
+                  {/** display column name in mobile view */}
+                  {!noCollapse &&
+                    !noHeader &&
+                    displayName &&
+                    displayName.length > 0 && (
+                      <span
+                        aria-hidden
+                        className="md:hidden  font-mono text-xs px-0 text-vega-clight-100 dark:text-vega-cdark-100"
+                      >
+                        {displayName}
+                      </span>
+                    )}
+                  <span>{d[name]}</span>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+);
+Table.displayName = 'Table';
@@ -12,7 +12,7 @@ export const Tag = ({
 }: TagProps & HTMLAttributes<HTMLDivElement>) => (
  <div
    className={classNames(
-      'mt-3 w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
+      'w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
      {
        'border-vega-yellow-500  text-vega-yellow-500': color === 'yellow',
        'border-vega-green-500  text-vega-green-500': color === 'green',
@@ -4,7 +4,10 @@ import { Table } from './table';
 import classNames from 'classnames';
 import { BORDER_COLOR, GRADIENT } from './constants';
 import { Tag } from './tag';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { DApp, TOKEN_PROPOSALS, useLinks } from '@vegaprotocol/environment';
+import { t } from '@vegaprotocol/i18n';

 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
  <div
@@ -38,51 +41,66 @@ const StakingTier = ({
      className={classNames(
        'overflow-hidden',
        'border rounded-md w-full',
+        'flex flex-row',
+        GRADIENT,
        BORDER_COLOR
      )}
    >
-      <div aria-hidden>
+      <div aria-hidden className="max-w-[120px]">
        {tier < 4 && (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={`/${tier}x.png`}
            alt={`${referralRewardMultiplier}x multiplier`}
-            width={768}
-            height={400}
-            className="w-full"
+            width={240}
+            height={240}
+            className="w-full h-full"
          />
        )}
      </div>
-      <div className={classNames('p-3', GRADIENT)}>
-        <h3 className="mb-3 text-xl">{label}</h3>
-        <p className="text-base text-vega-clight-100 dark:text-vega-cdark-100">
-          Stake a minimum of {minimumStakedTokens} $VEGA tokens
+      <div className={classNames('p-3')}>
+        <Tag color={color[tier]}>Multiplier {referralRewardMultiplier}x</Tag>
+        <h3 className="mt-1 mb-1 text-base">{label}</h3>
+        <p className="text-sm text-vega-clight-100 dark:text-vega-cdark-100">
+          {t('Stake a minimum of')} {minimumStakedTokens} {t('$VEGA tokens')}
        </p>
-        <Tag color={color[tier]}>
-          Reward multiplier {referralRewardMultiplier}x
-        </Tag>
      </div>
    </div>
  );
 };

 export const TiersContainer = () => {
-  const { benefitTiers, stakingTiers, details, loading } = useReferralProgram();
+  const { benefitTiers, stakingTiers, details, loading, error } =
+    useReferralProgram();

  const ends = details?.endOfProgramTimestamp
    ? getDateTimeFormat().format(new Date(details.endOfProgramTimestamp))
    : undefined;

+  const governanceLink = useLinks(DApp.Governance);
+
+  if ((!loading && !details) || error) {
+    return (
+      <div className="text-base px-5 py-10 text-center">
+        {t(
+          "We're sorry but we don't have an active referral programme currently running. You can propose a new programme"
+        )}{' '}
+        <ExternalLink href={governanceLink(TOKEN_PROPOSALS)}>
+          {t('here')}
+        </ExternalLink>
+        .
+      </div>
+    );
+  }
+
  return (
    <>
-      <div className="flex flex-row items-baseline justify-between mt-10 mb-5">
-        <h2 className="text-2xl">Referral tiers</h2>
+      {/* Benefit tiers */}
+      <div className="flex flex-col items-baseline justify-between mt-10 mb-5">
+        <h2 className="text-2xl">{t('Referral tiers')}</h2>
        {ends && (
-          <span className="text-base">
-            <span className="text-vega-clight-200 dark:text-vega-cdark-200">
-              Program ends:
-            </span>{' '}
-            {ends}
+          <span className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
+            {t('Program ends:')} {ends}
          </span>
        )}
      </div>
@@ -90,14 +108,24 @@ export const TiersContainer = () => {
        {loading || !benefitTiers || benefitTiers.length === 0 ? (
          <Loading variant="large" />
        ) : (
-          <TiersTable data={benefitTiers} />
+          <TiersTable
+            data={benefitTiers.map((bt) => ({
+              ...bt,
+              tierElement: (
+                <div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
+                  {bt.tier}
+                </div>
+              ),
+            }))}
+          />
        )}
      </div>

+      {/* Staking tiers */}
      <div className="flex flex-row items-baseline justify-between mb-5">
-        <h2 className="text-2xl">Staking multipliers</h2>
+        <h2 className="text-2xl">{t('Staking multipliers')}</h2>
      </div>
-      <div className="flex flex-col mb-20 justify-items-stretch md:flex-row gap-5">
+      <div className="mb-20 flex flex-col justify-items-stretch lg:flex-row gap-5">
        {loading || !stakingTiers || stakingTiers.length === 0 ? (
          <>
            <Loading variant="large" />
@@ -137,6 +165,7 @@ const TiersTable = ({
 }: {
  data: Array<{
    tier: number;
+    tierElement: ReactNode;
    commission: string;
    discount: string;
    volume: string;
@@ -145,14 +174,15 @@ const TiersTable = ({
  return (
    <Table
      columns={[
-        { name: 'tier', displayName: 'Tier' },
+        { name: 'tierElement', displayName: t('Tier') },
        {
          name: 'commission',
-          displayName: 'Referrer commission',
-          tooltip: 'A percentage of commission earned by the referrer',
+          displayName: t('Referrer commission'),
+          tooltip: t('A percentage of commission earned by the referrer'),
        },
-        { name: 'discount', displayName: 'Referrer trading discount' },
-        { name: 'volume', displayName: 'Min. trading volume' },
+        { name: 'discount', displayName: t('Referrer trading discount') },
+        { name: 'volume', displayName: t('Min. trading volume') },
+        { name: 'epochs', displayName: t('Min. epochs') },
      ]}
      data={data.map((d) => ({
        ...d,
@@ -1,39 +1,92 @@
+import {
+  CopyWithTooltip,
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import type { HTMLAttributes } from 'react';
-import { BORDER_COLOR, GRADIENT } from './constants';
-
-type TileProps = {
-  variant?: 'rainbow' | 'default';
-};
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Button } from './buttons';

 export const Tile = ({
-  variant = 'default',
  className,
  children,
-}: TileProps & HTMLAttributes<HTMLDivElement>) => {
+}: HTMLAttributes<HTMLDivElement>) => {
  return (
    <div
      className={classNames(
-        {
-          'bg-rainbow p-[0.125rem]': variant === 'rainbow',
-          [`border-2 ${BORDER_COLOR} p-0`]: variant === 'default',
-        },
-        'rounded-lg overflow-hidden relative'
+        'rounded-lg overflow-hidden relative',
+        'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white',
+        'p-6',
+        className
      )}
    >
-      <div
-        className={classNames(
-          {
-            'bg-white dark:bg-vega-cdark-900 text-black dark:text-white rounded-[0.35rem] overflow-hidden':
-              variant === 'rainbow',
-          },
-          'p-6',
-          GRADIENT,
-          className
-        )}
-      >
-        {children}
-      </div>
+      {children}
    </div>
  );
 };
+
+type StatTileProps = {
+  title: string;
+  description?: string;
+  children?: ReactNode;
+};
+export const StatTile = ({ title, description, children }: StatTileProps) => {
+  return (
+    <Tile>
+      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
+        {title}
+      </h3>
+      <div className="text-5xl text-left">{children}</div>
+      {description && (
+        <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
+          {description}
+        </div>
+      )}
+    </Tile>
+  );
+};
+
+const FADE_OUT_STYLE = classNames(
+  'after:w-5 after:h-full after:absolute after:top-0 after:right-0',
+  'after:bg-gradient-to-l after:from-vega-clight-800 after:dark:from-vega-cdark-800 after:to-transparent'
+);
+
+export const CodeTile = ({
+  code,
+  className,
+}: {
+  code: string;
+  className?: string;
+}) => {
+  return (
+    <StatTile title="Your referral code">
+      <div className="flex gap-2 items-center justify-between">
+        <Tooltip
+          description={
+            <div className="break-all">
+              <span className="text-xl bg-rainbow bg-clip-text text-transparent">
+                {code}
+              </span>
+            </div>
+          }
+        >
+          <div
+            className={classNames(
+              'relative bg-rainbow bg-clip-text text-transparent text-5xl overflow-hidden',
+              FADE_OUT_STYLE
+            )}
+          >
+            {code}
+          </div>
+        </Tooltip>
+        <CopyWithTooltip text={code}>
+          <Button className="text-sm no-underline !py-0 !px-0 h-fit !bg-transparent">
+            <span className="sr-only">Copy</span>
+            <VegaIcon size={24} name={VegaIconNames.COPY} />
+          </Button>
+        </CopyWithTooltip>
+      </div>
+    </StatTile>
+  );
+};
@@ -1,23 +0,0 @@
-import {
-  AssetDetailsDialog,
-  useAssetDetailsDialogStore,
-} from '@vegaprotocol/assets';
-import { useUpdateProposal } from '@vegaprotocol/proposals';
-import * as Schema from '@vegaprotocol/types';
-
-export const LocalAssetDetailsDialog = () => {
-  const { isOpen, id, trigger, setOpen } = useAssetDetailsDialogStore();
-  const { data: proposal } = useUpdateProposal({
-    id,
-    proposalType: Schema.ProposalType.TYPE_UPDATE_ASSET,
-  });
-  return (
-    <AssetDetailsDialog
-      assetId={id}
-      trigger={trigger || null}
-      open={isOpen}
-      onChange={setOpen}
-      proposalId={proposal?.id ?? undefined}
-    />
-  );
-};
@@ -1 +0,0 @@
-export * from './asset-details-dialog';
@@ -182,7 +182,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
        </NavbarItem>
        {FLAGS.REFERRALS && (
          <NavbarItem>
-            <NavbarLink to={Links.REFERRALS()} onClick={onClick}>
+            <NavbarLink end={false} to={Links.REFERRALS()} onClick={onClick}>
              {t('Referrals')}
            </NavbarLink>
          </NavbarItem>
@@ -255,16 +255,18 @@ const NavbarLink = ({
  children,
  to,
  onClick,
+  end = true,
 }: {
  children: ReactNode;
  to: string;
  onClick?: () => void;
+  end?: boolean;
 }) => {
  return (
    <N.Link asChild={true}>
      <NavLink
        to={to}
-        end={true}
+        end={end}
        className={classNames(
          'block lg:flex lg:h-full flex-col justify-center',
          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
@@ -1,3 +1,7 @@
+import {
+  AssetDetailsDialog,
+  useAssetDetailsDialogStore,
+} from '@vegaprotocol/assets';
 import { VegaConnectDialog, ViewAsDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/vega-connectors';
 import {
@@ -6,9 +10,9 @@ import {
 } from '@vegaprotocol/web3';
 import { WelcomeDialog } from '../components/welcome-dialog';
 import { RiskMessage } from '../components/welcome-dialog';
-import { LocalAssetDetailsDialog as AssetDetailsDialog } from '../components/asset-details-dialog';

 const DialogsContainer = () => {
+  const { isOpen, id, trigger, setOpen } = useAssetDetailsDialogStore();
  return (
    <>
      <VegaConnectDialog
@@ -16,7 +20,12 @@ const DialogsContainer = () => {
        riskMessage={<RiskMessage />}
      />
      <ViewAsDialog connector={Connectors.view} />
-      <AssetDetailsDialog />
+      <AssetDetailsDialog
+        assetId={id}
+        trigger={trigger || null}
+        open={isOpen}
+        onChange={setOpen}
+      />
      <WelcomeDialog />
      <Web3ConnectUncontrolledDialog />
      <WithdrawalApprovalDialogContainer />
@@ -1,5 +1,5 @@
 import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
-import { useProposalNotificationToasts } from '@vegaprotocol/proposals';
+import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
@@ -7,7 +7,7 @@ import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';
 import { Links } from '../lib/links';

 export const ToastsManager = () => {
-  useProposalNotificationToasts();
+  useUpdateNetworkParametersToasts();
  useVegaTransactionToasts();
  useEthereumTransactionToasts();
  useEthereumWithdrawApprovalsToasts();
@@ -24,8 +24,8 @@ module.exports = {
        ...theme.backgroundImage,
        rainbow:
          'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-        'rainbow-shifted':
-          'linear-gradient(103.47deg, #0075FF 1.68%, #8028FF 47.49%, #FF077F 100%)',
+        'rainbow-180':
+          'linear-gradient(283.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
        highlight:
          'linear-gradient(170deg, var(--tw-gradient-from), transparent var(--tw-gradient-to-position))',
      },
@@ -38,10 +38,144 @@ module.exports = {
          '75%': { transform: 'translateX(5px)' },
          '100%': { transform: 'translateX(0)' },
        },
+        'spin-rainbow-180': {
+          '0%': {
+            backgroundImage:
+              'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '10%': {
+            backgroundImage:
+              'linear-gradient(121.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '20%': {
+            backgroundImage:
+              'linear-gradient(139.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '30%': {
+            backgroundImage:
+              'linear-gradient(157.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '40%': {
+            backgroundImage:
+              'linear-gradient(175.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '50%': {
+            backgroundImage:
+              'linear-gradient(193.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '60%': {
+            backgroundImage:
+              'linear-gradient(211.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '70%': {
+            backgroundImage:
+              'linear-gradient(229.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '80%': {
+            backgroundImage:
+              'linear-gradient(247.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '90%': {
+            backgroundImage:
+              'linear-gradient(265.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '100%': {
+            backgroundImage:
+              'linear-gradient(283.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+        },
+        'spin-rainbow-360': {
+          '0%': {
+            backgroundImage:
+              'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '5%': {
+            backgroundImage:
+              'linear-gradient(121.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '10%': {
+            backgroundImage:
+              'linear-gradient(139.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '15%': {
+            backgroundImage:
+              'linear-gradient(157.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '20%': {
+            backgroundImage:
+              'linear-gradient(175.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '25%': {
+            backgroundImage:
+              'linear-gradient(193.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '30%': {
+            backgroundImage:
+              'linear-gradient(211.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '35%': {
+            backgroundImage:
+              'linear-gradient(229.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '40%': {
+            backgroundImage:
+              'linear-gradient(247.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '45%': {
+            backgroundImage:
+              'linear-gradient(265.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '50%': {
+            backgroundImage:
+              'linear-gradient(283.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '55%': {
+            backgroundImage:
+              'linear-gradient(301.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '60%': {
+            backgroundImage:
+              'linear-gradient(319.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '65%': {
+            backgroundImage:
+              'linear-gradient(337.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '70%': {
+            backgroundImage:
+              'linear-gradient(355.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '75%': {
+            backgroundImage:
+              'linear-gradient(13.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '80%': {
+            backgroundImage:
+              'linear-gradient(31.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '85%': {
+            backgroundImage:
+              'linear-gradient(49.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '90%': {
+            backgroundImage:
+              'linear-gradient(67.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '95%': {
+            backgroundImage:
+              'linear-gradient(85.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+          '100%': {
+            backgroundImage:
+              'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+          },
+        },
      },
      animation: {
        ...theme.animation,
        shake: 'shake 200ms linear',
+        'spin-rainbow': 'spin-rainbow-180 500ms linear',
+        'rotate-rainbow': 'spin-rainbow-360 1000ms linear',
      },
    },
  },
@@ -9,7 +9,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { create } from 'zustand';
 import { AssetDetailsTable } from './asset-details-table';
-import { AssetProposalNotification } from './asset-proposal-notification';
+import { AssetProposalNotification } from '@vegaprotocol/proposals';
 import { useAssetDataProvider } from './asset-data-provider';

 export type AssetDetailsDialogStore = {
@@ -47,7 +47,6 @@ export interface AssetDetailsDialogProps {
  open: boolean;
  onChange: (open: boolean) => void;
  asJson?: boolean;
-  proposalId?: string;
 }

 export const AssetDetailsDialog = ({
@@ -56,7 +55,6 @@ export const AssetDetailsDialog = ({
  open,
  onChange,
  asJson = false,
-  proposalId,
 }: AssetDetailsDialogProps) => {
  const { data: asset } = useAssetDataProvider(assetId);

@@ -64,7 +62,7 @@ export const AssetDetailsDialog = ({

  const content = asset ? (
    <div className="my-2">
-      <AssetProposalNotification proposalId={proposalId} />
+      <AssetProposalNotification assetId={asset.id} />
      {asJson ? (
        <div className="pr-8">
          <SyntaxHighlighter size="smaller" data={asset} />
@@ -273,7 +273,9 @@ export const DealTicket = ({

  const assetSymbol = getAsset(market).symbol;

-  const assetUnit = getQuoteName(market);
+  const baseQuote = getBaseQuoteUnit(
+    market.tradableInstrument.instrument.metadata.tags
+  );

  const summaryError = useMemo(() => {
    if (!pubKey) {
@@ -412,7 +414,7 @@ export const DealTicket = ({
                id="order-size"
                className="w-full"
                type="number"
-                appendElement={assetUnit && <Pill size="xs">{assetUnit}</Pill>}
+                appendElement={baseQuote && <Pill size="xs">{baseQuote}</Pill>}
                step={sizeStep}
                min={sizeStep}
                data-testid="order-size"
@@ -668,7 +670,7 @@ export const DealTicket = ({
        subLabel={`${formatValue(
          normalizedOrder.size,
          market.positionDecimalPlaces
-        )} ${assetUnit} @ ${
+        )} ${baseQuote} @ ${
          type === Schema.OrderType.TYPE_MARKET
            ? 'market'
            : `${formatValue(
@@ -32,39 +32,43 @@ query LiquidityProvisions($marketId: ID!) {
  }
 }

-subscription LiquidityProvisionsUpdate($partyId: ID, $marketId: ID) {
-  liquidityProvisions(partyId: $partyId, marketId: $marketId) {
-    id
-    partyID
-    createdAt
-    updatedAt
-    marketID
-    commitmentAmount
-    fee
-    status
-  }
-}
-
 # Liquidity Provider Share Fee

 fragment LiquidityProviderFeeShareFields on LiquidityProviderFeeShare {
-  party {
-    id
-  }
  equityLikeShare
  averageEntryValuation
+  averageScore
+  virtualStake
 }

-query LiquidityProviderFeeShare($marketId: ID!) {
-  market(id: $marketId) {
-    id
-    data {
-      market {
-        id
-      }
-      liquidityProviderFeeShare {
-        ...LiquidityProviderFeeShareFields
+fragment LiquidityProviderSLAFields on LiquidityProviderSLA {
+  currentEpochFractionOfTimeOnBook
+  lastEpochFractionOfTimeOnBook
+  lastEpochFeePenalty
+  lastEpochBondPenalty
+  hysteresisPeriodFeePenalties
+  requiredLiquidity
+  notionalVolumeBuys
+  notionalVolumeSells
+}
+
+query LiquidityProviders($marketId: ID!) {
+  liquidityProviders(marketId: $marketId) {
+    edges {
+      node {
+        ...LiquidityProviderFields
      }
    }
  }
 }
+
+fragment LiquidityProviderFields on LiquidityProvider {
+  partyId
+  marketId
+  feeShare {
+    ...LiquidityProviderFeeShareFields
+  }
+  sla {
+    ...LiquidityProviderSLAFields
+  }
+}
@@ -12,22 +12,18 @@ export type LiquidityProvisionsQueryVariables = Types.Exact<{

 export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', id: string, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } } } | null> | null } | null } | null };

-export type LiquidityProvisionsUpdateSubscriptionVariables = Types.Exact<{
-  partyId?: Types.InputMaybe<Types.Scalars['ID']>;
-  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
-}>;
+export type LiquidityProviderFeeShareFieldsFragment = { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string };

+export type LiquidityProviderSLAFieldsFragment = { __typename?: 'LiquidityProviderSLA', currentEpochFractionOfTimeOnBook: string, lastEpochFractionOfTimeOnBook: string, lastEpochFeePenalty: string, lastEpochBondPenalty: string, hysteresisPeriodFeePenalties?: Array<string> | null, requiredLiquidity: string, notionalVolumeBuys: string, notionalVolumeSells: string };

-export type LiquidityProvisionsUpdateSubscription = { __typename?: 'Subscription', liquidityProvisions?: Array<{ __typename?: 'LiquidityProvisionUpdate', id: string, partyID: string, createdAt: any, updatedAt?: any | null, marketID: string, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus }> | null };
-
-export type LiquidityProviderFeeShareFieldsFragment = { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } };
-
-export type LiquidityProviderFeeShareQueryVariables = Types.Exact<{
+export type LiquidityProvidersQueryVariables = Types.Exact<{
  marketId: Types.Scalars['ID'];
 }>;


-export type LiquidityProviderFeeShareQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, data?: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string }, liquidityProviderFeeShare?: Array<{ __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } }> | null } | null } | null };
+export type LiquidityProvidersQuery = { __typename?: 'Query', liquidityProviders?: { __typename?: 'LiquidityProviderConnection', edges: Array<{ __typename?: 'LiquidityProviderEdge', node: { __typename?: 'LiquidityProvider', partyId: string, marketId: string, feeShare?: { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string } | null, sla?: { __typename?: 'LiquidityProviderSLA', currentEpochFractionOfTimeOnBook: string, lastEpochFractionOfTimeOnBook: string, lastEpochFeePenalty: string, lastEpochBondPenalty: string, hysteresisPeriodFeePenalties?: Array<string> | null, requiredLiquidity: string, notionalVolumeBuys: string, notionalVolumeSells: string } | null } }> } | null };
+
+export type LiquidityProviderFieldsFragment = { __typename?: 'LiquidityProvider', partyId: string, marketId: string, feeShare?: { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, averageScore: string, virtualStake: string } | null, sla?: { __typename?: 'LiquidityProviderSLA', currentEpochFractionOfTimeOnBook: string, lastEpochFractionOfTimeOnBook: string, lastEpochFeePenalty: string, lastEpochBondPenalty: string, hysteresisPeriodFeePenalties?: Array<string> | null, requiredLiquidity: string, notionalVolumeBuys: string, notionalVolumeSells: string } | null };

 export const LiquidityProvisionFieldsFragmentDoc = gql`
    fragment LiquidityProvisionFields on LiquidityProvision {
@@ -52,13 +48,37 @@ export const LiquidityProvisionFieldsFragmentDoc = gql`
    `;
 export const LiquidityProviderFeeShareFieldsFragmentDoc = gql`
    fragment LiquidityProviderFeeShareFields on LiquidityProviderFeeShare {
-  party {
-    id
-  }
  equityLikeShare
  averageEntryValuation
+  averageScore
+  virtualStake
 }
    `;
+export const LiquidityProviderSLAFieldsFragmentDoc = gql`
+    fragment LiquidityProviderSLAFields on LiquidityProviderSLA {
+  currentEpochFractionOfTimeOnBook
+  lastEpochFractionOfTimeOnBook
+  lastEpochFeePenalty
+  lastEpochBondPenalty
+  hysteresisPeriodFeePenalties
+  requiredLiquidity
+  notionalVolumeBuys
+  notionalVolumeSells
+}
+    `;
+export const LiquidityProviderFieldsFragmentDoc = gql`
+    fragment LiquidityProviderFields on LiquidityProvider {
+  partyId
+  marketId
+  feeShare {
+    ...LiquidityProviderFeeShareFields
+  }
+  sla {
+    ...LiquidityProviderSLAFields
+  }
+}
+    ${LiquidityProviderFeeShareFieldsFragmentDoc}
+${LiquidityProviderSLAFieldsFragmentDoc}`;
 export const LiquidityProvisionsDocument = gql`
    query LiquidityProvisions($marketId: ID!) {
  market(id: $marketId) {
@@ -100,84 +120,42 @@ export function useLiquidityProvisionsLazyQuery(baseOptions?: Apollo.LazyQueryHo
 export type LiquidityProvisionsQueryHookResult = ReturnType<typeof useLiquidityProvisionsQuery>;
 export type LiquidityProvisionsLazyQueryHookResult = ReturnType<typeof useLiquidityProvisionsLazyQuery>;
 export type LiquidityProvisionsQueryResult = Apollo.QueryResult<LiquidityProvisionsQuery, LiquidityProvisionsQueryVariables>;
-export const LiquidityProvisionsUpdateDocument = gql`
-    subscription LiquidityProvisionsUpdate($partyId: ID, $marketId: ID) {
-  liquidityProvisions(partyId: $partyId, marketId: $marketId) {
-    id
-    partyID
-    createdAt
-    updatedAt
-    marketID
-    commitmentAmount
-    fee
-    status
-  }
-}
-    `;
-
-/**
- * __useLiquidityProvisionsUpdateSubscription__
- *
- * To run a query within a React component, call `useLiquidityProvisionsUpdateSubscription` and pass it any options that fit your needs.
- * When your component renders, `useLiquidityProvisionsUpdateSubscription` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useLiquidityProvisionsUpdateSubscription({
- *   variables: {
- *      partyId: // value for 'partyId'
- *      marketId: // value for 'marketId'
- *   },
- * });
- */
-export function useLiquidityProvisionsUpdateSubscription(baseOptions?: Apollo.SubscriptionHookOptions<LiquidityProvisionsUpdateSubscription, LiquidityProvisionsUpdateSubscriptionVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useSubscription<LiquidityProvisionsUpdateSubscription, LiquidityProvisionsUpdateSubscriptionVariables>(LiquidityProvisionsUpdateDocument, options);
-      }
-export type LiquidityProvisionsUpdateSubscriptionHookResult = ReturnType<typeof useLiquidityProvisionsUpdateSubscription>;
-export type LiquidityProvisionsUpdateSubscriptionResult = Apollo.SubscriptionResult<LiquidityProvisionsUpdateSubscription>;
-export const LiquidityProviderFeeShareDocument = gql`
-    query LiquidityProviderFeeShare($marketId: ID!) {
-  market(id: $marketId) {
-    id
-    data {
-      market {
-        id
-      }
-      liquidityProviderFeeShare {
-        ...LiquidityProviderFeeShareFields
+export const LiquidityProvidersDocument = gql`
+    query LiquidityProviders($marketId: ID!) {
+  liquidityProviders(marketId: $marketId) {
+    edges {
+      node {
+        ...LiquidityProviderFields
      }
    }
  }
 }
-    ${LiquidityProviderFeeShareFieldsFragmentDoc}`;
+    ${LiquidityProviderFieldsFragmentDoc}`;

 /**
- * __useLiquidityProviderFeeShareQuery__
+ * __useLiquidityProvidersQuery__
 *
- * To run a query within a React component, call `useLiquidityProviderFeeShareQuery` and pass it any options that fit your needs.
- * When your component renders, `useLiquidityProviderFeeShareQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `useLiquidityProvidersQuery` and pass it any options that fit your needs.
+ * When your component renders, `useLiquidityProvidersQuery` returns an object from Apollo Client that contains loading, error, and data properties
 * you can use to render your UI.
 *
 * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
 *
 * @example
- * const { data, loading, error } = useLiquidityProviderFeeShareQuery({
+ * const { data, loading, error } = useLiquidityProvidersQuery({
 *   variables: {
 *      marketId: // value for 'marketId'
 *   },
 * });
 */
-export function useLiquidityProviderFeeShareQuery(baseOptions: Apollo.QueryHookOptions<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>) {
+export function useLiquidityProvidersQuery(baseOptions: Apollo.QueryHookOptions<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>(LiquidityProviderFeeShareDocument, options);
+        return Apollo.useQuery<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>(LiquidityProvidersDocument, options);
      }
-export function useLiquidityProviderFeeShareLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>) {
+export function useLiquidityProvidersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>) {
          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>(LiquidityProviderFeeShareDocument, options);
+          return Apollo.useLazyQuery<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>(LiquidityProvidersDocument, options);
        }
-export type LiquidityProviderFeeShareQueryHookResult = ReturnType<typeof useLiquidityProviderFeeShareQuery>;
-export type LiquidityProviderFeeShareLazyQueryHookResult = ReturnType<typeof useLiquidityProviderFeeShareLazyQuery>;
-export type LiquidityProviderFeeShareQueryResult = Apollo.QueryResult<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>;
+export type LiquidityProvidersQueryHookResult = ReturnType<typeof useLiquidityProvidersQuery>;
+export type LiquidityProvidersLazyQueryHookResult = ReturnType<typeof useLiquidityProvidersLazyQuery>;
+export type LiquidityProvidersQueryResult = Apollo.QueryResult<LiquidityProvidersQuery, LiquidityProvidersQueryVariables>;
@@ -1,7 +1,9 @@
-import type { LiquidityProviderFeeShare } from '@vegaprotocol/types';
 import { AccountType } from '@vegaprotocol/types';
 import { getLiquidityProvision } from './liquidity-data-provider';
-import type { LiquidityProvisionFieldsFragment } from './__generated__/MarketLiquidity';
+import type {
+  LiquidityProviderFieldsFragment,
+  LiquidityProvisionFieldsFragment,
+} from './__generated__/MarketLiquidity';

 const input = {
  liquidityProvisions: [
@@ -31,28 +33,32 @@ const input = {
      __typename: 'LiquidityProvision',
    } as LiquidityProvisionFieldsFragment,
  ],
-  liquidityFeeShare: [
+  liquidityProviders: [
    {
-      party: {
-        id: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
-        __typename: 'Party',
+      partyId:
+        'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
+      feeShare: {
+        equityLikeShare: '1',
+        averageEntryValuation: '12064118310408958216220.7224556301338111',
+        __typename: 'LiquidityProviderFeeShare',
      },
-      equityLikeShare: '1',
-      averageEntryValuation: '12064118310408958216220.7224556301338111',
-      __typename: 'LiquidityProviderFeeShare',
-    } as LiquidityProviderFeeShare,
+    } as LiquidityProviderFieldsFragment,
  ],
 };

 const result = [
  {
-    __typename: 'LiquidityProvision',
-    averageEntryValuation: '12064118310408958216220.7224556301338111',
+    __typename: undefined,
    balance: '1.8003328918633596575e+22',
    commitmentAmount: '18003328918633596575000',
    createdAt: '2022-12-16T09:28:29.071781Z',
-    equityLikeShare: '1',
+    feeShare: {
+      equityLikeShare: '1',
+      __typename: 'LiquidityProviderFeeShare',
+      averageEntryValuation: '12064118310408958216220.7224556301338111',
+    },
    fee: '0.001',
+    partyId: 'dde288688af2aeb5feb349dd72d3679a7a9be34c7375f6a4a48ef2f6140e7e59',
    party: {
      __typename: 'Party',
      accountsConnection: {
@@ -84,13 +90,13 @@ describe('getLiquidityProvision', () => {
  it('should return correct array when correct liquidity provision parameters are provided', () => {
    const data = getLiquidityProvision(
      input.liquidityProvisions,
-      input.liquidityFeeShare
+      input.liquidityProviders
    );
    expect(data).toStrictEqual(result);
  });

  it('should return empty array when no liquidity provision parameters are provided', () => {
-    const data = getLiquidityProvision([], input.liquidityFeeShare);
+    const data = getLiquidityProvision([], input.liquidityProviders);
    expect(data).toStrictEqual([]);
  });

@@ -5,86 +5,50 @@ import {
 } from '@vegaprotocol/data-provider';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
-import produce from 'immer';

 import {
-  LiquidityProviderFeeShareDocument,
+  LiquidityProvidersDocument,
  LiquidityProvisionsDocument,
-  LiquidityProvisionsUpdateDocument,
 } from './__generated__/MarketLiquidity';

 import type {
-  LiquidityProviderFeeShareFieldsFragment,
-  LiquidityProviderFeeShareQuery,
-  LiquidityProviderFeeShareQueryVariables,
+  LiquidityProviderFieldsFragment,
+  LiquidityProvidersQuery,
+  LiquidityProvidersQueryVariables,
  LiquidityProvisionFieldsFragment,
  LiquidityProvisionsQuery,
  LiquidityProvisionsQueryVariables,
-  LiquidityProvisionsUpdateSubscription,
 } from './__generated__/MarketLiquidity';

 export const liquidityProvisionsDataProvider = makeDataProvider<
  LiquidityProvisionsQuery,
  LiquidityProvisionFieldsFragment[],
-  LiquidityProvisionsUpdateSubscription,
-  LiquidityProvisionsUpdateSubscription['liquidityProvisions'],
+  never,
+  never,
  LiquidityProvisionsQueryVariables
 >({
  query: LiquidityProvisionsDocument,
-  subscriptionQuery: LiquidityProvisionsUpdateDocument,
-  update: (
-    data: LiquidityProvisionFieldsFragment[] | null,
-    deltas: LiquidityProvisionsUpdateSubscription['liquidityProvisions']
-  ) => {
-    return produce(data || [], (draft) => {
-      deltas?.forEach((delta) => {
-        const index = draft.findIndex((a) => delta.id === a.id);
-        if (index !== -1) {
-          draft[index].commitmentAmount = delta.commitmentAmount;
-          draft[index].fee = delta.fee;
-          draft[index].updatedAt = delta.updatedAt;
-          draft[index].status = delta.status;
-        } else {
-          draft.unshift({
-            id: delta.id,
-            commitmentAmount: delta.commitmentAmount,
-            fee: delta.fee,
-            status: delta.status,
-            updatedAt: delta.updatedAt,
-            createdAt: delta.createdAt,
-            party: {
-              id: delta.partyID,
-            },
-            // TODO add accounts connection to the subscription
-          });
-        }
-      });
-    });
-  },
  getData: (responseData: LiquidityProvisionsQuery | null) => {
    return (
      responseData?.market?.liquidityProvisionsConnection?.edges?.map(
        (e) => e?.node
      ) ?? []
-    ).filter((e) => !!e) as LiquidityProvisionFieldsFragment[];
-  },
-  getDelta: (
-    subscriptionData: LiquidityProvisionsUpdateSubscription
-  ): LiquidityProvisionsUpdateSubscription['liquidityProvisions'] => {
-    return subscriptionData.liquidityProvisions;
+    ).filter((n) => !!n) as LiquidityProvisionFieldsFragment[];
  },
 });

-export const liquidityFeeShareDataProvider = makeDataProvider<
-  LiquidityProviderFeeShareQuery,
-  LiquidityProviderFeeShareFieldsFragment[],
+export const lpDataProvider = makeDataProvider<
+  LiquidityProvidersQuery,
+  LiquidityProviderFieldsFragment[],
  never,
  never,
-  LiquidityProviderFeeShareQueryVariables
+  LiquidityProvidersQueryVariables
 >({
-  query: LiquidityProviderFeeShareDocument,
+  query: LiquidityProvidersDocument,
  getData: (data) => {
-    return data?.market?.data?.liquidityProviderFeeShare || [];
+    return (
+      data?.liquidityProviders?.edges.filter(Boolean).map((e) => e.node) ?? []
+    );
  },
 });

@@ -101,17 +65,17 @@ export const lpAggregatedDataProvider = makeDerivedDataProvider<
        marketId: variables.marketId,
      }),
    (callback, client, variables) =>
-      liquidityFeeShareDataProvider(callback, client, {
+      lpDataProvider(callback, client, {
        marketId: variables.marketId,
      }),
  ],
  (
-    [liquidityProvisions, liquidityFeeShare],
+    [liquidityProvisions, liquidityProvider],
    { filter }
  ): LiquidityProvisionData[] => {
    return getLiquidityProvision(
      liquidityProvisions,
-      liquidityFeeShare,
+      liquidityProvider,
      filter
    );
  }
@@ -139,9 +103,17 @@ export const matchFilter = (
  return true;
 };

+export interface LiquidityProvisionData
+  extends Omit<LiquidityProvisionFieldsFragment, '__typename'> {
+  assetDecimalPlaces?: number;
+  balance?: string;
+  averageEntryValuation?: string;
+  equityLikeShare?: string;
+}
+
 export const getLiquidityProvision = (
  liquidityProvisions: LiquidityProvisionFieldsFragment[],
-  liquidityFeeShare: LiquidityProviderFeeShareFieldsFragment[],
+  liquidityProvider: LiquidityProviderFieldsFragment[],
  filter?: Filter
 ): LiquidityProvisionData[] => {
  return liquidityProvisions
@@ -161,10 +133,8 @@ export const getLiquidityProvision = (
      return true;
    })
    .map((lp) => {
-      const feeShare = liquidityFeeShare.find(
-        (f) => f.party.id === lp.party.id
-      );
-      if (!feeShare) return lp;
+      const lpObj = liquidityProvider.find((f) => lp.party.id === f.partyId);
+      if (!lpObj) return lp;
      const accounts = compact(lp.party.accountsConnection?.edges).map(
        (e) => e.node
      );
@@ -180,17 +150,9 @@ export const getLiquidityProvision = (
          .toString() || '0';
      return {
        ...lp,
-        averageEntryValuation: feeShare?.averageEntryValuation,
-        equityLikeShare: feeShare?.equityLikeShare,
+        ...lpObj,
        balance,
+        __typename: undefined,
      };
    });
 };
-
-export interface LiquidityProvisionData
-  extends LiquidityProvisionFieldsFragment {
-  assetDecimalPlaces?: number;
-  balance?: string;
-  averageEntryValuation?: string;
-  equityLikeShare?: string;
-}
@@ -10,8 +10,10 @@ const singleRow = {
  commitmentAmount: '56298653179',
  fee: '0.001',
  status: Schema.LiquidityProvisionStatus.STATUS_ACTIVE,
-  equityLikeShare: '0.5',
-  averageEntryValuation: '0.5',
+  feeShare: {
+    equityLikeShare: '0.5',
+    averageEntryValuation: '0.5',
+  },
  supplied: '67895',
  obligation: '56785',
 } as unknown as LiquidityProvisionData;
@@ -41,13 +43,23 @@ describe('LiquidityTable', () => {
      h.querySelector('[ref="eText"]')?.textContent?.trim()
    );
    const expectedHeaders = [
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
      'Party',
      'Commitment ()',
-      'Share',
-      'Proposed fee',
-      'Market valuation at entry',
      'Obligation',
-      'Supplied',
+      'Fee',
+      'Adjusted stake share',
+      'Share',
+      'Live supplied liquidity',
+      'Live time fraction on book',
+      'Live liquidity quality score (%)',
+      'Last time fraction on the book',
+      'Last fee penalty',
+      'Last bond penalty',
      'Status',
      'Created',
      'Updated',
@@ -8,9 +8,16 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
+import {
+  CopyWithTooltip,
+  Tooltip,
+  TooltipCellComponent,
+  VegaIcon,
+  VegaIconNames,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 import type {
-  ColDef,
+  ColGroupDef,
  ITooltipParams,
  ValueFormatterParams,
 } from 'ag-grid-community';
@@ -24,6 +31,20 @@ const percentageFormatter = ({ value }: ValueFormatterParams) => {
  return formatNumberPercentage(new BigNumber(value).times(100), 2) || '-';
 };

+const copyCellRenderer = ({ value }: { value?: string | null }) => {
+  if (!value) return '-';
+  return (
+    <CopyWithTooltip data-testid="copy-to-clipboard" text={value}>
+      <button className="flex gap-1">
+        <Tooltip description={value}>
+          <span className="break-words">{truncateMiddle(value)}</span>
+        </Tooltip>
+        <VegaIcon name={VegaIconNames.COPY} size={12} />
+      </button>
+    </CopyWithTooltip>
+  );
+};
+
 const dateValueFormatter = ({ value }: { value?: string | null }) => {
  if (!value) {
    return '-';
@@ -89,103 +110,168 @@ export const LiquidityTable = ({
      )}`;
    };

-    const defs: ColDef[] = [
+    const defs: ColGroupDef[] = [
      {
-        headerName: t('Party'),
-        field: 'party.id',
-        headerTooltip: t('The public key of the party making this commitment.'),
+        headerName: '',
+        children: [
+          {
+            headerName: t('Party'),
+            field: 'partyId',
+            headerTooltip: t(
+              'The public key of the party making this commitment.'
+            ),
+            cellRenderer: copyCellRenderer,
+          },
+        ],
      },
      {
-        headerName: t(`Commitment (${symbol})`),
-        field: 'commitmentAmount',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'The amount committed to the market by this liquidity provider.'
-        ),
-        valueFormatter: assetDecimalsQuantumFormatter,
-        tooltipValueGetter: assetDecimalsFormatter,
+        headerName: t('Commitment details'),
+        marryChildren: true,
+        children: [
+          {
+            headerName: t(`Commitment (${symbol})`),
+            field: 'commitmentAmount',
+            type: 'rightAligned',
+            headerTooltip: t(
+              'The amount committed to the market by this liquidity provider.'
+            ),
+            valueFormatter: assetDecimalsQuantumFormatter,
+            tooltipValueGetter: assetDecimalsFormatter,
+          },
+          {
+            headerName: t('Obligation'),
+            field: 'commitmentAmount',
+            type: 'rightAligned',
+            headerTooltip: t(
+              `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
+            ),
+            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            tooltipValueGetter: stakeToCcyVolumeFormatter,
+          },
+          {
+            headerName: t('Fee'),
+            headerTooltip: t(
+              'The fee percentage (per trade) proposed by each liquidity provider.'
+            ),
+            field: 'fee',
+            type: 'rightAligned',
+            valueFormatter: percentageFormatter,
+          },
+          {
+            headerName: t('Adjusted stake share'),
+            field: 'feeShare.virtualStake',
+            type: 'rightAligned',
+            headerTooltip: t('The virtual stake of the liquidity provider.'),
+
+            valueFormatter: assetDecimalsQuantumFormatter,
+            tooltipValueGetter: assetDecimalsFormatter,
+          },
+          {
+            headerName: t(`Share`),
+            field: 'feeShare.equityLikeShare',
+            type: 'rightAligned',
+            headerTooltip: t(
+              'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
+            ),
+            valueFormatter: percentageFormatter,
+          },
+        ],
      },
      {
-        headerName: t(`Share`),
-        field: 'equityLikeShare',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
-        ),
-        valueFormatter: percentageFormatter,
+        headerName: t('Live liquidity details'),
+        marryChildren: true,
+        children: [
+          {
+            headerName: t('Live supplied liquidity'),
+            field: 'balance',
+            type: 'rightAligned',
+            headerTooltip: t(
+              `The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
+            ),
+            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            tooltipValueGetter: stakeToCcyVolumeFormatter,
+          },
+          {
+            headerName: t(`Live time fraction on book`),
+            field: 'sla.currentEpochFractionOfTimeOnBook',
+            type: 'rightAligned',
+            headerTooltip: t('Current epoch fraction of time on the book.'),
+            valueFormatter: percentageFormatter,
+          },
+          {
+            headerName: t('Live liquidity quality score (%)'),
+            field: 'feeShare.averageScore',
+            type: 'rightAligned',
+            headerTooltip: t('The average score of the liquidity provider.'),
+            valueFormatter: percentageFormatter,
+          },
+        ],
      },
      {
-        headerName: t('Proposed fee'),
-        headerTooltip: t(
-          'The fee percentage (per trade) proposed by each liquidity provider.'
-        ),
-        field: 'fee',
-        type: 'rightAligned',
-        valueFormatter: percentageFormatter,
+        headerName: t('Last epoch SLA details'),
+        marryChildren: true,
+        children: [
+          {
+            headerName: t(`Last time fraction on the book`),
+            field: 'sla.lastEpochFractionOfTimeOnBook',
+            type: 'rightAligned',
+            headerTooltip: t('Last epoch fraction of time on the book.'),
+            valueFormatter: percentageFormatter,
+          },
+          {
+            headerName: t(`Last fee penalty`),
+            field: 'sla.lastEpochFeePenalty',
+            type: 'rightAligned',
+            headerTooltip: t('Last epoch fee penalty.'),
+            valueFormatter: percentageFormatter,
+          },
+          {
+            headerName: t(`Last bond penalty`),
+            field: 'sla.lastEpochBondPenalty',
+            type: 'rightAligned',
+            headerTooltip: t('Last epoch bond penalty.'),
+            valueFormatter: percentageFormatter,
+          },
+        ],
      },
      {
-        headerName: t('Market valuation at entry'),
-        field: 'averageEntryValuation',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
-        ),
-        valueFormatter: assetDecimalsQuantumFormatter,
-        tooltipValueGetter: assetDecimalsFormatter,
-      },
-      {
-        headerName: t('Obligation'),
-        field: 'commitmentAmount',
-        type: 'rightAligned',
-        headerTooltip: t(
-          `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
-        ),
-        valueFormatter: stakeToCcyVolumeQuantumFormatter,
-        tooltipValueGetter: stakeToCcyVolumeFormatter,
-      },
-      {
-        headerName: t('Supplied'),
-        field: 'balance',
-        type: 'rightAligned',
-        headerTooltip: t(
-          `The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
-        ),
-        valueFormatter: stakeToCcyVolumeQuantumFormatter,
-        tooltipValueGetter: stakeToCcyVolumeFormatter,
-      },
-      {
-        headerName: t('Status'),
-        headerTooltip: t('The current status of this liquidity provision.'),
-        field: 'status',
-        valueFormatter: ({ value }) => {
-          if (!value) return value;
-          return LiquidityProvisionStatusMapping[
-            value as LiquidityProvisionStatus
-          ];
-        },
-      },
-      {
-        headerName: t('Created'),
-        headerTooltip: t(
-          'The date and time this liquidity provision was created.'
-        ),
-        field: 'createdAt',
-        type: 'rightAligned',
-        valueFormatter: dateValueFormatter,
-      },
-      {
-        headerName: t('Updated'),
-        headerTooltip: t(
-          'The date and time this liquidity provision was last updated.'
-        ),
-        field: 'updatedAt',
-        type: 'rightAligned',
-        valueFormatter: dateValueFormatter,
+        headerName: '',
+        marryChildren: true,
+        children: [
+          {
+            headerName: t('Status'),
+            headerTooltip: t('The current status of this liquidity provision.'),
+            field: 'status',
+            valueFormatter: ({ value }) => {
+              if (!value) return value;
+              return LiquidityProvisionStatusMapping[
+                value as LiquidityProvisionStatus
+              ];
+            },
+          },
+          {
+            headerName: t('Created'),
+            headerTooltip: t(
+              'The date and time this liquidity provision was created.'
+            ),
+            field: 'createdAt',
+            type: 'rightAligned',
+            valueFormatter: dateValueFormatter,
+          },
+          {
+            headerName: t('Updated'),
+            headerTooltip: t(
+              'The date and time this liquidity provision was last updated.'
+            ),
+            field: 'updatedAt',
+            type: 'rightAligned',
+            valueFormatter: dateValueFormatter,
+          },
+        ],
      },
    ];
    return defs;
  }, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol]);
-
  return (
    <AgGrid
      overlayNoRowsTemplate={t('No liquidity provisions')}
@@ -2,7 +2,7 @@ import merge from 'lodash/merge';
 import * as Schema from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
 import type {
-  LiquidityProviderFeeShareQuery,
+  LiquidityProvidersQuery,
  LiquidityProvisionsQuery,
 } from './__generated__/MarketLiquidity';
 import type { LiquidityProvisionFieldsFragment } from './__generated__/MarketLiquidity';
@@ -26,40 +26,61 @@ export const liquidityProvisionsQuery = (
  return merge(defaultResult, override);
 };

-export const liquidityProviderFeeShareQuery = (
-  override?: PartialDeep<LiquidityProviderFeeShareQuery>
-): LiquidityProviderFeeShareQuery => {
-  const defaultResult: LiquidityProviderFeeShareQuery = {
-    market: {
-      id: 'market-0',
-      data: {
-        market: {
-          id: 'market-0',
-          __typename: 'Market',
+export const liquidityProvidersQuery = (
+  override?: PartialDeep<LiquidityProvidersQuery>
+): LiquidityProvidersQuery => {
+  const defaultResult: LiquidityProvidersQuery = {
+    liquidityProviders: {
+      edges: [
+        {
+          node: {
+            partyId:
+              '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
+            marketId:
+              '5ddb6f1570c0ef7aea41ebfef234dbded4ce2c11722cf033954459c45c30c057',
+            feeShare: {
+              equityLikeShare: '1',
+              averageEntryValuation: '3570452966575.2571864668476351',
+              averageScore: '0',
+              virtualStake: '296386536856.9999884883855020',
+            },
+            sla: {
+              currentEpochFractionOfTimeOnBook: '0',
+              lastEpochFractionOfTimeOnBook: '0',
+              lastEpochFeePenalty: '1',
+              lastEpochBondPenalty: '0.05',
+              hysteresisPeriodFeePenalties: ['1'],
+              requiredLiquidity: '',
+              notionalVolumeBuys: '',
+              notionalVolumeSells: '',
+            },
+          },
        },
-        liquidityProviderFeeShare: [
-          {
-            party: {
-              id: '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
-              __typename: 'Party',
+        {
+          node: {
+            partyId:
+              'cc464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
+            marketId:
+              '5ddb6f1570c0ef7aea41ebfef234dbded4ce2c11722cf033954459c45c30c057',
+            feeShare: {
+              equityLikeShare: '1',
+              averageEntryValuation: '3570452966575.2571864668476351',
+              averageScore: '0',
+              virtualStake: '296386536856.9999884883855020',
            },
-            equityLikeShare: '1',
-            averageEntryValuation: '68585293691.5598054356207737',
-            __typename: 'LiquidityProviderFeeShare',
-          },
-          {
-            party: {
-              id: 'cc464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f',
-              __typename: 'Party',
+            sla: {
+              currentEpochFractionOfTimeOnBook: '0',
+              lastEpochFractionOfTimeOnBook: '0',
+              lastEpochFeePenalty: '1',
+              lastEpochBondPenalty: '0.05',
+              hysteresisPeriodFeePenalties: ['1'],
+              requiredLiquidity: '',
+              notionalVolumeBuys: '',
+              notionalVolumeSells: '',
            },
-            equityLikeShare: '1',
-            averageEntryValuation: '68585293691.5598054356207737',
-            __typename: 'LiquidityProviderFeeShare',
          },
-        ],
-        __typename: 'MarketData',
-      },
-      __typename: 'Market',
+        },
+      ],
    },
  };
  return merge(defaultResult, override);
@@ -1,18 +1,24 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
+import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
+import { useUpdateProposal } from '../lib';

 type AssetProposalNotificationProps = {
-  proposalId?: string;
+  assetId?: string;
 };
 export const AssetProposalNotification = ({
-  proposalId,
+  assetId,
 }: AssetProposalNotificationProps) => {
  const tokenLink = useLinks(DApp.Governance);
+  const { data: proposal } = useUpdateProposal({
+    id: assetId,
+    proposalType: Schema.ProposalType.TYPE_UPDATE_ASSET,
+  });

-  if (proposalId) {
+  if (proposal) {
    const proposalLink = tokenLink(
-      TOKEN_PROPOSAL.replace(':id', proposalId || '')
+      TOKEN_PROPOSAL.replace(':id', proposal.id || '')
    );
    const message = (
      <>
@@ -1,3 +1,4 @@
+export * from './asset-proposal-notification';
 export * from './market-proposal-notification';
 export * from './proposals-list';
 export * from './protocol-upgrade-countdown';
@@ -319,7 +319,6 @@ fragment NewAssetFields on NewAsset {
  decimals
  quantum
  source {
-    __typename
    ... on BuiltinAsset {
      maxFaucetAmountMint
    }
@@ -489,39 +488,3 @@ subscription MarketViewLiveProposals {
    ...MarketViewProposalFields
  }
 }
-
-fragment NotificationProposalsFields on Proposal {
-  id
-  state
-  terms {
-    closingDatetime
-    enactmentDatetime
-    change {
-      __typename
-      ... on UpdateMarketState {
-        ...UpdateMarketStateFields
-      }
-      ... on NewMarket {
-        ...NewMarketSuccessorFields
-      }
-      ... on UpdateMarket {
-        ...UpdateMarketFields
-      }
-      ... on NewAsset {
-        ...NewAssetFields
-      }
-      ... on UpdateAsset {
-        ...UpdateAssetFields
-      }
-      ... on UpdateNetworkParameter {
-        ...UpdateNetworkParameterFields
-      }
-    }
-  }
-}
-
-subscription NotificationProposals {
-  proposals {
-    ...NotificationProposalsFields
-  }
-}
@@ -3,7 +3,7 @@ export * from './use-proposal-event';
 export * from './use-vega-transaction';
 export * from './use-proposal-submit';
 export * from './use-update-proposal';
-export * from './use-proposal-notification-toasts';
+export * from './use-update-network-paramaters-toasts';
 export * from './use-successor-market-proposal-details';
 export * from './use-new-transfer-proposal-details';
 export * from './use-cancel-transfer-proposal-details';
@@ -1,200 +0,0 @@
-import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
-import { useAssetsDataProvider } from '@vegaprotocol/assets';
-import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import { ProposalStateMapping, MarketUpdateType } from '@vegaprotocol/types';
-import { ProposalState } from '@vegaprotocol/types';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { ToastHeading } from '@vegaprotocol/ui-toolkit';
-import { useToasts } from '@vegaprotocol/ui-toolkit';
-import { ExternalLink, Intent } from '@vegaprotocol/ui-toolkit';
-import type { ReactNode } from 'react';
-import { useCallback } from 'react';
-import type { NotificationProposalsFieldsFragment } from '../proposals-data-provider';
-import { useNotificationProposalsSubscription } from '../proposals-data-provider';
-
-export const PROPOSAL_STATES_TO_TOAST = [
-  ProposalState.STATE_DECLINED,
-  ProposalState.STATE_ENACTED,
-  ProposalState.STATE_OPEN,
-  ProposalState.STATE_PASSED,
-];
-
-const PROPOSAL_TYPES_TO_TOAST = [
-  'UpdateNetworkParameter',
-  'NewAsset',
-  'NewMarket',
-  'UpdateAsset',
-  'UpdateMarket',
-  'UpdateMarketState',
-];
-
-type Proposal = NotificationProposalsFieldsFragment;
-
-const NotificationProposalToastContent = ({
-  proposal,
-}: {
-  proposal: Proposal;
-}) => {
-  const { data: assets } = useAssetsDataProvider();
-  const tokenLink = useLinks(DApp.Governance);
-  const change = proposal.terms.change;
-  let pretitle = 'New';
-  let content: ReactNode = null;
-  switch (change.__typename) {
-    case 'UpdateNetworkParameter':
-      pretitle = t('Network change');
-      content = (
-        <p className="italic">
-          '{t('Update ')}
-          <span className="break-all">{change.networkParameter.key}</span>
-          {t(' to ')}
-          <span>{change.networkParameter.value}</span>'
-        </p>
-      );
-      break;
-    case 'NewMarket':
-      pretitle = t('New market');
-      content = (
-        <p>
-          {t('New market ')}
-          <span className="break-all">{change.instrument.name}</span>
-          {change.successorConfiguration?.parentMarketId && (
-            <span>
-              {' '}
-              {t('successor of %', [
-                change.successorConfiguration.parentMarketId,
-              ])}
-            </span>
-          )}
-        </p>
-      );
-      break;
-    case 'UpdateMarket':
-      pretitle = t('Update market');
-      content = (
-        <p>
-          {t('Market ')}
-          <span className="break-all">
-            {change.updateMarketConfiguration.instrument.code}
-          </span>
-        </p>
-      );
-      break;
-    case 'UpdateMarketState':
-      if (
-        change.updateType ===
-        MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE
-      ) {
-        pretitle = t('Market termination');
-      } else if (
-        change.updateType === MarketUpdateType.MARKET_STATE_UPDATE_TYPE_SUSPEND
-      ) {
-        pretitle = t('Market suspension');
-      } else {
-        pretitle = t('Market resume');
-      }
-      content = (
-        <p>
-          {t('Market ')}
-          <span className="break-all">
-            {change.market.tradableInstrument.instrument.name}
-          </span>
-          {change.price && (
-            <span> {t('Final price will be %s', [change.price])}</span>
-          )}
-        </p>
-      );
-      break;
-    case 'NewAsset':
-      pretitle = t('New asset');
-      content = (
-        <p>
-          <span className="break-all">
-            {change.name} ({change.symbol})
-          </span>
-          {', '}
-          {t('type %s', [
-            change.source.__typename === 'ERC20' ? 'ERC20' : 'Builtin asset',
-          ])}
-        </p>
-      );
-      break;
-    case 'UpdateAsset':
-      pretitle = t('Update asset');
-      content = (
-        <p>
-          <span className="break-all">
-            {assets?.find((asset) => asset.id === change.assetId)?.name ??
-              change.assetId}
-          </span>
-        </p>
-      );
-      break;
-    default:
-  }
-  const title = t('%s proposal %s', [
-    pretitle,
-    ProposalStateMapping[proposal.state].toLowerCase(),
-  ]);
-  const enactment = Date.parse(proposal.terms.enactmentDatetime);
-  return (
-    <div>
-      <ToastHeading>{title}</ToastHeading>
-      {content}
-      {!isNaN(enactment) && (
-        <p>
-          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
-        </p>
-      )}
-      <p>
-        <ExternalLink
-          href={tokenLink(TOKEN_PROPOSAL).replace(':id', proposal?.id || '')}
-        >
-          {t('View proposal details')}
-        </ExternalLink>
-      </p>
-    </div>
-  );
-};
-
-export const useProposalNotificationToasts = () => {
-  const setToast = useToasts((store) => store.setToast);
-  const remove = useToasts((store) => store.remove);
-  const hasToast = useToasts((store) => store.hasToast);
-  const fromProposal = useCallback(
-    (proposal: Proposal): Toast => {
-      const id = `proposal-notification-${proposal.id}`;
-      return {
-        id,
-        intent: Intent.Warning,
-        content: <NotificationProposalToastContent proposal={proposal} />,
-        onClose: () => {
-          remove(id);
-        },
-      };
-    },
-    [remove]
-  );
-
-  const displayToast = (toast: Toast) => {
-    if (!hasToast(toast.id)) {
-      setToast(toast);
-    }
-  };
-
-  return useNotificationProposalsSubscription({
-    onData: ({ data }) => {
-      // note proposals is poorly named, it is actually a single proposal
-      const proposal = data.data?.proposals;
-      if (!proposal) return;
-      if (!PROPOSAL_TYPES_TO_TOAST.includes(proposal.terms.change.__typename)) {
-        return;
-      }
-      // if one of the following states show a toast
-      if (PROPOSAL_STATES_TO_TOAST.includes(proposal.state)) {
-        displayToast(fromProposal(proposal));
-      }
-    },
-  });
-};
@@ -0,0 +1,96 @@
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import type { UpdateNetworkParameter } from '@vegaprotocol/types';
+import { ProposalStateMapping } from '@vegaprotocol/types';
+import { ProposalState } from '@vegaprotocol/types';
+import type { Toast } from '@vegaprotocol/ui-toolkit';
+import { ToastHeading } from '@vegaprotocol/ui-toolkit';
+import { useToasts } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink, Intent } from '@vegaprotocol/ui-toolkit';
+import { useCallback } from 'react';
+import type { UpdateNetworkParameterProposalFragment } from './__generated__/Proposal';
+import { useOnUpdateNetworkParametersSubscription } from './__generated__/Proposal';
+
+export const PROPOSAL_STATES_TO_TOAST = [
+  ProposalState.STATE_DECLINED,
+  ProposalState.STATE_ENACTED,
+  ProposalState.STATE_OPEN,
+  ProposalState.STATE_PASSED,
+];
+const CLOSE_AFTER = 0;
+type Proposal = UpdateNetworkParameterProposalFragment;
+
+const UpdateNetworkParameterToastContent = ({
+  proposal,
+}: {
+  proposal: Proposal;
+}) => {
+  const tokenLink = useLinks(DApp.Governance);
+  const change = proposal.terms.change as UpdateNetworkParameter;
+  const title = t('Network change proposal %s').replace(
+    '%s',
+    ProposalStateMapping[proposal.state].toLowerCase()
+  );
+  const enactment = Date.parse(proposal.terms.enactmentDatetime);
+  return (
+    <div>
+      <ToastHeading>{title}</ToastHeading>
+      <p className="italic">
+        '{t('Update ')}
+        <span className="break-all">{change.networkParameter.key}</span>
+        {t(' to ')}
+        <span>{change.networkParameter.value}</span>'
+      </p>
+      {!isNaN(enactment) && (
+        <p>
+          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
+        </p>
+      )}
+      <p>
+        <ExternalLink
+          href={tokenLink(TOKEN_PROPOSAL).replace(':id', proposal?.id || '')}
+        >
+          {t('View proposal details')}
+        </ExternalLink>
+      </p>
+    </div>
+  );
+};
+
+export const useUpdateNetworkParametersToasts = () => {
+  const { setToast, remove } = useToasts((store) => ({
+    setToast: store.setToast,
+    remove: store.remove,
+  }));
+
+  const fromProposal = useCallback(
+    (proposal: Proposal): Toast => {
+      const id = `update-network-param-proposal-${proposal.id}`;
+      return {
+        id: `update-network-param-proposal-${proposal.id}`,
+        intent: Intent.Warning,
+        content: <UpdateNetworkParameterToastContent proposal={proposal} />,
+        onClose: () => {
+          remove(id);
+        },
+        closeAfter: CLOSE_AFTER,
+      };
+    },
+    [remove]
+  );
+
+  return useOnUpdateNetworkParametersSubscription({
+    onData: ({ data }) => {
+      // note proposals is poorly named, it is actually a single proposal
+      const proposal = data.data?.proposals;
+      if (!proposal) return;
+      if (proposal.terms.change.__typename !== 'UpdateNetworkParameter') return;
+
+      // if one of the following states show a toast
+      if (PROPOSAL_STATES_TO_TOAST.includes(proposal.state)) {
+        setToast(fromProposal(proposal));
+      }
+    },
+  });
+};
@@ -5,21 +5,21 @@ import { ProposalState } from '@vegaprotocol/types';
 import type { ReactNode } from 'react';
 import {
  PROPOSAL_STATES_TO_TOAST,
-  useProposalNotificationToasts,
-} from './use-proposal-notification-toasts';
+  useUpdateNetworkParametersToasts,
+} from './use-update-network-paramaters-toasts';
 import type {
  UpdateNetworkParameterProposalFragment,
  OnUpdateNetworkParametersSubscription,
 } from './__generated__/Proposal';
+import { OnUpdateNetworkParametersDocument } from './__generated__/Proposal';
 import { useToasts } from '@vegaprotocol/ui-toolkit';
 import { waitFor, renderHook } from '@testing-library/react';
-import { NotificationProposalsDocument } from '../proposals-data-provider/__generated__/Proposals';

 const render = (mocks?: MockedResponse[]) => {
  const wrapper = ({ children }: { children: ReactNode }) => (
    <MockedProvider mocks={mocks}>{children}</MockedProvider>
  );
-  return renderHook(() => useProposalNotificationToasts(), { wrapper });
+  return renderHook(() => useUpdateNetworkParametersToasts(), { wrapper });
 };

 const generateUpdateNetworkParametersProposal = (
@@ -51,7 +51,7 @@ const clear = () => {
  useToasts.setState(INITIAL);
 };

-describe('useProposalNotificationToasts', () => {
+describe('useUpdateNetworkParametersToasts', () => {
  beforeEach(clear);
  afterAll(clear);

@@ -61,7 +61,7 @@ describe('useProposalNotificationToasts', () => {
      const mockOpenProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
        {
          request: {
-            query: NotificationProposalsDocument,
+            query: OnUpdateNetworkParametersDocument,
          },
          result: {
            data: {
@@ -89,7 +89,7 @@ describe('useProposalNotificationToasts', () => {
    const mockFailedProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
      {
        request: {
-          query: NotificationProposalsDocument,
+          query: OnUpdateNetworkParametersDocument,
        },
        result: {
          data: {
@@ -117,7 +117,7 @@ describe('useProposalNotificationToasts', () => {
    const mockEmptyProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
      {
        request: {
-          query: NotificationProposalsDocument,
+          query: OnUpdateNetworkParametersDocument,
        },
        result: {
          data: {
@@ -142,7 +142,7 @@ describe('useProposalNotificationToasts', () => {
      {
        terms: {
          change: {
-            __typename: 'NewSpotMarket',
+            __typename: 'NewMarket',
          },
        },
      }
@@ -150,7 +150,7 @@ describe('useProposalNotificationToasts', () => {
    const mockWrongProposalType: MockedResponse<OnUpdateNetworkParametersSubscription> =
      {
        request: {
-          query: NotificationProposalsDocument,
+          query: OnUpdateNetworkParametersDocument,
        },
        result: {
          data: {
@@ -68,9 +68,13 @@ export type AccountEvent = {

 /** Filter input for historical balance queries */
 export type AccountFilter = {
+  /** Restrict accounts to those connected to any of the types in this list. Pass an empty list for no filter. */
  accountTypes?: InputMaybe<Array<AccountType>>;
+  /** Restrict accounts to those holding balances in this asset ID. */
  assetId?: InputMaybe<Scalars['ID']>;
+  /** Restrict accounts to those connected to the markets in this list. Pass an empty list for no filter. */
  marketIds?: InputMaybe<Array<Scalars['ID']>>;
+  /** Restrict accounts to those owned by the parties in this list. Pass an empty list for no filter. */
  partyIds?: InputMaybe<Array<Scalars['ID']>>;
 };

@@ -510,7 +514,7 @@ export type CurrentReferralProgram = {
  __typename?: 'CurrentReferralProgram';
  /** Defined tiers in increasing order. First element will give Tier 1, second element will give Tier 2, etc. */
  benefitTiers: Array<BenefitTier>;
-  /** Timestamp as RFC3339Nano, after which when the current epoch ends, the program will end and benefits will be disabled. */
+  /** Timestamp as Unix time in nanoseconds, after which when the current epoch ends, the program will end and benefits will be disabled. */
  endOfProgramTimestamp: Scalars['Timestamp'];
  /** Timestamp as RFC3339Nano when the program ended. If present, the current program has ended and no program is currently running. */
  endedAt?: Maybe<Scalars['Timestamp']>;
@@ -1272,6 +1276,44 @@ export type Fees = {
  factors: FeeFactors;
 };

+/** Fees that have been applied on a specific market/asset up to the given epoch. */
+export type FeesStats = {
+  __typename?: 'FeesStats';
+  /** The settlement asset of the market. */
+  assetId: Scalars['String'];
+  /** The epoch for which these stats were valid. */
+  epoch: Scalars['Int'];
+  /** The total maker fees generated by all parties. */
+  makerFeesGenerated: Array<MakerFeesGenerated>;
+  /** The market the fees were paid in */
+  marketId: Scalars['String'];
+  /** The total referral discounts applied to all referee taker fees */
+  refereesDiscountApplied: Array<PartyAmount>;
+  /** The total referral rewards generated by all referee taker fees. */
+  referrerRewardsGenerated: Array<ReferrerRewardsGenerated>;
+  /** The total maker fees received by the maker side. */
+  totalMakerFeesReceived: Array<PartyAmount>;
+  /** The total referral rewards received by referrer of the referral set. */
+  totalRewardsReceived: Array<PartyAmount>;
+  /** The total volume discounts applied to all referee taker fees */
+  volumeDiscountApplied: Array<PartyAmount>;
+};
+
+/** Fees that have been applied on a specific asset for a given party. */
+export type FeesStatsForParty = {
+  __typename?: 'FeesStatsForParty';
+  /** The settlement asset of the market. */
+  assetId: Scalars['String'];
+  /** The total referral discounts applied to all referee taker fees */
+  refereesDiscountApplied: Scalars['String'];
+  /** The total maker fees received by the maker side. */
+  totalMakerFeesReceived: Scalars['String'];
+  /** The total referral rewards received by referrer of the referral set. */
+  totalRewardsReceived: Scalars['String'];
+  /** The total volume discounts applied to all referee taker fees */
+  volumeDiscountApplied: Scalars['String'];
+};
+
 /**
 * Filter describes the conditions under which oracle data is considered of
 * interest or not.
@@ -1596,11 +1638,19 @@ export enum LedgerEntryField {
  TransferType = 'TransferType'
 }

-/** Filter for historical entry ledger queries */
+/** Filter for historical entry ledger queries, you must provide at least one party in FromAccountFilter, or ToAccountFilter */
 export type LedgerEntryFilter = {
+  /**
+   * Determines whether an entry must have accounts matching both the account_from_filter
+   * and the account_to_filter. If set to 'true', entries must have matches in both filters.
+   * If set to `false`, entries matching only the account_from_filter or the account_to_filter will also be included.
+   */
  CloseOnAccountFilters?: InputMaybe<Scalars['Boolean']>;
+  /** Used to set values for filtering sender accounts. Party must be provided in this filter or to_account_filter, or both. */
  FromAccountFilter?: InputMaybe<AccountFilter>;
+  /** Used to set values for filtering receiver accounts. Party must be provided in this filter or from_account_filter, or both. */
  ToAccountFilter?: InputMaybe<AccountFilter>;
+  /** List of transfer types that is used for filtering sender and receiver accounts. */
  TransferTypes?: InputMaybe<Array<InputMaybe<TransferType>>>;
 };

@@ -1728,31 +1778,31 @@ export type LiquidityProvision = {
  __typename?: 'LiquidityProvision';
  /** A set of liquidity buy orders to meet the liquidity provision obligation. */
  buys: Array<LiquidityOrderReference>;
-  /** Specified as a unit-less number that represents the amount of settlement asset of the market. */
+  /** Specified as a unitless number that represents the amount of the market's settlement asset for the commitment. */
  commitmentAmount: Scalars['String'];
  /** RFC3339Nano time when the liquidity provision was initially created */
  createdAt: Scalars['Timestamp'];
-  /** Nominated liquidity fee factor, which is an input to the calculation of liquidity fees on the market, as per setting fees and rewarding liquidity providers. */
+  /** Provider's nominated liquidity fee factor, which is an input to the calculation of liquidity fees on the market, as per setting fees and rewarding liquidity providers. */
  fee: Scalars['String'];
-  /** Unique identifier for the order (set by the system after consensus) */
+  /** Unique identifier for the provision (set by the system after consensus) */
  id: Scalars['ID'];
-  /** Market for the order */
+  /** Market ID for the liquidity provision */
  market: Market;
  /** The party making this commitment */
  party: Party;
-  /** A reference for the orders created out of this liquidity provision */
+  /** A reference for the orders created to support this liquidity provision */
  reference?: Maybe<Scalars['String']>;
  /** A set of liquidity sell orders to meet the liquidity provision obligation. */
  sells: Array<LiquidityOrderReference>;
  /** The current status of this liquidity provision */
  status: LiquidityProvisionStatus;
-  /** RFC3339Nano time of when the liquidity provision was updated */
+  /** RFC3339Nano time when the liquidity provision was updated */
  updatedAt?: Maybe<Scalars['Timestamp']>;
  /** The version of this liquidity provision */
  version: Scalars['String'];
 };

-/** Status of a liquidity provision order */
+/** Status of a liquidity provision */
 export enum LiquidityProvisionStatus {
  /** An active liquidity provision */
  STATUS_ACTIVE = 'STATUS_ACTIVE',
@@ -1801,6 +1851,20 @@ export type LiquidityProvisionUpdate = {
  version: Scalars['String'];
 };

+export type LiquidityProvisionWithPending = {
+  __typename?: 'LiquidityProvisionWithPending';
+  current: LiquidityProvision;
+  /** Liquidity provision that has been updated by the liquidity provider, and has been accepted by the network, but will not be active until the next epoch. */
+  pending?: Maybe<LiquidityProvision>;
+};
+
+/** Edge type containing the liquidity provision and cursor information returned by a LiquidityProvisionsWithPendingConnection */
+export type LiquidityProvisionWithPendingEdge = {
+  __typename?: 'LiquidityProvisionWithPendingEdge';
+  cursor: Scalars['String'];
+  node: LiquidityProvisionWithPending;
+};
+
 /** Connection type for retrieving cursor-based paginated liquidity provision information */
 export type LiquidityProvisionsConnection = {
  __typename?: 'LiquidityProvisionsConnection';
@@ -1815,6 +1879,13 @@ export type LiquidityProvisionsEdge = {
  node: LiquidityProvision;
 };

+/** Connection type for retrieving cursor-based paginated liquidity provision information */
+export type LiquidityProvisionsWithPendingConnection = {
+  __typename?: 'LiquidityProvisionsWithPendingConnection';
+  edges?: Maybe<Array<Maybe<LiquidityProvisionWithPendingEdge>>>;
+  pageInfo: PageInfo;
+};
+
 export type LiquiditySLAParameters = {
  __typename?: 'LiquiditySLAParameters';
  /** Specifies the minimum fraction of time LPs must spend 'on the book' providing their committed liquidity */
@@ -1861,6 +1932,15 @@ export type LossSocialization = {
  partyId: Scalars['ID'];
 };

+/** Maker fees generated by the trade aggressor */
+export type MakerFeesGenerated = {
+  __typename?: 'MakerFeesGenerated';
+  /** Amount of maker fees paid by the taker to the maker */
+  makerFeesPaid: Array<PartyAmount>;
+  /** Party that paid the fees */
+  taker: Scalars['String'];
+};
+
 export type MarginCalculator = {
  __typename?: 'MarginCalculator';
  /** The scaling factors that will be used for margin calculation */
@@ -1979,6 +2059,11 @@ export type Market = {
  /** Liquidity monitoring parameters for the market */
  liquidityMonitoringParameters: LiquidityMonitoringParameters;
  /** The list of the liquidity provision commitments for this market */
+  liquidityProvisions?: Maybe<LiquidityProvisionsWithPendingConnection>;
+  /**
+   * The list of the liquidity provision commitments for this market
+   * @deprecated Use liquidityProvisions instead
+   */
  liquidityProvisionsConnection?: Maybe<LiquidityProvisionsConnection>;
  /** Optional: Liquidity SLA parameters for the market */
  liquiditySLAParameters?: Maybe<LiquiditySLAParameters>;
@@ -2046,6 +2131,14 @@ export type MarketdepthArgs = {
 };


+/** Represents a product & associated parameters that can be traded on Vega, has an associated OrderBook and Trade history */
+export type MarketliquidityProvisionsArgs = {
+  live?: InputMaybe<Scalars['Boolean']>;
+  pagination?: InputMaybe<Pagination>;
+  partyId?: InputMaybe<Scalars['ID']>;
+};
+
+
 /** Represents a product & associated parameters that can be traded on Vega, has an associated OrderBook and Trade history */
 export type MarketliquidityProvisionsConnectionArgs = {
  live?: InputMaybe<Scalars['Boolean']>;
@@ -3219,6 +3312,39 @@ export type Pagination = {
  last?: InputMaybe<Scalars['Int']>;
 };

+/** Liquidity fees that have been paid to a party in a specific market/asset up to the given epoch. */
+export type PaidLiquidityFees = {
+  __typename?: 'PaidLiquidityFees';
+  /** The settlement asset of the market. */
+  assetId: Scalars['String'];
+  /** The epoch for which these stats were valid. */
+  epoch: Scalars['Int'];
+  /** Fees paid per party */
+  feesPaidPerParty: Array<PartyAmount>;
+  /** The market the fees were paid in */
+  marketId: Scalars['String'];
+  /** Total fees paid across all parties */
+  totalFeesPaid: Scalars['String'];
+};
+
+/** Connection type for retrieving cursor-based paginated paid liquidity fees statistics */
+export type PaidLiquidityFeesConnection = {
+  __typename?: 'PaidLiquidityFeesConnection';
+  /** The volume discount statistics in this connection */
+  edges: Array<Maybe<PaidLiquidityFeesEdge>>;
+  /** The pagination information */
+  pageInfo: PageInfo;
+};
+
+/** Edge type containing the volume discount statistics and cursor information returned by a PaidLiquidityFeesConnection */
+export type PaidLiquidityFeesEdge = {
+  __typename?: 'PaidLiquidityFeesEdge';
+  /** The cursor for this volume discount statistics */
+  cursor: Scalars['String'];
+  /** The volume discount statistics */
+  node: PaidLiquidityFees;
+};
+
 /** Represents a party on Vega, could be an ethereum wallet address in the future */
 export type Party = {
  __typename?: 'Party';
@@ -3231,7 +3357,12 @@ export type Party = {
  depositsConnection?: Maybe<DepositsConnection>;
  /** Party identifier */
  id: Scalars['ID'];
-  /** The list of the liquidity provision commitment for this party */
+  /** The list of the liquidity provision commitments for this party */
+  liquidityProvisions?: Maybe<LiquidityProvisionsWithPendingConnection>;
+  /**
+   * The list of the liquidity provision commitment for this party
+   * @deprecated Use liquidityProvisions instead
+   */
  liquidityProvisionsConnection?: Maybe<LiquidityProvisionsConnection>;
  /** Margin levels for a market */
  marginsConnection?: Maybe<MarginConnection>;
@@ -3254,6 +3385,8 @@ export type Party = {
  tradesConnection?: Maybe<TradeConnection>;
  /** All transfers for a public key */
  transfersConnection?: Maybe<TransferConnection>;
+  /** The current reward vesting summary of the party for the last epoch */
+  vestingBalancesSummary: PartyVestingBalancesSummary;
  /** All votes on proposals in the Vega network by the given party */
  votesConnection?: Maybe<ProposalVoteConnection>;
  /** The list of all withdrawals initiated by the party */
@@ -3290,6 +3423,15 @@ export type PartydepositsConnectionArgs = {
 };


+/** Represents a party on Vega, could be an ethereum wallet address in the future */
+export type PartyliquidityProvisionsArgs = {
+  live?: InputMaybe<Scalars['Boolean']>;
+  marketId?: InputMaybe<Scalars['ID']>;
+  pagination?: InputMaybe<Pagination>;
+  reference?: InputMaybe<Scalars['String']>;
+};
+
+
 /** Represents a party on Vega, could be an ethereum wallet address in the future */
 export type PartyliquidityProvisionsConnectionArgs = {
  live?: InputMaybe<Scalars['Boolean']>;
@@ -3364,6 +3506,12 @@ export type PartytransfersConnectionArgs = {
 };


+/** Represents a party on Vega, could be an ethereum wallet address in the future */
+export type PartyvestingBalancesSummaryArgs = {
+  assetId?: InputMaybe<Scalars['ID']>;
+};
+
+
 /** Represents a party on Vega, could be an ethereum wallet address in the future */
 export type PartyvotesConnectionArgs = {
  pagination?: InputMaybe<Pagination>;
@@ -3424,6 +3572,17 @@ export type PartyEdge = {
  node: Party;
 };

+/** A party reward locked balance. */
+export type PartyLockedBalance = {
+  __typename?: 'PartyLockedBalance';
+  /** The asset locked */
+  asset: Asset;
+  /** The amount locked */
+  balance: Scalars['String'];
+  /** Epoch in which the funds will be moved to the vesting balance */
+  untilEpoch: Scalars['Int'];
+};
+
 /**
 * All staking information related to a Party.
 * Contains the current recognised balance by the network and
@@ -3437,6 +3596,26 @@ export type PartyStake = {
  linkings?: Maybe<Array<StakeLinking>>;
 };

+/** A party's reward vesting balance. */
+export type PartyVestingBalance = {
+  __typename?: 'PartyVestingBalance';
+  /** The asset being vested */
+  asset: Asset;
+  /** The amount locked */
+  balance: Scalars['String'];
+};
+
+/** Summary of a party's reward vesting balances. */
+export type PartyVestingBalancesSummary = {
+  __typename?: 'PartyVestingBalancesSummary';
+  /** The epoch for which this summary is valid */
+  epoch?: Maybe<Scalars['Int']>;
+  /** The party's vesting balances */
+  lockedBalances?: Maybe<Array<PartyLockedBalance>>;
+  /** The party vesting balances */
+  vestingBalances?: Maybe<Array<PartyVestingBalance>>;
+};
+
 /** Create an order linked to an index rather than a price */
 export type PeggedOrder = {
  __typename?: 'PeggedOrder';
@@ -4163,6 +4342,10 @@ export type Query = {
  estimatePosition?: Maybe<PositionEstimate>;
  /** Query for historic ethereum key rotations */
  ethereumKeyRotations: EthereumKeyRotationsConnection;
+  /** Get fees statistics */
+  feesStats?: Maybe<FeesStats>;
+  /** Get fees statistics for a given party */
+  feesStatsForParty?: Maybe<Array<Maybe<FeesStatsForParty>>>;
  /** Funding payment for perpetual markets. */
  fundingPayments: FundingPaymentConnection;
  /**
@@ -4178,7 +4361,14 @@ export type Query = {
  keyRotationsConnection: KeyRotationConnection;
  /** The last block process by the blockchain */
  lastBlockHeight: Scalars['String'];
-  /** Get ledger entries by asset, market, party, account type, transfer type within the given date range. */
+  /**
+   * Get ledger entries by asset, market, party, account type, transfer type within the given date range.
+   * Note: The date range is restricted to any 5 days.
+   * If no start or end date is provided, only ledger entries from the last 5 days will be returned.
+   * If a start and end date are provided, but the end date is more than 5 days after the start date, only data up to 5 days after the start date will be returned.
+   * If a start date is provided but no end date, the end date will be set to 5 days after the start date.
+   * If no start date is provided, but the end date is, the start date will be set to 5 days before the end date.
+   */
  ledgerEntries: AggregatedLedgerEntriesConnection;
  /** List all active liquidity providers for a specific market */
  liquidityProviders?: Maybe<LiquidityProviderConnection>;
@@ -4216,6 +4406,8 @@ export type Query = {
  orderByReference: Order;
  /** Order versions (created via amendments if any) found by orderID */
  orderVersionsConnection?: Maybe<OrderConnection>;
+  /** List paid liquidity fees statistics */
+  paidLiquidityFees?: Maybe<PaidLiquidityFeesConnection>;
  /** One or more entities that are trading on the Vega network */
  partiesConnection?: Maybe<PartyConnection>;
  /** An entity that is trading on the Vega network */
@@ -4230,8 +4422,6 @@ export type Query = {
  protocolUpgradeProposals?: Maybe<ProtocolUpgradeProposalConnection>;
  /** Flag indicating whether the data-node is ready to begin the protocol upgrade */
  protocolUpgradeStatus?: Maybe<ProtocolUpgradeStatus>;
-  /** Get referrer fee and discount stats */
-  referralFeeStats?: Maybe<ReferralSetFeeStats>;
  referralSetReferees: ReferralSetRefereeConnection;
  /** Get referral set statistics */
  referralSetStats: ReferralSetStatsConnection;
@@ -4410,6 +4600,24 @@ export type QueryethereumKeyRotationsArgs = {
 };


+/** Queries allow a caller to read data and filter data via GraphQL. */
+export type QueryfeesStatsArgs = {
+  assetId?: InputMaybe<Scalars['ID']>;
+  epoch?: InputMaybe<Scalars['Int']>;
+  marketId?: InputMaybe<Scalars['ID']>;
+  partyId?: InputMaybe<Scalars['ID']>;
+};
+
+
+/** Queries allow a caller to read data and filter data via GraphQL. */
+export type QueryfeesStatsForPartyArgs = {
+  assetId?: InputMaybe<Scalars['ID']>;
+  fromEpoch?: InputMaybe<Scalars['Int']>;
+  partyId: Scalars['ID'];
+  toEpoch?: InputMaybe<Scalars['Int']>;
+};
+
+
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QueryfundingPaymentsArgs = {
  marketId?: InputMaybe<Scalars['ID']>;
@@ -4557,6 +4765,15 @@ export type QueryorderVersionsConnectionArgs = {
 };


+/** Queries allow a caller to read data and filter data via GraphQL. */
+export type QuerypaidLiquidityFeesArgs = {
+  assetId?: InputMaybe<Scalars['ID']>;
+  epoch?: InputMaybe<Scalars['Int']>;
+  marketId?: InputMaybe<Scalars['ID']>;
+  partyIDs?: InputMaybe<Array<Scalars['String']>>;
+};
+
+
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QuerypartiesConnectionArgs = {
  id?: InputMaybe<Scalars['ID']>;
@@ -4600,18 +4817,9 @@ export type QueryprotocolUpgradeProposalsArgs = {
 };


-/** Queries allow a caller to read data and filter data via GraphQL. */
-export type QueryreferralFeeStatsArgs = {
-  assetId?: InputMaybe<Scalars['ID']>;
-  epoch?: InputMaybe<Scalars['Int']>;
-  marketId?: InputMaybe<Scalars['ID']>;
-  referee?: InputMaybe<Scalars['ID']>;
-  referrer?: InputMaybe<Scalars['ID']>;
-};
-
-
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QueryreferralSetRefereesArgs = {
+  aggregationDays?: InputMaybe<Scalars['Int']>;
  id?: InputMaybe<Scalars['ID']>;
  pagination?: InputMaybe<Pagination>;
  referee?: InputMaybe<Scalars['ID']>;
@@ -4773,8 +4981,8 @@ export type ReferralProgram = {
  __typename?: 'ReferralProgram';
  /** Defined tiers in increasing order. First element will give Tier 1, second element will give Tier 2, etc. */
  benefitTiers: Array<BenefitTier>;
-  /** Timestamp as RFC3339, after which when the current epoch ends, the programs will end and benefits will be disabled. */
-  endOfProgramTimestamp: Scalars['String'];
+  /** Timestamp as Unix time in nanoseconds, after which when the current epoch ends, the program will end and benefits will be disabled. */
+  endOfProgramTimestamp: Scalars['Timestamp'];
  /** Unique ID generated from the proposal that created this program. */
  id: Scalars['ID'];
  /**
@@ -4820,25 +5028,6 @@ export type ReferralSetEdge = {
  node: ReferralSet;
 };

-/** Referral rewards and discounts that have been applied on a specific market/asset up to the given epoch. */
-export type ReferralSetFeeStats = {
-  __typename?: 'ReferralSetFeeStats';
-  /** The settlement asset of the market. */
-  assetId: Scalars['String'];
-  /** The epoch for which these stats were valid. */
-  epoch: Scalars['Int'];
-  /** The market the fees were paid in */
-  marketId: Scalars['String'];
-  /** The total referral discounts applied to all referee taker fees */
-  refereesDiscountApplied: Array<PartyAmount>;
-  /** The total referral rewards generated by all referee taker fees. */
-  referrerRewardsGenerated: Array<ReferrerRewardsGenerated>;
-  /** The total referral rewards paid to the referrer of the referral set. */
-  totalRewardsPaid: Array<PartyAmount>;
-  /** The total volume discounts applied to all referee taker fees */
-  volumeDiscountApplied: Array<PartyAmount>;
-};
-
 /** Data relating to referees that have joined a referral set */
 export type ReferralSetReferee = {
  __typename?: 'ReferralSetReferee';
@@ -4850,6 +5039,10 @@ export type ReferralSetReferee = {
  refereeId: Scalars['ID'];
  /** Unique ID of the referral set the referee joined. */
  referralSetId: Scalars['ID'];
+  /** Total rewards generated from the referee over the aggregation period, default is 30 days. */
+  totalRefereeGeneratedRewards: Scalars['String'];
+  /** Total notional volume of the referee's aggressive trades over the aggregation period, default is 30 days. */
+  totalRefereeNotionalTakerVolume: Scalars['String'];
 };

 /** Connection type for retrieving cursor-based paginated information about the referral set referees */
@@ -4926,6 +5119,8 @@ export type Reward = {
  asset: Asset;
  /** Epoch for which this reward was distributed */
  epoch: Epoch;
+  /** The epoch when the reward is released */
+  lockedUntilEpoch: Epoch;
  /** The market ID for which this reward is paid if any */
  marketId: Scalars['ID'];
  /** Party receiving the reward */
@@ -6151,8 +6346,8 @@ export type UpdateReferralProgram = {
  __typename?: 'UpdateReferralProgram';
  /** Defined tiers in increasing order. First element will give Tier 1, second element will give Tier 2, etc. */
  benefitTiers: Array<BenefitTier>;
-  /** Timestamp as RFC3339, after which when the current epoch ends, the programs will end and benefits will be disabled. */
-  endOfProgramTimestamp: Scalars['String'];
+  /** Timestamp as Unix time in nanoseconds, after which when the current epoch ends, the program will end and benefits will be disabled. */
+  endOfProgramTimestamp: Scalars['Timestamp'];
  /**
   * Defined staking tiers in increasing order. First element will give Tier 1,
   * second element will give Tier 2, and so on. Determines the level of
@@ -6190,7 +6385,7 @@ export type UpdateVolumeDiscountProgram = {
  __typename?: 'UpdateVolumeDiscountProgram';
  /** The benefit tiers for the program */
  benefitTiers: Array<VolumeBenefitTier>;
-  /** The end time of the program */
+  /** Timestamp as Unix time in nanoseconds, after which program ends. */
  endOfProgramTimestamp: Scalars['Timestamp'];
  /** The window length to consider for the volume discount program */
  windowLength: Scalars['Int'];
@@ -6219,7 +6414,7 @@ export type VolumeDiscountProgram = {
  __typename?: 'VolumeDiscountProgram';
  /** Defined tiers in increasing order. First element will give Tier 1, second element will give Tier 2, etc. */
  benefitTiers: Array<VolumeBenefitTier>;
-  /** Timestamp as Unix time in nanoseconds, after which when the current epoch ends, the programs will end and benefits will be disabled. */
+  /** Timestamp as Unix time in nanoseconds, after which when the current epoch ends, the program will end and benefits will be disabled. */
  endOfProgramTimestamp: Scalars['Timestamp'];
  /** Timestamp as RFC3339Nano when the program ended. If present, the current program has ended and no program is currently running. */
  endedAt?: Maybe<Scalars['Timestamp']>;
@@ -53,7 +53,10 @@ export const Tooltip = ({
              className={tooltipContentClasses}
              sideOffset={sideOffset}
            >
-              <div className="relative z-0" data-testid="tooltip-content">
+              <div
+                className="relative z-0 break-words"
+                data-testid="tooltip-content"
+              >
                {description}
              </div>
            </Content>
Author	SHA1	Message	Date
Madalina Raicu	56d42f3570	chore: rename asset unit to base quote	2023-10-25 12:35:53 +01:00
Madalina Raicu	d0004240c2	fix: quote base unit for size	2023-10-25 12:13:31 +01:00
Edd	c7d0025b4f	feat(explorer): add determinsitic id to transfer tx (#5112 )	2023-10-24 16:48:17 +01:00
Art	6c9272cd53	chore(trading): i18n-friendly referrals (#5113 )	2023-10-24 17:43:33 +02:00
m.rayandasiaznik	82fb29d541	feat(trading): add liquidity provision new SLA parameters to liquidity tables (#5032 ) Co-authored-by: asiaznik <artur@vegaprotocol.io>	2023-10-24 10:32:07 +01:00
Art	43cd170c77	feat(trading): referrals (Mk2), referrals stats, apply preview (#5021 )	2023-10-23 16:57:18 +02:00