feat(trading): copy apply referral link from code tile

.eslintrc.json

@@ -77,7 +77,6 @@
             "fixStyle": "inline-type-imports"
           }
         ],
-        "@typescript-eslint/no-useless-constructor": 0,
         "curly": ["error", "multi-line"]
       }
     },

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

@@ -205,7 +205,7 @@ jobs:
       # run tests
       #----------------------------------------------
       - name: Run tests
-        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 4 --dist loadfile --durations=15
+        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 6 --dist loadfile --durations=15
         working-directory: apps/trading/e2e
       #----------------------------------------------
       # upload traces
@@ -215,7 +215,7 @@ jobs:
         if: always()
         with:
           name: playwright-trace
-          path: apps/trading/e2e/traces/
+          path: ./traces/
           retention-days: 15
       #----------------------------------------------
       #  -----  upload logs  -----

.gitignore

@@ -59,4 +59,5 @@ apps/trading/e2e/logs/
 apps/trading/e2e/.pytest_cache/
 apps/trading/e2e/traces/
 
-.nx/
+.nx/cache
+

.husky/pre-commit

@@ -1,8 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Auto-format all files
-yarn nx format:write
-
 # Lint all staged files
 yarn lint-staged

.husky/pre-push

@@ -1,8 +1,8 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Lint all staged files - this brings more value as pre-commit
-# yarn nx format:check
+# Lint all staged files
+yarn nx format:check
 
 # Test all projects with changes
-# yarn nx affected -t test --exclude trading
+yarn nx affected -t test --exclude trading

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

@@ -12,8 +12,7 @@ import { type VegaICellRendererParams } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { useNavigate } from 'react-router-dom';
-import { type ColDef } from 'ag-grid-community';
-import type { RowClickedEvent } from 'ag-grid-community';
+import { type RowClickedEvent, ColDef } from 'ag-grid-community';
 
 type AssetsTableProps = {
   data: AssetFieldsFragment[] | null;

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -6,7 +6,6 @@ import { Time } from '../time';
 import { sideText, statusText, tifFull, tifShort } from './lib/order-labels';
 import SizeInMarket from '../size-in-market/size-in-market';
 import { TxOrderPeggedReference } from '../txs/details/order/tx-order-peg';
-import { OrderTypeMapping } from '@vegaprotocol/types';
 
 export interface DeterministicOrderDetailsProps {
   id: string;
@@ -70,7 +69,7 @@ const DeterministicOrderDetails = ({
             <span className="mx-5 text-base">@</span>
             <PriceInMarket price={o.price} marketId={o.market.id} />
           </h2>
-          <p className="text-gray-400 dark:text-gray-600">
+          <p className="text-gray-200">
             In <MarketLink id={o.market.id} /> at <Time date={o.createdAt} />.
           </p>
           {o.peggedOrder ? (
@@ -84,12 +83,13 @@ const DeterministicOrderDetails = ({
               />
             </p>
           ) : null}
+
           {o.reference ? (
             <p className="text-gray-500 mt-4">
               <span>{t('Reference')}</span>: {o.reference}
             </p>
           ) : null}
-          <div className="grid md:grid-cols-5 gap-x-6 mt-4">
+          <div className="grid md:grid-cols-4 gap-x-6 mt-4">
             <div className="mb-12 md:mb-0">
               <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Status')}
@@ -114,16 +114,6 @@ const DeterministicOrderDetails = ({
                 {o.version}
               </h5>
             </div>
-            {o.type ? (
-              <div className="">
-                <h2 className="text-2xl font-bold text-dark mb-4">
-                  {t('Type')}
-                </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
-                  {OrderTypeMapping[o.type]}
-                </h5>
-              </div>
-            ) : null}
           </div>
         </div>
       </div>

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

@@ -8,8 +8,7 @@ import {
   type VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { type ColDef } from 'ag-grid-community';
-import type { RowClickedEvent } from 'ag-grid-community';
+import { type RowClickedEvent, ColDef } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {

apps/explorer/src/app/components/signature/signature.tsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import type { BlockExplorerTransactionResult } from '../../routes/types/block-explorer-response';
-import {
-  CopyWithTooltip,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-
-interface SignatureProps {
-  signature: BlockExplorerTransactionResult['signature'];
-}
-
-const valueClass =
-  'font-mono px-2.5 py-0.5 text-xs max-w-[200px] cursor-pointer';
-const valueClassClosed = 'text-ellipsis overflow-hidden';
-const valueClassOpen = 'break-words text-left';
-
-/**
- * Viewer component for a vega signature. Featuers copy and pasting, truncation
- *
- * @param signature
- */
-export const Signature = ({ signature }: SignatureProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  if (!signature || !signature.value || !signature.version || !signature.algo) {
-    return null;
-  }
-
-  return (
-    <div className="inline-flex border rounded signature-component relative pr-[20px]">
-      <span
-        className="bg-gray-100 px-2.5 py-0.5 text-xs text-gray-500 select-none cursor-default"
-        title={`Version ${signature.version}`}
-      >
-        {signature.algo}
-      </span>
-      <div
-        className={
-          isOpen
-            ? `${valueClass} ${valueClassOpen}`
-            : `${valueClass} ${valueClassClosed}`
-        }
-      >
-        <CopyWithTooltip text={signature.value}>
-          <span title={signature.value}>{signature.value}</span>
-        </CopyWithTooltip>
-      </div>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="absolute top-[-3px] right-0 pr-2"
-        title={t('Show full signature')}
-      >
-        <VegaIcon name={isOpen ? VegaIconNames.EYE_OFF : VegaIconNames.EYE} />
-      </button>
-    </div>
-  );
-};

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

@@ -9,7 +9,6 @@ import { Time } from '../../../time';
 import { ChainResponseCode } from '../chain-response-code/chain-reponse.code';
 import { TxDataView } from '../../tx-data-view';
 import Hash from '../../../links/hash';
-import { Signature } from '../../../signature/signature';
 
 interface TxDetailsSharedProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -76,12 +75,6 @@ export const TxDetailsShared = ({
           <BlockLink height={height} />
         </TableCell>
       </TableRow>
-      <TableRow modifier="bordered">
-        <TableCell {...sharedHeaderProps}>{t('Signature')}</TableCell>
-        <TableCell>
-          <Signature signature={txData.signature} />
-        </TableCell>
-      </TableRow>
       <TableRow modifier="bordered">
         <TableCell {...sharedHeaderProps}>{t('Time')}</TableCell>
         <TableCell>

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

@@ -80,12 +80,6 @@ export function getLabelForOrderType(
     if (command.orderSubmission.icebergOpts) {
       return 'Iceberg';
     }
-    if (command.orderSubmission.type === 'TYPE_MARKET') {
-      return 'Market order';
-    }
-    if (command.orderSubmission.type === 'TYPE_LIMIT') {
-      return 'Limit order';
-    }
   }
   return 'Order';
 }

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

@@ -98,8 +98,6 @@ describe('TxDetailsTransfer', () => {
       },
     },
     signature: {
-      version: '1',
-      algo: 'vega/ed25519',
       value:
         '610c2e196a7d4fed4413b9e82af267b1ff3e30e943df3a3d28096fd60604d430d752fbaf6dd4f84d496be78885bb6118f40560bff7832c06bd7a3d67b718b700',
     },

apps/explorer/src/app/components/txs/txs-infinite-list.spec.tsx

@@ -20,8 +20,6 @@ const generateTxs = (number: number): BlockExplorerTransactionResult[] => {
       '4b782482f587d291e8614219eb9a5ee9280fa2c58982dee71d976782a9be1964',
     type: 'Submit Order',
     signature: {
-      version: '1',
-      algo: 'vega/ed25519',
       value: '123',
     },
     code: 0,

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

@@ -23,8 +23,6 @@ const txData: BlockExplorerTransactionResult = {
   type: 'type',
   command: {} as ValidatorHeartbeat,
   signature: {
-    version: '1',
-    algo: 'vega/ed25519',
     value: '123',
   },
 };

apps/explorer/src/app/routes/types/block-explorer-response.d.ts

@@ -11,8 +11,6 @@ export interface BlockExplorerTransactionResult {
   cursor: string;
   command: components['schemas']['blockexplorerv1transaction'];
   signature: {
-    version: string;
-    algo: string;
     value: string;
   };
   error?: string;

apps/governance/src/components/heading/heading.tsx

@@ -23,13 +23,10 @@ export const Heading = ({
       })}
     >
       <h1
-        className={classNames(
-          'font-alpha calt text-5xl [word-break:break-word]',
-          {
-            'mt-0': !marginTop,
-            'mb-0': !marginBottom,
-          }
-        )}
+        className={classNames('font-alpha calt text-5xl break-words', {
+          'mt-0': !marginTop,
+          'mb-0': !marginBottom,
+        })}
       >
         {title}
       </h1>

apps/governance/src/contexts/contracts/contracts-provider.tsx

@@ -49,8 +49,12 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
             ? activeProvider
             : defaultProvider;
 
-        if (account && provider && typeof provider.getSigner === 'function') {
-          signer = provider.getSigner(account);
+        if (
+          account &&
+          activeProvider &&
+          typeof activeProvider.getSigner === 'function'
+        ) {
+          signer = provider.getSigner();
         }
 
         const tokenVestingAddress =

apps/governance/src/routes/proposals/components/proposal-asset-details/proposal-asset-details.tsx

@@ -7,10 +7,8 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 
 export const ProposalAssetDetails = ({
   asset,
-  originalAsset,
 }: {
   asset: AssetFieldsFragment;
-  originalAsset?: AssetFieldsFragment;
 }) => {
   const { t } = useTranslation();
   const [showAssetDetails, setShowAssetDetails] = useState(false);
@@ -29,7 +27,6 @@ export const ProposalAssetDetails = ({
         <div className="mb-10 pb-4">
           <AssetDetailsTable
             asset={asset}
-            originalAsset={originalAsset}
             omitRows={[
               AssetDetail.STATUS,
               AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,

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

@@ -54,8 +54,8 @@ export const ProposalReferralProgramDetails = ({
     return null;
   }
 
-  const benefitTiers = proposal?.terms?.change?.benefitTiers.slice();
-  const stakingTiers = proposal?.terms?.change?.stakingTiers.slice();
+  const benefitTiers = proposal?.terms?.change?.benefitTiers;
+  const stakingTiers = proposal?.terms?.change?.stakingTiers;
   const windowLength = proposal?.terms?.change?.windowLength;
   const endOfProgramTimestamp = proposal?.terms?.change?.endOfProgram;
 

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

@@ -65,13 +65,10 @@ export const Proposal = ({
     ? removePaginationWrapper(assetData.assetsConnection?.edges)[0]
     : undefined;
 
-  const originalAsset = asset;
-
   if (proposal.terms.change.__typename === 'UpdateAsset' && asset) {
     asset = {
       ...asset,
       quantum: proposal.terms.change.quantum,
-      source: { ...asset.source },
     };
 
     if (asset.source.__typename === 'ERC20') {
@@ -231,7 +228,7 @@ export const Proposal = ({
         proposal.terms.change.__typename === 'UpdateAsset') &&
         asset && (
           <div className="mb-4">
-            <ProposalAssetDetails asset={asset} originalAsset={originalAsset} />
+            <ProposalAssetDetails asset={asset} />
           </div>
         )}
 

apps/governance/src/styles.css

@@ -104,10 +104,6 @@
   list-style: circle;
 }
 
-.react-markdown-container a {
-  text-decoration: underline;
-}
-
 .jsondiffpatch-delta,
 .jsondiffpatch-delta pre {
   font-family: 'Roboto Mono', monospace !important;

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -0,0 +1,182 @@
+import * as Schema from '@vegaprotocol/types';
+
+const expirtyTooltip = 'expiry-tooltip';
+const externalLink = 'external-link';
+const itemHeader = 'item-header';
+const itemValue = 'item-value';
+const link = 'link';
+const liquidityLink = 'view-liquidity-link';
+const liquiditySupplied = 'liquidity-supplied';
+const liquiditySuppliedTooltip = 'liquidity-supplied-tooltip';
+const marketChange = 'market-change';
+const marketExpiry = 'market-expiry';
+const marketMode = 'market-trading-mode';
+const marketName = 'header-title';
+const marketPrice = 'market-price';
+const marketSettlement = 'market-settlement-asset';
+const marketSummaryBlock = 'header-summary';
+const marketVolume = 'market-volume';
+const percentageValue = 'price-change-percentage';
+const priceChangeValue = 'price-change';
+const tradingModeTooltip = 'trading-mode-tooltip';
+
+describe('Market trading page', () => {
+  before(() => {
+    cy.clearAllLocalStorage();
+    cy.mockTradingPage(
+      Schema.MarketState.STATE_ACTIVE,
+      Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+      Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
+    );
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+    cy.visit('/#/markets/market-0');
+    cy.wait('@MarketData');
+    cy.getByTestId(marketSummaryBlock).should('be.visible');
+  });
+
+  describe('Market summary', { tags: '@smoke' }, () => {
+    // 7002-SORD-001
+    // 7002-SORD-002
+    it('must display market name', () => {
+      // 6002-MDET-001
+      cy.getByTestId(marketName).should('not.be.empty');
+    });
+
+    it('must see market expiry', () => {
+      // 6002-MDET-002
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketExpiry).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Expiry');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market price', () => {
+      // 6002-MDET-003
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketPrice).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Mark Price');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market change', () => {
+      // 6002-MDET-004
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketChange).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Change (24h)');
+          cy.getByTestId(percentageValue).should('not.be.empty');
+          cy.getByTestId(priceChangeValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market volume', () => {
+      // 6002-MDET-005
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketVolume).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Volume (24h)');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market settlement', () => {
+      // 6002-MDET-008
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketSettlement).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Settlement asset');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+  });
+
+  describe('Market tooltips', { tags: '@smoke' }, () => {
+    it('should see expiry tooltip', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketExpiry).within(() => {
+          cy.getByTestId(itemValue)
+            .should('have.text', 'Not time-based')
+            .realHover();
+        });
+      });
+      cy.getByTestId(expirtyTooltip)
+        .eq(0)
+        .should(
+          'contain.text',
+          'This market expires when triggered by its oracle, not on a set date.'
+        )
+        .within(() => {
+          cy.getByTestId(link)
+            .should('have.attr', 'href')
+            .and('include', Cypress.env('EXPLORER_URL'));
+        });
+    });
+
+    it('should see trading conditions tooltip', () => {
+      const toolTipLabel = 'tooltip-label';
+      const toolTipValue = 'tooltip-value';
+      const auctionToolTipLabels = [
+        'Auction start',
+        'Est. auction end',
+        'Target liquidity',
+        'Current liquidity',
+        'Est. uncrossing price',
+        'Est. uncrossing vol',
+      ];
+
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketMode).within(() => {
+          cy.getByTestId(itemValue)
+            .should('contain.text', 'Monitoring auction')
+            .and('contain.text', 'liquidity')
+            .realHover();
+        });
+      });
+      cy.getByTestId(tradingModeTooltip)
+        .should(
+          'contain.text',
+          'This market is in auction until it reaches sufficient liquidity.'
+        )
+        .eq(0)
+        .within(() => {
+          cy.getByTestId(externalLink)
+            .should('have.attr', 'href')
+            .and('include', Cypress.env('TRADING_MODE_LINK'));
+
+          for (let i = 0; i < 6; i++) {
+            cy.getByTestId(toolTipLabel)
+              .eq(i)
+              .should('have.text', auctionToolTipLabels[i]);
+            cy.getByTestId(toolTipValue).eq(i).should('not.be.empty');
+          }
+        });
+    });
+
+    it('should see liquidity supplied tooltip', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(liquiditySupplied).within(() => {
+          cy.getByTestId(itemValue).realHover();
+        });
+      });
+      cy.getByTestId(liquiditySuppliedTooltip)
+        .should('contain.text', 'Supplied stake')
+        .and('contain.text', 'Target stake')
+        .first()
+        .within(() => {
+          cy.getByTestId(liquidityLink).should(
+            'have.text',
+            'View liquidity provision table'
+          );
+          cy.getByTestId(externalLink).should(
+            'have.text',
+            'Learn about providing liquidity'
+          );
+        });
+    });
+  });
+});

apps/trading-e2e/src/integration/vega-wallet-prompt.cy.ts

@@ -0,0 +1,103 @@
+import * as Schema from '@vegaprotocol/types';
+import type { OrderSubmission } from '@vegaprotocol/wallet';
+import { createOrder } from '../support/create-order';
+
+describe(
+  'vega wallet - prompt',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    describe('must submit order', { tags: '@smoke' }, () => {
+      // 7002-SORD-039
+      beforeEach(() => {
+        cy.setVegaWallet();
+        cy.mockTradingPage();
+        cy.mockSubscription();
+        cy.visit('/#/markets/market-0');
+        cy.wait('@Markets');
+      });
+
+      it('must see a prompt to check connected vega wallet to approve transaction', () => {
+        // 0003-WTXN-002
+        cy.mockVegaWalletTransaction(1000);
+        const order: OrderSubmission = {
+          marketId: 'market-0',
+          type: Schema.OrderType.TYPE_MARKET,
+          side: Schema.Side.SIDE_BUY,
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+          size: '100',
+        };
+        createOrder(order);
+        cy.getByTestId('toast-content').should(
+          'contain.text',
+          'Please go to your Vega wallet application and approve or reject the transaction.'
+        );
+      });
+
+      it('must show error returned by wallet ', () => {
+        // 0003-WTXN-009
+        // 0003-WTXN-011
+        // 0002-WCON-016
+        // 0003-WTXN-008
+
+        //trigger error from the wallet
+        cy.intercept('POST', 'http://localhost:1789/api/v2/requests', (req) => {
+          req.on('response', (res) => {
+            res.send({
+              jsonrpc: '2.0',
+              id: '1',
+            });
+          });
+        });
+
+        const order: OrderSubmission = {
+          marketId: 'market-0',
+          type: Schema.OrderType.TYPE_MARKET,
+          side: Schema.Side.SIDE_BUY,
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+          size: '100',
+        };
+        createOrder(order);
+        cy.getByTestId('toast-content').should(
+          'contain.text',
+          'The connection to your Vega Wallet has been lost.'
+        );
+        cy.getByTestId('connect-vega-wallet').click();
+        cy.getByTestId('dialog-content').should('be.visible');
+      });
+
+      it('must see that the order was rejected by the connected wallet', () => {
+        // 0003-WTXN-007
+
+        //trigger rejection error from the wallet
+        cy.intercept('POST', 'http://localhost:1789/api/v2/requests', (req) => {
+          req.alias = 'client.send_transaction';
+          req.reply({
+            statusCode: 400,
+            body: {
+              jsonrpc: '2.0',
+              error: {
+                code: 3001,
+                data: 'the user rejected the wallet connection',
+                message: 'User error',
+              },
+              id: '0',
+            },
+          });
+        });
+
+        const order: OrderSubmission = {
+          marketId: 'market-0',
+          type: Schema.OrderType.TYPE_MARKET,
+          side: Schema.Side.SIDE_BUY,
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+          size: '100',
+        };
+        createOrder(order);
+        cy.getByTestId('toast-content').should(
+          'contain.text',
+          'Error occurredthe user rejected the wallet connection'
+        );
+      });
+    });
+  }
+);

apps/trading-e2e/src/integration/wallet-eth.cy.ts

@@ -26,6 +26,18 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
     cy.getByTestId('tab-deposits').should('not.be.empty');
   });
 
+  it.skip('should see QR code modal for WalletConnect', () => {
+    // 0004-EWAL-003
+
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('deposit-button').click();
+    cy.getByTestId('connect-eth-wallet-btn').click();
+    cy.getByTestId('web3-connector-list').should('exist');
+    cy.getByTestId('web3-connector-WalletConnect').click();
+    // testing if exists rather than visible because of the long loading time
+    cy.get('#w3m-modal').should('exist');
+  });
+
   it('able to disconnect eth wallet', () => {
     // 0004-EWAL-004
     // 0004-EWAL-005

apps/trading-e2e/src/integration/wallet-vega.cy.ts

@@ -0,0 +1,91 @@
+import {
+  mockConnectWallet,
+  mockConnectWalletWithUserError,
+} from '@vegaprotocol/cypress';
+
+const connectVegaBtn = 'connect-vega-wallet';
+const manageVegaBtn = 'manage-vega-wallet';
+const dialogContent = 'dialog-content';
+
+describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
+  beforeEach(() => {
+    // Using portfolio page as it requires vega wallet connection
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+    cy.visit('/#/portfolio');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+  });
+
+  it('can connect', () => {
+    // 0002-WCON-002
+    // 0002-WCON-005
+    // 0002-WCON-007
+    // 0002-WCON-009
+
+    mockConnectWallet();
+    cy.getByTestId(connectVegaBtn).click();
+    cy.getByTestId('connectors-list')
+      .find('[data-testid="connector-jsonRpc"]')
+      .click();
+    cy.wait('@walletReq');
+    cy.getByTestId(dialogContent).should(
+      'contain.text',
+      'Approve the connection from your Vega wallet app.'
+    );
+    cy.getByTestId(dialogContent).should('not.exist');
+    cy.getByTestId(manageVegaBtn).should('exist');
+  });
+
+  it('can not connect', () => {
+    // 0002-WCON-002
+    // 0002-WCON-005
+    // 0002-WCON-007
+    // 0002-WCON-015
+
+    mockConnectWalletWithUserError();
+    cy.getByTestId(connectVegaBtn).click();
+    cy.getByTestId('connectors-list')
+      .find('[data-testid="connector-jsonRpc"]')
+      .click();
+    cy.getByTestId('dialog-content')
+      .should('contain.text', 'User error')
+      .and('contain.text', 'the user rejected the wallet connection');
+  });
+
+  it('can change selected public key and disconnect', () => {
+    // 0002-WCON-022
+    // 0002-WCON-023
+    // 0002-WCON-025
+    // 0002-WCON-026
+    // 0002-WCON-021
+    // 0002-WCON-027
+    // 0002-WCON-030
+    // 0002-WCON-029
+    // 0002-WCON-008
+    // 0002-WCON-035
+    // 0002-WCON-014
+    // 0002-WCON-010
+    // 0003-WTXN-004
+
+    mockConnectWallet();
+    const key2 = Cypress.env('VEGA_PUBLIC_KEY2');
+    const truncatedKey2 = Cypress.env('TRUNCATED_VEGA_PUBLIC_KEY2');
+    cy.connectVegaWallet();
+    cy.getByTestId('manage-vega-wallet').click();
+    cy.getByTestId('keypair-list').should('exist');
+    cy.getByTestId(`key-${key2}`).should('contain.text', truncatedKey2);
+    cy.getByTestId(`key-${key2}`)
+      .find('[data-testid="copy-vega-public-key"]')
+      .should('be.visible');
+    cy.get(`[data-testid="key-${key2}"] > .mr-2`).click();
+    cy.getByTestId('keypair-list')
+      .find('[data-state="checked"]')
+      .should('be.visible');
+    cy.getByTestId('disconnect').click();
+    cy.getByTestId('connect-vega-wallet').should('exist');
+    cy.getByTestId('manage-vega-wallet').should('not.exist');
+    cy.getByTestId('connect-vega-wallet').click();
+    cy.contains('Enter a custom wallet location');
+  });
+});

apps/trading/.env.mainnet

@@ -22,9 +22,9 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
+# NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
-NX_REFERRALS=true
-NX_DISABLE_CLOSE_POSITION=true
+NX_REFERRALS=false
 
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket

apps/trading/.env.testnet

@@ -23,6 +23,7 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
+# NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
 

apps/trading/client-pages/fees/fees.tsx

@@ -1,27 +1,12 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
-import { ErrorBoundary } from '../../components/error-boundary';
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
-import { usePageTitleStore } from '../../stores';
 
 export const Fees = () => {
   const t = useT();
-  const title = t('Fees');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
-
   return (
-    <ErrorBoundary feature="fees">
-      <div className="container p-4 mx-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
-        <FeesContainer />
-      </div>
-    </ErrorBoundary>
+    <div className="container p-4 mx-auto">
+      <h1 className="px-4 pb-4 text-2xl">{t('Fees')}</h1>
+      <FeesContainer />
+    </div>
   );
 };

apps/trading/client-pages/home/home.tsx

@@ -1,11 +1,34 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
-import { useNavigateToLastMarket } from '../../lib/hooks/use-navigate-to-last-market';
+import { useGlobalStore } from '../../stores';
+import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';
+import { Links } from '../../lib/links';
 
 // The home pages only purpose is to redirect to the users last market,
 // the top traded if they are new, or fall back to the list of markets.
 // Thats why we just render a loader here
 export const Home = () => {
-  useNavigateToLastMarket();
+  const navigate = useNavigate();
+  const { data } = useTopTradedMarkets();
+  const marketId = useGlobalStore((store) => store.marketId);
+
+  useEffect(() => {
+    if (marketId) {
+      navigate(Links.MARKET(marketId), {
+        replace: true,
+      });
+    } else if (data) {
+      const marketDataId = data[0]?.id;
+      if (marketDataId) {
+        navigate(Links.MARKET(marketDataId), {
+          replace: true,
+        });
+      } else {
+        navigate(Links.MARKETS());
+      }
+    }
+  }, [marketId, data, navigate]);
 
   return (
     <Splash>

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -59,28 +58,19 @@ export const LiquidityViewContainer = ({
             name={t('My liquidity provision')}
             hidden={!pubKey}
           >
-            <ErrorBoundary feature="liquidity-party">
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ partyId: pubKey || undefined }}
-              />
-            </ErrorBoundary>
+            <LiquidityContainer
+              marketId={marketId}
+              filter={{ partyId: pubKey || undefined }}
+            />
           </Tab>
           <Tab id={LiquidityTabs.Active} name={t('Active')}>
-            <ErrorBoundary feature="liquidity-active">
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ active: true }}
-              />
-            </ErrorBoundary>
+            <LiquidityContainer marketId={marketId} filter={{ active: true }} />
           </Tab>
           <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
-            <ErrorBoundary feature="liquidity-inactive">
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ active: false }}
-              />
-            </ErrorBoundary>
+            <LiquidityContainer
+              marketId={marketId}
+              filter={{ active: false }}
+            />
           </Tab>
         </Tabs>
       </div>

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

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

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
-import { Link, Loader, Splash } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink, Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { getAsset, marketDataProvider, useMarket } from '@vegaprotocol/markets';
 import { useGlobalStore, usePageTitleStore } from '../../stores';
 import { TradeGrid } from './trade-grid';
@@ -117,13 +117,12 @@ export const MarketPage = () => {
               defaults="Please choose another market from the <0>market list</0>"
               ns={ns}
               components={[
-                <Link
-                  className="underline underline-offset-4 "
+                <ExternalLink
                   onClick={() => navigate(Links.MARKETS())}
                   key="link"
                 >
                   market list
-                </Link>,
+                </ExternalLink>,
               ]}
             />
           </p>

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

@@ -20,7 +20,6 @@ import {
 } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 interface TradeGridProps {
   market: Market | null;
@@ -63,38 +62,28 @@ const MainGrid = memo(
                     name={t('Chart')}
                     menu={<TradingViews.candles.menu />}
                   >
-                    <ErrorBoundary feature="chart">
-                      <TradingViews.candles.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.candles.component marketId={marketId} />
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
-                    <ErrorBoundary feature="depth">
-                      <TradingViews.depth.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.depth.component marketId={marketId} />
                   </Tab>
                   <Tab id="liquidity" name={t('Liquidity')}>
-                    <ErrorBoundary feature="liquidity">
-                      <TradingViews.liquidity.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.liquidity.component marketId={marketId} />
                   </Tab>
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
                     <Tab id="funding-history" name={t('Funding history')}>
-                      <ErrorBoundary feature="funding-history">
-                        <TradingViews.funding.component marketId={marketId} />
-                      </ErrorBoundary>
+                      <TradingViews.funding.component marketId={marketId} />
                     </Tab>
                   ) : null}
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
                     <Tab id="funding-payments" name={t('Funding payments')}>
-                      <ErrorBoundary feature="funding-payments">
-                        <TradingViews.fundingPayments.component
-                          marketId={marketId}
-                        />
-                      </ErrorBoundary>
+                      <TradingViews.fundingPayments.component
+                        marketId={marketId}
+                      />
                     </Tab>
                   ) : null}
                 </Tabs>
@@ -107,14 +96,10 @@ const MainGrid = memo(
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
                   <Tab id="orderbook" name={t('Orderbook')}>
-                    <ErrorBoundary feature="orderbook">
-                      <TradingViews.orderbook.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.orderbook.component marketId={marketId} />
                   </Tab>
                   <Tab id="trades" name={t('Trades')}>
-                    <ErrorBoundary feature="trades">
-                      <TradingViews.trades.component marketId={marketId} />
-                    </ErrorBoundary>
+                    <TradingViews.trades.component marketId={marketId} />
                   </Tab>
                 </Tabs>
               </TradeGridChild>
@@ -133,43 +118,31 @@ const MainGrid = memo(
                 name={t('Positions')}
                 menu={<TradingViews.positions.menu />}
               >
-                <ErrorBoundary feature="positions">
-                  <TradingViews.positions.component />
-                </ErrorBoundary>
+                <TradingViews.positions.component />
               </Tab>
               <Tab
                 id="open-orders"
                 name={t('Open')}
                 menu={<TradingViews.activeOrders.menu />}
               >
-                <ErrorBoundary feature="activeOrders">
-                  <TradingViews.activeOrders.component />
-                </ErrorBoundary>
+                <TradingViews.activeOrders.component />
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <ErrorBoundary feature="closedOrders">
-                  <TradingViews.closedOrders.component />
-                </ErrorBoundary>
+                <TradingViews.closedOrders.component />
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <ErrorBoundary feature="rejectedOrders">
-                  <TradingViews.rejectedOrders.component />
-                </ErrorBoundary>
+                <TradingViews.rejectedOrders.component />
               </Tab>
               <Tab
                 id="orders"
                 name={t('All')}
                 menu={<TradingViews.orders.menu />}
               >
-                <ErrorBoundary feature="orders">
-                  <TradingViews.orders.component />
-                </ErrorBoundary>
+                <TradingViews.orders.component />
               </Tab>
               {FLAGS.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
-                  <ErrorBoundary feature="stop-orders">
-                    <TradingViews.stopOrders.component />
-                  </ErrorBoundary>
+                  <TradingViews.stopOrders.component />
                 </Tab>
               ) : null}
               <Tab id="fills" name={t('Fills')}>
@@ -180,11 +153,7 @@ const MainGrid = memo(
                 name={t('Collateral')}
                 menu={<TradingViews.collateral.menu />}
               >
-                <ErrorBoundary feature="collateral">
-                  <TradingViews.collateral.component
-                    pinnedAsset={pinnedAsset}
-                  />
-                </ErrorBoundary>
+                <TradingViews.collateral.component pinnedAsset={pinnedAsset} />
               </Tab>
             </Tabs>
           </TradeGridChild>

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

@@ -1,20 +1,19 @@
-import { type PinnedAsset } from '@vegaprotocol/accounts';
-import { type Market } from '@vegaprotocol/markets';
+import type { PinnedAsset } from '@vegaprotocol/accounts';
+import type { Market } from '@vegaprotocol/markets';
 import { OracleBanner } from '@vegaprotocol/markets';
+import type { TradingView } from './trade-views';
+import { TradingViews } from './trade-views';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { FLAGS } from '@vegaprotocol/environment';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useT } from '../../lib/use-t';
 import {
   MarketSuccessorBanner,
   MarketSuccessorProposalBanner,
   MarketTerminationBanner,
 } from '../../components/market-banner';
-import { ErrorBoundary } from '../../components/error-boundary';
-import { type TradingView } from './trade-views';
-import { TradingViews } from './trade-views';
+import { FLAGS } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
 interface TradePanelsProps {
   market: Market | null;
@@ -35,11 +34,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
 
     // Watch out here, we don't know what component is being rendered
     // so watch out for clashes in props
-    return (
-      <ErrorBoundary feature={view}>
-        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
-      </ErrorBoundary>
-    );
+    return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
   };
 
   const renderMenu = () => {

apps/trading/client-pages/markets/closed.spec.tsx

@@ -1,5 +1,4 @@
 import { act, render, screen, waitFor, within } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { Closed } from './closed';
 import { MarketStateMapping, PropertyKeyType } from '@vegaprotocol/types';
@@ -27,7 +26,6 @@ import {
   marketsDataQuery,
   createMarketsDataFragment,
 } from '@vegaprotocol/mock';
-import userEvent from '@testing-library/user-event';
 
 describe('Closed', () => {
   let originalNow: typeof Date.now;
@@ -170,11 +168,14 @@ describe('Closed', () => {
     Date.now = originalNow;
   });
 
-  const renderComponent = async (mocks: MockedResponse[]) => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('renders correctly formatted and filtered rows', async () => {
     await act(async () => {
       render(
         <MemoryRouter>
-          <MockedProvider mocks={mocks}>
+          <MockedProvider
+            mocks={[marketsMock, marketsDataMock, oracleDataMock]}
+          >
             <VegaWalletContext.Provider
               value={{ pubKey } as VegaWalletContextShape}
             >
@@ -184,10 +185,6 @@ describe('Closed', () => {
         </MemoryRouter>
       );
     });
-  };
-
-  it('renders correct headers', async () => {
-    await renderComponent([marketsMock, marketsDataMock, oracleDataMock]);
 
     const headers = screen.getAllByRole('columnheader');
     const expectedHeaders = [
@@ -203,10 +200,6 @@ describe('Closed', () => {
     ];
     expect(headers).toHaveLength(expectedHeaders.length);
     expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
-  });
-
-  it('renders correctly formatted and filtered rows', async () => {
-    await renderComponent([marketsMock, marketsDataMock, oracleDataMock]);
 
     const assetSymbol = getAsset(market).symbol;
 
@@ -280,8 +273,21 @@ describe('Closed', () => {
         },
       },
     };
-
-    await renderComponent([mixedMarketsMock, marketsDataMock, oracleDataMock]);
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
+          >
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
+      );
+    });
 
     // check that the number of rows in datagrid is 2
     const container = within(
@@ -313,67 +319,8 @@ describe('Closed', () => {
     );
   });
 
-  it('display market actions', async () => {
-    // Use market with a succcessor Id as the actions dropdown will optionally
-    // show a link to the successor market
-    const marketsWithSuccessorAndParent = [
-      {
-        __typename: 'MarketEdge' as const,
-        node: createMarketFragment({
-          id: 'include-0',
-          state: MarketState.STATE_SETTLED,
-          successorMarketID: 'successor',
-          parentMarketID: 'parent',
-        }),
-      },
-    ];
-    const mockWithSuccessorAndParent: MockedResponse<MarketsQuery> = {
-      request: {
-        query: MarketsDocument,
-      },
-      result: {
-        data: {
-          marketsConnection: {
-            __typename: 'MarketConnection',
-            edges: marketsWithSuccessorAndParent,
-          },
-        },
-      },
-    };
-    await renderComponent([
-      mockWithSuccessorAndParent,
-      marketsDataMock,
-      oracleDataMock,
-    ]);
-
-    const actionCell = screen
-      .getAllByRole('gridcell')
-      .find((el) => el.getAttribute('col-id') === 'market-actions');
-
-    await userEvent.click(
-      within(actionCell as HTMLElement).getByTestId('dropdown-menu')
-    );
-
-    expect(screen.getByRole('menu')).toBeInTheDocument();
-
-    expect(
-      screen.getByRole('menuitem', { name: 'Copy Market ID' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View on Explorer' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View settlement asset details' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View parent market' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'View successor market' })
-    ).toBeInTheDocument();
-  });
-
-  it('successor market 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,
@@ -398,11 +345,21 @@ describe('Closed', () => {
       },
     };
 
-    await renderComponent([
-      mockWithSuccessors,
-      marketsDataMock,
-      oracleDataMock,
-    ]);
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[mockWithSuccessors, marketsDataMock, oracleDataMock]}
+          >
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
+      );
+    });
 
     const container = within(
       document.querySelector('.ag-center-cols-container') as HTMLElement

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

@@ -15,7 +15,6 @@ import {
   useLinks,
 } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 export const MarketsPage = () => {
   const t = useT();
@@ -35,9 +34,7 @@ export const MarketsPage = () => {
       <div className="h-full my-1 border rounded-sm border-default">
         <Tabs storageKey="console-markets">
           <Tab id="open-markets" name={t('Open markets')}>
-            <ErrorBoundary feature="markets-open">
-              <OpenMarkets />
-            </ErrorBoundary>
+            <OpenMarkets />
           </Tab>
           <Tab
             id="proposed-markets"
@@ -52,14 +49,10 @@ export const MarketsPage = () => {
               </TradingAnchorButton>
             }
           >
-            <ErrorBoundary feature="markets-proposed">
-              <Proposed />
-            </ErrorBoundary>
+            <Proposed />
           </Tab>
           <Tab id="closed-markets" name={t('Closed markets')}>
-            <ErrorBoundary feature="markets-closed">
-              <Closed />
-            </ErrorBoundary>
+            <Closed />
           </Tab>
         </Tabs>
       </div>

apps/trading/client-pages/markets/open-markets.spec.tsx

@@ -1,145 +0,0 @@
-import { act, render, screen, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { OpenMarkets } from './open-markets';
-import { Interval } from '@vegaprotocol/types';
-import type { MockedResponse } from '@apollo/client/testing';
-import { MockedProvider } from '@apollo/client/testing';
-import type {
-  MarketsDataQuery,
-  MarketsQuery,
-  MarketCandlesQuery,
-  MarketFieldsFragment,
-} from '@vegaprotocol/markets';
-import {
-  MarketsDataDocument,
-  MarketsDocument,
-  MarketsCandlesDocument,
-} from '@vegaprotocol/markets';
-import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
-import { VegaWalletContext } from '@vegaprotocol/wallet';
-import {
-  marketsQuery,
-  marketsDataQuery,
-  marketsCandlesQuery,
-} from '@vegaprotocol/mock';
-import userEvent from '@testing-library/user-event';
-
-describe('Open', () => {
-  let originalNow: typeof Date.now;
-  const mockNowTimestamp = 1672531200000;
-  const pubKey = 'pubKey';
-
-  const marketsQueryData = marketsQuery();
-  const marketsMock: MockedResponse<MarketsQuery> = {
-    request: {
-      query: MarketsDocument,
-    },
-    result: {
-      data: marketsQueryData,
-    },
-  };
-
-  const marketsCandlesQueryData = marketsCandlesQuery();
-  const marketsCandlesMock: MockedResponse<MarketCandlesQuery> = {
-    request: {
-      query: MarketsCandlesDocument,
-      variables: {
-        interval: Interval.INTERVAL_I1H,
-        since: '2022-12-31T00:00:00.000Z',
-      },
-    },
-    result: {
-      data: marketsCandlesQueryData,
-    },
-  };
-
-  const marketsDataQueryData = marketsDataQuery();
-
-  const marketsDataMock: MockedResponse<MarketsDataQuery> = {
-    request: {
-      query: MarketsDataDocument,
-    },
-    result: {
-      data: marketsDataQueryData,
-    },
-  };
-
-  beforeAll(() => {
-    originalNow = Date.now;
-    Date.now = jest.fn().mockReturnValue(mockNowTimestamp);
-  });
-
-  afterAll(() => {
-    Date.now = originalNow;
-  });
-
-  const renderComponent = async () => {
-    await act(async () => {
-      render(
-        <MemoryRouter>
-          <MockedProvider
-            mocks={[marketsMock, marketsCandlesMock, marketsDataMock]}
-          >
-            <VegaWalletContext.Provider
-              value={{ pubKey } as VegaWalletContextShape}
-            >
-              <OpenMarkets />
-            </VegaWalletContext.Provider>
-          </MockedProvider>
-        </MemoryRouter>
-      );
-    });
-  };
-
-  it('renders correct headers', async () => {
-    await renderComponent();
-
-    const headers = screen.getAllByRole('columnheader');
-    const expectedHeaders = [
-      'Market',
-      'Description',
-      'Settlement asset',
-      'Trading mode',
-      'Status',
-      'Mark price',
-      '24h volume',
-      'Open Interest',
-      'Spread',
-      '', // Action row
-    ];
-    expect(headers).toHaveLength(expectedHeaders.length);
-    expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
-  });
-
-  it('sort columns', async () => {
-    await renderComponent();
-
-    const headers = screen.getAllByRole('columnheader');
-    const marketHeader = headers.find(
-      (h) => h.getAttribute('col-id') === 'tradableInstrument.instrument.code'
-    );
-    if (!marketHeader) {
-      throw new Error('No market header found');
-    }
-    expect(marketHeader).toHaveAttribute('aria-sort', 'none');
-    await userEvent.click(within(marketHeader).getByText(/market/i));
-    // 6001-MARK-064
-    expect(marketHeader).toHaveAttribute('aria-sort', 'ascending');
-  });
-
-  // eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect
-  it('renders row', async () => {
-    await renderComponent();
-
-    const container = within(
-      document.querySelector('.ag-center-cols-container') as HTMLElement
-    );
-
-    const markets = marketsQueryData.marketsConnection?.edges.map(
-      (e) => e.node
-    ) as MarketFieldsFragment[];
-
-    const rows = container.getAllByRole('row');
-    expect(rows).toHaveLength(markets.length);
-  });
-});

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

@@ -43,7 +43,7 @@ export const OpenMarkets = () => {
         if (!data) return;
 
         // prevent navigating to the market page if any of the below cells are clicked
-        // event.preventDefault or event.stopPropagation do not seem to apply for ag-grid
+        // event.preventDefault or event.stopPropagation dont seem to apply for aggird
         const colId = column.getColId();
 
         if (

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

@@ -25,7 +25,6 @@ import { DepositsMenu } from '../../components/deposits-menu';
 import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -73,29 +72,19 @@ export const Portfolio = () => {
                 name={t('Positions')}
                 menu={<PositionsMenu />}
               >
-                <ErrorBoundary feature="portfolio-positions">
-                  <PositionsContainer allKeys />
-                </ErrorBoundary>
+                <PositionsContainer allKeys />
               </Tab>
               <Tab id="orders" name={t('Orders')}>
-                <ErrorBoundary feature="portfolio-orders">
-                  <OrdersContainer />
-                </ErrorBoundary>
+                <OrdersContainer />
               </Tab>
               <Tab id="fills" name={t('Fills')}>
-                <ErrorBoundary feature="portfolio-fills">
-                  <FillsContainer />
-                </ErrorBoundary>
+                <FillsContainer />
               </Tab>
               <Tab id="funding-payments" name={t('Funding payments')}>
-                <ErrorBoundary feature="portfolio-funding-payments">
-                  <FundingPaymentsContainer />
-                </ErrorBoundary>
+                <FundingPaymentsContainer />
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
-                <ErrorBoundary feature="portfolio-ledger">
-                  <LedgerContainer />
-                </ErrorBoundary>
+                <LedgerContainer />
               </Tab>
             </Tabs>
           </PortfolioGridChild>
@@ -112,14 +101,10 @@ export const Portfolio = () => {
                 name={t('Collateral')}
                 menu={<AccountsMenu />}
               >
-                <ErrorBoundary feature="portfolio-accounts">
-                  <AccountsContainer />
-                </ErrorBoundary>
+                <AccountsContainer />
               </Tab>
               <Tab id="deposits" name={t('Deposits')} menu={<DepositsMenu />}>
-                <ErrorBoundary feature="portfolio-deposit">
-                  <DepositsContainer />
-                </ErrorBoundary>
+                <DepositsContainer />
               </Tab>
               <Tab
                 id="withdrawals"
@@ -127,9 +112,7 @@ export const Portfolio = () => {
                 indicator={<WithdrawalsIndicator />}
                 menu={<WithdrawalsMenu />}
               >
-                <ErrorBoundary feature="portfolio-deposit">
-                  <WithdrawalsContainer />
-                </ErrorBoundary>
+                <WithdrawalsContainer />
               </Tab>
             </Tabs>
           </PortfolioGridChild>

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -10,43 +10,18 @@ import { useForm } from 'react-hook-form';
 import classNames from 'classnames';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { RainbowButton } from './buttons';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { useIsInReferralSet, useReferral } from './hooks/use-referral';
+import { useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
 import { Statistics, useStats } from './referral-statistics';
 import { useReferralProgram } from './hooks/use-referral-program';
-import { ns, useT } from '../../lib/use-t';
-import { useFundsAvailable } from './hooks/use-funds-available';
-import { ViewType, useSidebar } from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-import { QUSDTooltip } from './qusd-tooltip';
-import { Trans } from 'react-i18next';
+import { useT } from '../../lib/use-t';
 
 const RELOAD_DELAY = 3000;
 
-const SPAM_PROTECTION_ERR = 'SPAM_PROTECTION_ERR';
-const SpamProtectionErr = ({
-  requiredFunds,
-}: {
-  requiredFunds?: string | number | bigint;
-}) => {
-  if (!requiredFunds) return null;
-  // eslint-disable-next-line react/jsx-no-undef
-  return (
-    <Trans
-      defaults="To protect the network from spam, you must have at least {{requiredFunds}} <0>qUSD</0> of any asset on the network to proceed."
-      values={{
-        requiredFunds,
-      }}
-      components={[<QUSDTooltip key="qusd" />]}
-      ns={ns}
-    />
-  );
-};
-
 const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   const number = +`0x${value}`;
   if (!value || value.length !== 64) {
@@ -57,23 +32,7 @@ const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   return true;
 };
 
-export const ApplyCodeFormContainer = ({
-  onSuccess,
-}: {
-  onSuccess?: () => void;
-}) => {
-  const { pubKey } = useVegaWallet();
-  const isInReferralSet = useIsInReferralSet(pubKey);
-
-  // Navigate to the index page when already in the referral set.
-  if (isInReferralSet) {
-    return <Navigate to={Routes.REFERRALS} />;
-  }
-
-  return <ApplyCodeForm onSuccess={onSuccess} />;
-};
-
-export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
+export const ApplyCodeForm = () => {
   const t = useT();
   const program = useReferralProgram();
   const navigate = useNavigate();
@@ -82,15 +41,10 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   );
 
   const [status, setStatus] = useState<
-    'requested' | 'no-funds' | 'successful' | null
+    'requested' | 'failed' | 'successful' | null
   >(null);
   const txHash = useRef<string | null>(null);
   const { isReadOnly, pubKey, sendTx } = useVegaWallet();
-  const { isEligible, requiredFunds } = useFundsAvailable();
-
-  const currentRouteId = useGetCurrentRouteId();
-  const setViews = useSidebar((s) => s.setViews);
-
   const {
     register,
     handleSubmit,
@@ -101,54 +55,19 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   } = useForm();
   const [params] = useSearchParams();
 
+  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, t) ? codeField : undefined,
   });
 
-  /**
-   * Validates if a connected party can apply a code (min funds span protection)
-   */
-  const validateFundsAvailable = useCallback(() => {
-    if (requiredFunds && !isEligible) {
-      const err = SPAM_PROTECTION_ERR;
-      return err;
-    }
-    return true;
-  }, [isEligible, requiredFunds]);
-
-  /**
-   * Validates the set a user tries to apply to.
-   */
-  const validateSet = useCallback(() => {
-    if (
-      codeField &&
-      !previewLoading &&
-      previewData &&
-      !previewData.isEligible
-    ) {
-      return t('The code is no longer valid.');
-    }
-    if (codeField && !previewLoading && !previewData) {
-      return t('The code is invalid');
-    }
-    return true;
-  }, [codeField, previewData, previewLoading, t]);
-
   useEffect(() => {
     const code = params.get('code');
     if (code) setValue('code', code);
   }, [params, setValue]);
 
-  useEffect(() => {
-    const err = validateFundsAvailable();
-    if (err !== true) {
-      setStatus('no-funds');
-    } else {
-      setStatus(null);
-    }
-  }, [isEligible, validateFundsAvailable]);
-
   const onSubmit = ({ code }: FieldValues) => {
     if (isReadOnly || !pubKey || !code || code.length === 0) {
       return;
@@ -220,11 +139,15 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   useEffect(() => {
     if (status === 'successful') {
       setTimeout(() => {
-        if (onSuccess) onSuccess();
         navigate(Routes.REFERRALS);
       }, RELOAD_DELAY);
     }
-  }, [navigate, onSuccess, status]);
+  }, [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') {
@@ -261,18 +184,6 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
       };
     }
 
-    if (status === 'no-funds') {
-      return {
-        disabled: false,
-        children: t('Deposit funds'),
-        type: 'button' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
-        onClick: ((event) => {
-          event.preventDefault();
-          setViews({ type: ViewType.Deposit }, currentRouteId);
-        }) as MouseEventHandler,
-      };
-    }
-
     if (status === 'requested') {
       return {
         disabled: true,
@@ -294,17 +205,12 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
 
   return (
     <>
-      <div
-        data-testid="referral-apply-code-form"
-        className="bg-vega-clight-800 dark:bg-vega-cdark-800 mx-auto w-2/3 max-w-md rounded-lg p-8"
-      >
+      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 mx-auto w-2/3 max-w-md rounded-lg p-8">
         <h3 className="calt mb-4 text-center text-2xl">
           {t('Apply a referral code')}
         </h3>
         <p className="mb-4 text-center text-base">
-          {t(
-            'Apply a referral code to access the discount benefits of the current program.'
-          )}
+          {t('Enter a referral code to get trading discounts.')}
         </p>
         <form
           className={classNames('flex w-full flex-col gap-4', {
@@ -318,13 +224,7 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
               hasError={Boolean(errors.code)}
               {...register('code', {
                 required: t('You have to provide a code to apply it.'),
-                validate: (value) => {
-                  const codeErr = validateCode(value, t);
-                  if (codeErr !== true) return codeErr;
-                  const fundsErr = validateFundsAvailable();
-                  if (fundsErr !== true) return fundsErr;
-                  return validateSet();
-                },
+                validate: (value) => validateCode(value, t),
               })}
               placeholder="Enter a code"
               className="bg-vega-clight-900 dark:bg-vega-cdark-700 mb-2"
@@ -332,39 +232,21 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
           </label>
           <RainbowButton variant="border" {...getButtonProps()} />
         </form>
-        {status === 'no-funds' ? (
-          <InputError intent="warning" className="overflow-auto break-words">
-            <span>
-              <SpamProtectionErr requiredFunds={requiredFunds?.toString()} />
-            </span>
+        {errors.code && (
+          <InputError className="overflow-auto break-words">
+            {errors.code.message?.toString()}
           </InputError>
-        ) : (
-          errors.code && (
-            <InputError intent="warning" className="overflow-auto break-words">
-              {errors.code.message === SPAM_PROTECTION_ERR ? (
-                <span>
-                  <SpamProtectionErr
-                    requiredFunds={requiredFunds?.toString()}
-                  />
-                </span>
-              ) : (
-                errors.code.message?.toString()
-              )}
-            </InputError>
-          )
         )}
       </div>
-      {validateCode(codeField, t) === true && previewLoading && !previewData ? (
+      {previewLoading && !previewData ? (
         <div className="mt-10">
           <Loader />
         </div>
       ) : null}
-      {/* TODO: Re-check plural forms once i18n is updated */}
-      {previewData && previewData.isEligible ? (
+      {previewData ? (
         <div className="mt-10">
           <h2 className="mb-5 text-2xl">
             {t(
-              'youAreJoiningTheGroup',
               'You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.',
               { count: nextBenefitTierEpochsValue }
             )}

apps/trading/client-pages/referrals/constants.ts

@@ -6,8 +6,6 @@ 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/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';
-export const ABOUT_REFERRAL_DOCS_LINK =
-  'https://docs.vega.xyz/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';
+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/';

apps/trading/client-pages/referrals/create-code-form.tsx

@@ -19,22 +19,14 @@ 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 } from './constants';
-import { useIsInReferralSet, useReferral } from './hooks/use-referral';
+import {
+  ABOUT_REFERRAL_DOCS_LINK,
+  DISCLAIMER_REFERRAL_DOCS_LINK,
+} from './constants';
+import { useReferral } from './hooks/use-referral';
 import { useT } from '../../lib/use-t';
-import { Navigate } from 'react-router-dom';
-import { Routes } from '../../lib/links';
-import { useReferralProgram } from './hooks/use-referral-program';
 
 export const CreateCodeContainer = () => {
-  const { pubKey } = useVegaWallet();
-  const isInReferralSet = useIsInReferralSet(pubKey);
-
-  // Navigate to the index page when already in the referral set.
-  if (isInReferralSet) {
-    return <Navigate to={Routes.REFERRALS} />;
-  }
-
   return <CreateCodeForm />;
 };
 
@@ -47,16 +39,13 @@ export const CreateCodeForm = () => {
   const { pubKey, isReadOnly } = useVegaWallet();
 
   return (
-    <div
-      data-testid="referral-create-code-form"
-      className="w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg"
-    >
+    <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-4 text-center text-base">
         {t(
-          'Generate a referral code to share with your friends and access the commission benefits of the current program.'
+          'Generate a referral code to share with your friends and start earning commission.'
         )}
       </p>
 
@@ -106,8 +95,6 @@ const CreateCodeDialog = ({
   const { stakeAvailable: currentStakeAvailable, requiredStake } =
     useStakeAvailable();
 
-  const { details: programDetails } = useReferralProgram();
-
   const onSubmit = () => {
     if (isReadOnly || !pubKey) {
       setErr('Not connected');
@@ -206,73 +193,12 @@ const CreateCodeDialog = ({
     );
   }
 
-  if (!programDetails) {
-    return (
-      <div className="flex flex-col gap-4">
-        {(status === 'idle' || status === 'loading' || status === 'error') && (
-          <>
-            {
-              <p>
-                {t(
-                  'There is currently no referral program active, are you sure you want to create a code?'
-                )}
-              </p>
-            }
-          </>
-        )}
-        {status === 'success' && code && (
-          <div className="flex items-center gap-2">
-            <div className="flex-1 min-w-0 p-2 text-sm rounded bg-vega-clight-700 dark:bg-vega-cdark-700">
-              <p className="overflow-hidden whitespace-nowrap text-ellipsis">
-                {code}
-              </p>
-            </div>
-            <CopyWithTooltip text={code}>
-              <TradingButton
-                className="text-sm no-underline"
-                icon={<VegaIcon name={VegaIconNames.COPY} />}
-              >
-                <span>{t('Copy')}</span>
-              </TradingButton>
-            </CopyWithTooltip>
-          </div>
-        )}
-        <TradingButton
-          fill={true}
-          intent={Intent.Primary}
-          onClick={() => onSubmit()}
-          {...getButtonProps()}
-        >
-          {t('Yes')}
-        </TradingButton>
-        {status === 'idle' && (
-          <TradingButton
-            fill={true}
-            intent={Intent.Primary}
-            onClick={() => {
-              refetch();
-              setDialogOpen(false);
-            }}
-          >
-            {t('No')}
-          </TradingButton>
-        )}
-        {err && <InputError>{err}</InputError>}
-        <div className="flex justify-center pt-5 mt-2 text-sm border-t gap-4 text-default border-default">
-          <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
-            {t('About the referral program')}
-          </ExternalLink>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="flex flex-col gap-4">
       {(status === 'idle' || status === 'loading' || status === 'error') && (
         <p>
           {t(
-            'Generate a referral code to share with your friends and access the commission benefits of the current program.'
+            'Generate a referral code to share with your friends and start earning commission.'
           )}
         </p>
       )}
@@ -303,6 +229,9 @@ const CreateCodeDialog = ({
         <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
           {t('About the referral program')}
         </ExternalLink>
+        <ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
+          {t('Disclaimer')}
+        </ExternalLink>
       </div>
     </div>
   );

apps/trading/client-pages/referrals/error-boundary.tsx

@@ -53,7 +53,7 @@ export const NotFound = () => {
   const navigate = useNavigate();
 
   return (
-    <LayoutWithSky className="pt-32">
+    <div className="pt-32">
       <div
         aria-hidden
         className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
@@ -75,6 +75,6 @@ export const NotFound = () => {
           {t('Go back and try again')}
         </RainbowButton>
       </p>
-    </LayoutWithSky>
+    </div>
   );
 };

apps/trading/client-pages/referrals/hooks/FundsAvailable.graphql

@@ -1,20 +0,0 @@
-query FundsAvailable($partyId: ID!) {
-  party(id: $partyId) {
-    accountsConnection {
-      edges {
-        node {
-          balance
-          asset {
-            decimals
-            symbol
-            id
-          }
-        }
-      }
-    }
-  }
-  networkParameter(key: "spam.protection.applyReferral.min.funds") {
-    key
-    value
-  }
-}

apps/trading/client-pages/referrals/hooks/ReferralSetStats.graphql

@@ -11,7 +11,6 @@ query ReferralSetStats($code: ID!, $epoch: Int) {
         rewardsMultiplier
         rewardsFactorMultiplier
         referrerTakerVolume
-        wasEligible
       }
     }
   }

apps/trading/client-pages/referrals/hooks/StakeAvailable.graphql

@@ -1,10 +0,0 @@
-query StakeAvailable($partyId: ID!) {
-  party(id: $partyId) {
-    stakingSummary {
-      currentStakeAvailable
-    }
-  }
-  networkParameter(key: "referralProgram.minStakedVegaTokens") {
-    value
-  }
-}

apps/trading/client-pages/referrals/hooks/__generated__/FundsAvailable.ts

@@ -1,63 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type FundsAvailableQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type FundsAvailableQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', balance: string, asset: { __typename?: 'Asset', decimals: number, symbol: string, id: string } } } | null> | null } | null } | null, networkParameter?: { __typename?: 'NetworkParameter', key: string, value: string } | null };
-
-
-export const FundsAvailableDocument = gql`
-    query FundsAvailable($partyId: ID!) {
-  party(id: $partyId) {
-    accountsConnection {
-      edges {
-        node {
-          balance
-          asset {
-            decimals
-            symbol
-            id
-          }
-        }
-      }
-    }
-  }
-  networkParameter(key: "spam.protection.applyReferral.min.funds") {
-    key
-    value
-  }
-}
-    `;
-
-/**
- * __useFundsAvailableQuery__
- *
- * To run a query within a React component, call `useFundsAvailableQuery` and pass it any options that fit your needs.
- * When your component renders, `useFundsAvailableQuery` 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 } = useFundsAvailableQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function useFundsAvailableQuery(baseOptions: Apollo.QueryHookOptions<FundsAvailableQuery, FundsAvailableQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<FundsAvailableQuery, FundsAvailableQueryVariables>(FundsAvailableDocument, options);
-      }
-export function useFundsAvailableLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FundsAvailableQuery, FundsAvailableQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<FundsAvailableQuery, FundsAvailableQueryVariables>(FundsAvailableDocument, options);
-        }
-export type FundsAvailableQueryHookResult = ReturnType<typeof useFundsAvailableQuery>;
-export type FundsAvailableLazyQueryHookResult = ReturnType<typeof useFundsAvailableLazyQuery>;
-export type FundsAvailableQueryResult = Apollo.QueryResult<FundsAvailableQuery, FundsAvailableQueryVariables>;

apps/trading/client-pages/referrals/hooks/__generated__/ReferralSetStats.ts

@@ -9,7 +9,7 @@ export type ReferralSetStatsQueryVariables = Types.Exact<{
 }>;
 
 
-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, referrerTakerVolume: string, wasEligible: boolean } } | null> } };
+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, referrerTakerVolume: string } } | null> } };
 
 
 export const ReferralSetStatsDocument = gql`
@@ -26,7 +26,6 @@ export const ReferralSetStatsDocument = gql`
         rewardsMultiplier
         rewardsFactorMultiplier
         referrerTakerVolume
-        wasEligible
       }
     }
   }

apps/trading/client-pages/referrals/hooks/__generated__/StakeAvailable.ts

@@ -1,53 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type StakeAvailableQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type StakeAvailableQuery = { __typename?: 'Query', party?: { __typename?: 'Party', stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string } } | null, networkParameter?: { __typename?: 'NetworkParameter', value: string } | null };
-
-
-export const StakeAvailableDocument = gql`
-    query StakeAvailable($partyId: ID!) {
-  party(id: $partyId) {
-    stakingSummary {
-      currentStakeAvailable
-    }
-  }
-  networkParameter(key: "referralProgram.minStakedVegaTokens") {
-    value
-  }
-}
-    `;
-
-/**
- * __useStakeAvailableQuery__
- *
- * To run a query within a React component, call `useStakeAvailableQuery` and pass it any options that fit your needs.
- * When your component renders, `useStakeAvailableQuery` 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 } = useStakeAvailableQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function useStakeAvailableQuery(baseOptions: Apollo.QueryHookOptions<StakeAvailableQuery, StakeAvailableQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<StakeAvailableQuery, StakeAvailableQueryVariables>(StakeAvailableDocument, options);
-      }
-export function useStakeAvailableLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<StakeAvailableQuery, StakeAvailableQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<StakeAvailableQuery, StakeAvailableQueryVariables>(StakeAvailableDocument, options);
-        }
-export type StakeAvailableQueryHookResult = ReturnType<typeof useStakeAvailableQuery>;
-export type StakeAvailableLazyQueryHookResult = ReturnType<typeof useStakeAvailableLazyQuery>;
-export type StakeAvailableQueryResult = Apollo.QueryResult<StakeAvailableQuery, StakeAvailableQueryVariables>;

apps/trading/client-pages/referrals/hooks/use-funds-available.ts

@@ -1,48 +0,0 @@
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useFundsAvailableQuery } from './__generated__/FundsAvailable';
-import compact from 'lodash/compact';
-import BigNumber from 'bignumber.js';
-
-/**
- * Gets the funds for given public key and required min for
- * the referral program.
- *
- * (Uses currently connected public key if left empty)
- */
-export const useFundsAvailable = (pubKey?: string) => {
-  const { pubKey: currentPubKey } = useVegaWallet();
-  const partyId = pubKey || currentPubKey;
-  const { data, stopPolling } = useFundsAvailableQuery({
-    variables: { partyId: partyId || '' },
-    skip: !partyId,
-    fetchPolicy: 'network-only',
-    errorPolicy: 'ignore',
-    pollInterval: 5000,
-  });
-
-  const fundsAvailable = data
-    ? compact(data.party?.accountsConnection?.edges?.map((e) => e?.node))
-    : undefined;
-  const requiredFunds = data
-    ? BigNumber(data.networkParameter?.value || '0')
-    : undefined;
-
-  const sumOfFunds =
-    fundsAvailable
-      ?.filter((fa) => fa.balance)
-      .reduce((sum, fa) => sum.plus(BigNumber(fa.balance)), BigNumber(0)) ||
-    BigNumber(0);
-
-  if (requiredFunds && sumOfFunds.isGreaterThanOrEqualTo(requiredFunds)) {
-    stopPolling();
-  }
-
-  return {
-    fundsAvailable,
-    requiredFunds,
-    isEligible:
-      fundsAvailable != null &&
-      requiredFunds != null &&
-      sumOfFunds.isGreaterThanOrEqualTo(requiredFunds),
-  };
-};

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

@@ -1,8 +1,14 @@
 import { getNumberFormat } from '@vegaprotocol/utils';
+import { addDays } from 'date-fns';
 import sortBy from 'lodash/sortBy';
 import omit from 'lodash/omit';
 import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
-import BigNumber from 'bignumber.js';
+
+const STAKING_TIERS_MAPPING: Record<number, string> = {
+  1: 'Tradestarter',
+  2: 'Mid level degen',
+  3: 'Reward hoarder',
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const MOCK = {
@@ -10,76 +16,46 @@ const MOCK = {
     currentReferralProgram: {
       id: 'abc',
       version: 1,
+      endOfProgramTimestamp: addDays(new Date(), 10).toISOString(),
+      windowLength: 10,
       benefitTiers: [
         {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '100000',
-          referralDiscountFactor: '0.1',
+          minimumEpochs: 5,
+          minimumRunningNotionalTakerVolume: '30000',
+          referralDiscountFactor: '0.01',
+          referralRewardFactor: '0.01',
+        },
+        {
+          minimumEpochs: 5,
+          minimumRunningNotionalTakerVolume: '20000',
+          referralDiscountFactor: '0.05',
           referralRewardFactor: '0.05',
         },
         {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '1000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.075',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '5000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.1',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '25000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.125',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '75000000',
-          referralDiscountFactor: '0.1',
-          referralRewardFactor: '0.15',
-        },
-        {
-          minimumEpochs: 1,
-          minimumRunningNotionalTakerVolume: '150000000',
-          referralDiscountFactor: '0.07',
-          referralRewardFactor: '0.175',
+          minimumEpochs: 5,
+          minimumRunningNotionalTakerVolume: '10000',
+          referralDiscountFactor: '0.001',
+          referralRewardFactor: '0.001',
         },
       ],
       stakingTiers: [
         {
-          minimumStakedTokens: '100000000000000000000',
-          referralRewardMultiplier: '1.025',
+          minimumStakedTokens: '10000',
+          referralRewardMultiplier: '1',
         },
         {
-          minimumStakedTokens: '1000000000000000000000',
-          referralRewardMultiplier: '1.05',
+          minimumStakedTokens: '20000',
+          referralRewardMultiplier: '2',
         },
         {
-          minimumStakedTokens: '5000000000000000000000',
-          referralRewardMultiplier: '1.1',
-        },
-        {
-          minimumStakedTokens: '50000000000000000000000',
-          referralRewardMultiplier: '1.2',
-        },
-        {
-          minimumStakedTokens: '250000000000000000000000',
-          referralRewardMultiplier: '1.25',
-        },
-        {
-          minimumStakedTokens: '500000000000000000000000',
-          referralRewardMultiplier: '1.3',
+          minimumStakedTokens: '30000',
+          referralRewardMultiplier: '3',
         },
       ],
-      endOfProgramTimestamp: '2024-12-31T01:00:00Z',
-      windowLength: 30,
     },
-    loading: false,
-    error: undefined,
   },
+  loading: false,
+  error: undefined,
 };
 
 export const useReferralProgram = () => {
@@ -99,26 +75,30 @@ export const useReferralProgram = () => {
 
   const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
     Number(t.referralRewardFactor)
-  ).map((t, i) => {
-    return {
-      tier: i + 1, // sorted in asc order, hence first is the lowest tier
-      rewardFactor: Number(t.referralRewardFactor),
-      commission: BigNumber(t.referralRewardFactor).times(100).toFixed(2) + '%',
-      discountFactor: Number(t.referralDiscountFactor),
-      discount: BigNumber(t.referralDiscountFactor).times(100).toFixed(2) + '%',
-      minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
-      volume: getNumberFormat(0).format(
-        Number(t.minimumRunningNotionalTakerVolume)
-      ),
-      epochs: Number(t.minimumEpochs),
-    };
-  });
+  )
+    .reverse()
+    .map((t, i) => {
+      return {
+        tier: i + 1,
+        rewardFactor: Number(t.referralRewardFactor),
+        commission: Number(t.referralRewardFactor) * 100 + '%',
+        discountFactor: Number(t.referralDiscountFactor),
+        discount: Number(t.referralDiscountFactor) * 100 + '%',
+        minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
+        volume: getNumberFormat(0).format(
+          Number(t.minimumRunningNotionalTakerVolume)
+        ),
+        epochs: Number(t.minimumEpochs),
+      };
+    });
 
-  const stakingTiers = sortBy(data.currentReferralProgram.stakingTiers, (t) =>
-    parseFloat(t.referralRewardMultiplier)
+  const stakingTiers = sortBy(
+    data.currentReferralProgram.stakingTiers,
+    (t) => t.referralRewardMultiplier
   ).map((t, i) => {
     return {
       tier: i + 1,
+      label: STAKING_TIERS_MAPPING[i + 1],
       ...t,
     };
   });

apps/trading/client-pages/referrals/hooks/use-referral-toasts.tsx

@@ -1,108 +0,0 @@
-import {
-  Intent,
-  type Toast,
-  useToasts,
-  ToastHeading,
-  Button,
-} from '@vegaprotocol/ui-toolkit';
-import { useReferral } from './use-referral';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEffect } from 'react';
-import { useT } from '../../../lib/use-t';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
-import { Routes } from '../../../lib/links';
-import { useCurrentEpochInfoQuery } from './__generated__/Epoch';
-
-const REFETCH_INTERVAL = 60 * 60 * 1000; // 1h
-const NON_ELIGIBLE_REFERRAL_SET_TOAST_ID = 'non-eligible-referral-set';
-
-const useNonEligibleReferralSet = () => {
-  const { pubKey } = useVegaWallet();
-  const { data, loading, refetch } = useReferral({ pubKey, role: 'referee' });
-  const {
-    data: epochData,
-    loading: epochLoading,
-    refetch: epochRefetch,
-  } = useCurrentEpochInfoQuery();
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      refetch();
-      epochRefetch();
-    }, REFETCH_INTERVAL);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [epochRefetch, refetch]);
-
-  return { data, epoch: epochData?.epoch.id, loading: loading || epochLoading };
-};
-
-export const useReferralToasts = () => {
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-  const t = useT();
-  const [setToast, hasToast, updateToast] = useToasts((store) => [
-    store.setToast,
-    store.hasToast,
-    store.update,
-  ]);
-
-  const { data, epoch, loading } = useNonEligibleReferralSet();
-
-  useEffect(() => {
-    if (
-      data &&
-      epoch &&
-      !loading &&
-      !data.isEligible &&
-      !hasToast(NON_ELIGIBLE_REFERRAL_SET_TOAST_ID + epoch)
-    ) {
-      const nonEligibleReferralToast: Toast = {
-        id: NON_ELIGIBLE_REFERRAL_SET_TOAST_ID + epoch,
-        intent: Intent.Warning,
-        content: (
-          <>
-            <ToastHeading>{t('Referral code no longer valid')}</ToastHeading>
-            <p>
-              {t(
-                'Your referral code is no longer valid as the referrer no longer meets the minimum requirements.'
-              )}
-            </p>
-            <p className="mt-2">
-              <Button
-                data-testid="toast-apply-code"
-                size="xs"
-                onClick={() => {
-                  const matched = matchPath(Routes.REFERRALS, pathname);
-                  if (!matched) navigate(Routes.REFERRALS_APPLY_CODE);
-                  updateToast(NON_ELIGIBLE_REFERRAL_SET_TOAST_ID + epoch, {
-                    hidden: true,
-                  });
-                }}
-              >
-                {t('Apply a new code')}
-              </Button>
-            </p>
-          </>
-        ),
-        onClose: () =>
-          updateToast(NON_ELIGIBLE_REFERRAL_SET_TOAST_ID + epoch, {
-            hidden: true,
-          }),
-      };
-      setToast(nonEligibleReferralToast);
-    }
-  }, [
-    data,
-    epoch,
-    hasToast,
-    loading,
-    navigate,
-    pathname,
-    setToast,
-    t,
-    updateToast,
-  ]);
-};

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

@@ -2,12 +2,8 @@ import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { useCallback } from 'react';
 import { useRefereesQuery } from './__generated__/Referees';
 import compact from 'lodash/compact';
-import type {
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables,
-} from './__generated__/ReferralSets';
+import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
 import { useReferralSetsQuery } from './__generated__/ReferralSets';
-import { useStakeAvailable } from './use-stake-available';
 
 export const DEFAULT_AGGREGATION_DAYS = 30;
 
@@ -66,8 +62,6 @@ export const useReferral = (args: UseReferralArgs) => {
       ? referralData.referralSets.edges[0]?.node
       : undefined;
 
-  const { isEligible } = useStakeAvailable(referralSet?.referrer);
-
   const {
     data: refereesData,
     loading: refereesLoading,
@@ -109,7 +103,6 @@ export const useReferral = (args: UseReferralArgs) => {
           referee: referee,
           referrerId: referralSet.referrer,
           createdAt: referralSet.createdAt,
-          isEligible,
           referees,
         }
       : undefined;
@@ -121,36 +114,3 @@ export const useReferral = (args: UseReferralArgs) => {
     refetch,
   };
 };
-
-const retrieveReferralSetData = (data: ReferralSetsQuery | undefined) =>
-  data?.referralSets.edges && data.referralSets.edges.length > 0
-    ? data.referralSets.edges[0]?.node
-    : undefined;
-
-export const useIsInReferralSet = (pubKey: string | null) => {
-  const [asRefereeVariables, asRefereeSkip] = prepareVariables({
-    pubKey,
-    role: 'referee',
-  });
-  const [asReferrerVariables, asReferrerSkip] = prepareVariables({
-    pubKey,
-    role: 'referrer',
-  });
-
-  const { data: asRefereeData } = useReferralSetsQuery({
-    variables: asRefereeVariables,
-    skip: asRefereeSkip,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  const { data: asReferrerData } = useReferralSetsQuery({
-    variables: asReferrerVariables,
-    skip: asReferrerSkip,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  return Boolean(
-    retrieveReferralSetData(asRefereeData) ||
-      retrieveReferralSetData(asReferrerData)
-  );
-};

apps/trading/client-pages/referrals/hooks/use-stake-available.ts

@@ -1,34 +1,34 @@
+import { gql, useQuery } from '@apollo/client';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useStakeAvailableQuery } from './__generated__/StakeAvailable';
 
-/**
- * Gets the current stake available for given public key and required stake for
- * the referral program.
- *
- * (Uses currently connected public key if left empty)
- */
-export const useStakeAvailable = (pubKey?: string) => {
-  const { pubKey: currentPubKey } = useVegaWallet();
-  const partyId = pubKey || currentPubKey;
-  const { data } = useStakeAvailableQuery({
-    variables: { partyId: partyId || '' },
-    skip: !partyId,
+const STAKE_QUERY = gql`
+  query CreateCode($partyId: ID!) {
+    party(id: $partyId) {
+      stakingSummary {
+        currentStakeAvailable
+      }
+    }
+    networkParameter(key: "referralProgram.minStakedVegaTokens") {
+      value
+    }
+  }
+`;
+
+export const useStakeAvailable = () => {
+  const { pubKey } = useVegaWallet();
+  const { data } = useQuery(STAKE_QUERY, {
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+    // TODO: remove when network params available
     errorPolicy: 'ignore',
   });
 
-  const stakeAvailable = data
-    ? BigInt(data.party?.stakingSummary.currentStakeAvailable || '0')
-    : undefined;
-  const requiredStake = data
-    ? BigInt(data.networkParameter?.value || '0')
-    : undefined;
-
   return {
-    stakeAvailable,
-    requiredStake,
-    isEligible:
-      stakeAvailable != null &&
-      requiredStake != null &&
-      stakeAvailable >= requiredStake,
+    stakeAvailable: data
+      ? BigInt(data.party?.stakingSummary.currentStakeAvailable || '0')
+      : undefined,
+    requiredStake: data
+      ? BigInt(data.networkParameter?.value || '0')
+      : undefined,
   };
 };

apps/trading/client-pages/referrals/landing-banner.tsx

@@ -15,16 +15,11 @@ export const LandingBanner = () => {
         </div>
         <div className="pt-20 sm:w-[50%]">
           <h1 className="text-6xl font-alpha calt mb-10">
-            {t('Vega community referrals')}
+            {t('Earn commission & stake rewards')}
           </h1>
-          <p className="text-lg mb-1">
-            {t(
-              'Referral programs can be proposed and created via community governance.'
-            )}
-          </p>
           <p className="text-lg mb-10">
             {t(
-              'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
+              'Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
             )}
           </p>
         </div>

apps/trading/client-pages/referrals/qusd-tooltip.tsx

@@ -1,28 +0,0 @@
-import { DocsLinks } from '@vegaprotocol/environment';
-import { ExternalLink, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { useT } from '../../lib/use-t';
-
-export const QUSDTooltip = () => {
-  const t = useT();
-  return (
-    <Tooltip
-      description={
-        <>
-          <p className="mb-1">
-            {t(
-              'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
-            )}
-          </p>
-          {DocsLinks && (
-            <ExternalLink href={DocsLinks.QUANTUM}>
-              {t('Find out more')}
-            </ExternalLink>
-          )}
-        </>
-      }
-      underline={true}
-    >
-      <span>{t('qUSD')}</span>
-    </Tooltip>
-  );
-};

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

@@ -1,378 +0,0 @@
-import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
-import { render, waitFor } from '@testing-library/react';
-import { type VegaWalletContextShape } from '@vegaprotocol/wallet';
-import { ReferralStatistics } from './referral-statistics';
-import {
-  ReferralProgramDocument,
-  type ReferralProgramQuery,
-} from './hooks/__generated__/CurrentReferralProgram';
-import {
-  ReferralSetsDocument,
-  type ReferralSetsQueryVariables,
-  type ReferralSetsQuery,
-} from './hooks/__generated__/ReferralSets';
-import {
-  StakeAvailableDocument,
-  type StakeAvailableQueryVariables,
-  type StakeAvailableQuery,
-} from './hooks/__generated__/StakeAvailable';
-import {
-  RefereesDocument,
-  type RefereesQueryVariables,
-  type RefereesQuery,
-} from './hooks/__generated__/Referees';
-import { MemoryRouter } from 'react-router-dom';
-
-const MOCK_PUBKEY =
-  '1234567890123456789012345678901234567890123456789012345678901234';
-
-const MOCK_STAKE_AVAILABLE: StakeAvailableQuery = {
-  networkParameter: {
-    __typename: 'NetworkParameter',
-    value: '1',
-  },
-  party: {
-    __typename: 'Party',
-    stakingSummary: {
-      __typename: 'StakingSummary',
-      currentStakeAvailable: '1',
-    },
-  },
-};
-
-const MOCK_NON_ELIGIBILE_STAKE_AVAILABLE: StakeAvailableQuery = {
-  networkParameter: {
-    __typename: 'NetworkParameter',
-    value: '1',
-  },
-  party: {
-    __typename: 'Party',
-    stakingSummary: {
-      __typename: 'StakingSummary',
-      currentStakeAvailable: '0',
-    },
-  },
-};
-
-const MOCK_REFERRAL_PROGRAM: ReferralProgramQuery = {
-  currentReferralProgram: {
-    __typename: 'CurrentReferralProgram',
-    benefitTiers: [
-      {
-        __typename: 'BenefitTier',
-        minimumEpochs: 1,
-        minimumRunningNotionalTakerVolume: '0',
-        referralDiscountFactor: '0.01',
-        referralRewardFactor: '0.01',
-      },
-      {
-        __typename: 'BenefitTier',
-        minimumEpochs: 2,
-        minimumRunningNotionalTakerVolume: '10',
-        referralDiscountFactor: '0.02',
-        referralRewardFactor: '0.02',
-      },
-    ],
-    endOfProgramTimestamp: '202411012023-11-26T05:58:24.045158Z',
-    id: '123',
-    stakingTiers: [
-      {
-        __typename: 'StakingTier',
-        minimumStakedTokens: '100',
-        referralRewardMultiplier: '1',
-      },
-      {
-        __typename: 'StakingTier',
-        minimumStakedTokens: '1000',
-        referralRewardMultiplier: '2',
-      },
-    ],
-    version: 2,
-    windowLength: 3,
-    endedAt: null,
-  },
-};
-
-const MOCK_REFERRER_SET: ReferralSetsQuery = {
-  referralSets: {
-    __typename: 'ReferralSetConnection',
-    edges: [
-      {
-        __typename: 'ReferralSetEdge',
-        node: {
-          __typename: 'ReferralSet',
-          createdAt: '2023-11-26T05:58:24.045158Z',
-          id: '3772e570fbab89e50e563036b01dd949c554e5b5fe7908449672dfce9a8adffa',
-          referrer: MOCK_PUBKEY,
-          updatedAt: '2023-11-26T05:58:24.045158Z',
-        },
-      },
-    ],
-  },
-};
-
-const MOCK_REFERREE_SET: ReferralSetsQuery = {
-  referralSets: {
-    __typename: 'ReferralSetConnection',
-    edges: [
-      {
-        __typename: 'ReferralSetEdge',
-        node: {
-          __typename: 'ReferralSet',
-          createdAt: '2023-11-26T05:58:24.045158Z',
-          id: '3772e570fbab89e50e563036b01dd949c554e5b5fe7908449672dfce9a8adffa',
-          referrer:
-            '1111111111111111111111111111111111111111111111111111111111111111',
-          updatedAt: '2023-11-26T05:58:24.045158Z',
-        },
-      },
-    ],
-  },
-};
-
-const MOCK_REFEREES: RefereesQuery = {
-  referralSetReferees: {
-    __typename: 'ReferralSetRefereeConnection',
-    edges: [
-      {
-        node: {
-          atEpoch: 1,
-          joinedAt: '2023-11-21T14:17:09.257235Z',
-          refereeId:
-            '0987654321098765432109876543210987654321098765432109876543219876',
-          referralSetId:
-            '3772e570fbab89e50e563036b01dd949c554e5b5fe7908449672dfce9a8adffa',
-          totalRefereeGeneratedRewards: '1234',
-          totalRefereeNotionalTakerVolume: '5678',
-          __typename: 'ReferralSetReferee',
-        },
-      },
-    ],
-  },
-};
-
-const programMock: MockedResponse<ReferralProgramQuery> = {
-  request: {
-    query: ReferralProgramDocument,
-  },
-  result: { data: MOCK_REFERRAL_PROGRAM },
-};
-
-const referralSetAsReferrerMock: MockedResponse<
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables
-> = {
-  request: {
-    query: ReferralSetsDocument,
-    variables: {
-      referrer: MOCK_PUBKEY,
-    },
-  },
-  result: {
-    data: MOCK_REFERRER_SET,
-  },
-};
-
-const noReferralSetAsReferrerMock: MockedResponse<
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables
-> = {
-  request: {
-    query: ReferralSetsDocument,
-    variables: {
-      referrer: MOCK_PUBKEY,
-    },
-  },
-  result: {
-    data: { referralSets: { edges: [] } },
-  },
-};
-
-const referralSetAsRefereeMock: MockedResponse<
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables
-> = {
-  request: {
-    query: ReferralSetsDocument,
-    variables: {
-      referee: MOCK_PUBKEY,
-    },
-  },
-  result: {
-    data: MOCK_REFERREE_SET,
-  },
-};
-
-const noReferralSetAsRefereeMock: MockedResponse<
-  ReferralSetsQuery,
-  ReferralSetsQueryVariables
-> = {
-  request: {
-    query: ReferralSetsDocument,
-    variables: {
-      referee: MOCK_PUBKEY,
-    },
-  },
-  result: {
-    data: { referralSets: { edges: [] } },
-  },
-};
-
-const stakeAvailableMock: MockedResponse<
-  StakeAvailableQuery,
-  StakeAvailableQueryVariables
-> = {
-  request: {
-    query: StakeAvailableDocument,
-    variables: {
-      partyId: MOCK_PUBKEY,
-    },
-  },
-  result: {
-    data: MOCK_STAKE_AVAILABLE,
-  },
-};
-
-const nonEligibleStakeAvailableMock: MockedResponse<
-  StakeAvailableQuery,
-  StakeAvailableQueryVariables
-> = {
-  request: {
-    query: StakeAvailableDocument,
-    variables: {
-      partyId: MOCK_PUBKEY,
-    },
-  },
-  result: {
-    data: MOCK_NON_ELIGIBILE_STAKE_AVAILABLE,
-  },
-};
-
-const refereesMock: MockedResponse<RefereesQuery, RefereesQueryVariables> = {
-  request: {
-    query: RefereesDocument,
-    variables: {
-      code: MOCK_REFERRER_SET.referralSets.edges[0]?.node.id as string,
-      aggregationEpochs:
-        MOCK_REFERRAL_PROGRAM.currentReferralProgram?.windowLength,
-    },
-  },
-  result: {
-    data: MOCK_REFEREES,
-  },
-};
-
-jest.mock('@vegaprotocol/wallet', () => {
-  return {
-    ...jest.requireActual('@vegaprotocol/wallet'),
-    useVegaWallet: () => {
-      const ctx: Partial<VegaWalletContextShape> = {
-        pubKey: MOCK_PUBKEY,
-      };
-      return ctx;
-    },
-  };
-});
-
-describe('ReferralStatistics', () => {
-  it('displays apply code when no data has been found for given pubkey', () => {
-    const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider mocks={[]} showWarnings={false}>
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
-    );
-
-    expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
-  });
-
-  it('displays referrer stats when given pubkey is a referrer', async () => {
-    const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider
-          mocks={[
-            programMock,
-            referralSetAsReferrerMock,
-            noReferralSetAsRefereeMock,
-            stakeAvailableMock,
-            refereesMock,
-          ]}
-          showWarnings={false}
-        >
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(
-        queryByTestId('referral-create-code-form')
-      ).not.toBeInTheDocument();
-      expect(queryByTestId('referral-statistics')).toBeInTheDocument();
-      expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
-        'referrer'
-      );
-    });
-  });
-
-  it('displays referee stats when given pubkey is a referee', async () => {
-    const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider
-          mocks={[
-            programMock,
-            noReferralSetAsReferrerMock,
-            referralSetAsRefereeMock,
-            stakeAvailableMock,
-            refereesMock,
-          ]}
-          showWarnings={false}
-        >
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(
-        queryByTestId('referral-create-code-form')
-      ).not.toBeInTheDocument();
-      expect(queryByTestId('referral-statistics')).toBeInTheDocument();
-      expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
-        'referee'
-      );
-    });
-  });
-
-  it('displays eligibility warning when the set is no longer valid due to the referrers stake', async () => {
-    const { queryByTestId } = render(
-      <MemoryRouter>
-        <MockedProvider
-          mocks={[
-            programMock,
-            noReferralSetAsReferrerMock,
-            referralSetAsRefereeMock,
-            nonEligibleStakeAvailableMock,
-            refereesMock,
-          ]}
-          showWarnings={false}
-        >
-          <ReferralStatistics />
-        </MockedProvider>
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(
-        queryByTestId('referral-create-code-form')
-      ).not.toBeInTheDocument();
-      expect(queryByTestId('referral-statistics')).toBeInTheDocument();
-      expect(queryByTestId('referral-statistics')?.dataset.as).toEqual(
-        'referee'
-      );
-      expect(queryByTestId('referral-eligibility-warning')).toBeInTheDocument();
-      expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,13 +1,15 @@
-import minBy from 'lodash/minBy';
 import { CodeTile, StatTile } from './tile';
 import {
   VegaIcon,
   VegaIconNames,
   truncateMiddle,
+  ExternalLink,
+  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { DEFAULT_AGGREGATION_DAYS, useReferral } from './hooks/use-referral';
+import { CreateCodeContainer } from './create-code-form';
 import classNames from 'classnames';
 import { Table } from './table';
 import {
@@ -23,54 +25,39 @@ 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 { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
+import maxBy from 'lodash/maxBy';
+import { DocsLinks } from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
-import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
-import { QUSDTooltip } from './qusd-tooltip';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
 
   const program = useReferralProgram();
 
-  const { data: referee, refetch: refereeRefetch } = useReferral({
+  const { data: referee } = useReferral({
     pubKey,
     role: 'referee',
     aggregationEpochs: program.details?.windowLength,
   });
-  const { data: referrer, refetch: referrerRefetch } = useReferral({
+  const { data: referrer } = useReferral({
     pubKey,
     role: 'referrer',
     aggregationEpochs: program.details?.windowLength,
   });
 
-  const refetch = useCallback(() => {
-    refereeRefetch();
-    referrerRefetch();
-  }, [refereeRefetch, referrerRefetch]);
-
   if (referee?.code) {
-    return (
-      <>
-        <Statistics data={referee} program={program} as="referee" />
-        {!referee.isEligible && <ApplyCodeForm />}
-      </>
-    );
+    return <Statistics data={referee} program={program} as="referee" />;
   }
 
   if (referrer?.code) {
-    return (
-      <>
-        <Statistics data={referrer} program={program} as="referrer" />
-        <RefereesTable data={referrer} program={program} />
-      </>
-    );
+    return <Statistics data={referrer} program={program} as="referrer" />;
   }
 
-  return <ApplyCodeFormContainer onSuccess={refetch} />;
+  return <CreateCodeContainer />;
 };
 
 export const useStats = ({
@@ -83,9 +70,7 @@ export const useStats = ({
   as?: 'referrer' | 'referee';
 }) => {
   const { benefitTiers } = program;
-  const { data: epochData } = useCurrentEpochInfoQuery({
-    fetchPolicy: 'network-only',
-  });
+  const { data: epochData } = useCurrentEpochInfoQuery();
   const { data: statsData } = useReferralSetStatsQuery({
     variables: {
       code: data?.code || '',
@@ -119,7 +104,7 @@ export const useStats = ({
     : 1;
   const finalCommissionValue = isNaN(multiplier)
     ? baseCommissionValue
-    : new BigNumber(multiplier).times(baseCommissionValue).toNumber();
+    : multiplier * baseCommissionValue;
 
   const discountFactorValue = refereeStats?.discountFactor
     ? Number(refereeStats.discountFactor)
@@ -131,8 +116,8 @@ export const useStats = ({
       t.discountFactor === discountFactorValue
   );
   const nextBenefitTierValue = currentBenefitTierValue
-    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier + 1)
-    : minBy(benefitTiers, (bt) => bt.tier); //  min tier number is lowest tier
+    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
+    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
   const epochsValue =
     !isNaN(currentEpoch) && refereeInfo?.atEpoch
       ? currentEpoch - refereeInfo?.atEpoch
@@ -178,7 +163,6 @@ export const Statistics = ({
     discountFactorValue,
     currentBenefitTierValue,
     epochsValue,
-    nextBenefitTierValue,
     nextBenefitTierVolumeValue,
     nextBenefitTierEpochsValue,
   } = useStats({ data, program, as });
@@ -190,7 +174,7 @@ export const Statistics = ({
 
   const { benefitTiers } = useReferralProgram();
 
-  const { stakeAvailable, isEligible } = useStakeAvailable();
+  const { stakeAvailable } = useStakeAvailable();
   const { details } = program;
 
   const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
@@ -212,51 +196,32 @@ export const Statistics = ({
           ).toString(),
         }
       )}
-      overrideWithNoProgram={!details}
     >
       {baseCommissionValue * 100}%
     </StatTile>
   );
-
   const stakingMultiplierTile = (
     <StatTile
       title={t('Staking multiplier')}
-      description={
-        <span
-          className={classNames({
-            'text-vega-red': !isEligible,
-          })}
-        >
-          {t('{{amount}} $VEGA staked', {
-            amount: addDecimalsFormatNumber(
-              stakeAvailable?.toString() || 0,
-              18
-            ),
-          })}
-        </span>
-      }
-      overrideWithNoProgram={!details}
+      description={t('{{amount}} $VEGA staked', {
+        amount: addDecimalsFormatNumber(stakeAvailable?.toString() || 0, 18),
+      })}
     >
       {multiplier || t('None')}
     </StatTile>
   );
-  const baseCommissionFormatted = BigNumber(baseCommissionValue)
-    .times(100)
-    .toString();
-  const finalCommissionFormatted = new BigNumber(finalCommissionValue)
-    .times(100)
-    .toString();
   const finalCommissionTile = (
     <StatTile
       title={t('Final commission rate')}
       description={
         !isNaN(multiplier)
-          ? `(${baseCommissionFormatted}% ⨉ ${multiplier} = ${finalCommissionFormatted}%)`
+          ? `(${baseCommissionValue * 100}% ⨉ ${multiplier} = ${
+              finalCommissionValue * 100
+            }%)`
           : undefined
       }
-      overrideWithNoProgram={!details}
     >
-      {finalCommissionFormatted}%
+      {finalCommissionValue * 100}%
     </StatTile>
   );
   const numberOfTradersValue = data.referees.length;
@@ -273,10 +238,9 @@ export const Statistics = ({
 
   const referrerVolumeTile = (
     <StatTile
-      title={t('myVolume', 'My volume (last {{count}} epochs)', {
+      title={t('My volume (last {{count}} epochs)', {
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
-      overrideWithNoProgram={!details}
     >
       {compactNumFormat.format(referrerVolumeValue)}
     </StatTile>
@@ -287,7 +251,7 @@ export const Statistics = ({
     .reduce((all, r) => all.plus(r), new BigNumber(0));
   const totalCommissionTile = (
     <StatTile
-      title={t('totalCommission', 'Total commission (last {{count}} epochs)', {
+      title={t('Total commission (last {{count}}} epochs)', {
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
       description={<QUSDTooltip />}
@@ -314,25 +278,15 @@ export const Statistics = ({
   );
 
   const currentBenefitTierTile = (
-    <StatTile
-      title={t('Current tier')}
-      description={
-        nextBenefitTierValue?.tier
-          ? t('(Next tier: {{nextTier}})', {
-              nextTier: nextBenefitTierValue?.tier,
-            })
-          : undefined
-      }
-      overrideWithNoProgram={!details}
-    >
+    <StatTile title={t('Current tier')}>
       {isApplyCodePreview
         ? currentBenefitTierValue?.tier || benefitTiers[0]?.tier || 'None'
         : currentBenefitTierValue?.tier || 'None'}
     </StatTile>
   );
   const discountFactorTile = (
-    <StatTile title={t('Discount')} overrideWithNoProgram={!details}>
-      {isApplyCodePreview && benefitTiers.length >= 1
+    <StatTile title={t('Discount')}>
+      {isApplyCodePreview
         ? benefitTiers[0].discountFactor * 100
         : discountFactorValue * 100}
       %
@@ -340,14 +294,9 @@ export const Statistics = ({
   );
   const runningVolumeTile = (
     <StatTile
-      title={t(
-        'runningNotionalOverEpochs',
-        'Combined volume (last {{count}} epochs)',
-        {
-          count: details?.windowLength,
-        }
-      )}
-      overrideWithNoProgram={!details}
+      title={t('Combined volume (last {{count}} epochs)', {
+        count: details?.windowLength,
+      })}
     >
       {compactNumFormat.format(runningVolumeValue)}
     </StatTile>
@@ -356,14 +305,14 @@ export const Statistics = ({
     <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
   );
   const nextTierVolumeTile = (
-    <StatTile title={t('Volume to next tier')} overrideWithNoProgram={!details}>
+    <StatTile title={t('Volume to next tier')}>
       {nextBenefitTierVolumeValue <= 0
         ? '0'
         : compactNumFormat.format(nextBenefitTierVolumeValue)}
     </StatTile>
   );
   const nextTierEpochsTile = (
-    <StatTile title={t('Epochs to next tier')} overrideWithNoProgram={!details}>
+    <StatTile title={t('Epochs to next tier')}>
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );
@@ -384,60 +333,28 @@ export const Statistics = ({
     </>
   );
 
-  const eligibilityWarning = as === 'referee' && !isEligible && (
-    <div
-      data-testid="referral-eligibility-warning"
-      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-1/2 lg:w-1/3"
-    >
-      <h2 className="text-2xl mb-2">{t('Referral code no longer valid')}</h2>
-      <p>
-        {t(
-          'Your referral code is no longer valid as the referrer no longer meets the minimum requirements. Apply a new code to continue receiving discounts.'
-        )}
-      </p>
-    </div>
-  );
-
-  return (
-    <div
-      data-testid="referral-statistics"
-      data-as={as}
-      className="relative mx-auto mb-20"
-    >
-      <div
-        className={classNames('grid grid-cols-1 grid-rows-1 gap-5', {
-          'opacity-20 pointer-events-none': as === 'referee' && !isEligible,
-        })}
-      >
-        {as === 'referrer' && referrerTiles}
-        {as === 'referee' && refereeTiles}
-      </div>
-
-      {eligibilityWarning}
-    </div>
-  );
-};
-
-export const RefereesTable = ({
-  data,
-  program,
-}: {
-  data: NonNullable<ReturnType<typeof useReferral>['data']>;
-  program: ReturnType<typeof useReferralProgram>;
-}) => {
-  const t = useT();
   const [collapsed, setCollapsed] = useState(false);
   const tableRef = useRef<HTMLTableElement>(null);
-  const { details } = program;
   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) */}
-      {data.referees.length > 0 && (
+      {as === 'referrer' && data.referees.length > 0 && (
         <div className="mt-20 mb-20">
           <h2 className="mb-5 text-2xl">{t('Referees')}</h2>
           <div
@@ -467,25 +384,20 @@ export const RefereesTable = ({
                 { name: 'joined', displayName: t('Date Joined') },
                 {
                   name: 'volume',
-                  displayName: t(
-                    'volumeLastEpochs',
-                    'Volume (last {{count}} epochs)',
-                    {
-                      count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
-                    }
-                  ),
+                  displayName: t('Volume (last {{count}} epochs)', {
+                    count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+                  }),
                 },
                 {
                   name: 'commission',
                   displayName: (
                     <Trans
-                      i18nKey="referralStatisticsCommission"
+                      i18nKey="referral-statistics-commission"
                       defaults="Commission earned in <0>qUSD</0> (last {{count}} epochs)"
                       values={{
                         count:
                           details?.windowLength || DEFAULT_AGGREGATION_DAYS,
                       }}
-                      components={[<QUSDTooltip key="qusd" />]}
                       ns={ns}
                     />
                   ),
@@ -517,3 +429,28 @@ export const RefereesTable = ({
     </>
   );
 };
+
+export const QUSDTooltip = () => {
+  const t = useT();
+  return (
+    <Tooltip
+      description={
+        <>
+          <p className="mb-1">
+            {t(
+              'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
+            )}
+          </p>
+          {DocsLinks && (
+            <ExternalLink href={DocsLinks.QUANTUM}>
+              {t('Find out more')}
+            </ExternalLink>
+          )}
+        </>
+      }
+      underline={true}
+    >
+      <span>{t('qUSD')}</span>
+    </Tooltip>
+  );
+};

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

@@ -4,10 +4,11 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
+import { HowItWorksTable } from './how-it-works-table';
 import { LandingBanner } from './landing-banner';
 import { TiersContainer } from './tiers';
 import { TabLink } from './buttons';
-import { Outlet, useMatch } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { Routes } from '../../lib/links';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
@@ -17,17 +18,15 @@ import { usePageTitleStore } from '../../stores';
 import { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 const Nav = () => {
   const t = useT();
-  const match = useMatch(Routes.REFERRALS_APPLY_CODE);
   return (
     <div className="flex justify-center border-b border-vega-cdark-500">
-      <TabLink end to={match ? Routes.REFERRALS_APPLY_CODE : Routes.REFERRALS}>
-        {t('Apply code')}
+      <TabLink end to={Routes.REFERRALS}>
+        {t('I want a code')}
       </TabLink>
-      <TabLink to={Routes.REFERRALS_CREATE_CODE}>{t('Create code')}</TabLink>
+      <TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
     </div>
   );
 };
@@ -66,7 +65,7 @@ export const Referrals = () => {
   }, [updateTitle, t]);
 
   return (
-    <ErrorBoundary feature="referrals">
+    <>
       <LandingBanner />
 
       {showNav && <Nav />}
@@ -96,16 +95,18 @@ export const Referrals = () => {
         <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={REFERRAL_DOCS_LINK}
             target="_blank"
           >
-            {t('Read the docs')} <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+            {t('Read the terms')}{' '}
+            <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
           </TradingAnchorButton>
         </div>
       </div>
-    </ErrorBoundary>
+    </>
   );
 };

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

@@ -14,10 +14,8 @@ export const Tag = ({
     className={classNames(
       'w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
       {
-        'border-vega-yellow-550  text-vega-yellow-550 dark:border-vega-yellow-500  dark:text-vega-yellow-500':
-          color === 'yellow',
-        'border-vega-green-550  text-vega-green-550 dark:border-vega-green-500  dark:text-vega-green-500':
-          color === 'green',
+        'border-vega-yellow-500  text-vega-yellow-500': color === 'yellow',
+        'border-vega-green-500  text-vega-green-500': color === 'green',
         'border-vega-blue-500  text-vega-blue-500': color === 'blue',
         'border-vega-purple-500  text-vega-purple-500': color === 'purple',
         'border-vega-pink-500  text-vega-pink-500': color === 'pink',

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

@@ -1,43 +1,15 @@
-import {
-  addDecimalsFormatNumber,
-  getDateTimeFormat,
-} from '@vegaprotocol/utils';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { useReferralProgram } from './hooks/use-referral-program';
 import { Table } from './table';
 import classNames from 'classnames';
 import { BORDER_COLOR, GRADIENT } from './constants';
 import { Tag } from './tag';
 import type { ComponentProps, ReactNode } from 'react';
-import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
-import {
-  DApp,
-  DocsLinks,
-  TOKEN_PROPOSAL,
-  TOKEN_PROPOSALS,
-  useLinks,
-} from '@vegaprotocol/environment';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { DApp, TOKEN_PROPOSALS, useLinks } from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 
-// rainbow-ish order
-const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
-  'pink',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'purple',
-];
-
-const getTierColor = (tier: number) => {
-  const tiers = Object.keys(TIER_COLORS).length;
-  let index = Math.abs(tier - 1);
-  if (tier >= tiers) {
-    index = index % tiers;
-  }
-  return TIER_COLORS[index];
-};
-
 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
   <div
     className={classNames(
@@ -51,63 +23,51 @@ const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
 
 const StakingTier = ({
   tier,
+  label,
   referralRewardMultiplier,
   minimumStakedTokens,
 }: {
   tier: number;
+  label: string;
   referralRewardMultiplier: string;
   minimumStakedTokens: string;
 }) => {
   const t = useT();
-  const minimum = addDecimalsFormatNumber(minimumStakedTokens, 18);
-
-  // TODO: Decide what to do with the multiplier images
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const multiplierImage = (
-    <div
-      aria-hidden
-      className={classNames(
-        'w-full max-w-[80px] h-full min-h-[80px]',
-        'bg-cover bg-right-bottom',
-        {
-          "bg-[url('/1x.png')]": tier === 1,
-          "bg-[url('/2x.png')]": tier === 2,
-          "bg-[url('/3x.png')]": tier === 3,
-        }
-      )}
-    >
-      <span className="sr-only">{`${referralRewardMultiplier}x multiplier`}</span>
-    </div>
-  );
-
+  const color: Record<number, ComponentProps<typeof Tag>['color']> = {
+    1: 'green',
+    2: 'blue',
+    3: 'pink',
+  };
   return (
     <div
       className={classNames(
         'overflow-hidden',
         'border rounded-md w-full',
         'flex flex-row',
-        'bg-white dark:bg-vega-cdark-900',
         GRADIENT,
         BORDER_COLOR
       )}
     >
-      <div
-        className={classNames(
-          'p-3 flex flex-row min-h-[80px] h-full items-center'
+      <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={240}
+            height={240}
+            className="w-full h-full"
+          />
         )}
-      >
-        <div>
-          <Tag color={getTierColor(tier)}>
-            {t('Multiplier')} {referralRewardMultiplier}x
-          </Tag>
-          <p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
-            <Trans
-              defaults="Stake a minimum of <0>{{minimum}}</0> $VEGA tokens"
-              values={{ minimum }}
-              components={[<b key={minimum}></b>]}
-            />
-          </p>
-        </div>
+      </div>
+      <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}} $VEGA tokens', {
+            minimumStakedTokens,
+          })}
+        </p>
       </div>
     </div>
   );
@@ -126,29 +86,12 @@ export const TiersContainer = () => {
 
   if ((!loading && !details) || error) {
     return (
-      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20 text-sm text-center">
+      <div className="text-base px-5 py-10 text-center">
         <Trans
-          defaults="There are currently no active referral programs. Check the <0>Governance App</0> to see if there are any proposals in progress and vote."
+          defaults="We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>."
           components={[
-            <ExternalLink
-              href={governanceLink(TOKEN_PROPOSALS)}
-              key="link"
-              className="underline"
-            >
-              {t('Governance App')}
-            </ExternalLink>,
-          ]}
-          ns={ns}
-        />{' '}
-        <Trans
-          defaults="Use the <0>docs</0> tutorial to propose a new program."
-          components={[
-            <ExternalLink
-              href={DocsLinks?.REFERRALS}
-              key="link"
-              className="underline"
-            >
-              {t('docs')}
+            <ExternalLink href={governanceLink(TOKEN_PROPOSALS)} key="link">
+              {t('here')}
             </ExternalLink>,
           ]}
           ns={ns}
@@ -159,93 +102,47 @@ export const TiersContainer = () => {
 
   return (
     <>
-      <h2 className="text-3xl mt-10">{t('Current program details')}</h2>
-      {details?.id && (
-        <p>
-          <Trans
-            defaults="As a result of governance proposal <0>{{proposal}}</0> the program below is currently active on the Vega network."
-            values={{ proposal: truncateMiddle(details.id) }}
-            components={[
-              <ExternalLink
-                key="referral-program-proposal-link"
-                href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
-                className="underline"
-              >
-                proposal
-              </ExternalLink>,
-            ]}
-          />
-        </p>
-      )}
-
-      {/* Meta */}
-      <div className="mt-10 flex flex-row items-baseline justify-between text-xs text-vega-clight-100 dark:text-vega-cdark-100 font-alpha calt">
-        {details?.id && (
-          <span>
-            {t('Proposal ID:')}{' '}
-            <ExternalLink
-              href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
-            >
-              <span>{truncateMiddle(details.id)}</span>
-            </ExternalLink>
-          </span>
-        )}
+      {/* 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>
+          <span className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
             {t('Program ends:')} {ends}
           </span>
         )}
       </div>
+      <div className="mb-20">
+        {loading || !benefitTiers || benefitTiers.length === 0 ? (
+          <Loading variant="large" />
+        ) : (
+          <TiersTable
+            windowLength={details?.windowLength}
+            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>
 
-      {/* Container */}
-      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20">
-        {/* Benefit tiers */}
-        <div className="flex flex-col mb-5">
-          <h3 className="text-2xl calt">{t('Benefit tiers')}</h3>
-          <p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
-            {t(
-              'Members of a referral group can access the increasing commission and discount benefits defined in the program based on their combined running volume.'
-            )}
-          </p>
-        </div>
-        <div className="mb-10">
-          {loading || !benefitTiers || benefitTiers.length === 0 ? (
+      {/* Staking tiers */}
+      <div className="flex flex-row items-baseline justify-between mb-5">
+        <h2 className="text-2xl">{t('Staking multipliers')}</h2>
+      </div>
+      <div className="mb-20 flex flex-col justify-items-stretch lg:flex-row gap-5">
+        {loading || !stakingTiers || stakingTiers.length === 0 ? (
+          <>
             <Loading variant="large" />
-          ) : (
-            <TiersTable
-              windowLength={details?.windowLength}
-              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-col mb-5">
-          <h3 className="text-2xl calt">{t('Staking multipliers')}</h3>
-          <p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
-            {t(
-              'Referrers can access the commission multipliers defined in the program by staking VEGA tokens in the amounts shown.'
-            )}
-          </p>
-        </div>
-        <div className="gap-5 grid lg:grid-cols-3">
-          {loading || !stakingTiers || stakingTiers.length === 0 ? (
-            <>
-              <Loading variant="large" />
-              <Loading variant="large" />
-              <Loading variant="large" />
-            </>
-          ) : (
-            <StakingTiers data={stakingTiers} />
-          )}
-        </div>
+            <Loading variant="large" />
+            <Loading variant="large" />
+          </>
+        ) : (
+          <StakingTiers data={stakingTiers} />
+        )}
       </div>
     </>
   );
@@ -257,14 +154,17 @@ const StakingTiers = ({
   data: ReturnType<typeof useReferralProgram>['stakingTiers'];
 }) => (
   <>
-    {data.map(({ tier, referralRewardMultiplier, minimumStakedTokens }, i) => (
-      <StakingTier
-        key={i}
-        tier={tier}
-        referralRewardMultiplier={referralRewardMultiplier}
-        minimumStakedTokens={minimumStakedTokens}
-      />
-    ))}
+    {data.map(
+      ({ tier, label, referralRewardMultiplier, minimumStakedTokens }, i) => (
+        <StakingTier
+          key={i}
+          tier={tier}
+          label={label}
+          referralRewardMultiplier={referralRewardMultiplier}
+          minimumStakedTokens={minimumStakedTokens}
+        />
+      )
+    )}
   </>
 );
 
@@ -289,54 +189,28 @@ const TiersTable = ({
         {
           name: 'commission',
           displayName: t('Referrer commission'),
-          tooltip: t(
-            "The proportion of the referee's taker fees to be rewarded to the referrer"
-          ),
-        },
-        {
-          name: 'discount',
-          displayName: t('Referee trading discount'),
-          tooltip: t(
-            "The proportion of the referee's taker fees to be discounted"
-          ),
+          tooltip: t('A percentage of commission earned by the referrer'),
         },
+        { name: 'discount', displayName: t('Referrer trading discount') },
         {
           name: 'volume',
-          displayName: t(
-            'minTradingVolume',
-            'Min. trading volume (last {{count}} epochs)',
-            {
-              count: windowLength,
-            }
-          ),
-          tooltip: t('The minimum running notional for the given benefit tier'),
-        },
-        {
-          name: 'epochs',
-          displayName: t('Min. epochs'),
-          tooltip: t(
-            'The minimum number of epochs the party needs to be in the referral set to be eligible for the benefit'
-          ),
+          displayName: t('Min. trading volume (last {{count}} epochs)', {
+            count: windowLength,
+          }),
         },
+        { name: 'epochs', displayName: t('Min. epochs') },
       ]}
-      className="bg-white dark:bg-vega-cdark-900"
       data={data.map((d) => ({
         ...d,
         className: classNames({
-          'from-vega-yellow-400 dark:from-vega-yellow-600 to-20%  bg-highlight':
-            'yellow' === getTierColor(d.tier),
-          'from-vega-green-400 dark:from-vega-green-600 to-20%  bg-highlight':
-            'green' === getTierColor(d.tier),
-          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-            'blue' === getTierColor(d.tier),
-          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
-            'purple' === getTierColor(d.tier),
           'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            'pink' === getTierColor(d.tier),
+            d.tier === 1,
+          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
+            d.tier === 2,
+          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
+            d.tier === 3,
           'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            'orange' === getTierColor(d.tier),
-          'from-vega-clight-200 dark:from-vega-cdark-200 to-20%  bg-highlight':
-            'none' === getTierColor(d.tier),
+            d.tier > 3,
         }),
       }))}
     />

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

@@ -34,17 +34,8 @@ type StatTileProps = {
   title: string;
   description?: ReactNode;
   children?: ReactNode;
-  overrideWithNoProgram?: boolean;
 };
-export const StatTile = ({
-  title,
-  description,
-  children,
-  overrideWithNoProgram = false,
-}: StatTileProps) => {
-  if (overrideWithNoProgram) {
-    return <NoProgramTile title={title} />;
-  }
+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">
@@ -60,20 +51,6 @@ export const StatTile = ({
   );
 };
 
-export const NoProgramTile = ({ title }: Pick<StatTileProps, 'title'>) => {
-  const t = useT();
-  return (
-    <Tile title={title}>
-      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
-        {title}
-      </h3>
-      <div className="text-xs text-vega-clight-300 dark:text-vega-cdark-300 leading-[3rem]">
-        {t('No active program')}
-      </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'

apps/trading/client-pages/rewards/rewards.tsx

@@ -1,25 +1,12 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
-import { usePageTitleStore } from '../../stores';
-import { ErrorBoundary } from '../../components/error-boundary';
 
 export const Rewards = () => {
   const t = useT();
-  const title = t('Rewards');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
   return (
-    <ErrorBoundary feature="rewards">
-      <div className="container mx-auto p-4">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
-        <RewardsContainer />
-      </div>
-    </ErrorBoundary>
+    <div className="container mx-auto p-4">
+      <h1 className="px-4 pb-4 text-2xl">{t('Rewards')}</h1>
+      <RewardsContainer />
+    </div>
   );
 };

apps/trading/components/error-boundary/error-boundary.spec.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ErrorBoundary } from './error-boundary';
-import { localLoggerFactory } from '@vegaprotocol/logger';
-
-jest.mock('@vegaprotocol/logger', () => ({
-  localLoggerFactory: jest.fn(),
-}));
-
-describe('ErrorBoundary', () => {
-  const mockLogError = jest.fn();
-  const originalConsoleError = console.error;
-  const mockLoggerFactory = localLoggerFactory as jest.Mock;
-
-  beforeAll(() => {
-    console.error = () => {};
-  });
-
-  afterAll(() => {
-    console.error = originalConsoleError;
-  });
-
-  beforeEach(() => {
-    mockLoggerFactory.mockImplementation(() => ({
-      error: mockLogError,
-    }));
-  });
-
-  afterEach(() => {
-    mockLogError.mockClear();
-  });
-
-  it('renders children', () => {
-    render(
-      <ErrorBoundary feature="feature">
-        <div data-testid="child" />
-      </ErrorBoundary>
-    );
-
-    expect(screen.getByTestId('child')).toBeInTheDocument();
-  });
-
-  it('renders fallback ui and logs an error', () => {
-    const error = new Error('bork!');
-    const BorkedComponent = () => {
-      throw error;
-    };
-
-    render(
-      <ErrorBoundary feature="test-feature">
-        <BorkedComponent />
-      </ErrorBoundary>
-    );
-
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-    expect(mockLogError).toHaveBeenCalledTimes(1);
-    expect(mockLogError).toHaveBeenCalledWith(
-      error.message,
-      expect.stringContaining('componentStack')
-    );
-  });
-
-  it('renders fallback render prop if error', () => {
-    const error = new Error('bork!');
-    const BorkedComponent = () => {
-      throw error;
-    };
-
-    render(
-      <ErrorBoundary
-        feature="test-feature"
-        fallback={<div data-testid="custom-ui" />}
-      >
-        <BorkedComponent />
-      </ErrorBoundary>
-    );
-
-    expect(screen.getByTestId('custom-ui')).toBeInTheDocument();
-  });
-});

apps/trading/components/error-boundary/error-boundary.tsx

@@ -1,53 +0,0 @@
-import { localLoggerFactory, type LocalLogger } from '@vegaprotocol/logger';
-import { Component, type ErrorInfo, type ReactNode } from 'react';
-import { useT } from '../../lib/use-t';
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  feature: string;
-  fallback?: ReactNode;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-}
-
-export class ErrorBoundary extends Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  logger: LocalLogger | null = null;
-
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-
-    this.logger = localLoggerFactory({ application: props.feature });
-
-    this.state = {
-      hasError: false,
-    };
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    if (this.logger) {
-      this.logger.error(error.message, JSON.stringify(info));
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback || <DefaultFallback />;
-    }
-
-    return this.props.children;
-  }
-}
-
-const DefaultFallback = () => {
-  const t = useT();
-  return <p className="text-xs">{t('Something went wrong')}</p>;
-};

apps/trading/components/error-boundary/index.ts

@@ -1 +0,0 @@
-export { ErrorBoundary } from './error-boundary';

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

@@ -16,11 +16,18 @@ query DiscountPrograms {
   }
 }
 
-query Fees($partyId: ID!) {
+query Fees(
+  $partyId: ID!
+  $volumeDiscountEpochs: Int!
+  $referralDiscountEpochs: Int!
+) {
   epoch {
     id
   }
-  volumeDiscountStats(partyId: $partyId, pagination: { last: 1 }) {
+  volumeDiscountStats(
+    partyId: $partyId
+    pagination: { last: $volumeDiscountEpochs }
+  ) {
     edges {
       node {
         atEpoch
@@ -52,7 +59,10 @@ query Fees($partyId: ID!) {
       }
     }
   }
-  referralSetStats(partyId: $partyId, pagination: { last: 1 }) {
+  referralSetStats(
+    partyId: $partyId
+    pagination: { last: $referralDiscountEpochs }
+  ) {
     edges {
       node {
         atEpoch

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

@@ -10,6 +10,8 @@ export type DiscountProgramsQuery = { __typename?: 'Query', currentReferralProgr
 
 export type FeesQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
+  volumeDiscountEpochs: Types.Scalars['Int'];
+  referralDiscountEpochs: Types.Scalars['Int'];
 }>;
 
 
@@ -63,11 +65,14 @@ export type DiscountProgramsQueryHookResult = ReturnType<typeof useDiscountProgr
 export type DiscountProgramsLazyQueryHookResult = ReturnType<typeof useDiscountProgramsLazyQuery>;
 export type DiscountProgramsQueryResult = Apollo.QueryResult<DiscountProgramsQuery, DiscountProgramsQueryVariables>;
 export const FeesDocument = gql`
-    query Fees($partyId: ID!) {
+    query Fees($partyId: ID!, $volumeDiscountEpochs: Int!, $referralDiscountEpochs: Int!) {
   epoch {
     id
   }
-  volumeDiscountStats(partyId: $partyId, pagination: {last: 1}) {
+  volumeDiscountStats(
+    partyId: $partyId
+    pagination: {last: $volumeDiscountEpochs}
+  ) {
     edges {
       node {
         atEpoch
@@ -99,7 +104,7 @@ export const FeesDocument = gql`
       }
     }
   }
-  referralSetStats(partyId: $partyId, pagination: {last: 1}) {
+  referralSetStats(partyId: $partyId, pagination: {last: $referralDiscountEpochs}) {
     edges {
       node {
         atEpoch
@@ -124,6 +129,8 @@ export const FeesDocument = gql`
  * const { data, loading, error } = useFeesQuery({
  *   variables: {
  *      partyId: // value for 'partyId'
+ *      volumeDiscountEpochs: // value for 'volumeDiscountEpochs'
+ *      referralDiscountEpochs: // value for 'referralDiscountEpochs'
  *   },
  * });
  */

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

@@ -36,25 +36,25 @@ export const FeesContainer = () => {
   const { data: markets, loading: marketsLoading } = useMarketList();
 
   const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
+    useDiscountProgramsQuery();
 
   const volumeDiscountWindowLength =
     programData?.currentVolumeDiscountProgram?.windowLength || 1;
   const referralDiscountWindowLength =
     programData?.currentReferralProgram?.windowLength || 1;
+
   const { data: feesData, loading: feesLoading } = useFeesQuery({
     variables: {
       partyId: pubKey || '',
+      volumeDiscountEpochs: volumeDiscountWindowLength,
+      referralDiscountEpochs: referralDiscountWindowLength,
     },
-    skip: !pubKey,
+    skip: !pubKey || !programData,
   });
 
-  const previousEpoch = (Number(feesData?.epoch.id) || 0) - 1;
-
   const { volumeDiscount, volumeTierIndex, volumeInWindow, volumeTiers } =
     useVolumeStats(
-      previousEpoch,
-      feesData?.volumeDiscountStats.edges?.[0]?.node,
+      feesData?.volumeDiscountStats,
       programData?.currentVolumeDiscountProgram
     );
 
@@ -67,12 +67,12 @@ export const FeesContainer = () => {
     code,
     isReferrer,
   } = useReferralStats(
-    previousEpoch,
-    feesData?.referralSetStats.edges?.[0]?.node,
-    feesData?.referralSetReferees.edges?.[0]?.node,
+    feesData?.referralSetStats,
+    feesData?.referralSetReferees,
     programData?.currentReferralProgram,
-    feesData?.referrer.edges?.[0]?.node,
-    feesData?.referee.edges?.[0]?.node
+    feesData?.epoch,
+    feesData?.referrer,
+    feesData?.referee
   );
 
   const loading = paramsLoading || feesLoading || programLoading;
@@ -310,25 +310,16 @@ export const CurrentVolume = ({
   const t = useT();
   const nextTier = tiers[tierIndex + 1];
   const requiredForNextTier = nextTier
-    ? new BigNumber(nextTier.minimumRunningNotionalTakerVolume).minus(
-        windowLengthVolume
-      )
-    : new BigNumber(0);
-  const currentVolume = new BigNumber(windowLengthVolume);
+    ? Number(nextTier.minimumRunningNotionalTakerVolume) - windowLengthVolume
+    : 0;
 
   return (
     <div className="flex flex-col gap-3 pt-4">
       <CardStat
-        value={
-          currentVolume.isZero()
-            ? `<${formatNumberRounded(requiredForNextTier)}`
-            : formatNumberRounded(currentVolume)
-        }
-        text={t('pastEpochs', 'Past {{count}} epochs', {
-          count: windowLength,
-        })}
+        value={formatNumberRounded(new BigNumber(windowLengthVolume))}
+        text={t('Past {{count}} epochs', { count: windowLength })}
       />
-      {requiredForNextTier.isGreaterThan(0) && (
+      {requiredForNextTier > 0 && (
         <CardStat
           value={formatNumber(requiredForNextTier)}
           text={t('Required for next tier')}
@@ -353,13 +344,9 @@ const ReferralBenefits = ({
       <CardStat
         // all sets volume (not just current party)
         value={formatNumber(setRunningNotionalTakerVolume)}
-        text={t(
-          'runningNotionalOverEpochs',
-          'Combined running notional over the {{count}} epochs',
-          {
-            count: epochs,
-          }
-        )}
+        text={t('Combined running notional over the {{count}} epochs', {
+          count: epochs,
+        })}
       />
       <CardStat value={epochsInSet} text={t('epochs in referral set')} />
     </div>
@@ -466,27 +453,31 @@ const VolumeTiers = ({
             <Th>{t('Discount')}</Th>
             <Th>{t('Min. trading volume')}</Th>
             <Th>
-              {t('myVolume', 'My volume (last {{count}} epochs)', {
-                count: windowLength,
-              })}
+              {t('My volume (last {{count}} epochs)', { count: windowLength })}
             </Th>
             <Th />
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers).map((tier, i) => {
-            const isUserTier = tierIndex === i;
+          {Array.from(tiers)
+            .reverse()
+            .map((tier, i) => {
+              const isUserTier = tiers.length - 1 - tierIndex === i;
 
-            return (
-              <Tr key={i}>
-                <Td>{i + 1}</Td>
-                <Td>{formatPercentage(Number(tier.volumeDiscountFactor))}%</Td>
-                <Td>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</Td>
-                <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
-                <Td>{isUserTier ? <YourTier /> : null}</Td>
-              </Tr>
-            );
-          })}
+              return (
+                <Tr key={i}>
+                  <Td>{i + 1}</Td>
+                  <Td>
+                    {formatPercentage(Number(tier.volumeDiscountFactor))}%
+                  </Td>
+                  <Td>
+                    {formatNumber(tier.minimumRunningNotionalTakerVolume)}
+                  </Td>
+                  <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
+                  <Td>{isUserTier ? <YourTier /> : null}</Td>
+                </Tr>
+              );
+            })}
         </tbody>
       </Table>
     </div>
@@ -529,33 +520,37 @@ const ReferralTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers).map((t, i) => {
-            const isUserTier = tierIndex === i;
+          {Array.from(tiers)
+            .reverse()
+            .map((t, i) => {
+              const isUserTier = tiers.length - 1 - tierIndex === i;
 
-            const requiredVolume = Number(t.minimumRunningNotionalTakerVolume);
-            let unlocksIn = null;
-
-            if (
-              referralVolumeInWindow >= requiredVolume &&
-              epochsInSet < t.minimumEpochs
-            ) {
-              unlocksIn = (
-                <span className="text-muted">
-                  Unlocks in {t.minimumEpochs - epochsInSet} epochs
-                </span>
+              const requiredVolume = Number(
+                t.minimumRunningNotionalTakerVolume
               );
-            }
+              let unlocksIn = null;
 
-            return (
-              <Tr key={i}>
-                <Td>{i + 1}</Td>
-                <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
-                <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
-                <Td>{t.minimumEpochs}</Td>
-                <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
-              </Tr>
-            );
-          })}
+              if (
+                referralVolumeInWindow >= requiredVolume &&
+                epochsInSet < t.minimumEpochs
+              ) {
+                unlocksIn = (
+                  <span className="text-muted">
+                    Unlocks in {t.minimumEpochs - epochsInSet} epochs
+                  </span>
+                );
+              }
+
+              return (
+                <Tr key={i}>
+                  <Td>{i + 1}</Td>
+                  <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
+                  <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
+                  <Td>{t.minimumEpochs}</Td>
+                  <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
+                </Tr>
+              );
+            })}
         </tbody>
       </Table>
     </div>

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

@@ -2,15 +2,46 @@ import { renderHook } from '@testing-library/react';
 import { useReferralStats } from './use-referral-stats';
 
 describe('useReferralStats', () => {
-  const stat = {
-    __typename: 'ReferralSetStats' as const,
-    atEpoch: 9,
-    discountFactor: '0.01',
-    referralSetRunningNotionalTakerVolume: '100',
+  const setStats = {
+    edges: [
+      {
+        __typename: 'ReferralSetStatsEdge' as const,
+        node: {
+          __typename: 'ReferralSetStats' as const,
+          atEpoch: 9,
+          discountFactor: '0.2',
+          referralSetRunningNotionalTakerVolume: '100',
+        },
+      },
+      {
+        __typename: 'ReferralSetStatsEdge' as const,
+        node: {
+          __typename: 'ReferralSetStats' as const,
+          atEpoch: 10,
+          discountFactor: '0.3',
+          referralSetRunningNotionalTakerVolume: '200',
+        },
+      },
+    ],
   };
 
-  const set = {
-    atEpoch: 4,
+  const sets = {
+    edges: [
+      {
+        node: {
+          atEpoch: 3,
+        },
+      },
+      {
+        node: {
+          atEpoch: 4,
+        },
+      },
+    ],
+  };
+
+  const epoch = {
+    id: '10',
   };
 
   const program = {
@@ -47,36 +78,102 @@ describe('useReferralStats', () => {
     });
   });
 
-  it('returns default values if set is not from previous epoch', () => {
-    const { result } = renderHook(() =>
-      useReferralStats(10, stat, set, program)
-    );
-    expect(result.current).toEqual({
-      referralDiscount: 0,
-      referralVolumeInWindow: 0,
-      referralTierIndex: -1,
-      referralTiers: program.benefitTiers,
-      epochsInSet: 0,
-      code: undefined,
-      isReferrer: false,
-    });
-  });
-
   it('returns formatted data and tiers', () => {
     const { result } = renderHook(() =>
-      useReferralStats(9, stat, set, program)
+      useReferralStats(setStats, sets, program, epoch)
     );
 
+    // should use stats from latest epoch
+    const stats = setStats.edges[1].node;
+    const set = sets.edges[1].node;
+
     expect(result.current).toEqual({
-      referralDiscount: Number(stat.discountFactor),
+      referralDiscount: Number(stats.discountFactor),
       referralVolumeInWindow: Number(
-        stat.referralSetRunningNotionalTakerVolume
+        stats.referralSetRunningNotionalTakerVolume
       ),
-      referralTierIndex: 0,
+      referralTierIndex: 1,
       referralTiers: program.benefitTiers,
-      epochsInSet: stat.atEpoch - set.atEpoch,
+      epochsInSet: Number(epoch.id) - set.atEpoch,
       code: undefined,
       isReferrer: false,
     });
   });
+
+  it.each([
+    { joinedAt: 2, index: -1 },
+    { joinedAt: 3, index: -1 },
+    { joinedAt: 4, index: 0 },
+    { joinedAt: 5, index: 0 },
+    { joinedAt: 6, index: 1 },
+    { joinedAt: 7, index: 1 },
+    { joinedAt: 8, index: 2 },
+    { joinedAt: 9, index: 2 },
+  ])('joined at epoch: $joinedAt should be index: $index', (obj) => {
+    const statsA = {
+      edges: [
+        {
+          __typename: 'ReferralSetStatsEdge' as const,
+          node: {
+            __typename: 'ReferralSetStats' as const,
+            atEpoch: 10,
+            discountFactor: '0.3',
+            referralSetRunningNotionalTakerVolume: '100000',
+          },
+        },
+      ],
+    };
+    const setsA = {
+      edges: [
+        {
+          node: {
+            atEpoch: Number(epoch.id) - obj.joinedAt,
+          },
+        },
+      ],
+    };
+    const { result } = renderHook(() =>
+      useReferralStats(statsA, setsA, program, epoch)
+    );
+
+    expect(result.current.referralTierIndex).toEqual(obj.index);
+  });
+
+  it.each([
+    { volume: '50', index: -1 },
+    { volume: '100', index: 0 },
+    { volume: '150', index: 0 },
+    { volume: '200', index: 1 },
+    { volume: '250', index: 1 },
+    { volume: '300', index: 2 },
+    { volume: '999', index: 2 },
+  ])('volume: $volume should be index: $index', (obj) => {
+    const statsA = {
+      edges: [
+        {
+          __typename: 'ReferralSetStatsEdge' as const,
+          node: {
+            __typename: 'ReferralSetStats' as const,
+            atEpoch: 10,
+            discountFactor: '0.3',
+            referralSetRunningNotionalTakerVolume: obj.volume,
+          },
+        },
+      ],
+    };
+    const setsA = {
+      edges: [
+        {
+          node: {
+            atEpoch: 1,
+          },
+        },
+      ],
+    };
+    const { result } = renderHook(() =>
+      useReferralStats(statsA, setsA, program, epoch)
+    );
+
+    expect(result.current.referralTierIndex).toEqual(obj.index);
+  });
 });

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

@@ -1,24 +1,20 @@
+import compact from 'lodash/compact';
+import maxBy from 'lodash/maxBy';
+import { getReferralBenefitTier } from './utils';
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
+import { first } from 'lodash';
+
 export const useReferralStats = (
-  previousEpoch?: number,
-  referralStats?: NonNullable<
-    FeesQuery['referralSetStats']['edges']['0']
-  >['node'],
-  setReferees?: NonNullable<
-    FeesQuery['referralSetReferees']['edges']['0']
-  >['node'],
+  setStats?: FeesQuery['referralSetStats'],
+  setReferees?: FeesQuery['referralSetReferees'],
   program?: DiscountProgramsQuery['currentReferralProgram'],
-  setIfReferrer?: NonNullable<FeesQuery['referrer']['edges']['0']>['node'],
-  setIfReferee?: NonNullable<FeesQuery['referee']['edges']['0']>['node']
+  epoch?: FeesQuery['epoch'],
+  setIfReferrer?: FeesQuery['referrer'],
+  setIfReferee?: FeesQuery['referee']
 ) => {
   const referralTiers = program?.benefitTiers || [];
 
-  if (
-    !previousEpoch ||
-    referralStats?.atEpoch !== previousEpoch ||
-    !program ||
-    !setReferees
-  ) {
+  if (!setStats || !setReferees || !program || !epoch) {
     return {
       referralDiscount: 0,
       referralVolumeInWindow: 0,
@@ -30,22 +26,41 @@ export const useReferralStats = (
     };
   }
 
+  const setIfReferrerData = first(
+    compact(setIfReferrer?.edges).map((e) => e.node)
+  );
+  const setIfRefereeData = first(
+    compact(setIfReferee?.edges).map((e) => e.node)
+  );
+
+  const referralSetsStats = compact(setStats.edges).map((e) => e.node);
+  const referralSets = compact(setReferees.edges).map((e) => e.node);
+
+  const referralSet = maxBy(referralSets, (s) => s.atEpoch);
+  const referralStats = maxBy(referralSetsStats, (s) => s.atEpoch);
+
+  const epochsInSet = referralSet ? Number(epoch.id) - referralSet.atEpoch : 0;
+
   const referralDiscount = Number(referralStats?.discountFactor || 0);
   const referralVolumeInWindow = Number(
     referralStats?.referralSetRunningNotionalTakerVolume || 0
   );
 
-  const referralTierIndex = referralTiers.findIndex(
-    (tier) => tier.referralDiscountFactor === referralStats?.discountFactor
-  );
+  const referralTierIndex = referralStats
+    ? getReferralBenefitTier(
+        epochsInSet,
+        Number(referralStats.referralSetRunningNotionalTakerVolume),
+        referralTiers
+      )
+    : -1;
 
   return {
     referralDiscount,
     referralVolumeInWindow,
     referralTierIndex,
     referralTiers,
-    epochsInSet: referralStats.atEpoch - setReferees.atEpoch,
-    code: (setIfReferrer || setIfReferee)?.id,
-    isReferrer: Boolean(setIfReferrer),
+    epochsInSet,
+    code: (setIfReferrerData || setIfRefereeData)?.id,
+    isReferrer: Boolean(setIfReferrerData),
   };
 };

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

@@ -2,11 +2,27 @@ import { renderHook } from '@testing-library/react';
 import { useVolumeStats } from './use-volume-stats';
 
 describe('useReferralStats', () => {
-  const stats = {
-    __typename: 'VolumeDiscountStats' as const,
-    atEpoch: 10,
-    discountFactor: '0.05',
-    runningVolume: '200',
+  const statsList = {
+    edges: [
+      {
+        __typename: 'VolumeDiscountStatsEdge' as const,
+        node: {
+          __typename: 'VolumeDiscountStats' as const,
+          atEpoch: 9,
+          discountFactor: '0.1',
+          runningVolume: '100',
+        },
+      },
+      {
+        __typename: 'VolumeDiscountStatsEdge' as const,
+        node: {
+          __typename: 'VolumeDiscountStats' as const,
+          atEpoch: 10,
+          discountFactor: '0.3',
+          runningVolume: '200',
+        },
+      },
+    ],
   };
 
   const program = {
@@ -28,7 +44,7 @@ describe('useReferralStats', () => {
   };
 
   it('returns correct default values', () => {
-    const { result } = renderHook(() => useVolumeStats(10));
+    const { result } = renderHook(() => useVolumeStats());
     expect(result.current).toEqual({
       volumeDiscount: 0,
       volumeInWindow: 0,
@@ -37,18 +53,11 @@ describe('useReferralStats', () => {
     });
   });
 
-  it('returns default values if no stat is not from previous epoch', () => {
-    const { result } = renderHook(() => useVolumeStats(11, stats, program));
-    expect(result.current).toEqual({
-      volumeDiscount: 0,
-      volumeInWindow: 0,
-      volumeTierIndex: -1,
-      volumeTiers: program.benefitTiers,
-    });
-  });
-
   it('returns formatted data and tiers', () => {
-    const { result } = renderHook(() => useVolumeStats(10, stats, program));
+    const { result } = renderHook(() => useVolumeStats(statsList, program));
+
+    // should use stats from latest epoch
+    const stats = statsList.edges[1].node;
 
     expect(result.current).toEqual({
       volumeDiscount: Number(stats.discountFactor),
@@ -57,4 +66,30 @@ describe('useReferralStats', () => {
       volumeTiers: program.benefitTiers,
     });
   });
+
+  it.each([
+    { volume: '100', index: 0 },
+    { volume: '150', index: 0 },
+    { volume: '200', index: 1 },
+    { volume: '250', index: 1 },
+    { volume: '300', index: 2 },
+    { volume: '350', index: 2 },
+  ])('returns index: $index for the running volume: $volume', (obj) => {
+    const statsA = {
+      edges: [
+        {
+          __typename: 'VolumeDiscountStatsEdge' as const,
+          node: {
+            __typename: 'VolumeDiscountStats' as const,
+            atEpoch: 10,
+            discountFactor: '0.3',
+            runningVolume: obj.volume,
+          },
+        },
+      ],
+    };
+
+    const { result } = renderHook(() => useVolumeStats(statsA, program));
+    expect(result.current.volumeTierIndex).toBe(obj.index);
+  });
 });

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

@@ -1,15 +1,15 @@
+import compact from 'lodash/compact';
+import maxBy from 'lodash/maxBy';
+import { getVolumeTier } from './utils';
 import type { DiscountProgramsQuery, FeesQuery } from './__generated__/Fees';
 
 export const useVolumeStats = (
-  previousEpoch: number,
-  lastEpochStats?: NonNullable<
-    FeesQuery['volumeDiscountStats']['edges']['0']
-  >['node'],
+  stats?: FeesQuery['volumeDiscountStats'],
   program?: DiscountProgramsQuery['currentVolumeDiscountProgram']
 ) => {
   const volumeTiers = program?.benefitTiers || [];
 
-  if (!lastEpochStats || lastEpochStats.atEpoch !== previousEpoch || !program) {
+  if (!stats || !program) {
     return {
       volumeDiscount: 0,
       volumeTierIndex: -1,
@@ -18,11 +18,11 @@ export const useVolumeStats = (
     };
   }
 
+  const volumeStats = compact(stats.edges).map((e) => e.node);
+  const lastEpochStats = maxBy(volumeStats, (s) => s.atEpoch);
   const volumeDiscount = Number(lastEpochStats?.discountFactor || 0);
   const volumeInWindow = Number(lastEpochStats?.runningVolume || 0);
-  const volumeTierIndex = volumeTiers.findIndex(
-    (tier) => tier.volumeDiscountFactor === lastEpochStats?.discountFactor
-  );
+  const volumeTierIndex = getVolumeTier(volumeInWindow, volumeTiers);
 
   return {
     volumeDiscount,

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

@@ -20,6 +20,73 @@ export const formatPercentage = (num: number) => {
   return formatter.format(parseFloat(pct.toFixed(5)));
 };
 
+/**
+ * Return the index of the benefit tier for volume discounts. A user
+ * only needs to fulfill a minimum volume requirement for the tier
+ */
+export const getVolumeTier = (
+  volume: number,
+  tiers: Array<{
+    minimumRunningNotionalTakerVolume: string;
+  }>
+) => {
+  return tiers.findIndex((tier, i) => {
+    const nextTier = tiers[i + 1];
+    const validVolume =
+      volume >= Number(tier.minimumRunningNotionalTakerVolume);
+
+    if (nextTier) {
+      return (
+        validVolume &&
+        volume < Number(nextTier.minimumRunningNotionalTakerVolume)
+      );
+    }
+
+    return validVolume;
+  });
+};
+
+/**
+ * Return the index of the benefit tiers for referrals. A user must
+ * fulfill both the minimum epochs in the referral set, and the set
+ * must reach the combined total volume
+ */
+export const getReferralBenefitTier = (
+  epochsInSet: number,
+  volume: number,
+  tiers: Array<{
+    minimumRunningNotionalTakerVolume: string;
+    minimumEpochs: number;
+  }>
+) => {
+  const indexByEpoch = tiers.findIndex((tier, i) => {
+    const nextTier = tiers[i + 1];
+    const validEpochs = epochsInSet >= tier.minimumEpochs;
+
+    if (nextTier) {
+      return validEpochs && epochsInSet < nextTier.minimumEpochs;
+    }
+
+    return validEpochs;
+  });
+  const indexByVolume = tiers.findIndex((tier, i) => {
+    const nextTier = tiers[i + 1];
+    const validVolume =
+      volume >= Number(tier.minimumRunningNotionalTakerVolume);
+
+    if (nextTier) {
+      return (
+        validVolume &&
+        volume < Number(nextTier.minimumRunningNotionalTakerVolume)
+      );
+    }
+
+    return validVolume;
+  });
+
+  return Math.min(indexByEpoch, indexByVolume);
+};
+
 /**
  * Given a set of fees and a set of discounts return
  * the adjusted fee factor

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

@@ -40,9 +40,6 @@ const DateRange = {
   RANGE_ALL: 'All',
 };
 
-const priceFormat = (fundingRate: number) =>
-  `${(fundingRate * 100).toFixed(4)}%`;
-
 export const FundingContainer = ({ marketId }: { marketId: string }) => {
   const t = useT();
   const { theme } = useThemeSwitcher();
@@ -68,7 +65,7 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => {
           if (edge.node.endTime) {
             acc?.push({
               endTime: fromNanoSeconds(edge.node.endTime),
-              fundingRate: Number(edge.node.fundingRate),
+              fundingRate: Number(edge.node.fundingRate) * 100,
             });
           }
           return acc;
@@ -85,8 +82,7 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => {
     <LineChart
       data={values}
       theme={theme}
-      priceFormat={priceFormat}
-      yAxisTickFormat="%"
+      priceFormat={(fundingRate) => `${fundingRate.toFixed(4)}%`}
     />
   );
 };

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

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

apps/trading/components/navbar/navbar.spec.tsx

@@ -172,20 +172,4 @@ describe('Navbar', () => {
     expect(mockDisconnect).toHaveBeenCalled();
     expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
   });
-
-  it('does not render the language selector until we have more languages', () => {
-    renderComponent();
-    expect(screen.queryByTestId('icon-globe')).not.toBeInTheDocument();
-  });
-
-  it('renders the theme switcher', async () => {
-    renderComponent();
-    await userEvent.click(screen.getByTestId('icon-moon'));
-    expect(screen.queryByTestId('icon-moon')).not.toBeInTheDocument();
-    expect(screen.getByTestId('icon-sun')).toBeInTheDocument();
-
-    await userEvent.click(screen.getByTestId('icon-sun'));
-    expect(screen.queryByTestId('icon-sun')).not.toBeInTheDocument();
-    expect(screen.getByTestId('icon-moon')).toBeInTheDocument();
-  });
 });

apps/trading/components/navbar/navbar.tsx

@@ -11,13 +11,7 @@ import {
 } from '@vegaprotocol/environment';
 import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-import {
-  VegaIconNames,
-  VegaIcon,
-  VLogo,
-  LanguageSelector,
-  ThemeSwitcher,
-} from '@vegaprotocol/ui-toolkit';
+import { VegaIconNames, VegaIcon, VLogo } from '@vegaprotocol/ui-toolkit';
 import * as N from '@radix-ui/react-navigation-menu';
 import * as D from '@radix-ui/react-dialog';
 import { NavLink } from 'react-router-dom';
@@ -28,8 +22,7 @@ import { VegaWalletMenu } from '../vega-wallet';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { WalletIcon } from '../icons/wallet';
 import { ProtocolUpgradeCountdown } from '@vegaprotocol/proposals';
-import { useT, useI18n } from '../../lib/use-t';
-import { supportedLngs } from '../../lib/i18n';
+import { useT } from '../../lib/use-t';
 
 type MenuState = 'wallet' | 'nav' | null;
 type Theme = 'system' | 'yellow';
@@ -41,7 +34,6 @@ export const Navbar = ({
   children?: ReactNode;
   theme?: Theme;
 }) => {
-  const i18n = useI18n();
   const t = useT();
   // menu state for small screens
   const [menu, setMenu] = useState<MenuState>(null);
@@ -85,15 +77,6 @@ export const Navbar = ({
       {/* Right section */}
       <div className="ml-auto flex items-center justify-end gap-2">
         <ProtocolUpgradeCountdown />
-        <div className="flex">
-          <ThemeSwitcher />
-          {supportedLngs.length > 1 ? (
-            <LanguageSelector
-              languages={supportedLngs}
-              onSelect={(language) => i18n.changeLanguage(language)}
-            />
-          ) : null}
-        </div>
         <NavbarMobileButton
           onClick={() => {
             if (isConnected) {

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

@@ -1,5 +1,4 @@
 import groupBy from 'lodash/groupBy';
-import uniq from 'lodash/uniq';
 import type { Account } from '@vegaprotocol/accounts';
 import { useAccounts } from '@vegaprotocol/accounts';
 import {
@@ -32,12 +31,6 @@ import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { RewardsHistoryContainer } from './rewards-history';
 import { useT } from '../../lib/use-t';
-import { useAssetsMapProvider } from '@vegaprotocol/assets';
-
-const ASSETS_WITH_INCORRECT_VESTING_REWARD_DATA = [
-  'bf1e88d19db4b3ca0d1d5bdb73718a01686b18cf731ca26adedf3c8b83802bba', // USDT mainnet
-  '8ba0b10971f0c4747746cd01ff05a53ae75ca91eba1d4d050b527910c983e27e', // USDT testnet
-];
 
 export const RewardsContainer = () => {
   const t = useT();
@@ -47,67 +40,34 @@ export const RewardsContainer = () => {
     NetworkParams.rewards_activityStreak_benefitTiers,
     NetworkParams.rewards_vesting_baseRate,
   ]);
-
   const { data: accounts, loading: accountsLoading } = useAccounts(pubKey);
 
-  const { data: assetMap } = useAssetsMapProvider();
-
   const { data: epochData } = useRewardsEpochQuery();
 
   // No need to specify the fromEpoch as it will by default give you the last
-  // Note activityStreak in query will fail
   const { data: rewardsData, loading: rewardsLoading } = useRewardsPageQuery({
     variables: {
       partyId: pubKey || '',
     },
-    // Inclusion of activity streak in query currently fails
-    errorPolicy: 'ignore',
   });
 
-  if (!epochData?.epoch || !assetMap) return null;
+  if (!epochData?.epoch) return null;
 
   const loading = paramsLoading || accountsLoading || rewardsLoading;
 
   const rewardAccounts = accounts
-    ? accounts
-        .filter((a) =>
-          [
-            AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
-            AccountType.ACCOUNT_TYPE_VESTING_REWARDS,
-          ].includes(a.type)
-        )
-        .filter((a) => new BigNumber(a.balance).isGreaterThan(0))
-    : [];
-
-  const rewardAccountsAssetMap = groupBy(rewardAccounts, 'asset.id');
-
-  const lockedBalances = rewardsData?.party?.vestingBalancesSummary
-    .lockedBalances
-    ? rewardsData.party.vestingBalancesSummary.lockedBalances.filter((b) =>
-        new BigNumber(b.balance).isGreaterThan(0)
+    ? accounts.filter((a) =>
+        [
+          AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+          AccountType.ACCOUNT_TYPE_VESTING_REWARDS,
+        ].includes(a.type)
       )
     : [];
-  const lockedAssetMap = groupBy(lockedBalances, 'asset.id');
 
-  const vestingBalances = rewardsData?.party?.vestingBalancesSummary
-    .vestingBalances
-    ? rewardsData.party.vestingBalancesSummary.vestingBalances.filter((b) =>
-        new BigNumber(b.balance).isGreaterThan(0)
-      )
-    : [];
-  const vestingAssetMap = groupBy(vestingBalances, 'asset.id');
-
-  // each asset reward pot is made up of:
-  // available to withdraw - ACCOUNT_TYPE_VESTED_REWARDS
-  // vesting               - vestingBalancesSummary.vestingBalances
-  // locked                - vestingBalancesSummary.lockedBalances
-  //
-  // there can be entires for the same asset in each list so we need a uniq list of assets
-  const assets = uniq([
-    ...Object.keys(rewardAccountsAssetMap),
-    ...Object.keys(lockedAssetMap),
-    ...Object.keys(vestingAssetMap),
-  ]);
+  const rewardAssetsMap = groupBy(
+    rewardAccounts.filter((a) => a.asset.id !== params.reward_asset),
+    'asset.id'
+  );
 
   return (
     <div className="grid auto-rows-min grid-cols-6 gap-3">
@@ -157,72 +117,28 @@ export const RewardsContainer = () => {
       </Card>
 
       {/* Show all other reward pots, most of the time users will not have other rewards */}
-      {assets
-        .filter((assetId) => assetId !== params.reward_asset)
-        .map((assetId) => {
-          const asset = assetMap ? assetMap[assetId] : null;
-
-          if (!asset) return null;
-
-          // Following code is for mitigating an issue due to a core bug where locked and vesting
-          // balances were incorrectly increased for infrastructure rewards for USDT on mainnet
-          //
-          // We don't want to incorrectly show the wring locked/vesting values, but we DO want to
-          // show the user that they have rewards available to withdraw
-          if (ASSETS_WITH_INCORRECT_VESTING_REWARD_DATA.includes(asset.id)) {
-            const accountsForAsset = rewardAccountsAssetMap[asset.id];
-            const vestedAccount = accountsForAsset?.find(
-              (a) => a.type === AccountType.ACCOUNT_TYPE_VESTED_REWARDS
-            );
-
-            // No vested rewards available to withdraw, so skip over USDT
-            if (!vestedAccount || Number(vestedAccount.balance) <= 0) {
-              return null;
-            }
-
-            return (
-              <Card
-                key={assetId}
-                title={t('{{assetSymbol}} Reward pot', {
-                  assetSymbol: asset.symbol,
-                })}
-                className="lg:col-span-3 xl:col-span-2"
-                loading={loading}
-              >
-                <RewardPot
-                  pubKey={pubKey}
-                  accounts={accounts}
-                  assetId={assetId}
-                  // Ensure that these values are shown as 0
-                  vestingBalancesSummary={{
-                    lockedBalances: [],
-                    vestingBalances: [],
-                  }}
-                />
-              </Card>
-            );
-          }
-
-          return (
-            <Card
-              key={assetId}
-              title={t('{{assetSymbol}} Reward pot', {
-                assetSymbol: asset.symbol,
-              })}
-              className="lg:col-span-3 xl:col-span-2"
-              loading={loading}
-            >
-              <RewardPot
-                pubKey={pubKey}
-                accounts={accounts}
-                assetId={assetId}
-                vestingBalancesSummary={
-                  rewardsData?.party?.vestingBalancesSummary
-                }
-              />
-            </Card>
-          );
-        })}
+      {Object.keys(rewardAssetsMap).map((assetId) => {
+        const asset = rewardAssetsMap[assetId][0].asset;
+        return (
+          <Card
+            key={assetId}
+            title={t('{{assetSymbol}} Reward pot', {
+              assetSymbol: asset.symbol,
+            })}
+            className="lg:col-span-3 xl:col-span-2"
+            loading={loading}
+          >
+            <RewardPot
+              pubKey={pubKey}
+              accounts={accounts}
+              assetId={assetId}
+              vestingBalancesSummary={
+                rewardsData?.party?.vestingBalancesSummary
+              }
+            />
+          </Card>
+        );
+      })}
       <Card
         title={t('Rewards history')}
         className="lg:col-span-full"
@@ -231,7 +147,6 @@ export const RewardsContainer = () => {
         <RewardsHistoryContainer
           epoch={Number(epochData?.epoch.id)}
           pubKey={pubKey}
-          assets={assetMap}
         />
       </Card>
     </div>
@@ -398,14 +313,14 @@ export const RewardPot = ({
 export const Vesting = ({
   pubKey,
   baseRate,
-  multiplier,
+  multiplier = '1',
 }: {
   pubKey: string | null;
   baseRate: string;
   multiplier?: string;
 }) => {
   const t = useT();
-  const rate = new BigNumber(baseRate).times(multiplier || 1);
+  const rate = new BigNumber(baseRate).times(multiplier);
   const rateFormatted = formatPercentage(Number(rate));
   const baseRateFormatted = formatPercentage(Number(baseRate));
 
@@ -420,7 +335,7 @@ export const Vesting = ({
         {pubKey && (
           <tr>
             <CardTableTH>{t('Vesting multiplier')}</CardTableTH>
-            <CardTableTD>{multiplier ? `${multiplier}x` : '-'}</CardTableTD>
+            <CardTableTD>{multiplier}x</CardTableTD>
           </tr>
         )}
       </CardTable>
@@ -430,16 +345,16 @@ export const Vesting = ({
 
 export const Multipliers = ({
   pubKey,
-  streakMultiplier,
-  hoarderMultiplier,
+  streakMultiplier = '1',
+  hoarderMultiplier = '1',
 }: {
   pubKey: string | null;
   streakMultiplier?: string;
   hoarderMultiplier?: string;
 }) => {
   const t = useT();
-  const combinedMultiplier = new BigNumber(streakMultiplier || 1).times(
-    hoarderMultiplier || 1
+  const combinedMultiplier = new BigNumber(streakMultiplier).times(
+    hoarderMultiplier
   );
 
   if (!pubKey) {
@@ -460,15 +375,11 @@ export const Multipliers = ({
       <CardTable>
         <tr>
           <CardTableTH>{t('Streak reward multiplier')}</CardTableTH>
-          <CardTableTD>
-            {streakMultiplier ? `${streakMultiplier}x` : '-'}
-          </CardTableTD>
+          <CardTableTD>{streakMultiplier}x</CardTableTD>
         </tr>
         <tr>
           <CardTableTH>{t('Hoarder reward multiplier')}</CardTableTH>
-          <CardTableTD>
-            {hoarderMultiplier ? `${hoarderMultiplier}x` : '-'}
-          </CardTableTD>
+          <CardTableTD>{hoarderMultiplier}x</CardTableTD>
         </tr>
       </CardTable>
     </div>

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

@@ -61,14 +61,6 @@ const rewardSummaries = [
       rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
     },
   },
-  {
-    node: {
-      epoch: 7,
-      assetId: assets.asset2.id,
-      amount: '300',
-      rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-    },
-  },
 ];
 
 const getCell = (cells: HTMLElement[], colId: string) => {
@@ -77,7 +69,7 @@ const getCell = (cells: HTMLElement[], colId: string) => {
   );
 };
 
-describe('RewardsHistoryTable', () => {
+describe('RewarsHistoryTable', () => {
   const props = {
     epochRewardSummaries: {
       edges: rewardSummaries,
@@ -96,7 +88,7 @@ describe('RewardsHistoryTable', () => {
     loading: false,
   };
 
-  it('renders table with accounts summed up by asset', () => {
+  it('Renders table with accounts summed up by asset', () => {
     render(<RewardHistoryTable {...props} />);
 
     const container = within(
@@ -118,27 +110,17 @@ describe('RewardsHistoryTable', () => {
       assets.asset2.name
     );
 
-    // First row
     const marketCreationCell = getCell(cells, 'marketCreation');
     expect(
       marketCreationCell.getByTestId('stack-cell-primary')
     ).toHaveTextContent('300');
     expect(
       marketCreationCell.getByTestId('stack-cell-secondary')
-    ).toHaveTextContent('50.00%');
-
-    const infrastructureFeesCell = getCell(cells, 'infrastructureFees');
-    expect(
-      infrastructureFeesCell.getByTestId('stack-cell-primary')
-    ).toHaveTextContent('300');
-    expect(
-      infrastructureFeesCell.getByTestId('stack-cell-secondary')
-    ).toHaveTextContent('50.00%');
+    ).toHaveTextContent('100.00%');
 
     let totalCell = getCell(cells, 'total');
-    expect(totalCell.getByText('600.00')).toBeInTheDocument();
+    expect(totalCell.getByText('300.00')).toBeInTheDocument();
 
-    // Second row
     row = within(rows[1]);
     cells = row.getAllByRole('gridcell');
 

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

@@ -2,7 +2,10 @@ import debounce from 'lodash/debounce';
 import { useMemo, useState } from 'react';
 import BigNumber from 'bignumber.js';
 import type { ColDef, ValueFormatterFunc } from 'ag-grid-community';
-import { type AssetFieldsFragment } from '@vegaprotocol/assets';
+import {
+  useAssetsMapProvider,
+  type AssetFieldsFragment,
+} from '@vegaprotocol/assets';
 import {
   addDecimalsFormatNumberQuantum,
   formatNumberPercentage,
@@ -23,17 +26,17 @@ import { useT } from '../../lib/use-t';
 export const RewardsHistoryContainer = ({
   epoch,
   pubKey,
-  assets,
 }: {
   pubKey: string | null;
   epoch: number;
-  assets: Record<string, AssetFieldsFragment>;
 }) => {
   const [epochVariables, setEpochVariables] = useState(() => ({
     from: epoch - 1,
     to: epoch,
   }));
 
+  const { data: assets } = useAssetsMapProvider();
+
   // No need to specify the fromEpoch as it will by default give you the last
   const { refetch, data, loading } = useRewardsHistoryQuery({
     variables: {
@@ -151,12 +154,10 @@ export const RewardHistoryTable = ({
     const rewardValueFormatter: ValueFormatterFunc<RewardRow> = ({
       data,
       value,
-      ...rest
     }) => {
       if (!value || !data) {
         return '-';
       }
-
       return addDecimalsFormatNumberQuantum(
         value,
         data.asset.decimals,
@@ -196,11 +197,6 @@ export const RewardHistoryTable = ({
         },
         sort: 'desc',
       },
-      {
-        field: 'infrastructureFees',
-        valueFormatter: rewardValueFormatter,
-        cellRenderer: rewardCellRenderer,
-      },
       {
         field: 'staking',
         valueFormatter: rewardValueFormatter,

apps/trading/components/rewards-container/use-reward-row-data.spec.ts

@@ -1,159 +0,0 @@
-import { type AssetFieldsFragment } from '@vegaprotocol/assets';
-import { getRewards } from './use-reward-row-data';
-import * as Schema from '@vegaprotocol/types';
-
-const asset1 = {
-  id: 'asset1',
-  name: 'USD (KRW)',
-  symbol: 'USD-KRW',
-  decimals: 6,
-  quantum: '1000000',
-  status: Schema.AssetStatus.STATUS_ENABLED,
-  // @ts-ignore not needed
-  source: {},
-} as AssetFieldsFragment;
-
-const asset2 = {
-  id: 'asset2',
-  name: 'tDAI TEST',
-  symbol: 'tDAI',
-  decimals: 5,
-  quantum: '1',
-  status: Schema.AssetStatus.STATUS_ENABLED,
-  // @ts-ignore not needed
-  source: {},
-} as AssetFieldsFragment;
-
-const asset3 = {
-  id: 'asset3',
-  name: 'Tether USD',
-  symbol: 'USDT',
-  decimals: 6,
-  quantum: '1000000',
-  status: Schema.AssetStatus.STATUS_ENABLED,
-  // @ts-ignore not needed
-  source: {},
-} as AssetFieldsFragment;
-
-const asset4 = {
-  id: 'asset4',
-  name: 'USDT-T',
-  symbol: 'USDT-T',
-  decimals: 18,
-  quantum: '1',
-  status: Schema.AssetStatus.STATUS_ENABLED,
-  // @ts-ignore not needed
-  source: {},
-} as AssetFieldsFragment;
-
-const assets: Record<string, AssetFieldsFragment> = {
-  asset1,
-  asset2,
-  asset3,
-  asset4,
-};
-
-const testData = {
-  rewards: [
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-      assetId: 'asset1',
-      amount: '31897424',
-    },
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-      assetId: 'asset2',
-      amount: '57',
-    },
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-      assetId: 'asset3',
-      amount: '5501',
-    },
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_REWARD_AVERAGE_POSITION,
-      assetId: 'asset3',
-      amount: '5501',
-    },
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
-      assetId: 'asset4',
-      amount: '5501',
-    },
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
-      assetId: 'asset4',
-      amount: '456',
-    },
-    {
-      rewardType: Schema.AccountType.ACCOUNT_TYPE_REWARD_VALIDATOR_RANKING,
-      assetId: 'asset4',
-      amount: '4565',
-    },
-  ],
-  assets,
-};
-
-describe('getRewards', () => {
-  it('should return the correct rewards when infra fees are included', () => {
-    const rewards = getRewards(testData.rewards, testData.assets);
-    expect(rewards).toEqual([
-      {
-        asset: asset1,
-        infrastructureFees: 31897424,
-        staking: 0,
-        priceTaking: 0,
-        priceMaking: 0,
-        liquidityProvision: 0,
-        marketCreation: 0,
-        averagePosition: 0,
-        relativeReturns: 0,
-        returnsVolatility: 0,
-        validatorRanking: 0,
-        total: 31897424,
-      },
-      {
-        asset: asset2,
-        infrastructureFees: 57,
-        staking: 0,
-        priceTaking: 0,
-        priceMaking: 0,
-        liquidityProvision: 0,
-        marketCreation: 0,
-        averagePosition: 0,
-        relativeReturns: 0,
-        returnsVolatility: 0,
-        validatorRanking: 0,
-        total: 57,
-      },
-      {
-        asset: asset3,
-        infrastructureFees: 5501,
-        staking: 0,
-        priceTaking: 0,
-        priceMaking: 0,
-        liquidityProvision: 0,
-        marketCreation: 0,
-        averagePosition: 5501,
-        relativeReturns: 0,
-        returnsVolatility: 0,
-        validatorRanking: 0,
-        total: 11002,
-      },
-      {
-        asset: asset4,
-        infrastructureFees: 0,
-        staking: 0,
-        priceTaking: 0,
-        priceMaking: 5501,
-        liquidityProvision: 456,
-        marketCreation: 0,
-        averagePosition: 0,
-        relativeReturns: 0,
-        returnsVolatility: 0,
-        validatorRanking: 4565,
-        total: 10522,
-      },
-    ]);
-  });
-});

apps/trading/components/rewards-container/use-reward-row-data.ts

@@ -16,10 +16,9 @@ const REWARD_ACCOUNT_TYPES = [
   AccountType.ACCOUNT_TYPE_REWARD_RELATIVE_RETURN,
   AccountType.ACCOUNT_TYPE_REWARD_RETURN_VOLATILITY,
   AccountType.ACCOUNT_TYPE_REWARD_VALIDATOR_RANKING,
-  AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
 ];
 
-export const getRewards = (
+const getRewards = (
   rewards: Array<{
     rewardType: AccountType;
     assetId: string;
@@ -57,9 +56,6 @@ export const getRewards = (
 
     return {
       asset,
-      infrastructureFees: totals.get(
-        AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE
-      ),
       staking: totals.get(AccountType.ACCOUNT_TYPE_GLOBAL_REWARD),
       priceTaking: totals.get(AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES),
       priceMaking: totals.get(
@@ -105,8 +101,7 @@ export const useRewardsRowData = ({
       assetId: r.asset.id,
       amount: r.amount,
     }));
-    const result = getRewards(rewards, assets);
-    return result;
+    return getRewards(rewards, assets);
   }
 
   const rewards = removePaginationWrapper(epochRewardSummaries?.edges);

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

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

apps/trading/components/settings/settings.tsx

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

apps/trading/components/sidebar/sidebar.tsx

@@ -16,7 +16,6 @@ import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
-import { ErrorBoundary } from '../error-boundary';
 
 export enum ViewType {
   Order = 'Order',
@@ -164,14 +163,12 @@ export const SidebarContent = () => {
     if (params.marketId) {
       return (
         <ContentWrapper>
-          <ErrorBoundary feature="deal-ticket">
-            <DealTicketContainer
-              marketId={params.marketId}
-              onDeposit={(assetId) =>
-                setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
-              }
-            />
-          </ErrorBoundary>
+          <DealTicketContainer
+            marketId={params.marketId}
+            onDeposit={(assetId) =>
+              setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
+            }
+          />
           <GetStarted />
         </ContentWrapper>
       );
@@ -184,9 +181,7 @@ export const SidebarContent = () => {
     if (params.marketId) {
       return (
         <ContentWrapper>
-          <ErrorBoundary feature="market-info">
-            <MarketInfoAccordionContainer marketId={params.marketId} />
-          </ErrorBoundary>
+          <MarketInfoAccordionContainer marketId={params.marketId} />
         </ContentWrapper>
       );
     } else {
@@ -197,9 +192,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Deposit) {
     return (
       <ContentWrapper title={t('Deposit')}>
-        <ErrorBoundary feature="deposit">
-          <DepositContainer assetId={view.assetId} />
-        </ErrorBoundary>
+        <DepositContainer assetId={view.assetId} />
       </ContentWrapper>
     );
   }
@@ -207,9 +200,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Withdraw) {
     return (
       <ContentWrapper title={t('Withdraw')}>
-        <ErrorBoundary feature="withdraw">
-          <WithdrawContainer assetId={view.assetId} />
-        </ErrorBoundary>
+        <WithdrawContainer assetId={view.assetId} />
       </ContentWrapper>
     );
   }
@@ -217,9 +208,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Transfer) {
     return (
       <ContentWrapper title={t('Transfer')}>
-        <ErrorBoundary feature="transfer">
-          <TransferContainer assetId={view.assetId} />
-        </ErrorBoundary>
+        <TransferContainer assetId={view.assetId} />
       </ContentWrapper>
     );
   }
@@ -227,9 +216,7 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Settings) {
     return (
       <ContentWrapper title={t('Settings')}>
-        <ErrorBoundary feature="settings">
-          <Settings />
-        </ErrorBoundary>
+        <Settings />
       </ContentWrapper>
     );
   }

apps/trading/components/welcome-dialog/use-get-onboarding-step.ts

@@ -10,7 +10,6 @@ import { positionsDataProvider } from '@vegaprotocol/positions';
 import { useGlobalStore } from '../../stores';
 
 const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
-
 export const useOnboardingStore = create<{
   dialogOpen: boolean;
   walletDialogOpen: boolean;
@@ -21,7 +20,7 @@ export const useOnboardingStore = create<{
 }>()(
   persist(
     (set) => ({
-      dialogOpen: false,
+      dialogOpen: true,
       walletDialogOpen: false,
       dismissed: false,
       dismiss: () => set({ dismissed: true }),

apps/trading/components/welcome-dialog/welcome-dialog.tsx

@@ -1,29 +1,18 @@
-import { useEffect } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { VegaConnectDialog } from '@vegaprotocol/wallet';
-import { Connectors } from '../../lib/vega-connectors';
-import { useT } from '../../lib/use-t';
-import { Routes } from '../../lib/links';
-import { RiskMessage } from './risk-message';
 import { WelcomeDialogContent } from './welcome-dialog-content';
 import { useOnboardingStore } from './use-get-onboarding-step';
-import { ensureSuffix } from '@vegaprotocol/utils';
-
-/**
- * A list of paths on which the welcome dialog should be omitted.
- */
-const OMIT_ON_LIST = [ensureSuffix(Routes.REFERRALS, '/*')];
+import { VegaConnectDialog } from '@vegaprotocol/wallet';
+import { Connectors } from '../../lib/vega-connectors';
+import { RiskMessage } from './risk-message';
+import { useT } from '../../lib/use-t';
 
 export const WelcomeDialog = () => {
-  const { pathname } = useLocation();
   const t = useT();
   const { VEGA_ENV } = useEnvironment();
   const dismissed = useOnboardingStore((store) => store.dismissed);
   const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
   const dismiss = useOnboardingStore((store) => store.dismiss);
-  const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const walletDialogOpen = useOnboardingStore(
     (store) => store.walletDialogOpen
   );
@@ -31,16 +20,6 @@ export const WelcomeDialog = () => {
     (store) => store.setWalletDialogOpen
   );
 
-  useEffect(() => {
-    const shouldOmit = OMIT_ON_LIST.map((path) =>
-      matchPath(path, pathname)
-    ).some((m) => !!m);
-
-    if (dismissed || shouldOmit) return;
-
-    setDialogOpen(true);
-  }, [dismissed, pathname, setDialogOpen]);
-
   const content = walletDialogOpen ? (
     <VegaConnectDialog
       connectors={Connectors}
@@ -52,12 +31,7 @@ export const WelcomeDialog = () => {
     <WelcomeDialogContent />
   );
 
-  const onClose = walletDialogOpen
-    ? () => setWalletDialogOpen(false)
-    : () => {
-        setDialogOpen(false);
-        dismiss();
-      };
+  const onClose = walletDialogOpen ? () => setWalletDialogOpen(false) : dismiss;
 
   const title = walletDialogOpen ? null : (
     <span className="font-alpha calt" data-testid="welcome-title">

apps/trading/e2e/.env

@@ -1,2 +1,2 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:latest
-VEGA_VERSION=v0.73.8
+VEGA_VERSION=v0.73.5

apps/trading/e2e/.env.develop

@@ -1,2 +1,2 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:develop
-VEGA_VERSION=v0.73.8
+VEGA_VERSION=v0.73.5

apps/trading/e2e/.env.main

@@ -1,2 +1,2 @@
 CONSOLE_IMAGE_NAME=vegaprotocol/trading:main
-VEGA_VERSION=v0.73.8
+VEGA_VERSION=v0.73.5

apps/trading/e2e/actions/utils.py

@@ -44,5 +44,4 @@ def truncate_middle(market_id, start=6, end=4):
 def change_keys(page: Page, vega:VegaServiceNull, key_name):
     page.get_by_test_id("manage-vega-wallet").click()
     page.get_by_test_id("key-" + vega.wallet.public_key(key_name)).click()
-    page.click(f'data-testid=key-{vega.wallet.public_key(key_name)} >> .inline-flex')
     page.reload()

apps/trading/e2e/conftest.py

@@ -12,7 +12,6 @@ from contextlib import contextmanager
 from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import Browser, Page
 from config import console_image_name, vega_version
-from datetime import datetime, timedelta
 from fixtures.market import (
     setup_simple_market,
     setup_opening_auction_market,
@@ -79,7 +78,6 @@ def init_vega(request=None):
         store_transactions=True,
         transactions_per_block=1000,
         seconds_per_block=seconds_per_block,
-        genesis_time= datetime.now() - timedelta(days=1),
     ) as vega:
         try:
             container = docker_client.containers.run(
@@ -138,11 +136,8 @@ def init_page(vega: VegaServiceNull, browser: Browser, request: pytest.FixtureRe
             page.add_init_script(script=window_env)
             yield page
         finally:
-            try:
-                if not os.path.exists("apps/trading/e2e/traces"):
-                    os.makedirs("apps/trading/e2e/traces")
-            except OSError as e:
-                print(f"Failed to create directory '{'apps/trading/e2e/traces'}': {e}")
+            if not os.path.exists("traces"):
+                os.makedirs("traces")
 
             # Check whether this test failed or passed
             outcome = request.config.cache.get(request.node.nodeid, None)

apps/trading/e2e/poetry.lock

@@ -1159,9 +1159,9 @@ profile = ["pytest-profiling", "snakeviz"]
 
 [package.source]
 type = "git"
-url = "https://github.com/vegaprotocol/vega-market-sim.git/"
-reference = "fix/genesis_panic"
-resolved_reference = "7ab04931924380db8000544b7f3d65fcb39b5467"
+url = "https://github.com/vegaprotocol/vega-market-sim.git"
+reference = "HEAD"
+resolved_reference = "e93f7dfa8463c59cfd0e299362b845511cebeef6"
 
 [[package]]
 name = "websocket-client"
@@ -1342,4 +1342,4 @@ files = [
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.11"
-content-hash = "68ed0de55290a3b929d47eb7f7b031fb7e172261c7bbeb4f554b7c27a4462754"
+content-hash = "d1231fe591b774e34b8f94a54cd02e4d7dae924c57785263841c3b0b0feed505"

apps/trading/e2e/pyproject.toml

@@ -9,7 +9,7 @@ packages = [{include = "trading market-sim e2e"}]
 [tool.poetry.dependencies]
 python = ">=3.9,<3.11"
 psutil = "^5.9.5"
-vega-sim = {git = "https://github.com/vegaprotocol/vega-market-sim.git/", branch = "fix/genesis_panic"}
+vega-sim = {git = "https://github.com/vegaprotocol/vega-market-sim.git"}
 pytest-playwright = "^0.4.2"
 docker = "^6.1.3"
 pytest-xdist = "^3.3.1"

apps/trading/e2e/tests/chart_depth/test_chart_depth.py

@@ -0,0 +1,12 @@
+import pytest
+from playwright.sync_api import expect, Page
+
+@pytest.mark.usefixtures("page", "continuous_market", "risk_accepted")
+def test_see_market_depth_chart(continuous_market, page: Page):
+    page.goto(f"/#/markets/{continuous_market}")
+    # Click on the 'Depth' tab
+    page.get_by_test_id("Depth").click()
+    # Check if the 'Depth' tab and the depth chart are visible
+    # 6006-DEPC-001
+    expect(page.get_by_test_id("tab-depth")).to_be_visible()
+    expect(page.locator('[class^="depth-chart-module_canvas__"]').first).to_be_visible()

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

@@ -29,12 +29,11 @@ def continuous_market(vega):
 @pytest.mark.usefixtures("page", "auth", "risk_accepted")
 def test_limit_buy_order_GTT(continuous_market, vega: VegaService, page: Page):
     page.goto(f"/#/markets/{continuous_market}")
-    page.get_by_test_id(tif).select_option("Good 'til Time (GTT)")
     page.get_by_test_id(order_size).fill("10")
     page.get_by_test_id(order_price).fill("120")
+    page.get_by_test_id(tif).select_option("Good 'til Time (GTT)")
     expires_at = datetime.now() + timedelta(days=1)
     expires_at_input_value = expires_at.strftime("%Y-%m-%dT%H:%M:%S")
-    page.get_by_test_id("date-picker-field").clear()
     page.get_by_test_id("date-picker-field").fill(expires_at_input_value)
     # 7002-SORD-011
     expect(page.get_by_test_id("place-order").locator("span").first).to_have_text(

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

@@ -2,8 +2,10 @@ import pytest
 from playwright.sync_api import Page, expect
 from vega_sim.service import VegaService
 from actions.vega import submit_order
+from conftest import init_vega
+from fixtures.market import setup_continuous_market
 from actions.utils import wait_for_toast_confirmation
-
+from wallet_config import MM_WALLET, MM_WALLET2, TERMINATE_WALLET, wallets
 
 stop_order_btn = "order-type-Stop"
 stop_limit_order_btn = "order-type-StopLimit"
@@ -326,4 +328,98 @@ def test_submit_stop_oco_limit_order_cancel(
         page.locator(".ag-center-cols-container").locator('[col-id="status"]').last
     ).to_have_text("CancelledOCO")
 
+class TestStopOcoValidation:
+    @pytest.fixture(scope="class")
+    def vega(self, request):
+        with init_vega(request) as vega:
+            yield vega
 
+    @pytest.fixture(scope="class")
+    def continuous_market(self, vega):
+        return setup_continuous_market(vega)
+
+    @pytest.mark.usefixtures("page", "auth", "risk_accepted")
+    def test_stop_market_order_oco_form_validation(self, continuous_market, page: Page):
+        page.goto(f"/#/markets/{continuous_market}")
+        page.get_by_test_id(stop_order_btn).click()
+        page.get_by_test_id(stop_market_order_btn).is_visible()
+        page.get_by_test_id(stop_market_order_btn).click()
+        page.get_by_test_id(oco).click()
+        expect(
+            page.get_by_test_id("sidebar-content").get_by_text("Trigger").last
+        ).to_be_visible()
+        # 7002-SORD-084
+        expect(page.locator('[for="triggerDirection-risesAbove-oco"]')).to_have_text(
+            "Rises above"
+        )
+        # 7002-SORD-085
+        expect(page.locator('[for="triggerDirection-fallsBelow-oco"]')).to_have_text(
+            "Falls below"
+        )
+        # 7002-SORD-087
+        expect(page.locator('[for="triggerType-price-oco"]')).to_have_text("Price")
+        expect(page.locator('[for="triggerType-price"]')).to_be_checked
+        # 7002-SORD-088
+        expect(
+            page.locator('[for="triggerType-trailingPercentOffset-oco"]')
+        ).to_have_text("Trailing Percent Offset")
+        expect(page.locator('[for="order-size-oco"]')).to_have_text("Size")
+
+    @pytest.mark.usefixtures("page", "auth", "risk_accepted")
+    def test_stop_limit_order_oco_form_validation(self, continuous_market, page: Page):
+        page.goto(f"/#/markets/{continuous_market}")
+        page.get_by_test_id(stop_order_btn).click()
+        page.get_by_test_id(stop_market_order_btn).is_visible()
+        page.get_by_test_id(stop_limit_order_btn).click()
+        page.get_by_test_id(oco).click()
+        expect(
+            page.get_by_test_id("sidebar-content").get_by_text("Trigger").last
+        ).to_be_visible()
+        # 7002-SORD-099
+        expect(page.locator('[for="triggerDirection-risesAbove-oco"]')).to_have_text(
+            "Rises above"
+        )
+        # 7002-SORD-091
+        expect(page.locator('[for="triggerDirection-fallsBelow-oco"]')).to_have_text(
+            "Falls below"
+        )
+        # 7002-SORD-095
+        expect(page.locator('[for="triggerType-price-oco"]')).to_have_text("Price")
+        expect(page.locator('[for="triggerType-price"]')).to_be_checked
+        # 7002-SORD-095
+        expect(
+            page.locator('[for="triggerType-trailingPercentOffset-oco"]')
+        ).to_have_text("Trailing Percent Offset")
+
+        expect(page.locator('[for="order-size-oco"]')).to_have_text("Size")
+        expect(page.locator('[for="order-price-oco"]')).to_have_text("Price")
+    
+    @pytest.mark.usefixtures("page", "auth", "risk_accepted")
+    def test_maximum_number_of_active_stop_orders_oco(
+        self, continuous_market, vega: VegaService, page: Page
+    ):  
+        page.goto(f"/#/markets/{continuous_market}")   
+        page.get_by_test_id(stop_order_btn).click()
+        page.get_by_test_id(stop_limit_order_btn).is_visible()
+        page.get_by_test_id(stop_limit_order_btn).click()
+        page.get_by_test_id(order_side_sell).click()
+        page.locator("label").filter(has_text="Falls below").click()
+        page.get_by_test_id(trigger_price).fill("102")
+        page.get_by_test_id(order_size).fill("3")
+        page.get_by_test_id(order_price).fill("103")
+        page.get_by_test_id(oco).click()
+        page.get_by_test_id(trigger_price_oco).fill("120")
+        page.get_by_test_id(order_size_oco).fill("2")
+        page.get_by_test_id(order_limit_price_oco).fill("99")
+        for i in range(2):
+            page.get_by_test_id(submit_stop_order).click()
+            wait_for_toast_confirmation(page)
+            vega.wait_fn(1)
+            vega.forward("20s")
+            vega.wait_for_total_catchup()
+            if page.get_by_test_id(close_toast).is_visible():
+               page.get_by_test_id(close_toast).click()
+        # 7002-SORD-011
+        expect(page.get_by_test_id("stop-order-warning-limit")).to_have_text(
+            "There is a limit of 4 active stop orders per market. Orders submitted above the limit will be immediately rejected."
+        )

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

@@ -47,6 +47,48 @@ class TestIcebergOrdersValidations:
             (page.get_by_role("row").locator('[col-id="type"]')).nth(1)
         ).to_have_text("Limit (Iceberg)")
 
+    @pytest.mark.usefixtures("page", "auth", "risk_accepted")
+    def test_iceberg_tooltips(self, continuous_market, page: Page):
+        page.goto(f"/#/markets/{continuous_market}")
+        page.get_by_test_id("iceberg").hover()
+        expect(page.get_by_role("tooltip")).to_be_visible()
+        page.get_by_test_id("iceberg").click()
+        hover_and_assert_tooltip(page, "Peak size")
+        hover_and_assert_tooltip(page, "Minimum size")
+
+    @pytest.mark.usefixtures("page", "auth", "risk_accepted")
+    def test_iceberg_validations(self, continuous_market, page: Page):
+        page.goto(f"/#/markets/{continuous_market}")
+        page.get_by_test_id("iceberg").click()
+        page.get_by_test_id("place-order").click()
+        expect(page.get_by_test_id("deal-ticket-peak-error-message")).to_be_visible()
+        expect(page.get_by_test_id("deal-ticket-peak-error-message")).to_have_text(
+            "You need to provide a peak size"
+        )
+        expect(page.get_by_test_id("deal-ticket-minimum-error-message")).to_be_visible()
+        expect(page.get_by_test_id("deal-ticket-minimum-error-message")).to_have_text(
+            "You need to provide a minimum visible size"
+        )
+        page.get_by_test_id("order-peak-size").clear()
+        page.get_by_test_id("order-peak-size").type("1")
+        page.get_by_test_id("order-minimum-size").clear()
+        page.get_by_test_id("order-minimum-size").type("2")
+        expect(page.get_by_test_id("deal-ticket-peak-error-message")).to_be_visible()
+        expect(page.get_by_test_id("deal-ticket-peak-error-message")).to_have_text(
+            "Peak size cannot be greater than the size (0)"
+        )
+        expect(page.get_by_test_id("deal-ticket-minimum-error-message")).to_be_visible()
+        expect(page.get_by_test_id("deal-ticket-minimum-error-message")).to_have_text(
+            "Minimum visible size cannot be greater than the peak size (1)"
+        )
+        page.get_by_test_id("order-minimum-size").clear()
+        page.get_by_test_id("order-minimum-size").type("0.1")
+        expect(page.get_by_test_id("deal-ticket-minimum-error-message")).to_be_visible()
+        expect(page.get_by_test_id("deal-ticket-minimum-error-message")).to_have_text(
+            "Minimum visible size cannot be lower than 1"
+        )
+
+
 @pytest.mark.usefixtures("vega", "page", "continuous_market", "auth", "risk_accepted")
 def test_iceberg_open_order(continuous_market, vega: VegaService, page: Page):
     page.goto(f"/#/markets/{continuous_market}")

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

@@ -58,6 +58,7 @@ class TestSettledMarket:
     def test_settled_rows(self, page: Page, create_settled_market):
         page.goto(f"/#/markets/all")
         page.get_by_test_id("Closed markets").click()
+
         row_selector = page.locator(
             '[data-testid="tab-closed-markets"] .ag-center-cols-container .ag-row'
         ).first
@@ -71,7 +72,7 @@ class TestSettledMarket:
         # 6001-MARK-009
         # 6001-MARK-008
         # 6001-MARK-010
-        pattern = r"(\d+)\s+(months|hours|days)\s+ago"
+        pattern = r"(\d+)\s+months\s+ago"
         date_text = row_selector.locator('[col-id="settlementDate"]').inner_text()
         assert re.match(pattern, date_text), f"Expected text to match pattern but got {date_text}"