chore: update snap version to 0.3.1

CODEOWNERS

@@ -1,2 +1,2 @@
-* @vegaprotocol/frontend
+* @vegaprotocol/frontend @vegaprotocol/frontend-qa
 *.graphql @vegaprotocol/core

apps/explorer/src/app/routes/layout.tsx

@@ -133,7 +133,7 @@ export const ErrorBoundary = () => {
   );
 };
 
-export const GHOST = (
+const GHOST = (
   <svg
     width="56"
     height="85"

apps/explorer/src/app/routes/restricted/index.tsx

@@ -1,108 +0,0 @@
-import { BackgroundVideo } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-
-const RestrictedPage = () => {
-  const errorTitle = '451 Unavailable';
-  const errorMessage =
-    'Due to uncertainty about the legal and regulatory status of the content hosted on this site, it is not available to visitors in your jurisdiction.';
-
-  return (
-    <div>
-      <BackgroundVideo className="brightness-50" />
-      <div
-        className={classNames(
-          'max-w-[620px] p-2 mt-[10vh]',
-          'mx-auto my-0',
-          'antialiased text-white',
-          'overflow-hidden relative',
-          'flex flex-col gap-2'
-        )}
-      >
-        <div className="flex gap-4">
-          <div>{GHOST}</div>
-          <h1 className="text-[2.7rem] font-alpha calt break-words uppercase">
-            {errorTitle}
-          </h1>
-        </div>
-        <div className="text-sm mt-10 overflow-auto font-mono">
-          {errorMessage}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const GHOST = (
-  <svg
-    width="56"
-    height="85"
-    viewBox="0 0 150 234"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.43 93.6821L0 104.097V172.435H5.13793V106.2L14.0779 97.3247L10.43 93.6821Z"
-      fill="black"
-    />
-    <path d="M105.328 18.521H7.70703V172.435H105.328V18.521Z" fill="white" />
-    <path d="M38.5364 64.6953H33.3984V69.8258H38.5364V64.6953Z" fill="black" />
-    <path d="M43.6731 69.8257H38.5352V74.9561H43.6731V69.8257Z" fill="black" />
-    <path d="M48.8098 74.9561H43.6719V80.0865H48.8098V74.9561Z" fill="black" />
-    <path d="M38.5364 74.9561H33.3984V80.0865H38.5364V74.9561Z" fill="black" />
-    <path d="M48.8098 64.6953H43.6719V69.8258H48.8098V64.6953Z" fill="black" />
-    <path d="M69.3606 64.6953H64.2227V69.8258H69.3606V64.6953Z" fill="black" />
-    <path d="M74.5012 69.8257H69.3633V74.9561H74.5012V69.8257Z" fill="black" />
-    <path d="M79.6379 74.9561H74.5V80.0865H79.6379V74.9561Z" fill="black" />
-    <path d="M69.3606 74.9561H64.2227V80.0865H69.3606V74.9561Z" fill="black" />
-    <path d="M79.6379 64.6953H74.5V69.8258H79.6379V64.6953Z" fill="black" />
-    <path d="M79.6398 90.3477H33.3984V95.4781H79.6398V90.3477Z" fill="black" />
-    <path d="M48.8098 172.435H43.6719V234H48.8098V172.435Z" fill="black" />
-    <path d="M69.3606 172.435H64.2227V234H69.3606V172.435Z" fill="black" />
-    <path
-      d="M129.87 0.00408026L92.0273 14.3682L111.195 64.7203L149.038 50.3562L129.87 0.00408026Z"
-      fill="#FF0081"
-    />
-    <path
-      d="M108.565 21.7836L103.762 23.6064L105.587 28.4024L110.39 26.5795L108.565 21.7836Z"
-      fill="white"
-    />
-    <path
-      d="M115.189 24.7596L110.387 26.583L112.213 31.3785L117.015 29.5551L115.189 24.7596Z"
-      fill="white"
-    />
-    <path
-      d="M121.826 27.7348L117.023 29.5576L118.849 34.3536L123.652 32.5307L121.826 27.7348Z"
-      fill="white"
-    />
-    <path
-      d="M128.447 30.7059L123.645 32.5293L125.471 37.3247L130.273 35.5014L128.447 30.7059Z"
-      fill="white"
-    />
-    <path
-      d="M135.084 33.6854L130.281 35.5083L132.107 40.3043L136.91 38.4814L135.084 33.6854Z"
-      fill="white"
-    />
-    <path
-      d="M124.799 21.1156L119.996 22.939L121.822 27.7344L126.625 25.911L124.799 21.1156Z"
-      fill="white"
-    />
-    <path
-      d="M127.775 14.492L122.973 16.3154L124.799 21.1109L129.601 19.2875L127.775 14.492Z"
-      fill="white"
-    />
-    <path
-      d="M118.838 34.3499L114.035 36.1733L115.861 40.9688L120.664 39.1454L118.838 34.3499Z"
-      fill="white"
-    />
-    <path
-      d="M115.857 40.9691L111.055 42.7925L112.881 47.5879L117.683 45.7645L115.857 40.9691Z"
-      fill="white"
-    />
-    <path
-      d="M129.938 52.3822L139.906 91.5276L100.703 101.429L101.988 106.406L146.174 95.2215L134.922 51.0996L129.938 52.3822Z"
-      fill="black"
-    />
-  </svg>
-);
-
-export default RestrictedPage;

apps/explorer/src/app/routes/route-names.tsx

@@ -1,6 +1,5 @@
 export const Routes = {
   HOME: '/',
-  RESTRICTED: '/restricted',
   TX: 'txs',
   BLOCKS: 'blocks',
   PARTIES: 'parties',

apps/explorer/src/app/routes/router-config.tsx

@@ -30,7 +30,6 @@ import { remove0x } from '@vegaprotocol/utils';
 import { PartyAccountsByAsset } from './parties/id/accounts';
 import { Disclaimer } from './pages/disclaimer';
 import { FLAGS } from '@vegaprotocol/environment';
-import RestrictedPage from './restricted';
 
 export type Navigable = {
   path: string;
@@ -357,14 +356,6 @@ export const routerConfig: Route[] = [
       ...validators,
     ],
   },
-  {
-    path: Routes.RESTRICTED,
-    element: <RestrictedPage />,
-    handle: {
-      name: t('Restricted'),
-      text: t('Restricted'),
-    },
-  },
 ];
 
 export const router = createBrowserRouter(routerConfig);

apps/governance/src/app.tsx

@@ -106,7 +106,6 @@ const Web3Container = ({
     useEthWithdrawApprovalsManager();
     return null;
   };
-
   const [connectors, initializeConnectors] = useWeb3ConnectStore((store) => [
     store.connectors,
     store.initialize,
@@ -240,9 +239,6 @@ const AppContainer = () => {
     store.setDialogOpen,
   ]);
 
-  // Hacky skip all the loading & web3 init for geo restricted users
-  const isRestricted = document?.location?.pathname?.includes('/restricted');
-
   useEffect(() => {
     if (ENV.dsn && telemetryOn === 'true') {
       Sentry.init({
@@ -308,14 +304,6 @@ const AppContainer = () => {
     }
   }, [GIT_COMMIT_HASH, GIT_BRANCH, VEGA_ENV, telemetryOn]);
 
-  if (isRestricted) {
-    return (
-      <Router>
-        <AppRouter />
-      </Router>
-    );
-  }
-
   return (
     <Router>
       <ScrollToTop />

apps/governance/src/i18n/translations/dev.json

@@ -9,7 +9,6 @@
   "pageTitleRedemptionTranche": "Redeem from Tranche",
   "pageTitleTranches": "Vesting tranches",
   "pageTitle404": "Page not found",
-  "pageTitle451": "451 unavailable",
   "pageTitleNotPermitted": "Can not proceed!",
   "pageTitleDisassociate": "Disassociate $VEGA tokens from a Vega key",
   "pageTitleProposals": "Proposals",

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

@@ -12,19 +12,18 @@ import {
   generateProposal,
   generateYesVotes,
 } from '../../test-helpers/generate-proposals';
-import { ProposalHeader, NewTransferSummary } from './proposal-header';
+import { ProposalHeader } from './proposal-header';
 import {
   lastWeek,
   nextWeek,
   mockWalletContext,
   createUserVoteQueryMock,
 } from '../../test-helpers/mocks';
+import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { MockedResponse } from '@apollo/client/testing';
 import { FLAGS } from '@vegaprotocol/environment';
 import { BrowserRouter } from 'react-router-dom';
 import { VoteState } from '../vote-details/use-user-vote';
-import { useNewTransferProposalDetails } from '@vegaprotocol/proposals';
-import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
-import type { MockedResponse } from '@apollo/client/testing';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ...jest.requireActual('@vegaprotocol/proposals'),
@@ -32,7 +31,6 @@ jest.mock('@vegaprotocol/proposals', () => ({
     code: 'PARENT_CODE',
     parentMarketId: 'PARENT_ID',
   }),
-  useNewTransferProposalDetails: jest.fn(),
 }));
 
 const renderComponent = (
@@ -420,78 +418,3 @@ describe('Proposal header', () => {
     expect(await screen.findByTestId('user-voted-yes')).toBeInTheDocument();
   });
 });
-
-jest.mock('@vegaprotocol/proposals');
-
-describe('<NewTransferSummary />', () => {
-  it('renders null if no details are provided', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue(null);
-    const { container } = render(<NewTransferSummary proposalId="1" />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('handles OneOffGovernanceTransfer', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: { __typename: 'OneOffGovernanceTransfer', deliverOn: null },
-      source: '0x123',
-      sourceType: 'wallet',
-      destination: '0x456',
-      destinationType: 'contract',
-    });
-    const { getByText } = render(<NewTransferSummary proposalId="1" />);
-    const textMatch = (content: string) => content.includes('One off transfer');
-    expect(getByText(textMatch)).toBeInTheDocument();
-  });
-
-  it('handles RecurringGovernanceTransfer', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: {
-        __typename: 'RecurringGovernanceTransfer',
-        startEpoch: 1,
-        endEpoch: 5,
-      },
-      source: '0x123',
-      sourceType: 'wallet',
-      destination: '0x456',
-      destinationType: 'contract',
-    });
-    const { getByText } = render(<NewTransferSummary proposalId="1" />);
-    const textMatch = (content: string) =>
-      content.includes('Recurring transfer');
-    expect(getByText(textMatch)).toBeInTheDocument();
-  });
-
-  it('should fallback to translated sourceType when source is not set', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: {
-        __typename: 'RecurringGovernanceTransfer',
-        startEpoch: 1,
-        endEpoch: 5,
-      },
-      source: undefined,
-      sourceType: 'ACCOUNT_TYPE_GENERAL',
-      destination: '0x456',
-      destinationType: 'ACCOUNT_TYPE_GENERAL',
-    });
-
-    render(<NewTransferSummary proposalId="1" />);
-    expect(screen.getByText('General account')).toBeInTheDocument();
-  });
-
-  it('should fallback to translated destinationType when destination is not set', () => {
-    (useNewTransferProposalDetails as jest.Mock).mockReturnValue({
-      kind: {
-        __typename: 'RecurringGovernanceTransfer',
-        startEpoch: 1,
-        endEpoch: 5,
-      },
-      source: '0x123',
-      sourceType: 'ACCOUNT_TYPE_GENERAL',
-      destination: undefined,
-      destinationType: 'ACCOUNT_TYPE_GLOBAL_INSURANCE',
-    });
-
-    render(<NewTransferSummary proposalId="1" />);
-    expect(screen.getByText('Global insurance account')).toBeInTheDocument();
-  });
-});

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

@@ -237,11 +237,7 @@ export const ProposalHeader = ({
   );
 };
 
-export const SuccessorCode = ({
-  proposalId,
-}: {
-  proposalId?: string | null;
-}) => {
+const SuccessorCode = ({ proposalId }: { proposalId?: string | null }) => {
   const { t } = useTranslation();
   const successor = useSuccessorMarketProposalDetails(proposalId);
 
@@ -258,11 +254,7 @@ export const SuccessorCode = ({
   ) : null;
 };
 
-export const NewTransferSummary = ({
-  proposalId,
-}: {
-  proposalId?: string | null;
-}) => {
+const NewTransferSummary = ({ proposalId }: { proposalId?: string | null }) => {
   const { t } = useTranslation();
   const details = useNewTransferProposalDetails(proposalId);
 
@@ -273,21 +265,14 @@ export const NewTransferSummary = ({
       {GovernanceTransferKindMapping[details.kind.__typename]}{' '}
       {t('transfer from')}{' '}
       <Lozenge>
-        {details.source
-          ? truncateMiddle(details.source)
-          : t(details.sourceType)}
+        {truncateMiddle(details.source) || t(details.sourceType)}
       </Lozenge>{' '}
-      {t('to')}{' '}
-      <Lozenge>
-        {details.destination
-          ? truncateMiddle(details.destination)
-          : t(details.destinationType)}
-      </Lozenge>
+      {t('to')} <Lozenge>{truncateMiddle(details.destination)}</Lozenge>
     </span>
   );
 };
 
-export const CancelTransferSummary = ({
+const CancelTransferSummary = ({
   proposalId,
 }: {
   proposalId?: string | null;

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

@@ -7,7 +7,7 @@ export type NewMarketProductFieldsFragment = { __typename?: 'Proposal', terms: {
 
 export type UpdateMarketStatesFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
 
-export type UpdateReferralProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: any, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
+export type UpdateReferralProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: string, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
 
 export type UpdateVolumeDiscountProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } } };
 
@@ -21,7 +21,7 @@ export type ProposalsQueryVariables = Types.Exact<{
 }>;
 
 
-export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null, product?: { __typename: 'FutureProduct' } | { __typename: 'PerpetualProduct' } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: any, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
+export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null, product?: { __typename: 'FutureProduct' } | { __typename: 'PerpetualProduct' } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: string, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
 
 export const NewMarketProductFieldsFragmentDoc = gql`
     fragment NewMarketProductFields on Proposal {

apps/governance/src/routes/proposals/test-helpers/generate-proposals.ts

@@ -142,12 +142,6 @@ export const generateYesVotes = (
                 })
                 .toString(),
         },
-        vestingBalancesSummary: {
-          __typename: 'PartyVestingBalancesSummary',
-          epoch: null,
-          lockedBalances: [],
-          vestingBalances: [],
-        },
       },
       datetime: faker.date.past().toISOString(),
     };
@@ -198,12 +192,6 @@ export const generateNoVotes = (
                 })
                 .toString(),
         },
-        vestingBalancesSummary: {
-          __typename: 'PartyVestingBalancesSummary',
-          epoch: null,
-          lockedBalances: [],
-          vestingBalances: [],
-        },
       },
       datetime: faker.date.past().toISOString(),
     };

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

@@ -1,112 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import type { RouteChildProps } from '..';
-import { BackgroundVideo } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-
-const Restricted = ({ name }: RouteChildProps) => {
-  useDocumentTitle(name);
-  const { t } = useTranslation();
-  const errorMessage =
-    'Due to uncertainty about the legal and regulatory status of the content hosted on this site, it is not available to visitors in your jurisdiction.';
-
-  return (
-    <div>
-      <BackgroundVideo className="brightness-50" />
-      <div
-        className={classNames(
-          'max-w-[620px] p-2 mt-[10vh]',
-          'mx-auto my-0',
-          'antialiased text-white',
-          'overflow-hidden relative',
-          'flex flex-col gap-2'
-        )}
-      >
-        <div className="flex gap-4">
-          <div>{GHOST}</div>
-          <h1 className="leading-relaxed  mb-0 text-[2.7rem] font-alpha calt break-words uppercase">
-            {t('pageTitle451')}
-          </h1>
-        </div>
-        <div className="text-sm mt-10 overflow-auto font-mono">
-          {errorMessage}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const GHOST = (
-  <svg
-    width="56"
-    height="85"
-    viewBox="0 0 150 234"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.43 93.6821L0 104.097V172.435H5.13793V106.2L14.0779 97.3247L10.43 93.6821Z"
-      fill="black"
-    />
-    <path d="M105.328 18.521H7.70703V172.435H105.328V18.521Z" fill="white" />
-    <path d="M38.5364 64.6953H33.3984V69.8258H38.5364V64.6953Z" fill="black" />
-    <path d="M43.6731 69.8257H38.5352V74.9561H43.6731V69.8257Z" fill="black" />
-    <path d="M48.8098 74.9561H43.6719V80.0865H48.8098V74.9561Z" fill="black" />
-    <path d="M38.5364 74.9561H33.3984V80.0865H38.5364V74.9561Z" fill="black" />
-    <path d="M48.8098 64.6953H43.6719V69.8258H48.8098V64.6953Z" fill="black" />
-    <path d="M69.3606 64.6953H64.2227V69.8258H69.3606V64.6953Z" fill="black" />
-    <path d="M74.5012 69.8257H69.3633V74.9561H74.5012V69.8257Z" fill="black" />
-    <path d="M79.6379 74.9561H74.5V80.0865H79.6379V74.9561Z" fill="black" />
-    <path d="M69.3606 74.9561H64.2227V80.0865H69.3606V74.9561Z" fill="black" />
-    <path d="M79.6379 64.6953H74.5V69.8258H79.6379V64.6953Z" fill="black" />
-    <path d="M79.6398 90.3477H33.3984V95.4781H79.6398V90.3477Z" fill="black" />
-    <path d="M48.8098 172.435H43.6719V234H48.8098V172.435Z" fill="black" />
-    <path d="M69.3606 172.435H64.2227V234H69.3606V172.435Z" fill="black" />
-    <path
-      d="M129.87 0.00408026L92.0273 14.3682L111.195 64.7203L149.038 50.3562L129.87 0.00408026Z"
-      fill="#FF0081"
-    />
-    <path
-      d="M108.565 21.7836L103.762 23.6064L105.587 28.4024L110.39 26.5795L108.565 21.7836Z"
-      fill="white"
-    />
-    <path
-      d="M115.189 24.7596L110.387 26.583L112.213 31.3785L117.015 29.5551L115.189 24.7596Z"
-      fill="white"
-    />
-    <path
-      d="M121.826 27.7348L117.023 29.5576L118.849 34.3536L123.652 32.5307L121.826 27.7348Z"
-      fill="white"
-    />
-    <path
-      d="M128.447 30.7059L123.645 32.5293L125.471 37.3247L130.273 35.5014L128.447 30.7059Z"
-      fill="white"
-    />
-    <path
-      d="M135.084 33.6854L130.281 35.5083L132.107 40.3043L136.91 38.4814L135.084 33.6854Z"
-      fill="white"
-    />
-    <path
-      d="M124.799 21.1156L119.996 22.939L121.822 27.7344L126.625 25.911L124.799 21.1156Z"
-      fill="white"
-    />
-    <path
-      d="M127.775 14.492L122.973 16.3154L124.799 21.1109L129.601 19.2875L127.775 14.492Z"
-      fill="white"
-    />
-    <path
-      d="M118.838 34.3499L114.035 36.1733L115.861 40.9688L120.664 39.1454L118.838 34.3499Z"
-      fill="white"
-    />
-    <path
-      d="M115.857 40.9691L111.055 42.7925L112.881 47.5879L117.683 45.7645L115.857 40.9691Z"
-      fill="white"
-    />
-    <path
-      d="M129.938 52.3822L139.906 91.5276L100.703 101.429L101.988 106.406L146.174 95.2215L134.922 51.0996L129.938 52.3822Z"
-      fill="black"
-    />
-  </svg>
-);
-
-export default Restricted;

apps/governance/src/routes/router-config.tsx

@@ -4,7 +4,6 @@ import Home from './token';
 import NotFound from './not-found';
 import NotPermitted from './not-permitted';
 import Routes from './routes';
-import Restricted from './restricted';
 
 const LazyTranches = React.lazy(
   () =>
@@ -361,14 +360,9 @@ const routerConfig = [
     path: Routes.DISCLAIMER,
     element: <LazyDisclaimer name="Disclaimer" />,
   },
-  {
-    path: Routes.RESTRICTED,
-    // Not lazy as loaded when a user first hits the site
-    element: <Restricted name="451 Unavailable" />,
-  },
   {
     path: '*',
-    // Also not lazy as loaded when a user first hits the site
+    // Not lazy as loaded when a user first hits the site
     element: <NotFound name="NotFound" />,
   },
   ...redirects,

apps/governance/src/routes/routes.ts

@@ -7,7 +7,6 @@ const Routes = {
   PROPOSALS_REJECTED: '/proposals/rejected',
   PROTOCOL_UPGRADES: '/protocol-upgrades',
   NOT_PERMITTED: '/not-permitted',
-  RESTRICTED: '/restricted',
   NOT_FOUND: '/not-found',
   CONTRACTS: '/contracts',
   TOKEN: '/token',

apps/trading-e2e/src/integration/trading-orders.cy.ts

@@ -0,0 +1,529 @@
+import * as Schema from '@vegaprotocol/types';
+import type { OrderAmendment, OrderCancellation } from '@vegaprotocol/wallet';
+import {
+  updateOrder,
+  getSubscriptionMocks,
+} from '../support/order-update-subscription';
+import {
+  testOrderCancellation,
+  testOrderAmendment,
+} from '../support/order-validation';
+
+const orderSymbol = 'instrument-code';
+const orderSize = 'size';
+const orderType = 'type';
+const orderStatus = 'status';
+const orderRemaining = 'remaining';
+const orderPrice = 'price';
+const orderTimeInForce = 'timeInForce';
+const orderUpdatedAt = 'updatedAt';
+const cancelOrderBtn = 'cancel';
+const cancelAllOrdersBtn = 'cancelAll';
+const editOrderBtn = 'edit';
+
+describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.wait('@Markets');
+  });
+
+  it('renders orders', () => {
+    cy.getByTestId('tab-orders').should('be.visible');
+    cy.getByTestId(cancelAllOrdersBtn).should('be.visible');
+    cy.getByTestId(cancelOrderBtn).should('have.length.at.least', 1);
+    cy.getByTestId(editOrderBtn).should('have.length.at.least', 1);
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get(`[role='rowgroup']`)
+        .first()
+        .within(() => {
+          cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => {
+            cy.wrap($symbol).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderRemaining}']`).each(($remaining) => {
+            cy.wrap($remaining).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderSize}']`).each(($size) => {
+            cy.wrap($size).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderType}']`).each(($type) => {
+            cy.wrap($type).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderStatus}']`).each(($status) => {
+            cy.wrap($status).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderPrice}']`).each(($price) => {
+            cy.wrap($price).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderTimeInForce}']`).each(($timeInForce) => {
+            cy.wrap($timeInForce).invoke('text').should('not.be.empty');
+          });
+
+          cy.get(`[col-id='${orderUpdatedAt}']`).each(($dateTime) => {
+            cy.wrap($dateTime).invoke('text').should('not.be.empty');
+          });
+        });
+    });
+  });
+
+  it('partially filled orders should not show close/edit buttons', () => {
+    const partiallyFilledId =
+      '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78';
+
+    cy.getByTestId('tab-orders').should('be.visible');
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Partially Filled').click();
+    cy.getByTestId('All').click();
+
+    cy.get(`[row-id="${partiallyFilledId}"]`)
+      .eq(0)
+      .within(() => {
+        cy.get(`[col-id='${orderStatus}']`).should(
+          'have.text',
+          'Partially Filled'
+        );
+        cy.get(`[col-id='${orderRemaining}']`).should('have.text', '7');
+        cy.get(`[col-id='${orderSize}']`).should('have.text', '-10');
+        cy.getByTestId(cancelOrderBtn).should('not.exist');
+        cy.getByTestId(editOrderBtn).should('not.exist');
+      });
+  });
+
+  it('orders are sorted by most recent order', () => {
+    // 7003-MORD-002
+    const expectedOrderList = [
+      'BTCUSD.MF21',
+      'SOLUSD',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'BTCUSD.MF21',
+    ];
+    cy.get('.ag-header-container').within(() => {
+      cy.get('[col-id="status"]').realHover();
+      cy.get('[col-id="status"] .ag-icon-menu').click();
+    });
+    cy.contains('Reset').click();
+    cy.getByTestId('All').click();
+
+    cy.getByTestId('tab-orders')
+      .get(
+        `.ag-center-cols-container [col-id='${orderSymbol}'] [data-testid="market-code"]`
+      )
+      .should('have.length.at.least', expectedOrderList.length)
+      .then(($symbols) => {
+        const symbolNames: string[] = [];
+        cy.wrap($symbols)
+          .each(($symbol) => {
+            cy.wrap($symbol)
+              .invoke('text')
+              .then((text) => {
+                symbolNames.push(text);
+              });
+          })
+          .then(() => {
+            expect(symbolNames).to.include.ordered.members(expectedOrderList);
+          });
+      });
+  });
+});
+
+describe('subscribe orders', { tags: '@smoke' }, () => {
+  let orderId = '0';
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get('[col-id="status"][role="columnheader"]')
+        .focus()
+        .find('.ag-header-cell-menu-button')
+        .click();
+      cy.get('.ag-filter-apply-panel-button').click();
+    });
+    orderId = (parseInt(orderId, 10) + 1).toString();
+  });
+  // 7002-SORD-053
+  // 7002-SORD-040
+  // 7003-MORD-001
+
+  it('must see an active order', () => {
+    // 7002-SORD-041
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Active');
+  });
+
+  it('must see an expired order', () => {
+    // 7002-SORD-042
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_EXPIRED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Expired');
+  });
+
+  it('must see a cancelled order', () => {
+    // 7002-SORD-043
+    // NOT COVERED:  see the txn that cancelled it and a link to the block explorer, if cancelled by a user transaction.
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_CANCELLED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Cancelled');
+  });
+
+  it('must see a stopped order', () => {
+    // 7002-SORD-044
+    // NOT COVERED:  see an explanation of why stopped
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_STOPPED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Stopped');
+  });
+
+  it('must see a partially filled order', () => {
+    // 7002-SORD-045
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_PARTIALLY_FILLED,
+      size: '5',
+      remaining: '1',
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Partially Filled'
+    );
+    cy.getByTestId(`order-status-${orderId}`)
+      .parentsUntil(`.ag-row`)
+      .siblings(`[col-id=${orderRemaining}]`)
+      .should('have.text', '4');
+  });
+
+  it('must see a filled order', () => {
+    // 7002-SORD-046
+    // 7003-MORD-020
+    // NOT COVERED:  Must be able to see/link to all trades that were created from this order
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_FILLED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
+    cy.get(`[col-id="${orderSymbol}"]`).contains('[title="Future"]', 'Futr');
+  });
+
+  it('must see a rejected order', () => {
+    // 7002-SORD-047
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_REJECTED,
+      rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_INTERNAL_ERROR,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Rejected: Internal error'
+    );
+  });
+
+  it('must see a parked order', () => {
+    // 7002-SORD-048
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_PARKED,
+    });
+    cy.getByTestId(`order-status-${orderId}`).should(
+      'have.text',
+      'Parked: Internal error'
+    );
+  });
+
+  it('must see the size of the order and direction/side -', () => {
+    // 7003-MORD-003
+    // 7003-MORD-004
+    updateOrder({
+      id: orderId,
+      size: '15',
+      side: Schema.Side.SIDE_SELL,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id="${orderSize}"]`)
+      .should('have.text', '-15');
+  });
+
+  it('must see the size of the order and direction/side +', () => {
+    // 7003-MORD-003
+    // 7003-MORD-004
+    updateOrder({
+      id: orderId,
+      size: '5',
+      side: Schema.Side.SIDE_BUY,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id="${orderSize}"]`)
+      .should('have.text', '+5');
+  });
+
+  it('for limit typy must see the Limit price that was set on the order', () => {
+    // 7003-MORD-005
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="price"]')
+      .should('have.text', '200.00');
+  });
+
+  it('must see a pegged order - ask', () => {
+    updateOrder({
+      id: orderId,
+      side: Schema.Side.SIDE_BUY,
+      peggedOrder: {
+        __typename: 'PeggedOrder',
+        reference: Schema.PeggedReference.PEGGED_REFERENCE_BEST_ASK,
+        offset: '250000',
+      },
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="type"]')
+      .should('have.text', 'Ask - 2.50 Peg limit');
+  });
+
+  it('must see a pegged order - bid', () => {
+    updateOrder({
+      id: orderId,
+      side: Schema.Side.SIDE_SELL,
+      peggedOrder: {
+        __typename: 'PeggedOrder',
+        reference: Schema.PeggedReference.PEGGED_REFERENCE_BEST_BID,
+        offset: '100',
+      },
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="type"]')
+      .should('have.text', 'Bid + 0.001 Peg limit');
+  });
+
+  it('must see a pegged order - mid', () => {
+    updateOrder({
+      id: orderId,
+      side: Schema.Side.SIDE_SELL,
+      peggedOrder: {
+        __typename: 'PeggedOrder',
+        reference: Schema.PeggedReference.PEGGED_REFERENCE_MID,
+        offset: '0.5',
+      },
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="type"]')
+      .should('have.text', 'Mid + 0.00001 Peg limit');
+  });
+
+  it('for market typy must not see a price for active or parked orders', () => {
+    // 7003-MORD-005
+    updateOrder({
+      id: orderId,
+      type: Schema.OrderType.TYPE_MARKET,
+      status: Schema.OrderStatus.STATUS_PARKED,
+      peggedOrder: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[col-id="price"]')
+      .should('have.text', '-');
+  });
+
+  it('must see the time in force applied to the order', () => {
+    // 7003-MORD-006
+    updateOrder({
+      id: orderId,
+      type: Schema.OrderType.TYPE_MARKET,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[col-id='${orderTimeInForce}']`)
+      .should('have.text', 'GTC');
+  });
+
+  it('for Active order when is part of a liquidity or peg shape, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+      liquidityProvisionId: '6536',
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+
+  it('for Active order when is part of a liquidity, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+      liquidityProvisionId: '6536',
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+
+  it('for Active order when is part of a peg shape, must not see an option to amend the individual order ', () => {
+    // 7003-MORD-008
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: {},
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="cancel"]`)
+      .should('not.exist');
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="edit"]`)
+      .should('not.exist');
+  });
+});
+
+describe('amend and cancel order', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    const subscriptionMocks = getSubscriptionMocks();
+    cy.spy(subscriptionMocks, 'OrdersUpdate');
+    cy.mockTradingPage();
+    cy.mockSubscription(subscriptionMocks);
+    cy.setVegaWallet();
+    cy.visit('/#/markets/market-0');
+    cy.getByTestId('All').click();
+    cy.getByTestId('tab-orders').within(() => {
+      cy.get('[col-id="status"][role="columnheader"]')
+        .focus()
+        .find('.ag-header-cell-menu-button')
+        .click();
+      cy.get('.ag-filter-apply-panel-button').click();
+    });
+    cy.mockVegaWalletTransaction();
+  });
+
+  const orderId = '1234567890';
+
+  // this test is flakey
+  it('must be able to amend the price of an order', () => {
+    // 7003-MORD-007
+    // 7003-MORD-012
+    // 7003-MORD-014
+    // 7003-MORD-015
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[data-testid="icon-edit"]')
+      .then(($btn) => {
+        cy.wrap($btn).click();
+        cy.getByTestId('dialog-title').should('have.text', 'Edit order');
+        cy.get('#limitPrice').focus().clear().type('100');
+        cy.getByTestId('edit-order').find('[type="submit"]').click();
+        const order: OrderAmendment = {
+          orderId: orderId,
+          marketId: 'market-0',
+          price: '10000000',
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+          sizeDelta: 0,
+        };
+        testOrderAmendment(order);
+      });
+  });
+  it('must be able to cancel an individual order', () => {
+    // 7003-MORD-007
+    // 7003-MORD-009
+    // 7003-MORD-010
+    // 7003-MORD-011
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find(`[data-testid="icon-cross"]`)
+      .then(($btn) => {
+        cy.wrap($btn).click({ force: true });
+        const order: OrderCancellation = {
+          orderId: orderId,
+          marketId: 'market-0',
+        };
+        testOrderCancellation(order);
+      });
+  });
+  it('must be able to cancel all orders on all markets', () => {
+    // 7003-MORD-009
+    // 7003-MORD-010
+    // 7003-MORD-011
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[data-testid="cancelAll"]`)
+      .should('have.text', 'Cancel all')
+      .then(($btn) => {
+        cy.wrap($btn).click({ force: true });
+        const order: OrderCancellation = {};
+        testOrderCancellation(order);
+      });
+  });
+  it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', () => {
+    // 7003-MORD-013
+    updateOrder({
+      id: orderId,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      peggedOrder: null,
+      liquidityProvisionId: null,
+    });
+    cy.get(`[row-id=${orderId}]`)
+      .find('[data-testid="icon-edit"]')
+      .then(($btn) => {
+        cy.wrap($btn).click({ force: true });
+        cy.getByTestId('dialog-title').should('have.text', 'Edit order');
+        cy.get('#limitPrice').focus().clear().type('0.111111');
+        cy.getByTestId('edit-order').find('[type="submit"]').click();
+        cy.getByTestId('input-error-text').should(
+          'have.text',
+          'Price accepts up to 5 decimal places'
+        );
+      });
+  });
+});

apps/trading-e2e/src/integration/withdraw-key-to-key-validation.cy.ts

@@ -0,0 +1,91 @@
+import { selectAsset } from '../support/helpers';
+
+const amountField = 'input[name="amount"]';
+const transferText = 'transfer-intro-text';
+const errorText = 'input-error-text';
+const formFieldError = 'input-error-text';
+const keyID = `[data-testid="${transferText}"] > .rounded-md`;
+const manageVegaWallet = 'manage-vega-wallet';
+const submitTransferBtn = '[type="submit"]';
+const toAddressField = '[name="toAddress"]';
+const transferForm = 'transfer-form';
+const walletTransfer = 'wallet-transfer';
+
+const ASSET_EURO = 1;
+const ASSET_SEPOLIA_TBTC = 2;
+
+describe(
+  'transfer form validation',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    beforeEach(() => {
+      cy.mockWeb3Provider();
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setVegaWallet();
+
+      cy.visit('/#/portfolio');
+      cy.getByTestId(manageVegaWallet).click();
+      cy.getByTestId(walletTransfer).click();
+
+      cy.wait('@Accounts');
+      cy.wait('@Assets');
+
+      cy.mockVegaWalletTransaction();
+    });
+
+    it('transfer Text', () => {
+      // 1003-TRAN-003
+      cy.getByTestId(transferText)
+        .should('exist')
+        .get(keyID)
+        .invoke('text')
+        .should('match', /[\w.]{6}…[\w.]{6}/);
+    });
+
+    it('invalid vega key validation', () => {
+      //1003-TRAN-013
+      //1003-TRAN-004
+      cy.getByTestId(transferForm).should('be.visible');
+      cy.contains('Enter manually').click();
+      cy.getByTestId(transferForm).find(toAddressField).type('asd');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Invalid Vega key');
+      cy.contains('label', 'Vega key').should('be.visible');
+      cy.contains('label', 'Asset').should('be.visible');
+      cy.contains('label', 'Amount').should('be.visible');
+    });
+
+    it('empty fields', () => {
+      // 1003-TRAN-012
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Required');
+      cy.getByTestId(formFieldError).should('have.length', 3);
+    });
+
+    it('min amount', () => {
+      // 1002-WITH-010
+      // 1003-TRAN-014
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.get(amountField).clear().type('0');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'Value is below minimum'
+      );
+    });
+
+    it('max amount', () => {
+      // 1003-TRAN-002
+      // 1003-TRAN-011
+      // 1003-TRAN-002
+      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
+      cy.get(amountField).clear().type('1001', { delay: 100 });
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'You cannot transfer more than your available collateral'
+      );
+    });
+  }
+);

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

@@ -86,7 +86,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
       <MarketLiquiditySupplied
         marketId={market.id}
         assetDecimals={asset?.decimals || 0}
-        quantum={asset.quantum}
       />
       {market.tradableInstrument.instrument.product.__typename === 'Future' && (
         <HeaderStat

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

@@ -123,7 +123,7 @@ const MainGrid = memo(
               <Tab
                 id="open-orders"
                 name={t('Open')}
-                menu={<TradingViews.activeOrders.menu />}
+                menu={<TradingViews.activeOrders.menu marketId={marketId} />}
               >
                 <TradingViews.orders.component filter={Filter.Open} />
               </Tab>
@@ -136,7 +136,7 @@ const MainGrid = memo(
               <Tab
                 id="orders"
                 name={t('All')}
-                menu={<TradingViews.orders.menu />}
+                menu={<TradingViews.orders.menu marketId={marketId} />}
               >
                 <TradingViews.orders.component />
               </Tab>

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

@@ -43,7 +43,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
 
       return (
         <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
+          <Menu marketId={market?.id || ''} />
         </div>
       );
     }

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

@@ -319,8 +319,7 @@ describe('Closed', () => {
     );
   });
 
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('successor marked should be visible', async () => {
+  it('successor marked should be visible', async () => {
     const marketsWithSuccessorID = [
       {
         __typename: 'MarketEdge' as const,

apps/trading/client-pages/portfolio/AccountHistory.graphql

@@ -0,0 +1,39 @@
+query AccountHistory(
+  $partyId: ID!
+  $assetId: ID!
+  $accountTypes: [AccountType!]
+  $dateRange: DateRange
+  $marketIds: [ID!]
+) {
+  balanceChanges(
+    filter: {
+      partyIds: [$partyId]
+      accountTypes: $accountTypes
+      assetId: $assetId
+      marketIds: $marketIds
+    }
+    dateRange: $dateRange
+  ) {
+    edges {
+      node {
+        timestamp
+        partyId
+        balance
+        marketId
+        assetId
+        accountType
+      }
+    }
+  }
+}
+
+query AccountsWithBalance($partyId: ID!, $dateRange: DateRange) {
+  balanceChanges(filter: { partyIds: [$partyId] }, dateRange: $dateRange) {
+    edges {
+      node {
+        assetId
+        accountType
+      }
+    }
+  }
+}

apps/trading/client-pages/portfolio/__generated__/AccountHistory.ts

@@ -0,0 +1,117 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AccountHistoryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+  assetId: Types.Scalars['ID'];
+  accountTypes?: Types.InputMaybe<Array<Types.AccountType> | Types.AccountType>;
+  dateRange?: Types.InputMaybe<Types.DateRange>;
+  marketIds?: Types.InputMaybe<Array<Types.Scalars['ID']> | Types.Scalars['ID']>;
+}>;
+
+
+export type AccountHistoryQuery = { __typename?: 'Query', balanceChanges: { __typename?: 'AggregatedBalanceConnection', edges: Array<{ __typename?: 'AggregatedBalanceEdge', node: { __typename?: 'AggregatedBalance', timestamp: any, partyId?: string | null, balance: string, marketId?: string | null, assetId?: string | null, accountType?: Types.AccountType | null } } | null> } };
+
+export type AccountsWithBalanceQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+  dateRange?: Types.InputMaybe<Types.DateRange>;
+}>;
+
+
+export type AccountsWithBalanceQuery = { __typename?: 'Query', balanceChanges: { __typename?: 'AggregatedBalanceConnection', edges: Array<{ __typename?: 'AggregatedBalanceEdge', node: { __typename?: 'AggregatedBalance', assetId?: string | null, accountType?: Types.AccountType | null } } | null> } };
+
+
+export const AccountHistoryDocument = gql`
+    query AccountHistory($partyId: ID!, $assetId: ID!, $accountTypes: [AccountType!], $dateRange: DateRange, $marketIds: [ID!]) {
+  balanceChanges(
+    filter: {partyIds: [$partyId], accountTypes: $accountTypes, assetId: $assetId, marketIds: $marketIds}
+    dateRange: $dateRange
+  ) {
+    edges {
+      node {
+        timestamp
+        partyId
+        balance
+        marketId
+        assetId
+        accountType
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAccountHistoryQuery__
+ *
+ * To run a query within a React component, call `useAccountHistoryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAccountHistoryQuery` 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 } = useAccountHistoryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *      assetId: // value for 'assetId'
+ *      accountTypes: // value for 'accountTypes'
+ *      dateRange: // value for 'dateRange'
+ *      marketIds: // value for 'marketIds'
+ *   },
+ * });
+ */
+export function useAccountHistoryQuery(baseOptions: Apollo.QueryHookOptions<AccountHistoryQuery, AccountHistoryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AccountHistoryQuery, AccountHistoryQueryVariables>(AccountHistoryDocument, options);
+      }
+export function useAccountHistoryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AccountHistoryQuery, AccountHistoryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AccountHistoryQuery, AccountHistoryQueryVariables>(AccountHistoryDocument, options);
+        }
+export type AccountHistoryQueryHookResult = ReturnType<typeof useAccountHistoryQuery>;
+export type AccountHistoryLazyQueryHookResult = ReturnType<typeof useAccountHistoryLazyQuery>;
+export type AccountHistoryQueryResult = Apollo.QueryResult<AccountHistoryQuery, AccountHistoryQueryVariables>;
+export const AccountsWithBalanceDocument = gql`
+    query AccountsWithBalance($partyId: ID!, $dateRange: DateRange) {
+  balanceChanges(filter: {partyIds: [$partyId]}, dateRange: $dateRange) {
+    edges {
+      node {
+        assetId
+        accountType
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAccountsWithBalanceQuery__
+ *
+ * To run a query within a React component, call `useAccountsWithBalanceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAccountsWithBalanceQuery` 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 } = useAccountsWithBalanceQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *      dateRange: // value for 'dateRange'
+ *   },
+ * });
+ */
+export function useAccountsWithBalanceQuery(baseOptions: Apollo.QueryHookOptions<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>(AccountsWithBalanceDocument, options);
+      }
+export function useAccountsWithBalanceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>(AccountsWithBalanceDocument, options);
+        }
+export type AccountsWithBalanceQueryHookResult = ReturnType<typeof useAccountsWithBalanceQuery>;
+export type AccountsWithBalanceLazyQueryHookResult = ReturnType<typeof useAccountsWithBalanceLazyQuery>;
+export type AccountsWithBalanceQueryResult = Apollo.QueryResult<AccountsWithBalanceQuery, AccountsWithBalanceQueryVariables>;

apps/trading/client-pages/portfolio/account-history-container.tsx

@@ -0,0 +1,349 @@
+import { addDecimal, fromNanoSeconds } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import compact from 'lodash/compact';
+import uniqBy from 'lodash/uniqBy';
+import type { ChangeEvent } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import type { AccountHistoryQuery } from './__generated__/AccountHistory';
+import { useAccountHistoryQuery } from './__generated__/AccountHistory';
+import * as Schema from '@vegaprotocol/types';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useAssetsDataProvider } from '@vegaprotocol/assets';
+import {
+  AsyncRenderer,
+  Splash,
+  Toggle,
+  TradingButton,
+  TradingDropdown,
+  TradingDropdownContent,
+  TradingDropdownItem,
+  TradingDropdownTrigger,
+} from '@vegaprotocol/ui-toolkit';
+import { AccountTypeMapping } from '@vegaprotocol/types';
+import { PriceChart } from 'pennant';
+import 'pennant/dist/style.css';
+import type { Account } from '@vegaprotocol/accounts';
+import { accountsDataProvider } from '@vegaprotocol/accounts';
+import {
+  useLocalStorageSnapshot,
+  useThemeSwitcher,
+} from '@vegaprotocol/react-helpers';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { getAsset, type Market } from '@vegaprotocol/markets';
+
+export const DateRange = {
+  RANGE_1D: '1D',
+  RANGE_7D: '7D',
+  RANGE_1M: '1M',
+  RANGE_3M: '3M',
+  RANGE_1Y: '1Y',
+  RANGE_YTD: 'YTD',
+  RANGE_ALL: 'All',
+};
+
+const dateRangeToggleItems = Object.entries(DateRange).map(([_, value]) => ({
+  label: t(value),
+  value: value,
+}));
+
+export const calculateStartDate = (range: string): string | undefined => {
+  const now = new Date();
+  switch (range) {
+    case DateRange.RANGE_1D:
+      return new Date(now.setDate(now.getDate() - 1)).toISOString();
+    case DateRange.RANGE_7D:
+      return new Date(now.setDate(now.getDate() - 7)).toISOString();
+    case DateRange.RANGE_1M:
+      return new Date(now.setMonth(now.getMonth() - 1)).toISOString();
+    case DateRange.RANGE_3M:
+      return new Date(now.setMonth(now.getMonth() - 3)).toISOString();
+    case DateRange.RANGE_1Y:
+      return new Date(now.setFullYear(now.getFullYear() - 1)).toISOString();
+    case DateRange.RANGE_YTD:
+      return new Date(now.setMonth(0)).toISOString();
+    default:
+      return undefined;
+  }
+};
+
+export const AccountHistoryContainer = () => {
+  const { pubKey } = useVegaWallet();
+  const { data: assets } = useAssetsDataProvider();
+
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+
+  return (
+    <AsyncRenderer loading={!assets} error={undefined} data={assets}>
+      {assets && <AccountHistoryManager pubKey={pubKey} assetData={assets} />}
+    </AsyncRenderer>
+  );
+};
+
+const AccountHistoryManager = ({
+  pubKey,
+  assetData,
+}: {
+  pubKey: string;
+  assetData: AssetFieldsFragment[];
+}) => {
+  const [accountType, setAccountType] = useState<Schema.AccountType>(
+    Schema.AccountType.ACCOUNT_TYPE_GENERAL
+  );
+
+  const variablesForOneTimeQuery = useMemo(
+    () => ({
+      partyId: pubKey,
+    }),
+    [pubKey]
+  );
+
+  const { data: accounts } = useDataProvider({
+    dataProvider: accountsDataProvider,
+    variables: variablesForOneTimeQuery,
+    skip: !pubKey,
+  });
+
+  const assetIds = useMemo(
+    () => accounts?.map((e) => e?.asset?.id) || [],
+    [accounts]
+  );
+
+  const assets = useMemo(
+    () =>
+      assetData
+        .filter((a) => assetIds.includes(a.id))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [assetData, assetIds]
+  );
+  const [assetId, setAssetId] = useLocalStorageSnapshot(
+    'account-history-active-asset-id'
+  );
+
+  const asset = useMemo(
+    () => assets.find((a) => a.id === assetId) || assets[0],
+    [assetId, assets]
+  );
+
+  const [range, setRange] = useState<typeof DateRange[keyof typeof DateRange]>(
+    DateRange.RANGE_1M
+  );
+  const [market, setMarket] = useState<Market | null>(null);
+
+  const marketFilterCb = useCallback(
+    (item: Market) => {
+      const itemAsset = getAsset(item);
+      return !asset?.id || itemAsset?.id === asset?.id;
+    },
+    [asset?.id]
+  );
+  const markets = useMemo<Market[] | null>(() => {
+    const arr =
+      accounts
+        ?.filter((item: Account) => Boolean(item && item.market))
+        .map<Market>((item) => item.market as Market) ?? null;
+    return arr
+      ? uniqBy(arr.filter(marketFilterCb), 'id').sort((a, b) =>
+          a.tradableInstrument.instrument.code.localeCompare(
+            b.tradableInstrument.instrument.code
+          )
+        )
+      : null;
+  }, [accounts, marketFilterCb]);
+
+  const resolveMarket = useCallback(
+    (m: Market) => {
+      setMarket(m);
+      const itemAsset = getAsset(m);
+      const newAssetId = itemAsset?.id;
+      const newAsset = assets.find((item) => item.id === newAssetId);
+      if ((!asset || (assets && newAssetId !== asset.id)) && newAsset) {
+        setAssetId(newAsset.id);
+      }
+    },
+    [asset, assets, setAssetId]
+  );
+
+  const variables = useMemo(
+    () => ({
+      partyId: pubKey,
+      assetId: asset?.id || '',
+      accountTypes: accountType ? [accountType] : undefined,
+      dateRange:
+        range === 'All' ? undefined : { start: calculateStartDate(range) },
+      marketIds: market?.id ? [market.id] : undefined,
+    }),
+    [pubKey, asset, accountType, range, market?.id]
+  );
+
+  const { data } = useAccountHistoryQuery({
+    variables,
+    skip: !asset || !pubKey,
+  });
+
+  return (
+    <div className="flex flex-col h-full gap-2">
+      <div className="flex flex-wrap justify-between px-1 pt-2 gap-2">
+        <div className="flex items-center gap-1 shrink-0">
+          <TradingDropdown
+            trigger={
+              <TradingDropdownTrigger>
+                <TradingButton size="small">
+                  {accountType
+                    ? `${
+                        AccountTypeMapping[
+                          accountType as keyof typeof Schema.AccountType
+                        ]
+                      } Account`
+                    : t('Select account type')}
+                </TradingButton>
+              </TradingDropdownTrigger>
+            }
+          >
+            <TradingDropdownContent>
+              {[
+                Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+                Schema.AccountType.ACCOUNT_TYPE_BOND,
+                Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+              ].map((type) => (
+                <TradingDropdownItem
+                  key={type}
+                  onClick={() => {
+                    setAccountType(type as Schema.AccountType);
+
+                    // if not a margin account clear any market selection
+                    if (type !== Schema.AccountType.ACCOUNT_TYPE_MARGIN) {
+                      setMarket(null);
+                    }
+                  }}
+                >
+                  {AccountTypeMapping[type as keyof typeof Schema.AccountType]}
+                </TradingDropdownItem>
+              ))}
+            </TradingDropdownContent>
+          </TradingDropdown>
+
+          <TradingDropdown
+            trigger={
+              <TradingDropdownTrigger>
+                <TradingButton size="small">
+                  {asset ? asset.symbol : t('Select asset')}
+                </TradingButton>
+              </TradingDropdownTrigger>
+            }
+          >
+            <TradingDropdownContent>
+              {assets.map((a) => (
+                <TradingDropdownItem
+                  key={a.id}
+                  onClick={() => {
+                    setAssetId(a.id);
+
+                    // if the selected asset is different to the selected market clear the market
+                    if (market && a.id !== getAsset(market).id) {
+                      setMarket(null);
+                    }
+                  }}
+                >
+                  {a.symbol}
+                </TradingDropdownItem>
+              ))}
+            </TradingDropdownContent>
+          </TradingDropdown>
+          <TradingDropdown
+            trigger={
+              <TradingDropdownTrigger>
+                <TradingButton size="small">
+                  {market
+                    ? market.tradableInstrument.instrument.code
+                    : t('Select market')}
+                </TradingButton>
+              </TradingDropdownTrigger>
+            }
+          >
+            <TradingDropdownContent>
+              {market && (
+                <TradingDropdownItem key="0" onClick={() => setMarket(null)}>
+                  {t('All markets')}
+                </TradingDropdownItem>
+              )}
+              {markets?.map((m) => (
+                <TradingDropdownItem
+                  key={m.id}
+                  onClick={() => resolveMarket(m)}
+                >
+                  {m.tradableInstrument.instrument.code}
+                </TradingDropdownItem>
+              ))}
+            </TradingDropdownContent>
+          </TradingDropdown>
+        </div>
+        <div className="justify-items-end">
+          <Toggle
+            id="account-history-date-range"
+            name="account-history-date-range"
+            toggles={dateRangeToggleItems}
+            checkedValue={range}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setRange(e.target.value as keyof typeof DateRange)
+            }
+            size="sm"
+          />
+        </div>
+      </div>
+      <div className="flex-1">
+        {asset && (
+          <div className="h-full">
+            <AccountHistoryChart
+              data={data}
+              accountType={accountType}
+              asset={asset}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const AccountHistoryChart = ({
+  data,
+  accountType,
+  asset,
+}: {
+  data: AccountHistoryQuery | undefined;
+  accountType: Schema.AccountType;
+  asset: AssetFieldsFragment;
+}) => {
+  const { theme } = useThemeSwitcher();
+  const values: { cols: [string, string]; rows: [Date, number][] } | null =
+    useMemo(() => {
+      if (!data?.balanceChanges.edges.length) {
+        return null;
+      }
+
+      const valuesData = compact(data.balanceChanges.edges)
+        .reduce((acc, edge) => {
+          if (edge.node.accountType === accountType) {
+            acc?.push({
+              datetime: fromNanoSeconds(edge.node.timestamp),
+              balance: Number(addDecimal(edge.node.balance, asset.decimals)),
+            });
+          }
+          return acc;
+        }, [] as { datetime: Date; balance: number }[])
+        .reverse();
+      return {
+        cols: ['Date', `${asset.symbol} account balance`],
+        rows: compact(valuesData).map((d) => [d.datetime, d.balance]),
+      };
+    }, [accountType, asset.decimals, asset.symbol, data?.balanceChanges.edges]);
+
+  if (!data || !values?.rows.length) {
+    return <Splash> {t('No account history data')}</Splash>;
+  }
+
+  return <PriceChart data={values} theme={theme} />;
+};

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

@@ -15,6 +15,7 @@ import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
+import { AccountHistoryContainer } from './account-history-container';
 import {
   ResizableGrid,
   ResizableGridPanel,
@@ -65,7 +66,10 @@ export const Portfolio = () => {
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
         <ResizableGridPanel minSize={75}>
           <PortfolioGridChild>
-            <Tabs storageKey="console-portfolio-top-1">
+            <Tabs storageKey="console-portfolio-top">
+              <Tab id="account-history" name={t('Account history')}>
+                <AccountHistoryContainer />
+              </Tab>
               <Tab
                 id="positions"
                 name={t('Positions')}

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

@@ -1,42 +1,21 @@
 import {
   Input,
   InputError,
-  Loader,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { FieldValues } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import classNames from 'classnames';
-import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
-import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
+import { Navigate, useSearchParams } from 'react-router-dom';
 import { useEffect, useRef, useState } from 'react';
-import { RainbowButton } from './buttons';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import { Button } from './buttons';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
-import { t } from '@vegaprotocol/i18n';
-import { Statistics } from './referral-statistics';
-
-const RELOAD_DELAY = 3000;
-
-const validateCode = (value: string) => {
-  const number = +`0x${value}`;
-  if (!value || value.length !== 64) {
-    return t('Code must be 64 characters in length');
-  } else if (Number.isNaN(number)) {
-    return t('Code must be be valid hex');
-  }
-  return true;
-};
 
 export const ApplyCodeForm = () => {
-  const navigate = useNavigate();
-  const openWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-
   const [status, setStatus] = useState<
     'requested' | 'failed' | 'successful' | null
   >(null);
@@ -48,17 +27,11 @@ export const ApplyCodeForm = () => {
     formState: { errors },
     setValue,
     setError,
-    watch,
   } = 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) ? codeField : undefined,
-  });
+  const { data: referee } = useReferral(pubKey, 'referee');
+  const { data: referrer } = useReferral(pubKey, 'referrer');
 
   useEffect(() => {
     const code = params.get('code');
@@ -92,13 +65,9 @@ export const ApplyCodeForm = () => {
         if (err.message.includes('user rejected')) {
           setStatus(null);
         } else {
-          setStatus(null);
           setError('code', {
             type: 'required',
-            message:
-              err instanceof Error
-                ? err.message
-                : 'Your code has been rejected',
+            message: 'Your code has been rejected',
           });
         }
       });
@@ -130,21 +99,10 @@ export const ApplyCodeForm = () => {
       }),
   });
 
-  // go to main page when successfully applied
-  useEffect(() => {
-    if (status === 'successful') {
-      setTimeout(() => {
-        navigate(Routes.REFERRALS);
-      }, RELOAD_DELAY);
-    }
-  }, [navigate, status]);
-
-  // go to main page if the current pubkey is already a referrer or referee
   if (referee || referrer) {
     return <Navigate to={Routes.REFERRALS} />;
   }
 
-  // show "code applied" message when successfully applied
   if (status === 'successful') {
     return (
       <div className="w-1/2 mx-auto">
@@ -159,23 +117,10 @@ export const ApplyCodeForm = () => {
   }
 
   const getButtonProps = () => {
-    if (!pubKey) {
-      return {
-        disabled: false,
-        children: 'Connect wallet',
-        type: 'button' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
-        onClick: ((event) => {
-          event.preventDefault();
-          openWalletDialog();
-        }) as MouseEventHandler,
-      };
-    }
-
-    if (isReadOnly) {
+    if (isReadOnly || !pubKey) {
       return {
         disabled: true,
-        children: 'Apply a code',
-        type: 'submit' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
+        children: 'Apply',
       };
     }
 
@@ -183,63 +128,43 @@ export const ApplyCodeForm = () => {
       return {
         disabled: true,
         children: 'Confirm in wallet...',
-        type: 'submit' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
       };
     }
 
     return {
       disabled: false,
-      children: 'Apply a code',
-      type: 'submit' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
+      children: 'Apply',
     };
   };
 
   return (
-    <>
-      <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">
-          Apply a referral code
-        </h3>
-        <p className="mb-4 text-center text-base">
-          Enter a referral code to get trading discounts.
-        </p>
-        <form
-          className={classNames('w-full flex flex-col gap-4', {
-            'animate-shake': Boolean(errors.code),
-          })}
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          <label>
-            <span className="sr-only">Your referral code</span>
-            <Input
-              hasError={Boolean(errors.code)}
-              {...register('code', {
-                required: 'You have to provide a code to apply it.',
-                validate: validateCode,
-              })}
-              placeholder="Enter a code"
-              className="mb-2 bg-vega-clight-900 dark:bg-vega-cdark-700"
-            />
-          </label>
-          <RainbowButton variant="border" {...getButtonProps()} />
-        </form>
-        {errors.code && (
-          <InputError className="break-words overflow-auto">
-            {errors.code.message?.toString()}
-          </InputError>
-        )}
-      </div>
-      {previewLoading && !previewData ? (
-        <div className="mt-10">
-          <Loader />
-        </div>
-      ) : null}
-      {previewData ? (
-        <div className="mt-10">
-          <h2 className="text-2xl mb-5">You are joining</h2>
-          <Statistics data={previewData} as="referee" />
-        </div>
-      ) : null}
-    </>
+    <div className="w-1/2 mx-auto">
+      <h3 className="mb-5 text-xl text-center uppercase calt">
+        Apply a referral code
+      </h3>
+      <p className="mb-6 text-center">Enter a referral code</p>
+      <form
+        className={classNames('w-full flex flex-col gap-3', {
+          'animate-shake': Boolean(errors.code),
+        })}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <label className="flex-grow">
+          <span className="block mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
+            Your referral code
+          </span>
+          <Input
+            hasError={Boolean(errors.code)}
+            {...register('code', {
+              required: 'You have to provide a code to apply it.',
+            })}
+          />
+        </label>
+        <Button className="w-full" type="submit" {...getButtonProps()} />
+      </form>
+      {errors.code && (
+        <InputError>{errors.code.message?.toString()}</InputError>
+      )}
+    </div>
   );
 };

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

@@ -16,23 +16,20 @@ export const RainbowButton = ({
 }: RainbowButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) => (
   <button
     className={classNames(
-      'bg-rainbow rounded-lg overflow-hidden disabled:opacity-40',
-      'hover:bg-rainbow-180 hover:animate-spin-rainbow',
+      'bg-rainbow hover:bg-none hover:bg-rainbow enabled:hover:bg-vega-pink-500 rounded-lg overflow-hidden disabled:opacity-40',
       {
         'px-5 py-3 text-white': variant === 'full',
         'p-[0.125rem]': variant === 'border',
-      }
+      },
+      className
     )}
     {...props}
   >
     <div
-      className={classNames(
-        {
-          'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
-            variant === 'border',
-        },
-        className
-      )}
+      className={classNames({
+        'bg-white dark:bg-vega-cdark-900 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
+          variant === 'border',
+      })}
     >
       {children}
     </div>
@@ -58,20 +55,6 @@ const DISABLED_RAINBOW_TAB_STYLE = classNames(
   '[&.active]:text-white'
 );
 
-const TAB_STYLE = classNames(
-  'inline-block',
-  'bg-transparent',
-  'text-vega-clight-200 dark:text-vega-cdark-200',
-  'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100',
-  'data-[state="active"]:text-black dark:data-[state="active"]:text-white',
-  'data-[state="active"]:border-b-2 data-[state="active"]:border-b-black dark:data-[state="active"]:border-b-white',
-  '[&.active]:text-black dark:[&.active]:text-white',
-  '[&.active]:border-b-2 [&.active]:border-b-black dark:[&.active]:border-b-white',
-  'mx-4 px-0 py-3',
-  'uppercase'
-);
-const DISABLED_TAB_STYLE = classNames('pointer-events-none');
-
 export const RainbowTabButton = forwardRef<
   HTMLButtonElement,
   { disabled?: boolean } & ButtonHTMLAttributes<HTMLButtonElement>
@@ -110,26 +93,6 @@ export const RainbowTabLink = ({
   </NavLink>
 );
 
-export const TabLink = ({
-  to,
-  children,
-  className,
-  disabled = false,
-  ...props
-}: { disabled?: boolean } & ComponentProps<typeof NavLink>) => (
-  <NavLink
-    to={to}
-    className={classNames(
-      TAB_STYLE,
-      disabled && DISABLED_TAB_STYLE,
-      typeof className === 'string' ? className : undefined
-    )}
-    {...props}
-  >
-    {children}
-  </NavLink>
-);
-
 export const Button = forwardRef<
   HTMLButtonElement,
   ComponentProps<typeof TradingButton>

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

@@ -4,8 +4,3 @@ export const GRADIENT =
 
 export const SKY_BACKGROUND =
   'bg-[url(/sky-light.png)] dark:bg-[url(/sky-dark.png)] bg-[40%_0px] bg-[length:1440px] bg-no-repeat bg-local';
-
-// TODO: Update the links to use the correct referral related pages
-export const REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
-export const ABOUT_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
-export const DISCLAIMER_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';

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

@@ -19,54 +19,70 @@ import {
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
 import { useStakeAvailable } from './hooks/use-stake-available';
-import {
-  ABOUT_REFERRAL_DOCS_LINK,
-  DISCLAIMER_REFERRAL_DOCS_LINK,
-} from './constants';
-import { useReferral } from './hooks/use-referral';
 
 export const CreateCodeContainer = () => {
-  return <CreateCodeForm />;
+  const { stakeAvailable, requiredStake } = useStakeAvailable();
+  if (stakeAvailable == null || requiredStake == null) {
+    return null;
+  }
+
+  return (
+    <CreateCodeForm
+      currentStakeAvailable={stakeAvailable}
+      requiredStake={requiredStake}
+    />
+  );
 };
 
-export const CreateCodeForm = () => {
+export const CreateCodeForm = ({
+  currentStakeAvailable,
+  requiredStake,
+}: {
+  currentStakeAvailable: bigint;
+  requiredStake: bigint;
+}) => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const openWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
-  const { pubKey, isReadOnly } = useVegaWallet();
+  const { pubKey } = useVegaWallet();
 
   return (
-    <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">Create a referral code</h3>
-      <p className="mb-4 text-center text-base">
+    <div className="w-1/2 mx-auto">
+      <h3 className="mb-5 text-xl text-center uppercase calt">
+        Create a referral code
+      </h3>
+      <p className="mb-6 text-center">
         Generate a referral code to share with your friends and start earning
         commission.
       </p>
-
-      <div className="w-full flex flex-col">
-        <RainbowButton
-          variant="border"
-          disabled={isReadOnly}
-          onClick={() => {
-            if (pubKey) {
-              setDialogOpen(true);
-            } else {
-              openWalletDialog();
-            }
-          }}
-        >
-          {pubKey ? 'Create a referral code' : 'Connect wallet'}
-        </RainbowButton>
+      <div className="mb-5">
+        <div className="text-center">
+          <RainbowButton
+            variant="border"
+            onClick={() => {
+              if (pubKey) {
+                setDialogOpen(true);
+              } else {
+                openWalletDialog();
+              }
+            }}
+          >
+            {pubKey ? 'Create a referral code' : 'Connect wallet'}
+          </RainbowButton>
+        </div>
       </div>
-
       <Dialog
         title="Create a referral code"
         open={dialogOpen}
         onChange={() => setDialogOpen(false)}
         size="small"
       >
-        <CreateCodeDialog setDialogOpen={setDialogOpen} />
+        <CreateCodeDialog
+          currentStakeAvailable={currentStakeAvailable}
+          setDialogOpen={setDialogOpen}
+          requiredStake={requiredStake}
+        />
       </Dialog>
     </div>
   );
@@ -74,21 +90,21 @@ export const CreateCodeForm = () => {
 
 const CreateCodeDialog = ({
   setDialogOpen,
+  currentStakeAvailable,
+  requiredStake,
 }: {
   setDialogOpen: (open: boolean) => void;
+  currentStakeAvailable: bigint;
+  requiredStake: bigint;
 }) => {
   const createLink = useLinks(DApp.Governance);
   const { isReadOnly, pubKey, sendTx } = useVegaWallet();
-  const { refetch } = useReferral({ pubKey, role: 'referrer' });
   const [err, setErr] = useState<string | null>(null);
   const [code, setCode] = useState<string | null>(null);
   const [status, setStatus] = useState<
     'idle' | 'loading' | 'success' | 'error'
   >('idle');
 
-  const { stakeAvailable: currentStakeAvailable, requiredStake } =
-    useStakeAvailable();
-
   const onSubmit = () => {
     if (isReadOnly || !pubKey) {
       setErr('Not connected');
@@ -140,29 +156,16 @@ const CreateCodeDialog = ({
       return {
         children: 'Close',
         intent: Intent.Success,
-        onClick: () => {
-          refetch();
-          setDialogOpen(false);
-        },
+        onClick: () => setDialogOpen(false),
       };
     }
   };
 
-  if (!pubKey || currentStakeAvailable == null || requiredStake == null) {
-    return (
-      <div className="flex flex-col gap-4">
-        <p>You must be connected to the Vega wallet.</p>
-        <TradingButton
-          intent={Intent.Primary}
-          onClick={() => setDialogOpen(false)}
-        >
-          Close
-        </TradingButton>
-      </div>
-    );
-  }
-
-  if (currentStakeAvailable < requiredStake) {
+  // TODO: Add when network parameters are updated
+  if (
+    currentStakeAvailable === BigInt(0) ||
+    currentStakeAvailable < requiredStake
+  ) {
     return (
       <div className="flex flex-col gap-4">
         <p>
@@ -212,13 +215,10 @@ const CreateCodeDialog = ({
         {...getButtonProps()}
       />
       {err && <InputError>{err}</InputError>}
+      {/* TODO: Add links */}
       <div className="flex justify-center pt-5 mt-2 text-sm border-t gap-4 text-default border-default">
-        <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
-          About the referral program
-        </ExternalLink>
-        <ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
-          Disclaimer
-        </ExternalLink>
+        <ExternalLink>About the referral program</ExternalLink>
+        <ExternalLink>Disclaimer</ExternalLink>
       </div>
     </div>
   );

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

@@ -1,19 +0,0 @@
-query ReferralProgram {
-  currentReferralProgram {
-    id
-    version
-    endOfProgramTimestamp
-    windowLength
-    endedAt
-    benefitTiers {
-      minimumEpochs
-      minimumRunningNotionalTakerVolume
-      referralDiscountFactor
-      referralRewardFactor
-    }
-    stakingTiers {
-      minimumStakedTokens
-      referralRewardMultiplier
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-query CurrentEpochInfo {
-  epoch {
-    id
-    timestamps {
-      start
-      end
-    }
-  }
-}

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

@@ -1,14 +0,0 @@
-query Referees($code: ID!, $aggregationDays: Int) {
-  referralSetReferees(id: $code, aggregationDays: $aggregationDays) {
-    edges {
-      node {
-        referralSetId
-        refereeId
-        joinedAt
-        atEpoch
-        totalRefereeNotionalTakerVolume
-        totalRefereeGeneratedRewards
-      }
-    }
-  }
-}

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

@@ -1,16 +0,0 @@
-query ReferralSetStats($code: ID!, $epoch: Int) {
-  referralSetStats(setId: $code, epoch: $epoch) {
-    edges {
-      node {
-        atEpoch
-        partyId
-        discountFactor
-        rewardFactor
-        epochNotionalTakerVolume
-        referralSetRunningNotionalTakerVolume
-        rewardsMultiplier
-        rewardsFactorMultiplier
-      }
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-query ReferralSets($id: ID, $referrer: ID, $referee: ID) {
-  referralSets(id: $id, referrer: $referrer, referee: $referee) {
-    edges {
-      node {
-        id
-        referrer
-        createdAt
-        updatedAt
-      }
-    }
-  }
-}

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

@@ -1,59 +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 ReferralProgramQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type ReferralProgramQuery = { __typename?: 'Query', currentReferralProgram?: { __typename?: 'CurrentReferralProgram', id: string, version: number, endOfProgramTimestamp: any, windowLength: number, endedAt?: any | null, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | null };
-
-
-export const ReferralProgramDocument = gql`
-    query ReferralProgram {
-  currentReferralProgram {
-    id
-    version
-    endOfProgramTimestamp
-    windowLength
-    endedAt
-    benefitTiers {
-      minimumEpochs
-      minimumRunningNotionalTakerVolume
-      referralDiscountFactor
-      referralRewardFactor
-    }
-    stakingTiers {
-      minimumStakedTokens
-      referralRewardMultiplier
-    }
-  }
-}
-    `;
-
-/**
- * __useReferralProgramQuery__
- *
- * To run a query within a React component, call `useReferralProgramQuery` and pass it any options that fit your needs.
- * When your component renders, `useReferralProgramQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useReferralProgramQuery({
- *   variables: {
- *   },
- * });
- */
-export function useReferralProgramQuery(baseOptions?: Apollo.QueryHookOptions<ReferralProgramQuery, ReferralProgramQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ReferralProgramQuery, ReferralProgramQueryVariables>(ReferralProgramDocument, options);
-      }
-export function useReferralProgramLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ReferralProgramQuery, ReferralProgramQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ReferralProgramQuery, ReferralProgramQueryVariables>(ReferralProgramDocument, options);
-        }
-export type ReferralProgramQueryHookResult = ReturnType<typeof useReferralProgramQuery>;
-export type ReferralProgramLazyQueryHookResult = ReturnType<typeof useReferralProgramLazyQuery>;
-export type ReferralProgramQueryResult = Apollo.QueryResult<ReferralProgramQuery, ReferralProgramQueryVariables>;

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

@@ -1,49 +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 CurrentEpochInfoQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type CurrentEpochInfoQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null } } };
-
-
-export const CurrentEpochInfoDocument = gql`
-    query CurrentEpochInfo {
-  epoch {
-    id
-    timestamps {
-      start
-      end
-    }
-  }
-}
-    `;
-
-/**
- * __useCurrentEpochInfoQuery__
- *
- * To run a query within a React component, call `useCurrentEpochInfoQuery` and pass it any options that fit your needs.
- * When your component renders, `useCurrentEpochInfoQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useCurrentEpochInfoQuery({
- *   variables: {
- *   },
- * });
- */
-export function useCurrentEpochInfoQuery(baseOptions?: Apollo.QueryHookOptions<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>(CurrentEpochInfoDocument, options);
-      }
-export function useCurrentEpochInfoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>(CurrentEpochInfoDocument, options);
-        }
-export type CurrentEpochInfoQueryHookResult = ReturnType<typeof useCurrentEpochInfoQuery>;
-export type CurrentEpochInfoLazyQueryHookResult = ReturnType<typeof useCurrentEpochInfoLazyQuery>;
-export type CurrentEpochInfoQueryResult = Apollo.QueryResult<CurrentEpochInfoQuery, CurrentEpochInfoQueryVariables>;

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

@@ -1,59 +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 RefereesQueryVariables = Types.Exact<{
-  code: Types.Scalars['ID'];
-  aggregationDays?: Types.InputMaybe<Types.Scalars['Int']>;
-}>;
-
-
-export type RefereesQuery = { __typename?: 'Query', referralSetReferees: { __typename?: 'ReferralSetRefereeConnection', edges: Array<{ __typename?: 'ReferralSetRefereeEdge', node: { __typename?: 'ReferralSetReferee', referralSetId: string, refereeId: string, joinedAt: any, atEpoch: number, totalRefereeNotionalTakerVolume: string, totalRefereeGeneratedRewards: string } } | null> } };
-
-
-export const RefereesDocument = gql`
-    query Referees($code: ID!, $aggregationDays: Int) {
-  referralSetReferees(id: $code, aggregationDays: $aggregationDays) {
-    edges {
-      node {
-        referralSetId
-        refereeId
-        joinedAt
-        atEpoch
-        totalRefereeNotionalTakerVolume
-        totalRefereeGeneratedRewards
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useRefereesQuery__
- *
- * To run a query within a React component, call `useRefereesQuery` and pass it any options that fit your needs.
- * When your component renders, `useRefereesQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useRefereesQuery({
- *   variables: {
- *      code: // value for 'code'
- *      aggregationDays: // value for 'aggregationDays'
- *   },
- * });
- */
-export function useRefereesQuery(baseOptions: Apollo.QueryHookOptions<RefereesQuery, RefereesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<RefereesQuery, RefereesQueryVariables>(RefereesDocument, options);
-      }
-export function useRefereesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RefereesQuery, RefereesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<RefereesQuery, RefereesQueryVariables>(RefereesDocument, options);
-        }
-export type RefereesQueryHookResult = ReturnType<typeof useRefereesQuery>;
-export type RefereesLazyQueryHookResult = ReturnType<typeof useRefereesLazyQuery>;
-export type RefereesQueryResult = Apollo.QueryResult<RefereesQuery, RefereesQueryVariables>;

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

@@ -1,61 +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 ReferralSetStatsQueryVariables = Types.Exact<{
-  code: Types.Scalars['ID'];
-  epoch?: Types.InputMaybe<Types.Scalars['Int']>;
-}>;
-
-
-export type ReferralSetStatsQuery = { __typename?: 'Query', referralSetStats: { __typename?: 'ReferralSetStatsConnection', edges: Array<{ __typename?: 'ReferralSetStatsEdge', node: { __typename?: 'ReferralSetStats', atEpoch: number, partyId: string, discountFactor: string, rewardFactor: string, epochNotionalTakerVolume: string, referralSetRunningNotionalTakerVolume: string, rewardsMultiplier: string, rewardsFactorMultiplier: string } } | null> } };
-
-
-export const ReferralSetStatsDocument = gql`
-    query ReferralSetStats($code: ID!, $epoch: Int) {
-  referralSetStats(setId: $code, epoch: $epoch) {
-    edges {
-      node {
-        atEpoch
-        partyId
-        discountFactor
-        rewardFactor
-        epochNotionalTakerVolume
-        referralSetRunningNotionalTakerVolume
-        rewardsMultiplier
-        rewardsFactorMultiplier
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useReferralSetStatsQuery__
- *
- * To run a query within a React component, call `useReferralSetStatsQuery` and pass it any options that fit your needs.
- * When your component renders, `useReferralSetStatsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useReferralSetStatsQuery({
- *   variables: {
- *      code: // value for 'code'
- *      epoch: // value for 'epoch'
- *   },
- * });
- */
-export function useReferralSetStatsQuery(baseOptions: Apollo.QueryHookOptions<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>(ReferralSetStatsDocument, options);
-      }
-export function useReferralSetStatsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>(ReferralSetStatsDocument, options);
-        }
-export type ReferralSetStatsQueryHookResult = ReturnType<typeof useReferralSetStatsQuery>;
-export type ReferralSetStatsLazyQueryHookResult = ReturnType<typeof useReferralSetStatsLazyQuery>;
-export type ReferralSetStatsQueryResult = Apollo.QueryResult<ReferralSetStatsQuery, ReferralSetStatsQueryVariables>;

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

@@ -1,59 +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 ReferralSetsQueryVariables = Types.Exact<{
-  id?: Types.InputMaybe<Types.Scalars['ID']>;
-  referrer?: Types.InputMaybe<Types.Scalars['ID']>;
-  referee?: Types.InputMaybe<Types.Scalars['ID']>;
-}>;
-
-
-export type ReferralSetsQuery = { __typename?: 'Query', referralSets: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', id: string, referrer: string, createdAt: any, updatedAt: any } } | null> } };
-
-
-export const ReferralSetsDocument = gql`
-    query ReferralSets($id: ID, $referrer: ID, $referee: ID) {
-  referralSets(id: $id, referrer: $referrer, referee: $referee) {
-    edges {
-      node {
-        id
-        referrer
-        createdAt
-        updatedAt
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useReferralSetsQuery__
- *
- * To run a query within a React component, call `useReferralSetsQuery` and pass it any options that fit your needs.
- * When your component renders, `useReferralSetsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useReferralSetsQuery({
- *   variables: {
- *      id: // value for 'id'
- *      referrer: // value for 'referrer'
- *      referee: // value for 'referee'
- *   },
- * });
- */
-export function useReferralSetsQuery(baseOptions?: Apollo.QueryHookOptions<ReferralSetsQuery, ReferralSetsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ReferralSetsQuery, ReferralSetsQueryVariables>(ReferralSetsDocument, options);
-      }
-export function useReferralSetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ReferralSetsQuery, ReferralSetsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ReferralSetsQuery, ReferralSetsQueryVariables>(ReferralSetsDocument, options);
-        }
-export type ReferralSetsQueryHookResult = ReturnType<typeof useReferralSetsQuery>;
-export type ReferralSetsLazyQueryHookResult = ReturnType<typeof useReferralSetsLazyQuery>;
-export type ReferralSetsQueryResult = Apollo.QueryResult<ReferralSetsQuery, ReferralSetsQueryVariables>;

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

@@ -1,8 +1,32 @@
+import { gql, useQuery } from '@apollo/client';
 import { getNumberFormat } from '@vegaprotocol/utils';
 import { addDays } from 'date-fns';
 import sortBy from 'lodash/sortBy';
 import omit from 'lodash/omit';
-import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
+
+// TODO: Generate query
+// eslint-disable-next-line
+const REFERRAL_PROGRAM_QUERY = gql`
+  query ReferralProgram {
+    currentReferralProgram {
+      id
+      version
+      endOfProgramTimestamp
+      windowLength
+      endedAt
+      benefitTiers {
+        minimumEpochs
+        minimumRunningNotionalTakerVolume
+        referralDiscountFactor
+        referralRewardFactor
+      }
+      stakingTiers {
+        minimumStakedTokens
+        referralRewardMultiplier
+      }
+    }
+  }
+`;
 
 const STAKING_TIERS_MAPPING: Record<number, string> = {
   1: 'Tradestarter',
@@ -59,11 +83,11 @@ const MOCK = {
 };
 
 export const useReferralProgram = () => {
-  const { data, loading, error } = useReferralProgramQuery({
+  const { data, loading, error } = useQuery(REFERRAL_PROGRAM_QUERY, {
     fetchPolicy: 'cache-and-network',
   });
 
-  if (!data || !data.currentReferralProgram) {
+  if (!data) {
     return {
       benefitTiers: [],
       stakingTiers: [],
@@ -80,15 +104,11 @@ export const useReferralProgram = () => {
     .map((t, i) => {
       return {
         tier: i + 1,
-        rewardFactor: Number(t.referralRewardFactor),
         commission: Number(t.referralRewardFactor) * 100 + '%',
-        discountFactor: Number(t.referralDiscountFactor),
         discount: Number(t.referralDiscountFactor) * 100 + '%',
-        minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
         volume: getNumberFormat(0).format(
           Number(t.minimumRunningNotionalTakerVolume)
         ),
-        epochs: Number(t.minimumEpochs),
       };
     });
 
@@ -103,16 +123,10 @@ export const useReferralProgram = () => {
     };
   });
 
-  const details = omit(
-    data.currentReferralProgram,
-    'benefitTiers',
-    'stakingTiers'
-  );
-
   return {
     benefitTiers,
     stakingTiers,
-    details,
+    details: omit(data.currentReferralProgram, 'benefitTiers', 'stakingTiers'),
     loading,
     error,
   };

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

@@ -1,116 +1,114 @@
+import { gql, useQuery } from '@apollo/client';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
-import { useCallback } from 'react';
-import { useRefereesQuery } from './__generated__/Referees';
-import compact from 'lodash/compact';
-import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
-import { useReferralSetsQuery } from './__generated__/ReferralSets';
 
-const DEFAULT_AGGREGATION_DAYS = 30;
+const REFERRER_QUERY = gql`
+  query ReferralSets($partyId: ID!) {
+    referralSets(referrer: $partyId) {
+      edges {
+        node {
+          id
+          referrer
+          createdAt
+          updatedAt
+        }
+      }
+    }
+  }
+`;
 
-export type Role = 'referrer' | 'referee';
-type UseReferralArgs = (
-  | { code: string }
-  | { pubKey: string | null; role: Role }
-) & {
-  aggregationDays?: number;
+const REFEREE_QUERY = gql`
+  query ReferralSets($partyId: ID!) {
+    referralSets(referee: $partyId) {
+      edges {
+        node {
+          id
+          referrer
+          createdAt
+          updatedAt
+        }
+      }
+    }
+  }
+`;
+
+const REFEREES_QUERY = gql`
+  query ReferralSets($code: ID!) {
+    referralSetReferees(id: $code) {
+      edges {
+        node {
+          referralSetId
+          refereeId
+          joinedAt
+          atEpoch
+        }
+      }
+    }
+  }
+`;
+
+// TODO: generate types after perps work is merged
+export type ReferralData = {
+  code: string;
+  referees: Array<{
+    refereeId: string;
+    joinedAt: string;
+    atEpoch: number;
+  }>;
 };
 
-const prepareVariables = (
-  args: UseReferralArgs
-): [ReferralSetsQueryVariables, boolean] => {
-  const byCode = 'code' in args;
-  const byRole = 'pubKey' in args && 'role' in args;
-  let variables = {};
-  let skip = true;
-  if (byCode) {
-    variables = {
-      id: args.code,
-    };
-    skip = !args.code;
-  }
-  if (byRole) {
-    if (args.role === 'referee') {
-      variables = { referee: args.pubKey };
-    }
-    if (args.role === 'referrer') {
-      variables = { referrer: args.pubKey };
-    }
-    skip = !args.pubKey;
-  }
-
-  return [variables, skip];
-};
-
-export const useReferral = (args: UseReferralArgs) => {
-  const [variables, skip] = prepareVariables(args);
+export const useReferral = (
+  pubKey: string | null,
+  role: 'referrer' | 'referee'
+) => {
+  const query = {
+    referrer: REFERRER_QUERY,
+    referee: REFEREE_QUERY,
+  };
 
   const {
     data: referralData,
     loading: referralLoading,
     error: referralError,
-    refetch: referralRefetch,
-  } = useReferralSetsQuery({
-    variables,
-    skip,
+  } = useQuery(query[role], {
+    variables: {
+      partyId: pubKey,
+    },
+    skip: !pubKey,
     fetchPolicy: 'cache-and-network',
   });
 
   // A user can only have 1 active referral program at a time
-  const referralSet =
-    referralData?.referralSets.edges &&
-    referralData.referralSets.edges.length > 0
-      ? referralData.referralSets.edges[0]?.node
-      : undefined;
+  const referral = referralData?.referralSets.edges.length
+    ? referralData.referralSets.edges[0].node
+    : undefined;
 
   const {
     data: refereesData,
     loading: refereesLoading,
     error: refereesError,
-    refetch: refereesRefetch,
-  } = useRefereesQuery({
+  } = useQuery(REFEREES_QUERY, {
     variables: {
-      code: referralSet?.id as string,
-      aggregationDays:
-        args.aggregationDays != null
-          ? args.aggregationDays
-          : DEFAULT_AGGREGATION_DAYS,
+      code: referral?.id,
     },
-    skip: !referralSet?.id,
+    skip: !referral?.id,
     fetchPolicy: 'cache-and-network',
-    context: { isEnlargedTimeout: true },
   });
 
-  const referees = compact(
-    removePaginationWrapper(refereesData?.referralSetReferees.edges)
+  const referees = removePaginationWrapper(
+    refereesData?.referralSetReferees.edges
   );
 
-  const refetch = useCallback(() => {
-    referralRefetch();
-    refereesRefetch();
-  }, [refereesRefetch, referralRefetch]);
-
-  const byReferee =
-    'role' in args && 'pubKey' in args && args.role === 'referee';
-  const referee = byReferee
-    ? referees.find((r) => r.refereeId === args.pubKey) || null
-    : null;
-
   const data =
-    referralSet && refereesData
+    referral && refereesData
       ? {
-          code: referralSet.id,
-          role: 'role' in args ? args.role : null,
-          referee: referee,
-          referrerId: referralSet.referrer,
-          createdAt: referralSet.createdAt,
+          code: referral.id,
           referees,
         }
       : undefined;
 
   return {
-    data,
+    data: data as ReferralData | undefined,
     loading: referralLoading || refereesLoading,
     error: referralError || refereesError,
-    refetch,
   };
 };

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

@@ -1,44 +1,66 @@
-import { CodeTile, StatTile } from './tile';
+import { Tile } from './tile';
 import {
+  CopyWithTooltip,
+  Input,
   VegaIcon,
   VegaIconNames,
-  truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
+import { Button, RainbowButton } from './buttons';
 
-import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import type { ReferralData } from './hooks/use-referral';
 import { useReferral } from './hooks/use-referral';
 import { CreateCodeContainer } from './create-code-form';
 import classNames from 'classnames';
-import { Table } from './table';
-import {
-  addDecimalsFormatNumber,
-  getDateFormat,
-  getDateTimeFormat,
-  getNumberFormat,
-  getUserLocale,
-  removePaginationWrapper,
-} from '@vegaprotocol/utils';
-import { useReferralSetStatsQuery } from './hooks/__generated__/ReferralSetStats';
-import compact from 'lodash/compact';
-import { useReferralProgram } from './hooks/use-referral-program';
-import { useStakeAvailable } from './hooks/use-stake-available';
-import sortBy from 'lodash/sortBy';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
-import BigNumber from 'bignumber.js';
+
+const CodeTile = ({
+  code,
+  as,
+}: {
+  code: string;
+  as: 'referrer' | 'referee';
+}) => {
+  return (
+    <Tile variant="rainbow">
+      <h3 className="mb-1 text-lg calt">Your referral code</h3>
+      {as === 'referrer' && (
+        <p className="mb-3 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
+          Share this code with friends
+        </p>
+      )}
+      <div className="flex gap-2">
+        <Input size={1} readOnly value={code} />
+        <CopyWithTooltip text={code}>
+          <Button
+            className="text-sm no-underline"
+            icon={<VegaIcon name={VegaIconNames.COPY} />}
+          >
+            <span>Copy</span>
+          </Button>
+        </CopyWithTooltip>
+      </div>
+    </Tile>
+  );
+};
 
 export const ReferralStatistics = () => {
+  const openWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
   const { pubKey } = useVegaWallet();
 
-  const { data: referee } = useReferral({
-    pubKey,
-    role: 'referee',
-  });
-  const { data: referrer } = useReferral({
-    pubKey,
-    role: 'referrer',
-  });
+  const { data: referee } = useReferral(pubKey, 'referee');
+  const { data: referrer } = useReferral(pubKey, 'referrer');
 
+  if (!pubKey) {
+    return (
+      <div className="text-center">
+        <RainbowButton variant="border" onClick={() => openWalletDialog()}>
+          Connect wallet
+        </RainbowButton>
+      </div>
+    );
+  }
   if (referee?.code) {
     return <Statistics data={referee} as="referee" />;
   }
@@ -50,260 +72,42 @@ export const ReferralStatistics = () => {
   return <CreateCodeContainer />;
 };
 
-export const Statistics = ({
+const Statistics = ({
   data,
   as,
 }: {
-  data: NonNullable<ReturnType<typeof useReferral>['data']>;
+  data: ReferralData;
   as: 'referrer' | 'referee';
 }) => {
-  const { data: epochData } = useCurrentEpochInfoQuery();
-  const { stakeAvailable } = useStakeAvailable();
-  const { benefitTiers } = useReferralProgram();
-  const { data: statsData } = useReferralSetStatsQuery({
-    variables: {
-      code: data.code,
-    },
-    skip: !data?.code,
-    fetchPolicy: 'cache-and-network',
-  });
-
-  const currentEpoch = Number(epochData?.epoch.id);
-
-  const stats =
-    statsData?.referralSetStats.edges &&
-    compact(removePaginationWrapper(statsData.referralSetStats.edges));
-  const refereeInfo = data.referee;
-  const refereeStats = stats?.find(
-    (r) => r.partyId === data.referee?.refereeId
-  );
-
-  const statsAvailable = stats && stats.length > 0 && stats[0];
-  const baseCommissionValue = statsAvailable
-    ? Number(statsAvailable.rewardFactor)
-    : 0;
-  const runningVolumeValue = statsAvailable
-    ? Number(statsAvailable.referralSetRunningNotionalTakerVolume)
-    : 0;
-  const multiplier = statsAvailable
-    ? Number(statsAvailable.rewardsMultiplier)
-    : 1;
-  const finalCommissionValue = !isNaN(multiplier)
-    ? baseCommissionValue
-    : multiplier * baseCommissionValue;
-
-  const discountFactorValue = refereeStats?.discountFactor
-    ? Number(refereeStats.discountFactor)
-    : 0;
-  const currentBenefitTierValue = benefitTiers.find(
-    (t) =>
-      !isNaN(discountFactorValue) &&
-      !isNaN(t.discountFactor) &&
-      t.discountFactor === discountFactorValue
-  );
-  const nextBenefitTierValue =
-    currentBenefitTierValue &&
-    benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1);
-  const epochsValue =
-    !isNaN(currentEpoch) && refereeInfo?.atEpoch
-      ? currentEpoch - refereeInfo?.atEpoch
-      : 0;
-  const nextBenefitTierVolumeValue = nextBenefitTierValue
-    ? nextBenefitTierValue.minimumVolume - runningVolumeValue
-    : 0;
-  const nextBenefitTierEpochsValue = nextBenefitTierValue
-    ? nextBenefitTierValue.epochs - epochsValue
-    : 0;
-
-  const baseCommissionTile = (
-    <StatTile title="Base commission rate">
-      {baseCommissionValue * 100}%
-    </StatTile>
-  );
-  const stakingMultiplierTile = (
-    <StatTile
-      title="Staking multiplier"
-      description={`(${addDecimalsFormatNumber(
-        stakeAvailable?.toString() || 0,
-        18
-      )} $VEGA staked)`}
-    >
-      {multiplier || 'None'}
-    </StatTile>
-  );
-  const finalCommissionTile = (
-    <StatTile title="Final commission rate">
-      {finalCommissionValue * 100}%
-    </StatTile>
-  );
-  const numberOfTradersValue = data.referees.length;
-  const numberOfTradersTile = (
-    <StatTile title="Number of traders">{numberOfTradersValue}</StatTile>
-  );
-
-  const codeTile = <CodeTile code={data?.code} />;
-  const createdAtTile = (
-    <StatTile title="Created at">
-      <span className="text-3xl">
-        {getDateFormat().format(new Date(data.createdAt))}
-      </span>
-    </StatTile>
-  );
-
-  const totalCommissionValue = data.referees
-    .map((r) => new BigNumber(r.totalRefereeGeneratedRewards))
-    .reduce((all, r) => all.plus(r), new BigNumber(0));
-  const totalCommissionTile = (
-    <StatTile title="Total commission (last 30 days)" description="(Quantum)">
-      {getNumberFormat(0).format(Number(totalCommissionValue))}
-    </StatTile>
-  );
-
-  const referrerTiles = (
-    <>
-      <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
-        {baseCommissionTile}
-        {stakingMultiplierTile}
-        {finalCommissionTile}
-      </div>
-
-      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-        {codeTile}
-        {createdAtTile}
-        {numberOfTradersTile}
-        {totalCommissionTile}
-      </div>
-    </>
-  );
-
-  const compactNumFormat = new Intl.NumberFormat(getUserLocale(), {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    notation: 'compact',
-    compactDisplay: 'short',
-  });
-
-  const currentBenefitTierTile = (
-    <StatTile title="Current tier">
-      {currentBenefitTierValue?.tier || '-'}
-    </StatTile>
-  );
-  const discountFactorTile = (
-    <StatTile title="Discount">{discountFactorValue * 100}%</StatTile>
-  );
-  const runningVolumeTile = (
-    <StatTile title="Combined volume">
-      {compactNumFormat.format(runningVolumeValue)}
-    </StatTile>
-  );
-  const epochsTile = <StatTile title="Epochs in set">{epochsValue}</StatTile>;
-  const nextTierVolumeTile = (
-    <StatTile title="Volume to next tier">
-      {nextBenefitTierVolumeValue <= 0
-        ? '-'
-        : compactNumFormat.format(nextBenefitTierVolumeValue)}
-    </StatTile>
-  );
-  const nextTierEpochsTile = (
-    <StatTile title="Epochs to next tier">
-      {nextBenefitTierEpochsValue <= 0 ? '-' : nextBenefitTierEpochsValue}
-    </StatTile>
-  );
-
-  const refereeTiles = (
-    <>
-      <div className="grid grid-rows-1 gap-5 grid-cols-1 md:grid-cols-3">
-        {currentBenefitTierTile}
-        {discountFactorTile}
-        {codeTile}
-      </div>
-      <div className="grid grid-rows-1 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-        {runningVolumeTile}
-        {nextTierVolumeTile}
-        {epochsTile}
-        {nextTierEpochsTile}
-      </div>
-    </>
-  );
-
-  const [collapsed, setCollapsed] = useState(false);
-  const tableRef = useRef<HTMLTableElement>(null);
-  useLayoutEffect(() => {
-    if ((tableRef.current?.getBoundingClientRect().height || 0) > 384) {
-      setCollapsed(true);
-    }
-  }, []);
-
   return (
-    <>
-      {/* Stats tiles */}
+    <div
+      className={classNames('grid grid-cols-1 grid-rows-1 gap-5 mx-auto', {
+        'md:w-1/2': as === 'referee',
+        'md:w-2/3': as === 'referrer',
+      })}
+    >
       <div
-        className={classNames(
-          'grid grid-cols-1 grid-rows-1 gap-5 mx-auto mb-20'
-        )}
+        className={classNames('grid grid-rows-1 gap-5', {
+          'grid-cols-2': as === 'referrer',
+          'grid-cols-1': as === 'referee',
+        })}
       >
-        {as === 'referrer' && referrerTiles}
-        {as === 'referee' && refereeTiles}
+        {as === 'referrer' && data?.referees && (
+          <Tile className="py-3 h-full">
+            <div className="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]">
+              <h3 className="mb-1 text-6xl text-center">
+                {data.referees.length}
+              </h3>
+              <p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+                {data.referees.length === 1
+                  ? 'Trader referred'
+                  : 'Total traders referred'}
+              </p>
+            </div>
+          </Tile>
+        )}
+        <CodeTile code={data?.code} as={as} />
       </div>
-
-      {/* Referees (only for referrer view) */}
-      {as === 'referrer' && data.referees.length > 0 && (
-        <div className="mt-20 mb-20">
-          <h2 className="text-2xl mb-5">Referees</h2>
-          <div
-            className={classNames(
-              collapsed && [
-                'relative max-h-96 overflow-hidden',
-                'after:w-full after:h-20 after:absolute after:bottom-0 after:left-0',
-                'after:bg-gradient-to-t after:from-white after:dark:from-vega-cdark-900 after:to-transparent',
-              ]
-            )}
-          >
-            <button
-              className={classNames(
-                'absolute left-1/2 bottom-0 z-10 p-2 translate-x-[-50%]',
-                {
-                  hidden: !collapsed,
-                }
-              )}
-              onClick={() => setCollapsed(false)}
-            >
-              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={24} />
-            </button>
-            <Table
-              ref={tableRef}
-              columns={[
-                { name: 'party', displayName: 'Trader' },
-                { name: 'joined', displayName: 'Date Joined' },
-                { name: 'volume', displayName: 'Volume (last 30 days)' },
-                {
-                  name: 'commission',
-                  displayName: 'Commission earned (last 30 days)',
-                },
-              ]}
-              data={sortBy(
-                data.referees.map((r) => ({
-                  party: (
-                    <span title={r.refereeId}>
-                      {truncateMiddle(r.refereeId)}
-                    </span>
-                  ),
-                  joined: getDateTimeFormat().format(new Date(r.joinedAt)),
-                  volume: Number(r.totalRefereeNotionalTakerVolume),
-                  commission: Number(r.totalRefereeGeneratedRewards),
-                })),
-                (r) => r.volume
-              )
-                .map((r) => ({
-                  ...r,
-                  volume: getNumberFormat(0).format(r.volume),
-                  commission: getNumberFormat(0).format(r.commission),
-                }))
-                .reverse()}
-            />
-          </div>
-        </div>
-      )}
-    </>
+    </div>
   );
 };

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

@@ -1,5 +1,4 @@
 import {
-  Loader,
   TradingAnchorButton,
   VegaIcon,
   VegaIconNames,
@@ -7,82 +6,35 @@ import {
 import { HowItWorksTable } from './how-it-works-table';
 import { LandingBanner } from './landing-banner';
 import { TiersContainer } from './tiers';
-import { TabLink } from './buttons';
+import { RainbowTabLink } from './buttons';
 import { Outlet } from 'react-router-dom';
 import { Routes } from '../../lib/links';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
-import { REFERRAL_DOCS_LINK } from './constants';
-import classNames from 'classnames';
-import { usePageTitleStore } from '../../stores';
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-
-const Nav = () => (
-  <div className="flex justify-center border-b border-vega-cdark-500">
-    <TabLink end to={Routes.REFERRALS}>
-      I want a code
-    </TabLink>
-    <TabLink to={Routes.REFERRALS_APPLY_CODE}>I have a code</TabLink>
-  </div>
-);
 
 export const Referrals = () => {
   const { pubKey } = useVegaWallet();
-
-  const {
-    data: referee,
-    loading: refereeLoading,
-    error: refereeError,
-  } = useReferral({
-    pubKey,
-    role: 'referee',
-  });
-  const {
-    data: referrer,
-    loading: referrerLoading,
-    error: referrerError,
-  } = useReferral({
-    pubKey,
-    role: 'referrer',
-  });
-
-  const error = refereeError || referrerError;
-  const loading = refereeLoading || referrerLoading;
-  const showNav = !loading && !error && !referrer && !referee;
-
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([t('Referrals')]));
-  }, [updateTitle]);
+  const { data: referee } = useReferral(pubKey, 'referee');
+  const { data: referrer } = useReferral(pubKey, 'referrer');
 
   return (
     <>
       <LandingBanner />
-
-      {showNav && <Nav />}
-      <div
-        className={classNames({
-          'py-16': showNav,
-          'h-[300px] relative': loading || error,
-        })}
-      >
-        {loading ? (
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <Loader />
-          </div>
-        ) : error ? (
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
-            <p>Something went wrong</p>
-            <span className="text-xs">{error.message}</span>
-          </div>
-        ) : (
+      <div>
+        <div className="flex justify-center">
+          <RainbowTabLink end to={Routes.REFERRALS}>
+            Your referrals
+          </RainbowTabLink>
+          <RainbowTabLink
+            disabled={Boolean(referee || referrer)}
+            to={Routes.REFERRALS_APPLY_CODE}
+          >
+            Apply a code
+          </RainbowTabLink>
+        </div>
+        <div className="py-16 border-t border-b border-vega-cdark-500">
           <Outlet />
-        )}
+        </div>
       </div>
 
       <TiersContainer />
@@ -95,7 +47,7 @@ export const Referrals = () => {
         <div className="mt-5">
           <TradingAnchorButton
             className="mx-auto w-max"
-            href={REFERRAL_DOCS_LINK}
+            href="https://docs.vega.xyz/"
             target="_blank"
           >
             Read the terms <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />

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

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

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

@@ -12,7 +12,7 @@ export const Tag = ({
 }: TagProps & HTMLAttributes<HTMLDivElement>) => (
   <div
     className={classNames(
-      'w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
+      'mt-3 w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
       {
         'border-vega-yellow-500  text-vega-yellow-500': color === 'yellow',
         'border-vega-green-500  text-vega-green-500': color === 'green',

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

@@ -4,9 +4,7 @@ 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 } from '@vegaprotocol/ui-toolkit';
-import { DApp, TOKEN_PROPOSALS, useLinks } from '@vegaprotocol/environment';
+import type { ComponentProps } from 'react';
 
 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
   <div
@@ -40,63 +38,51 @@ const StakingTier = ({
       className={classNames(
         'overflow-hidden',
         'border rounded-md w-full',
-        'flex flex-row',
-        GRADIENT,
         BORDER_COLOR
       )}
     >
-      <div aria-hidden className="max-w-[120px]">
+      <div aria-hidden>
         {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"
+            width={768}
+            height={400}
+            className="w-full"
           />
         )}
       </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">
+      <div className={classNames('p-3', GRADIENT)}>
+        <h3 className="mb-3 text-xl">{label}</h3>
+        <p className="text-base text-vega-clight-100 dark:text-vega-cdark-100">
           Stake a minimum of {minimumStakedTokens} $VEGA tokens
         </p>
+        <Tag color={color[tier]}>
+          Reward multiplier {referralRewardMultiplier}x
+        </Tag>
       </div>
     </div>
   );
 };
 
 export const TiersContainer = () => {
-  const { benefitTiers, stakingTiers, details, loading, error } =
-    useReferralProgram();
+  const { benefitTiers, stakingTiers, details, loading } = useReferralProgram();
 
   const ends = details?.endOfProgramTimestamp
     ? getDateTimeFormat().format(new Date(details.endOfProgramTimestamp))
     : undefined;
 
-  const governanceLink = useLinks(DApp.Governance);
-
-  if ((!loading && !details) || error) {
-    return (
-      <div className="text-base px-5 py-10 text-center">
-        We&apos;re sorry but we don&apos;t have an active referral programme
-        currently running. You can propose a new programme{' '}
-        <ExternalLink href={governanceLink(TOKEN_PROPOSALS)}>here</ExternalLink>
-        .
-      </div>
-    );
-  }
-
   return (
     <>
-      {/* Benefit tiers */}
-      <div className="flex flex-col items-baseline justify-between mt-10 mb-5">
+      <div className="flex flex-row items-baseline justify-between mt-10 mb-5">
         <h2 className="text-2xl">Referral tiers</h2>
         {ends && (
-          <span className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
-            Program ends: {ends}
+          <span className="text-base">
+            <span className="text-vega-clight-200 dark:text-vega-cdark-200">
+              Program ends:
+            </span>{' '}
+            {ends}
           </span>
         )}
       </div>
@@ -104,24 +90,14 @@ export const TiersContainer = () => {
         {loading || !benefitTiers || benefitTiers.length === 0 ? (
           <Loading variant="large" />
         ) : (
-          <TiersTable
-            data={benefitTiers.map((bt) => ({
-              ...bt,
-              tierElement: (
-                <div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
-                  {bt.tier}
-                </div>
-              ),
-            }))}
-          />
+          <TiersTable data={benefitTiers} />
         )}
       </div>
 
-      {/* Staking tiers */}
       <div className="flex flex-row items-baseline justify-between mb-5">
         <h2 className="text-2xl">Staking multipliers</h2>
       </div>
-      <div className="mb-20 flex flex-col justify-items-stretch lg:flex-row gap-5">
+      <div className="flex flex-col mb-20 justify-items-stretch md:flex-row gap-5">
         {loading || !stakingTiers || stakingTiers.length === 0 ? (
           <>
             <Loading variant="large" />
@@ -161,7 +137,6 @@ const TiersTable = ({
 }: {
   data: Array<{
     tier: number;
-    tierElement: ReactNode;
     commission: string;
     discount: string;
     volume: string;
@@ -170,7 +145,7 @@ const TiersTable = ({
   return (
     <Table
       columns={[
-        { name: 'tierElement', displayName: 'Tier' },
+        { name: 'tier', displayName: 'Tier' },
         {
           name: 'commission',
           displayName: 'Referrer commission',
@@ -178,7 +153,6 @@ const TiersTable = ({
         },
         { name: 'discount', displayName: 'Referrer trading discount' },
         { name: 'volume', displayName: 'Min. trading volume' },
-        { name: 'epochs', displayName: 'Min. epochs' },
       ]}
       data={data.map((d) => ({
         ...d,

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

@@ -1,92 +1,39 @@
-import {
-  CopyWithTooltip,
-  Tooltip,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import type { HTMLAttributes, ReactNode } from 'react';
-import { Button } from './buttons';
+import type { HTMLAttributes } from 'react';
+import { BORDER_COLOR, GRADIENT } from './constants';
+
+type TileProps = {
+  variant?: 'rainbow' | 'default';
+};
 
 export const Tile = ({
+  variant = 'default',
   className,
   children,
-}: HTMLAttributes<HTMLDivElement>) => {
+}: TileProps & HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
       className={classNames(
-        'rounded-lg overflow-hidden relative',
-        'bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white',
-        'p-6',
-        className
+        {
+          'bg-rainbow p-[0.125rem]': variant === 'rainbow',
+          [`border-2 ${BORDER_COLOR} p-0`]: variant === 'default',
+        },
+        'rounded-lg overflow-hidden relative'
       )}
     >
-      {children}
+      <div
+        className={classNames(
+          {
+            'bg-white dark:bg-vega-cdark-900 text-black dark:text-white rounded-[0.35rem] overflow-hidden':
+              variant === 'rainbow',
+          },
+          'p-6',
+          GRADIENT,
+          className
+        )}
+      >
+        {children}
+      </div>
     </div>
   );
 };
-
-type StatTileProps = {
-  title: string;
-  description?: string;
-  children?: ReactNode;
-};
-export const StatTile = ({ title, description, children }: StatTileProps) => {
-  return (
-    <Tile>
-      <h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
-        {title}
-      </h3>
-      <div className="text-5xl text-left">{children}</div>
-      {description && (
-        <div className="text-sm text-left text-vega-clight-100 dark:text-vega-cdark-100">
-          {description}
-        </div>
-      )}
-    </Tile>
-  );
-};
-
-const FADE_OUT_STYLE = classNames(
-  'after:w-5 after:h-full after:absolute after:top-0 after:right-0',
-  'after:bg-gradient-to-l after:from-vega-clight-800 after:dark:from-vega-cdark-800 after:to-transparent'
-);
-
-export const CodeTile = ({
-  code,
-  className,
-}: {
-  code: string;
-  className?: string;
-}) => {
-  return (
-    <StatTile title="Your referral code">
-      <div className="flex gap-2 items-center justify-between">
-        <Tooltip
-          description={
-            <div className="break-all">
-              <span className="text-xl bg-rainbow bg-clip-text text-transparent">
-                {code}
-              </span>
-            </div>
-          }
-        >
-          <div
-            className={classNames(
-              'relative bg-rainbow bg-clip-text text-transparent text-5xl overflow-hidden',
-              FADE_OUT_STYLE
-            )}
-          >
-            {code}
-          </div>
-        </Tooltip>
-        <CopyWithTooltip text={code}>
-          <Button className="text-sm no-underline !py-0 !px-0 h-fit !bg-transparent">
-            <span className="sr-only">Copy</span>
-            <VegaIcon size={24} name={VegaIconNames.COPY} />
-          </Button>
-        </CopyWithTooltip>
-      </div>
-    </StatTile>
-  );
-};

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

@@ -9,36 +9,10 @@ import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-
-const calculateStartDate = (range: string): string | undefined => {
-  const now = new Date();
-  switch (range) {
-    case DateRange.RANGE_1D:
-      return new Date(now.setDate(now.getDate() - 1)).toISOString();
-    case DateRange.RANGE_7D:
-      return new Date(now.setDate(now.getDate() - 7)).toISOString();
-    case DateRange.RANGE_1M:
-      return new Date(now.setMonth(now.getMonth() - 1)).toISOString();
-    case DateRange.RANGE_3M:
-      return new Date(now.setMonth(now.getMonth() - 3)).toISOString();
-    case DateRange.RANGE_1Y:
-      return new Date(now.setFullYear(now.getFullYear() - 1)).toISOString();
-    case DateRange.RANGE_YTD:
-      return new Date(now.setMonth(0)).toISOString();
-    default:
-      return undefined;
-  }
-};
-
-const DateRange = {
-  RANGE_1D: '1D',
-  RANGE_7D: '7D',
-  RANGE_1M: '1M',
-  RANGE_3M: '3M',
-  RANGE_1Y: '1Y',
-  RANGE_YTD: 'YTD',
-  RANGE_ALL: 'All',
-};
+import {
+  DateRange,
+  calculateStartDate,
+} from '../../client-pages/portfolio/account-history-container';
 
 export const FundingContainer = ({ marketId }: { marketId: string }) => {
   const { theme } = useThemeSwitcher();

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -18,7 +18,7 @@ import BigNumber from 'bignumber.js';
 import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 import {
-  addDecimalsFormatNumberQuantum,
+  addDecimalsFormatNumber,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -30,14 +30,12 @@ interface Props {
   marketId?: string;
   noUpdate?: boolean;
   assetDecimals: number;
-  quantum: string;
 }
 
 export const MarketLiquiditySupplied = ({
   marketId,
   assetDecimals,
   noUpdate = false,
-  quantum,
 }: Props) => {
   const [market, setMarket] = useState<MarketData>();
   const { params } = useNetworkParams([
@@ -81,12 +79,11 @@ export const MarketLiquiditySupplied = ({
   });
 
   const supplied = market?.suppliedStake
-    ? addDecimalsFormatNumberQuantum(
+    ? addDecimalsFormatNumber(
         new BigNumber(market?.suppliedStake)
           .multipliedBy(stakeToCcyVolume || 1)
           .toString(),
-        assetDecimals,
-        quantum
+        assetDecimals
       )
     : '-';
 
@@ -111,10 +108,9 @@ export const MarketLiquiditySupplied = ({
             <span>{t('Supplied stake')}</span>
             <span>
               {market?.suppliedStake
-                ? addDecimalsFormatNumberQuantum(
-                    market?.suppliedStake,
-                    assetDecimals,
-                    quantum
+                ? addDecimalsFormatNumber(
+                    new BigNumber(market?.suppliedStake).toString(),
+                    assetDecimals
                   )
                 : '-'}
             </span>
@@ -123,10 +119,9 @@ export const MarketLiquiditySupplied = ({
             <span>{t('Target stake')}</span>
             <span>
               {market?.targetStake
-                ? addDecimalsFormatNumberQuantum(
-                    market?.targetStake,
-                    assetDecimals,
-                    quantum
+                ? addDecimalsFormatNumber(
+                    new BigNumber(market?.targetStake).toString(),
+                    assetDecimals
                   )
                 : '-'}
             </span>

apps/trading/components/market-banner/market-successor-banner.spec.tsx

@@ -21,7 +21,6 @@ const market = {
 } as unknown as Market;
 
 let mockDataSuccessorMarket: PartialDeep<Market> | null = null;
-let mockDataMarketState: Market['state'] | null = null;
 jest.mock('@vegaprotocol/data-provider', () => ({
   ...jest.requireActual('@vegaprotocol/data-provider'),
   useDataProvider: jest.fn().mockImplementation((args) => {
@@ -44,12 +43,6 @@ jest.mock('@vegaprotocol/utils', () => ({
 let mockCandles = {};
 jest.mock('@vegaprotocol/markets', () => ({
   ...jest.requireActual('@vegaprotocol/markets'),
-  useMarketState: (marketId: string) =>
-    marketId
-      ? {
-          data: mockDataMarketState,
-        }
-      : { data: undefined },
   useSuccessorMarket: (marketId: string) =>
     marketId
       ? {
@@ -88,6 +81,30 @@ describe('MarketSuccessorBanner', () => {
       });
       expect(container).toBeEmptyDOMElement();
     });
+
+    it('successor market not in continuous mode', () => {
+      mockDataSuccessorMarket = {
+        ...mockDataSuccessorMarket,
+        tradingMode: Types.MarketTradingMode.TRADING_MODE_NO_TRADING,
+      };
+      const { container } = render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(container).toBeEmptyDOMElement();
+      expect(allUtils.getMarketExpiryDate).toHaveBeenCalled();
+    });
+
+    it('successor market is not active', () => {
+      mockDataSuccessorMarket = {
+        ...mockDataSuccessorMarket,
+        state: Types.MarketState.STATE_PENDING,
+      };
+      const { container } = render(<MarketSuccessorBanner market={market} />, {
+        wrapper: MockedProvider,
+      });
+      expect(container).toBeEmptyDOMElement();
+      expect(allUtils.getMarketExpiryDate).toHaveBeenCalled();
+    });
   });
 
   describe('should be displayed', () => {
@@ -103,17 +120,6 @@ describe('MarketSuccessorBanner', () => {
       ).toHaveAttribute('href', '/#/markets/successorMarketID');
     });
 
-    it('no successor market data, market settled', () => {
-      mockDataSuccessorMarket = null;
-      mockDataMarketState = Types.MarketState.STATE_SETTLED;
-      render(<MarketSuccessorBanner market={market} />, {
-        wrapper: MockedProvider,
-      });
-      expect(
-        screen.getByText('This market has been settled')
-      ).toBeInTheDocument();
-    });
-
     it('should display optionally successor volume', () => {
       mockDataSuccessorMarket = {
         ...mockDataSuccessorMarket,
@@ -131,9 +137,7 @@ describe('MarketSuccessorBanner', () => {
       render(<MarketSuccessorBanner market={market} />, {
         wrapper: MockedProvider,
       });
-      expect(
-        screen.getByText('has a 24h trading volume of 101.367')
-      ).toBeInTheDocument();
+      expect(screen.getByText('has 101.367 24h vol.')).toBeInTheDocument();
     });
 
     it('should display optionally duration', () => {

apps/trading/components/market-banner/market-successor-banner.tsx

@@ -4,7 +4,6 @@ import type { Market } from '@vegaprotocol/markets';
 import {
   calcCandleVolume,
   useCandles,
-  useMarketState,
   useSuccessorMarket,
 } from '@vegaprotocol/markets';
 import {
@@ -30,9 +29,7 @@ export const MarketSuccessorBanner = ({
 }: {
   market: Market | null;
 }) => {
-  const { data: marketState } = useMarketState(market?.id);
-  const isSettled = marketState === Types.MarketState.STATE_SETTLED;
-  const { data: successorData, loading } = useSuccessorMarket(market?.id);
+  const { data: successorData } = useSuccessorMarket(market?.id);
 
   const [visible, setVisible] = useState(true);
 
@@ -48,6 +45,11 @@ export const MarketSuccessorBanner = ({
       ? intervalToDuration({ start: new Date(), end: expiry })
       : null;
 
+  const isInContinuesMode =
+    successorData?.state === Types.MarketState.STATE_ACTIVE &&
+    successorData?.tradingMode ===
+      Types.MarketTradingMode.TRADING_MODE_CONTINUOUS;
+
   const { oneDayCandles } = useCandles({
     marketId: successorData?.id,
   });
@@ -64,7 +66,7 @@ export const MarketSuccessorBanner = ({
         )
       : null;
 
-  if (!loading && (isSettled || successorData) && visible) {
+  if (isInContinuesMode && visible) {
     return (
       <NotificationBanner
         intent={Intent.Primary}
@@ -72,47 +74,34 @@ export const MarketSuccessorBanner = ({
           setVisible(false);
         }}
       >
-        <div className="uppercase">
-          {successorData
-            ? t('This market has been succeeded')
-            : t('This market has been settled')}
+        <div className="uppercase mb-1">
+          {t('This market has been succeeded')}
+        </div>
+        <div>
+          {duration && (
+            <span>
+              {t('This market expires in %s.', [
+                formatDuration(duration, {
+                  format: [
+                    'years',
+                    'months',
+                    'weeks',
+                    'days',
+                    'hours',
+                    'minutes',
+                  ],
+                }),
+              ])}
+            </span>
+          )}{' '}
+          {t('The successor market')}{' '}
+          <ExternalLink href={`/#/markets/${successorData?.id}`}>
+            {successorData?.tradableInstrument.instrument.name}
+          </ExternalLink>
+          {successorVolume && (
+            <span> {t('has %s 24h vol.', [successorVolume])}</span>
+          )}
         </div>
-        {(duration || successorData) && (
-          <div className="mt-1">
-            {duration && (
-              <span>
-                {t('This market expires in %s.', [
-                  formatDuration(duration, {
-                    format: [
-                      'years',
-                      'months',
-                      'weeks',
-                      'days',
-                      'hours',
-                      'minutes',
-                    ],
-                  }),
-                ])}
-              </span>
-            )}
-            {successorData && (
-              <>
-                {' '}
-                {t('The successor market')}
-                {!successorVolume ? ' is ' : ' '}
-                <ExternalLink href={`/#/markets/${successorData?.id}`}>
-                  {successorData?.tradableInstrument.instrument.name}
-                </ExternalLink>
-                {successorVolume && (
-                  <span>
-                    {' '}
-                    {t('has a 24h trading volume of %s', [successorVolume])}
-                  </span>
-                )}
-              </>
-            )}
-          </div>
-        )}
       </NotificationBanner>
     );
   }

apps/trading/components/market-banner/market-successor-proposal-banner.tsx

@@ -1,9 +1,6 @@
 import { Fragment, useState } from 'react';
-import {
-  marketViewProposalsDataProvider,
-  type NewMarketSuccessorFieldsFragment,
-} from '@vegaprotocol/proposals';
-
+import type { NewMarketSuccessorFieldsFragment } from '@vegaprotocol/proposals';
+import { useMarketViewProposals } from '@vegaprotocol/proposals';
 import {
   ExternalLink,
   Intent,
@@ -12,20 +9,17 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import * as Types from '@vegaprotocol/types';
-import { useDataProvider } from '@vegaprotocol/data-provider';
 
 export const MarketSuccessorProposalBanner = ({
   marketId,
 }: {
   marketId?: string;
 }) => {
-  const { data: proposals } = useDataProvider({
-    dataProvider: marketViewProposalsDataProvider,
+  const proposals = useMarketViewProposals({
     skip: !marketId,
-    variables: {
-      inState: Types.ProposalState.STATE_OPEN,
-      proposalType: Types.ProposalType.TYPE_NEW_MARKET,
-    },
+    inState: Types.ProposalState.STATE_OPEN,
+    proposalType: Types.ProposalType.TYPE_NEW_MARKET,
+    typename: 'NewMarket',
   });
 
   const successors =

apps/trading/components/market-banner/market-termination-banner.spec.tsx

@@ -20,13 +20,10 @@ const marketMock = {
   },
 } as Market;
 
-const passedProposalMock: MockedResponse<MarketViewProposalsQuery> = {
+const proposalMock: MockedResponse<MarketViewProposalsQuery> = {
   request: {
     query: MarketViewProposalsDocument,
-    variables: {
-      inState: Types.ProposalState.STATE_PASSED,
-      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
-    },
+    variables: { inState: Types.ProposalState.STATE_PASSED },
   },
   result: {
     data: {
@@ -34,7 +31,7 @@ const passedProposalMock: MockedResponse<MarketViewProposalsQuery> = {
         edges: [
           {
             node: {
-              id: '1',
+              id: 'first-id',
               state: Types.ProposalState.STATE_PASSED,
               terms: {
                 closingDatetime: '2023-09-27T11:48:18Z',
@@ -59,7 +56,7 @@ const passedProposalMock: MockedResponse<MarketViewProposalsQuery> = {
           },
           {
             node: {
-              id: '2',
+              id: 'second-id',
               state: Types.ProposalState.STATE_PASSED,
               terms: {
                 closingDatetime: '2023-09-27T11:48:18Z',
@@ -87,99 +84,7 @@ const passedProposalMock: MockedResponse<MarketViewProposalsQuery> = {
     },
   },
 };
-const openProposalMock: MockedResponse<MarketViewProposalsQuery> = {
-  request: {
-    query: MarketViewProposalsDocument,
-    variables: {
-      inState: Types.ProposalState.STATE_OPEN,
-      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
-    },
-  },
-  result: {
-    data: {
-      proposalsConnection: {
-        edges: [
-          {
-            node: {
-              id: '3',
-              state: Types.ProposalState.STATE_OPEN,
-              terms: {
-                closingDatetime: '2023-09-27T11:48:18Z',
-                enactmentDatetime: '2023-10-01T11:48:18',
-                change: {
-                  __typename: 'UpdateMarketState',
-                  updateType:
-                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
-                  price: '',
-                  market: {
-                    id: 'market-3',
-                    tradableInstrument: {
-                      instrument: {
-                        name: 'Market three name',
-                        code: 'Market three',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-          {
-            node: {
-              id: '4',
-              state: Types.ProposalState.STATE_OPEN,
-              terms: {
-                closingDatetime: '2023-09-27T11:48:18Z',
-                enactmentDatetime: '2023-10-11T11:48:18',
-                change: {
-                  __typename: 'UpdateMarketState',
-                  updateType:
-                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
-                  price: '',
-                  market: {
-                    id: 'market-3',
-                    tradableInstrument: {
-                      instrument: {
-                        name: 'Market three name',
-                        code: 'Market three',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-          {
-            node: {
-              id: '5',
-              state: Types.ProposalState.STATE_OPEN,
-              terms: {
-                closingDatetime: '2023-09-27T11:48:18Z',
-                enactmentDatetime: '2023-10-01T11:48:18',
-                change: {
-                  __typename: 'UpdateMarketState',
-                  updateType:
-                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
-                  price: '',
-                  market: {
-                    id: 'market-4',
-                    tradableInstrument: {
-                      instrument: {
-                        name: 'Market four name',
-                        code: 'Market four',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        ],
-      },
-    },
-  },
-};
-const mocks: MockedResponse[] = [passedProposalMock, openProposalMock];
+const mocks: MockedResponse[] = [proposalMock];
 
 describe('MarketTerminationBanner', () => {
   beforeAll(() => {
@@ -203,28 +108,4 @@ describe('MarketTerminationBanner', () => {
       screen.getByTestId('termination-warning-banner-market-1')
     ).toBeInTheDocument();
   });
-
-  it('should render link to proposals', async () => {
-    const { container } = render(
-      <MockedProvider mocks={mocks}>
-        <MarketTerminationBanner market={{ ...marketMock, id: 'market-3' }} />
-      </MockedProvider>
-    );
-    await waitFor(() => {
-      expect(container).not.toBeEmptyDOMElement();
-    });
-    expect(screen.getByText('View proposals')).toBeInTheDocument();
-  });
-
-  it('should render link to proposal', async () => {
-    const { container } = render(
-      <MockedProvider mocks={mocks}>
-        <MarketTerminationBanner market={{ ...marketMock, id: 'market-4' }} />
-      </MockedProvider>
-    );
-    await waitFor(() => {
-      expect(container).not.toBeEmptyDOMElement();
-    });
-    expect(screen.getByText('View proposal')).toBeInTheDocument();
-  });
 });

apps/trading/components/market-banner/market-termination-banner.tsx

@@ -1,67 +1,12 @@
-import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { format, formatDuration, intervalToDuration } from 'date-fns';
-import {
-  ExternalLink,
-  Intent,
-  NotificationBanner,
-} from '@vegaprotocol/ui-toolkit';
-import type { MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { marketViewProposalsDataProvider } from '@vegaprotocol/proposals';
+import { Intent, NotificationBanner } from '@vegaprotocol/ui-toolkit';
+import { useMarketViewProposals } from '@vegaprotocol/proposals';
 import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
 import type { Market } from '@vegaprotocol/markets';
 import { getQuoteName } from '@vegaprotocol/markets';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import sortBy from 'lodash/sortBy';
-import {
-  DApp,
-  TOKEN_PROPOSAL,
-  TOKEN_PROPOSALS,
-  useLinks,
-} from '@vegaprotocol/environment';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-
-const filterProposals = (
-  data: MarketViewProposalFieldsFragment[] | null,
-  marketId: string,
-  now: number
-) =>
-  sortBy(
-    (data || []).filter(
-      (item) =>
-        item.terms.change.__typename === 'UpdateMarketState' &&
-        item.terms.change.market.id === marketId &&
-        item.terms.change.updateType ===
-          Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE &&
-        item.terms.enactmentDatetime &&
-        new Date(item.terms.enactmentDatetime).getTime() > now
-    ),
-    (item) => item.terms.enactmentDatetime
-  );
-
-const getMessageVariables = (proposal: MarketViewProposalFieldsFragment) => {
-  const enactmentDatetime = new Date(proposal.terms.enactmentDatetime);
-  const date = format(enactmentDatetime, 'dd MMMM');
-  const duration = formatDuration(
-    intervalToDuration({
-      start: new Date(),
-      end: enactmentDatetime,
-    }),
-    {
-      format: ['days', 'hours'],
-    }
-  );
-  const price =
-    proposal.terms.change.__typename === 'UpdateMarketState'
-      ? proposal.terms.change.price
-      : '';
-  return {
-    date,
-    duration,
-    price,
-  };
-};
 
 export const MarketTerminationBanner = ({
   market,
@@ -70,55 +15,57 @@ export const MarketTerminationBanner = ({
 }) => {
   const [visible, setVisible] = useState(true);
   const skip = !market || !visible;
-  const { data: passedProposalsData } = useDataProvider({
-    dataProvider: marketViewProposalsDataProvider,
+  const proposalsData = useMarketViewProposals({
     skip,
-    variables: {
-      inState: Types.ProposalState.STATE_PASSED,
-      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
-    },
+    inState: Types.ProposalState.STATE_PASSED,
+    typename: 'UpdateMarketState',
   });
 
-  const { data: openProposalsData } = useDataProvider({
-    dataProvider: marketViewProposalsDataProvider,
-    skip,
-    variables: {
-      inState: Types.ProposalState.STATE_OPEN,
-      proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
-    },
-  });
-
-  const governanceLink = useLinks(DApp.Governance);
-
   if (!market) return null;
-  const now = Date.now();
-  const passedProposals = filterProposals(passedProposalsData, market.id, now);
-  const openProposals = filterProposals(openProposalsData, market.id, now);
+  const marketFound = (proposalsData || []).find(
+    (item) =>
+      item.terms.change.__typename === 'UpdateMarketState' &&
+      item.terms.change.market.id === market.id &&
+      item.terms.change.updateType ===
+        Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE &&
+      item.state === Types.ProposalState.STATE_PASSED // subscription doesn't have state parameter
+  );
 
-  const name = market.tradableInstrument.instrument.code;
-  if (!passedProposals.length && !openProposals.length) {
-    return null;
-  }
+  const enactmentDatetime = new Date(marketFound?.terms.enactmentDatetime);
+  const name =
+    marketFound?.terms.change.__typename === 'UpdateMarketState'
+      ? marketFound.terms.change.market.tradableInstrument.instrument.code
+      : '';
 
-  const assetSymbol = getQuoteName(market);
-  const proposalLink =
-    !passedProposals.length && openProposals[0]?.id
-      ? governanceLink(TOKEN_PROPOSAL.replace(':id', openProposals[0]?.id))
-      : undefined;
-  const proposalsLink =
-    openProposals.length > 1 ? governanceLink(TOKEN_PROPOSALS) : undefined;
-  let content: ReactNode;
-  if (passedProposals.length) {
-    const { date, duration, price } = getMessageVariables(passedProposals[0]);
-    content = (
-      <>
+  if (name && enactmentDatetime.getTime() > Date.now()) {
+    const dayMonthDate = format(enactmentDatetime, 'dd MMMM');
+    const duration = intervalToDuration({
+      start: new Date(),
+      end: enactmentDatetime,
+    });
+    const formattedDuration = formatDuration(duration, {
+      format: ['days', 'hours'],
+    });
+    const price =
+      marketFound?.terms.change.__typename === 'UpdateMarketState'
+        ? marketFound.terms.change.price
+        : '';
+    const assetSymbol = getQuoteName(market);
+    return (
+      <NotificationBanner
+        intent={Intent.Warning}
+        onClose={() => {
+          setVisible(false);
+        }}
+        data-testid={`termination-warning-banner-${market.id}`}
+      >
         <div className="uppercase mb-1">
-          {t('Trading on Market %s will stop on %s', [name, date])}
+          {t('Trading on Market %s will stop on %s', [name, dayMonthDate])}
         </div>
         <div>
           {t(
             'You will no longer be able to hold a position on this market when it closes in %s.',
-            [duration]
+            [formattedDuration]
           )}{' '}
           {price &&
             assetSymbol &&
@@ -127,57 +74,8 @@ export const MarketTerminationBanner = ({
               assetSymbol,
             ])}
         </div>
-      </>
-    );
-  } else if (openProposals.length > 1) {
-    content = (
-      <>
-        <div className="uppercase mb-1">
-          {t(
-            'Trading on Market %s may stop. There are open proposals to close this market',
-            [name]
-          )}
-        </div>
-        <div>
-          <ExternalLink href={proposalsLink}>
-            {t('View proposals')}
-          </ExternalLink>
-        </div>
-      </>
-    );
-  } else {
-    const { date, price } = getMessageVariables(openProposals[0]);
-    content = (
-      <>
-        <div className="uppercase mb-1">
-          {t(
-            'Trading on Market %s may stop on %s. There is open proposal to close this market.',
-            [name, date]
-          )}
-        </div>
-        <div>
-          {price &&
-            assetSymbol &&
-            t('Proposed final price is %s %s.', [
-              addDecimalsFormatNumber(price, market.decimalPlaces),
-              assetSymbol,
-            ])}
-        </div>
-        <div>
-          <ExternalLink href={proposalLink}>{t('View proposal')}</ExternalLink>
-        </div>
-      </>
+      </NotificationBanner>
     );
   }
-  return (
-    <NotificationBanner
-      intent={openProposals.length ? Intent.Warning : Intent.Info}
-      onClose={() => {
-        setVisible(false);
-      }}
-      data-testid={`termination-warning-banner-${market.id}`}
-    >
-      {content}
-    </NotificationBanner>
-  );
+  return null;
 };

apps/trading/components/market-selector/market-selector-item.tsx

@@ -56,7 +56,6 @@ const MarketData = ({
     variables: {
       marketId: market.id,
     },
-    fetchPolicy: 'no-cache',
   });
 
   const marketData = data?.marketsData[0];
@@ -71,8 +70,6 @@ const MarketData = ({
 
   const marketTradingMode = marketData
     ? marketData.marketTradingMode
-    : market.data
-    ? market.data.marketTradingMode
     : market.tradingMode;
 
   const mode = [
@@ -98,7 +95,7 @@ const MarketData = ({
     <>
       <div className="w-2/5" role="gridcell">
         <h3 className="flex items-baseline">
-          <span className="overflow-hidden text-sm lg:text-base text-ellipsis whitespace-nowrap">
+          <span className="text-sm lg:text-base text-ellipsis whitespace-nowrap overflow-hidden">
             {market.tradableInstrument.instrument.code}
           </span>
           {allProducts && productType && (

apps/trading/components/market-selector/market-selector.spec.tsx

@@ -2,10 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MarketSelector } from './market-selector';
 import { useMarketList } from '@vegaprotocol/markets';
-import {
-  createMarketFragment,
-  createMarketsDataFragment,
-} from '@vegaprotocol/mock';
+import { createMarketFragment } from '@vegaprotocol/mock';
 import { MarketState } from '@vegaprotocol/types';
 import { MemoryRouter } from 'react-router-dom';
 import type { ReactNode } from 'react';
@@ -39,10 +36,6 @@ describe('MarketSelector', () => {
   const markets = [
     createMarketFragment({
       id: 'market-0',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_ACTIVE,
-      }),
       tradableInstrument: {
         instrument: {
           code: 'a',
@@ -63,10 +56,7 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-1',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_SUSPENDED,
-      }),
+      state: MarketState.STATE_SUSPENDED,
       tradableInstrument: {
         instrument: {
           code: 'b',
@@ -87,10 +77,7 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-2',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_CLOSED,
-      }),
+      state: MarketState.STATE_CLOSED,
       tradableInstrument: {
         instrument: {
           product: {
@@ -104,10 +91,7 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-3',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_ACTIVE,
-      }),
+      state: MarketState.STATE_ACTIVE,
       tradableInstrument: {
         instrument: {
           code: 'c',
@@ -128,10 +112,6 @@ describe('MarketSelector', () => {
     }),
     createMarketFragment({
       id: 'market-4',
-      // @ts-ignore candles get joined outside this type
-      data: createMarketsDataFragment({
-        marketState: MarketState.STATE_ACTIVE,
-      }),
       tradableInstrument: {
         instrument: {
           code: 'cd',
@@ -152,10 +132,7 @@ describe('MarketSelector', () => {
     }),
   ];
 
-  const activeMarkets = markets.filter((m) =>
-    // @ts-ignore candles get joined outside this type
-    isMarketActive(m.data.marketState)
-  );
+  const activeMarkets = markets.filter((m) => isMarketActive(m.state));
   mockUseMarketList.mockReturnValue({
     data: markets,
     loading: false,

apps/trading/components/market-selector/use-market-selector-list.spec.tsx

@@ -4,10 +4,7 @@ import { useMarketSelectorList } from './use-market-selector-list';
 import { isMarketActive } from '../../lib/utils';
 import { Product } from './product-selector';
 import { Sort } from './sort-dropdown';
-import {
-  createMarketFragment,
-  createMarketsDataFragment,
-} from '@vegaprotocol/mock';
+import { createMarketFragment } from '@vegaprotocol/mock';
 import { MarketState } from '@vegaprotocol/types';
 import { useMarketList } from '@vegaprotocol/markets';
 import type { Filter } from './market-selector';
@@ -34,40 +31,22 @@ describe('useMarketSelectorList', () => {
 
   it('returns all markets active and suspended markets', () => {
     const markets = [
-      createMarketFragment({
-        id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
-      }),
+      createMarketFragment({ id: 'market-0' }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_SUSPENDED,
-        }),
+        state: MarketState.STATE_SUSPENDED,
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_CLOSED,
-        }),
+        state: MarketState.STATE_CLOSED,
       }),
       createMarketFragment({
         id: 'market-3',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_CLOSED,
-        }),
+        state: MarketState.STATE_CLOSED,
       }),
       createMarketFragment({
         id: 'market-4',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_PENDING,
-        }),
+        state: MarketState.STATE_PENDING,
       }),
     ];
     mockUseMarketList.mockReturnValue({
@@ -77,8 +56,7 @@ describe('useMarketSelectorList', () => {
     });
     const { result } = setup();
     const expectedFilteredMarkets = markets.filter((m) =>
-      // @ts-ignore candles get joined outside this type
-      isMarketActive(m.data.marketState)
+      isMarketActive(m.state)
     );
     expect(result.current).toEqual({
       data: markets,
@@ -92,10 +70,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -116,10 +90,6 @@ describe('useMarketSelectorList', () => {
       // }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -165,10 +135,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -182,10 +148,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -199,10 +161,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -216,10 +174,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-3',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             product: {
@@ -284,10 +238,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'abc',
@@ -297,10 +247,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'def',
@@ -310,10 +256,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'defg',
@@ -323,10 +265,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-3',
-        // @ts-ignore candles get joined outside this type
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         tradableInstrument: {
           instrument: {
             code: 'ggg',
@@ -395,11 +333,11 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
+        state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
+        data: {
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -411,10 +349,9 @@ describe('useMarketSelectorList', () => {
         id: 'market-1',
         state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
+        data: {
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -426,10 +363,9 @@ describe('useMarketSelectorList', () => {
         id: 'market-2',
         state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
+        data: {
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -441,10 +377,9 @@ describe('useMarketSelectorList', () => {
         id: 'market-3',
         state: MarketState.STATE_ACTIVE,
         // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
+        data: {
           markPrice: '1',
-        }),
+        },
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -479,10 +414,6 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         // @ts-ignore actual fragment doesn't contain candles and is joined later
         candles: [
           {
@@ -495,10 +426,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         // @ts-ignore actual fragment doesn't contain candles and is joined later
         candles: [
           {
@@ -511,10 +438,6 @@ describe('useMarketSelectorList', () => {
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         // @ts-ignore actual fragment doesn't contain candles and is joined later
         candles: [
           {
@@ -559,30 +482,18 @@ describe('useMarketSelectorList', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         marketTimestamps: {
           open: subDays(new Date(), 3).toISOString(),
         },
       }),
       createMarketFragment({
         id: 'market-1',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         marketTimestamps: {
           open: subDays(new Date(), 1).toISOString(),
         },
       }),
       createMarketFragment({
         id: 'market-2',
-        // @ts-ignore data not on fragment
-        data: createMarketsDataFragment({
-          marketState: MarketState.STATE_ACTIVE,
-        }),
         marketTimestamps: {
           open: subDays(new Date(), 2).toISOString(),
         },

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -22,12 +22,8 @@ export const useMarketSelectorList = ({
   const markets = useMemo(() => {
     if (!data?.length) return [];
     const markets = data
-      // show only active markets, using m.data.marketState as this will be
-      // data that will get refreshed when calling reload
-      .filter((m) => {
-        if (!m.data) return false;
-        return isMarketActive(m.data.marketState);
-      })
+      // only active
+      .filter((m) => isMarketActive(m.state))
       // only selected product type
       .filter((m) => {
         if (

apps/trading/components/navbar/navbar.tsx

@@ -182,7 +182,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
         </NavbarItem>
         {FLAGS.REFERRALS && (
           <NavbarItem>
-            <NavbarLink end={false} to={Links.REFERRALS()} onClick={onClick}>
+            <NavbarLink to={Links.REFERRALS()} onClick={onClick}>
               {t('Referrals')}
             </NavbarLink>
           </NavbarItem>
@@ -255,18 +255,16 @@ const NavbarLink = ({
   children,
   to,
   onClick,
-  end = true,
 }: {
   children: ReactNode;
   to: string;
   onClick?: () => void;
-  end?: boolean;
 }) => {
   return (
     <N.Link asChild={true}>
       <NavLink
         to={to}
-        end={end}
+        end={true}
         className={classNames(
           'block lg:flex lg:h-full flex-col justify-center',
           'px-6 py-2 lg:p-0 text-lg lg:text-sm',

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

@@ -10,19 +10,6 @@ import type { DataGridStore } from '../../stores/datagrid-store-slice';
 import { OrderStatus } from '@vegaprotocol/types';
 import { Links } from '../../lib/links';
 
-const resolveNoRowsMessage = (filter?: Filter) => {
-  switch (filter) {
-    case Filter.Open:
-      return t('No open orders');
-    case Filter.Closed:
-      return t('No closed orders');
-    case Filter.Rejected:
-      return t('No rejected orders');
-    default:
-      return t('No orders');
-  }
-};
-
 export const FilterStatusValue = {
   [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
   [Filter.Closed]: [
@@ -56,7 +43,6 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   if (!pubKey) {
     return <Splash>{t('Please connect Vega wallet')}</Splash>;
   }
-  const noRowsMessage = resolveNoRowsMessage(filter);
 
   return (
     <OrderListManager
@@ -70,7 +56,6 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
       }
       isReadOnly={isReadOnly}
       gridProps={gridStoreCallbacks}
-      noRowsMessage={noRowsMessage}
     />
   );
 };

apps/trading/components/telemetry/telemetry.tsx

@@ -6,7 +6,7 @@ import { TelemetryApproval } from './telemetry-approval';
 import { t } from '@vegaprotocol/i18n';
 import { useOnboardingStore } from '../welcome-dialog/use-get-onboarding-step';
 
-const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_toast_id';
+const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
 
 export const Telemetry = () => {
   const onboardingDissmissed = useOnboardingStore((store) => store.dismissed);

apps/trading/pages/ssr-loader.tsx

@@ -1,8 +1,8 @@
-import { pseudoRandom } from '@vegaprotocol/ui-toolkit';
-
-const generate = pseudoRandom(1);
-
 export const SSRLoader = () => {
+  const randomDelay = () => {
+    return parseFloat((Math.random() * (4 - 1) + 1).toFixed(2));
+  };
+
   return (
     <div
       style={{
@@ -38,9 +38,10 @@ export const SSRLoader = () => {
                 width: 10,
                 height: 10,
                 animation: 'flickering 0.4s linear alternate infinite',
-                animationDelay: `-${generate()}s`,
+                animationDelay: `-${randomDelay()}s`,
                 animationDirection: i % 2 === 0 ? 'reverse' : 'alternate',
                 background: 'black',
+                opacity: Math.random() > 0.5 ? 1 : 0,
               }}
             />
           );

apps/trading/pages/transaction-handlers.tsx

@@ -7,7 +7,6 @@ import {
   useEthTransactionUpdater,
   useEthWithdrawApprovalsManager,
 } from '@vegaprotocol/web3';
-import { useLedgerDownloadManager } from '@vegaprotocol/ledger';
 
 export const TransactionHandlers = () => {
   useVegaTransactionManager();
@@ -15,6 +14,5 @@ export const TransactionHandlers = () => {
   useEthTransactionManager();
   useEthTransactionUpdater();
   useEthWithdrawApprovalsManager();
-  useLedgerDownloadManager();
   return null;
 };

apps/trading/tailwind.config.js

@@ -24,8 +24,8 @@ module.exports = {
         ...theme.backgroundImage,
         rainbow:
           'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-        'rainbow-180':
-          'linear-gradient(283.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+        'rainbow-shifted':
+          'linear-gradient(103.47deg, #0075FF 1.68%, #8028FF 47.49%, #FF077F 100%)',
         highlight:
           'linear-gradient(170deg, var(--tw-gradient-from), transparent var(--tw-gradient-to-position))',
       },
@@ -38,144 +38,10 @@ module.exports = {
           '75%': { transform: 'translateX(5px)' },
           '100%': { transform: 'translateX(0)' },
         },
-        'spin-rainbow-180': {
-          '0%': {
-            backgroundImage:
-              'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '10%': {
-            backgroundImage:
-              'linear-gradient(121.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '20%': {
-            backgroundImage:
-              'linear-gradient(139.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '30%': {
-            backgroundImage:
-              'linear-gradient(157.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '40%': {
-            backgroundImage:
-              'linear-gradient(175.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '50%': {
-            backgroundImage:
-              'linear-gradient(193.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '60%': {
-            backgroundImage:
-              'linear-gradient(211.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '70%': {
-            backgroundImage:
-              'linear-gradient(229.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '80%': {
-            backgroundImage:
-              'linear-gradient(247.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '90%': {
-            backgroundImage:
-              'linear-gradient(265.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '100%': {
-            backgroundImage:
-              'linear-gradient(283.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-        },
-        'spin-rainbow-360': {
-          '0%': {
-            backgroundImage:
-              'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '5%': {
-            backgroundImage:
-              'linear-gradient(121.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '10%': {
-            backgroundImage:
-              'linear-gradient(139.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '15%': {
-            backgroundImage:
-              'linear-gradient(157.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '20%': {
-            backgroundImage:
-              'linear-gradient(175.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '25%': {
-            backgroundImage:
-              'linear-gradient(193.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '30%': {
-            backgroundImage:
-              'linear-gradient(211.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '35%': {
-            backgroundImage:
-              'linear-gradient(229.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '40%': {
-            backgroundImage:
-              'linear-gradient(247.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '45%': {
-            backgroundImage:
-              'linear-gradient(265.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '50%': {
-            backgroundImage:
-              'linear-gradient(283.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '55%': {
-            backgroundImage:
-              'linear-gradient(301.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '60%': {
-            backgroundImage:
-              'linear-gradient(319.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '65%': {
-            backgroundImage:
-              'linear-gradient(337.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '70%': {
-            backgroundImage:
-              'linear-gradient(355.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '75%': {
-            backgroundImage:
-              'linear-gradient(13.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '80%': {
-            backgroundImage:
-              'linear-gradient(31.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '85%': {
-            backgroundImage:
-              'linear-gradient(49.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '90%': {
-            backgroundImage:
-              'linear-gradient(67.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '95%': {
-            backgroundImage:
-              'linear-gradient(85.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-          '100%': {
-            backgroundImage:
-              'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
-          },
-        },
       },
       animation: {
         ...theme.animation,
         shake: 'shake 200ms linear',
-        'spin-rainbow': 'spin-rainbow-180 500ms linear',
-        'rotate-rainbow': 'spin-rainbow-360 1000ms linear',
       },
     },
   },

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

@@ -88,9 +88,6 @@ describe('TransferForm', () => {
   });
 
   it('validates a manually entered address', async () => {
-    // 1003-TRAN-012
-    // 1003-TRAN-013
-    // 1003-TRAN-004
     render(<TransferForm {...props} />);
     submit();
     expect(await screen.findAllByText('Required')).toHaveLength(3);
@@ -119,11 +116,6 @@ describe('TransferForm', () => {
   });
 
   it('validates fields and submits', async () => {
-    // 1003-TRAN-002
-    // 1003-TRAN-003
-    // 1002-WITH-010
-    // 1003-TRAN-011
-    // 1003-TRAN-014
     render(<TransferForm {...props} />);
 
     // check current pubkey not shown

libs/assets/src/lib/asset-details-table.tsx

@@ -57,16 +57,7 @@ export const rows: Rows = [
     key: AssetDetail.ID,
     label: t('ID'),
     tooltip: '',
-    value: (asset) => (
-      <>
-        {truncateMiddle(asset.id)}{' '}
-        <CopyWithTooltip text={asset.id}>
-          <button title={t('Copy id to clipboard')}>
-            <VegaIcon size={14} name={VegaIconNames.COPY} />
-          </button>
-        </CopyWithTooltip>
-      </>
-    ),
+    value: (asset) => truncateMiddle(asset.id),
   },
   {
     key: AssetDetail.TYPE,

libs/candles-chart/src/lib/candles-chart.tsx

@@ -63,9 +63,7 @@ export const CandlesChartContainer = ({
                 overlays,
                 studies,
                 notEnoughDataText: (
-                  <span className="text-xs text-center">
-                    {t('No open orders')}
-                  </span>
+                  <span className="text-xs text-center">{t('No data')}</span>
                 ),
                 initialNumCandlesToDisplay: candlesCount,
                 studySize: STUDY_SIZE,

libs/datagrid/src/lib/cells/market-name-cell.tsx

@@ -14,17 +14,16 @@ export const MarketProductPill = ({
 }: {
   productType?: ProductType;
 }) => {
-  if (!productType) {
-    return null;
-  }
   return (
-    <Pill
-      size="xxs"
-      className="uppercase ml-0.5"
-      title={ProductTypeMapping[productType]}
-    >
-      {ProductTypeShortName[productType]}
-    </Pill>
+    productType && (
+      <Pill
+        size="xxs"
+        className="uppercase ml-0.5"
+        title={ProductTypeMapping[productType]}
+      >
+        {ProductTypeShortName[productType]}
+      </Pill>
+    )
   );
 };
 

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

@@ -37,7 +37,6 @@ import {
   AccordionChevron,
   AccordionPanel,
   Intent,
-  ExternalLink,
   Pill,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
@@ -386,21 +385,7 @@ export const DealTicketMarginDetails = ({
         value={liquidationPriceEstimateRange}
         formattedValue={liquidationPriceEstimate}
         symbol={quoteName}
-        labelDescription={
-          <>
-            <span>{LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}</span>{' '}
-            <span>
-              {t('For full details please see ')}
-              <ExternalLink
-                href={
-                  'https://github.com/vegaprotocol/specs/blob/master/non-protocol-specs/0012-NP-LIPE-liquidation-price-estimate.md'
-                }
-              >
-                {t('liquidation price estimate documentation.')}
-              </ExternalLink>
-            </span>
-          </>
-        }
+        labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}
       />
       {partyId && (
         <AccountBreakdownDialog

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

@@ -43,7 +43,7 @@ import {
   REDUCE_ONLY_TOOLTIP,
   stopSubmit,
   getNotionalSize,
-  getBaseQuoteUnit,
+  getAssetUnit,
 } from './deal-ticket';
 import { TypeToggle } from './type-selector';
 import {
@@ -854,7 +854,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   }, [watch, market.id, updateStoredFormValues]);
 
   const quoteName = getQuoteName(market);
-  const assetUnit = getBaseQuoteUnit(
+  const assetUnit = getAssetUnit(
     market.tradableInstrument.instrument.metadata.tags
   );
 

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

@@ -127,7 +127,7 @@ const getDefaultValues = (
   ...storedValues,
 });
 
-export const getBaseQuoteUnit = (tags?: string[] | null) =>
+export const getAssetUnit = (tags?: string[] | null) =>
   tags
     ?.find((tag) => tag.startsWith('base:') || tag.startsWith('ticker:'))
     ?.replace(/^[^:]*:/, '');
@@ -273,7 +273,9 @@ export const DealTicket = ({
 
   const assetSymbol = getAsset(market).symbol;
 
-  const assetUnit = getQuoteName(market);
+  const assetUnit = getAssetUnit(
+    market.tradableInstrument.instrument.metadata.tags
+  );
 
   const summaryError = useMemo(() => {
     if (!pubKey) {

libs/deal-ticket/src/constants.ts

@@ -60,7 +60,7 @@ export const EST_FEES_TOOLTIP_TEXT = t(
 );
 
 export const LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT = t(
-  'This is an approximation for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.'
+  'This is an approximation (or a range) for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.'
 );
 
 export const EST_SLIPPAGE = t(

libs/ledger/src/index.ts

@@ -1,2 +1 @@
 export * from './lib/ledger-export-form';
-export * from './lib/ledger-download-store';

libs/ledger/src/lib/ledger-download-store.tsx

@@ -1,142 +0,0 @@
-import { create } from 'zustand';
-import type { ReactNode } from 'react';
-import { useCallback, useEffect } from 'react';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { useToasts, Intent } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-import { subscribeWithSelector } from 'zustand/middleware';
-
-type DownloadSettings = {
-  title: string;
-  link: string;
-  filename?: string;
-  isDownloaded?: boolean;
-  isChanged?: boolean;
-  isError?: boolean;
-  errorMessage?: string;
-  isDelayed?: boolean;
-  intent?: Intent;
-  blob?: Blob;
-};
-
-export type LedgerDownloadFileStore = {
-  queue: DownloadSettings[];
-  hasItem: (link: string) => boolean;
-  removeItem: (link: string) => void;
-  updateQueue: (item: DownloadSettings) => void;
-};
-
-export const useLedgerDownloadFile = create<LedgerDownloadFileStore>()(
-  subscribeWithSelector((set, get) => ({
-    queue: [],
-    hasItem: (link: string) =>
-      get().queue.findIndex((item) => item.link === link) > -1,
-    removeItem: (link: string) => {
-      const queue = get().queue;
-      const index = queue.findIndex((item) => item.link === link);
-      if (index > -1) {
-        queue.splice(index, 1);
-        set({ queue: [...queue] });
-      }
-    },
-    updateQueue: (newitem: DownloadSettings) => {
-      const queue = get().queue;
-      const index = queue.findIndex((item) => item.link === newitem.link);
-      if (index > -1) {
-        queue[index] = { ...queue[index], ...newitem };
-        set({ queue: [...queue] });
-      } else {
-        set({ queue: [newitem, ...queue] });
-      }
-    },
-  }))
-);
-
-const ErrorContent = ({ message }: { message?: string }) => (
-  <>
-    <h4 className="mb-1 text-sm">{t('Something went wrong')}</h4>
-    <p>{message || t('Try again later')}</p>
-  </>
-);
-
-const InfoContent = ({ progress = false }) => (
-  <>
-    <p>{t('Please note this can take several minutes.')}</p>
-    <p>{t('You will be notified here when your file is ready.')}</p>
-    <h4 className="my-2">
-      {progress ? t('Still in progress') : t('Download has been started')}
-    </h4>
-  </>
-);
-
-export const useLedgerDownloadManager = () => {
-  const queue = useLedgerDownloadFile((store) => store.queue);
-  const updateQueue = useLedgerDownloadFile((store) => store.updateQueue);
-  const removeItem = useLedgerDownloadFile((store) => store.removeItem);
-  const [setToast, updateToast, hasToast, removeToast] = useToasts((store) => [
-    store.setToast,
-    store.update,
-    store.hasToast,
-    store.remove,
-  ]);
-
-  const onDownloadClose = useCallback(
-    (id: string) => {
-      removeToast(id);
-      removeItem(id);
-    },
-    [removeToast, removeItem]
-  );
-
-  const createToast = (item: DownloadSettings) => {
-    let content: ReactNode;
-    switch (true) {
-      case item.isError:
-        content = <ErrorContent message={item.errorMessage} />;
-        break;
-      case Boolean(item.blob):
-        content = (
-          <>
-            <h4 className="mb-1 text-sm">{t('Your file is ready')}</h4>
-            <a
-              onClick={() => onDownloadClose(item.link)}
-              href={URL.createObjectURL(item.blob as Blob)}
-              download={item.filename}
-              className="underline"
-            >
-              {t('Get file here')}
-            </a>
-          </>
-        );
-        break;
-      default:
-        content = <InfoContent progress={item.isDelayed} />;
-    }
-    const toast: Toast = {
-      id: item.link,
-      intent: item.intent || Intent.Primary,
-      content: (
-        <>
-          <h3 className="mb-1 text-md uppercase">{item.title}</h3>
-          {content}
-        </>
-      ),
-      onClose: () => onDownloadClose(item.link),
-      loader: !item.isDownloaded && !item.isError,
-    };
-    if (hasToast(toast.id)) {
-      updateToast(toast.id, toast);
-    } else {
-      setToast(toast);
-    }
-  };
-
-  useEffect(() => {
-    queue.forEach((item) => {
-      if (item.isChanged) {
-        createToast(item);
-        updateQueue({ ...item, isChanged: false });
-      }
-    });
-  }, [queue, createToast, updateQueue]);
-};

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

@@ -1,21 +1,10 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { createDownloadUrl, LedgerExportForm } from './ledger-export-form';
 import { formatForInput, toNanoSeconds } from '@vegaprotocol/utils';
-import {
-  useLedgerDownloadManager,
-  useLedgerDownloadFile,
-} from './ledger-download-store';
-import { Intent } from '@vegaprotocol/ui-toolkit';
 
-const mockSetToast = jest.fn();
-jest.mock('@vegaprotocol/ui-toolkit', () => ({
-  ...jest.requireActual('@vegaprotocol/ui-toolkit'),
-  useToasts: jest.fn(() => [mockSetToast, jest.fn(), jest.fn(() => false)]),
-}));
 const vegaUrl = 'https://vega-url.co.uk/querystuff';
 
 const mockResponse = {
-  ok: true,
   headers: { get: jest.fn() },
   blob: () => '',
 };
@@ -39,7 +28,6 @@ describe('LedgerExportForm', () => {
 
   afterAll(() => {
     jest.useRealTimers();
-    jest.clearAllMocks();
   });
 
   it('should be properly rendered', async () => {
@@ -55,6 +43,8 @@ describe('LedgerExportForm', () => {
     // userEvent does not work with faked timers
     fireEvent.click(screen.getByTestId('ledger-download-button'));
 
+    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
+
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
         `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
@@ -62,6 +52,9 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=1691057410000000000`
       );
     });
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('assetID should be properly change request url', async () => {
@@ -82,6 +75,8 @@ describe('LedgerExportForm', () => {
 
     fireEvent.click(screen.getByTestId('ledger-download-button'));
 
+    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
+
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
         `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
@@ -89,6 +84,9 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=1691057410000000000`
       );
     });
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('date-from should properly change request url', async () => {
@@ -112,6 +110,8 @@ describe('LedgerExportForm', () => {
 
     fireEvent.click(screen.getByTestId('ledger-download-button'));
 
+    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
+
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
         `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
@@ -119,6 +119,10 @@ describe('LedgerExportForm', () => {
         }&dateRange.startTimestamp=${toNanoSeconds(newDate)}`
       );
     });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('date-to should properly change request url', async () => {
@@ -152,6 +156,10 @@ describe('LedgerExportForm', () => {
         )}`
       );
     });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
+    });
   });
 
   it('Time zone sentence should be properly displayed', () => {
@@ -197,50 +205,6 @@ describe('LedgerExportForm', () => {
       screen.queryByText(/^The downloaded file uses the UTC/)
     ).not.toBeInTheDocument();
   });
-
-  it('A toast notification should be displayed', async () => {
-    useLedgerDownloadFile.setState({ queue: [] });
-    const TestWrapper = () => {
-      useLedgerDownloadManager();
-      return (
-        <LedgerExportForm
-          partyId={partyId}
-          vegaUrl={vegaUrl}
-          assets={assetsMock}
-        />
-      );
-    };
-
-    render(<TestWrapper />);
-    expect(screen.getByText('symbol asset-id')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByTestId('ledger-download-button'));
-
-    const link = `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
-      Object.keys(assetsMock)[0]
-    }&dateRange.startTimestamp=1691057410000000000`;
-
-    await waitFor(() => {
-      expect(mockSetToast).toHaveBeenCalledWith({
-        id: link,
-        content: expect.any(Object),
-        onClose: expect.any(Function),
-        intent: Intent.Primary,
-        loader: true,
-      });
-
-      expect(global.fetch).toHaveBeenCalledWith(link);
-    });
-
-    mockSetToast.mockClear();
-    (global.fetch as jest.Mock).mockClear();
-    fireEvent.click(screen.getByTestId('ledger-download-button')); // click again
-
-    await waitFor(() => {
-      expect(mockSetToast).toHaveBeenCalled();
-      expect(global.fetch).not.toHaveBeenCalled();
-    });
-  });
 });
 
 describe('createDownloadUrl', () => {

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

@@ -1,22 +1,17 @@
 import { useRef, useState } from 'react';
-import { format, subDays } from 'date-fns';
+import { z } from 'zod';
 import {
-  Intent,
-  Loader,
   TradingButton,
+  Loader,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
-import { z } from 'zod';
-import {
-  formatForInput,
-  toNanoSeconds,
-  VEGA_ID_REGEX,
-} from '@vegaprotocol/utils';
+import { toNanoSeconds, VEGA_ID_REGEX } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
-import { useLedgerDownloadFile } from './ledger-download-store';
+import { formatForInput } from '@vegaprotocol/utils';
+import { subDays } from 'date-fns';
 
 const DEFAULT_EXPORT_FILE_NAME = 'ledger_entries.csv';
 
@@ -78,14 +73,10 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const maxFromDate = formatForInput(new Date(dateTo || now.current));
   const maxToDate = formatForInput(now.current);
 
+  const [isDownloading, setIsDownloading] = useState(false);
   const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
   const protohost = getProtoHost(vegaUrl);
-  const disabled = Boolean(!assetId);
-
-  const hasItem = useLedgerDownloadFile((store) => store.hasItem);
-  const updateDownloadQueue = useLedgerDownloadFile(
-    (store) => store.updateQueue
-  );
+  const disabled = Boolean(!assetId || isDownloading);
 
   const assetDropDown = (
     <TradingSelect
@@ -96,6 +87,7 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
       }}
       className="w-full"
       data-testid="select-ledger-asset"
+      disabled={isDownloading}
     >
       {Object.keys(assets).map((assetKey) => (
         <option key={assetKey} value={assetKey}>
@@ -105,78 +97,32 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
     </TradingSelect>
   );
 
-  const link = createDownloadUrl({
-    protohost,
-    partyId,
-    assetId,
-    dateFrom,
-    dateTo,
-  });
-
   const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-
-    const title = t('Downloading for %s from %s till %s', [
-      assets[assetId],
-      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
-      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
-    ]);
-
-    const downloadStoreItem = {
-      title,
-      link,
-      isChanged: true,
-    };
-    if (hasItem(link)) {
-      updateDownloadQueue(downloadStoreItem);
-      return;
-    }
-    const ts = setTimeout(() => {
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Warning,
-        isDelayed: true,
-        isChanged: true,
-      });
-    }, 1000 * 30);
-
     try {
-      updateDownloadQueue(downloadStoreItem);
+      const link = createDownloadUrl({
+        protohost,
+        partyId,
+        assetId,
+        dateFrom,
+        dateTo,
+      });
+      setIsDownloading(true);
       const resp = await fetch(link);
-      if (!resp?.ok) {
-        if (resp?.status === 429) {
-          throw new Error('Too many requests. Try again later.');
-        }
-        throw new Error('Download of ledger entries failed');
-      }
       const { headers } = resp;
       const nameHeader = headers.get('content-disposition');
       const filename = nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        filename,
-      });
       const blob = await resp.blob();
       if (blob) {
-        updateDownloadQueue({
-          ...downloadStoreItem,
-          blob,
-          isDownloaded: true,
-          isChanged: true,
-          intent: Intent.Success,
-        });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
       }
     } catch (err) {
       localLoggerFactory({ application: 'ledger' }).error('Download file', err);
-      updateDownloadQueue({
-        ...downloadStoreItem,
-        intent: Intent.Danger,
-        isError: true,
-        isChanged: true,
-        errorMessage: (err as Error).message || undefined,
-      });
     } finally {
-      clearTimeout(ts);
+      setIsDownloading(false);
     }
   };
 
@@ -199,6 +145,7 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           id="date-from"
           value={dateFrom}
           onChange={(e) => setDateFrom(e.target.value)}
+          disabled={disabled}
           max={maxFromDate}
         />
       </TradingFormGroup>
@@ -209,10 +156,19 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           id="date-to"
           value={dateTo}
           onChange={(e) => setDateTo(e.target.value)}
+          disabled={disabled}
           max={maxToDate}
         />
       </TradingFormGroup>
       <div className="relative text-sm" title={t('Download all to .csv file')}>
+        {isDownloading && (
+          <div
+            className="absolute flex items-center justify-center w-full h-full"
+            data-testid="download-spinner"
+          >
+            <Loader size="small" />
+          </div>
+        )}
         <TradingButton
           fill
           disabled={disabled}

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

@@ -238,7 +238,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
           volumeFormat={volumeFormat}
           priceFormat={priceFormat}
           notEnoughDataText={
-            <span className="text-xs text-center">{t('No open orders')}</span>
+            <span className="text-xs text-center">{t('No data')}</span>
           }
         />
       )}

libs/market-depth/src/lib/orderbook-manager.tsx

@@ -11,8 +11,14 @@ import type {
   MarketDepthQuery,
   MarketDepthQueryVariables,
   MarketDepthUpdateSubscription,
+  PriceLevelFieldsFragment,
 } from './__generated__/MarketDepth';
 
+export type OrderbookData = {
+  asks: PriceLevelFieldsFragment[];
+  bids: PriceLevelFieldsFragment[];
+};
+
 interface OrderbookManagerProps {
   marketId: string;
   onClick: (args: { price?: string; size?: string }) => void;

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

@@ -238,7 +238,7 @@ export const Orderbook = ({
                   </>
                 ) : (
                   <div className="absolute inset-0">
-                    <Splash>{t('No open orders')}</Splash>
+                    <Splash>{t('No data')}</Splash>
                   </div>
                 )}
               </div>

libs/markets/src/lib/__generated__/markets-data.ts

@@ -3,12 +3,12 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type MarketsDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketState: Types.MarketState, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
+export type MarketsDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
 
 export type MarketsDataQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type MarketsDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketState: Types.MarketState, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
+export type MarketsDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
 
 export const MarketsDataFieldsFragmentDoc = gql`
     fragment MarketsDataFields on MarketData {
@@ -20,7 +20,6 @@ export const MarketsDataFieldsFragmentDoc = gql`
   markPrice
   trigger
   staticMidPrice
-  marketState
   marketTradingMode
   indicativeVolume
   indicativePrice

libs/markets/src/lib/market-data-provider.ts

@@ -126,16 +126,6 @@ export const marketTradingModeProvider = makeDerivedDataProvider<
     (parts[0] as ReturnType<typeof getData>)?.marketTradingMode
 );
 
-export const marketStateProvider = makeDerivedDataProvider<
-  MarketDataFieldsFragment['marketState'] | undefined,
-  never,
-  MarketDataQueryVariables
->(
-  [marketDataProvider],
-  (parts, variables, prevData) =>
-    (parts[0] as ReturnType<typeof getData>)?.marketState
-);
-
 export const fundingRateProvider = makeDerivedDataProvider<
   string,
   never,
@@ -186,11 +176,3 @@ export const useMarketTradingMode = (marketId?: string, skip?: boolean) => {
     skip: skip || !marketId,
   });
 };
-
-export const useMarketState = (marketId?: string, skip?: boolean) => {
-  return useDataProvider({
-    dataProvider: marketStateProvider,
-    variables: { marketId: marketId || '' },
-    skip: skip || !marketId,
-  });
-};

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

@@ -7,7 +7,6 @@ fragment MarketsDataFields on MarketData {
   markPrice
   trigger
   staticMidPrice
-  marketState
   marketTradingMode
   indicativeVolume
   indicativePrice

libs/markets/src/lib/markets-data.mock.ts

@@ -34,7 +34,6 @@ export const createMarketsDataFragment = (
       __typename: 'Market',
     },
     marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
-    marketState: Schema.MarketState.STATE_ACTIVE,
     staticMidPrice: '0',
     indicativePrice: '0',
     bestStaticBidPrice: '0',

libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx

@@ -4,10 +4,10 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useVegaTransactionStore } from '@vegaprotocol/web3';
 import { useHasAmendableOrder } from '../../order-hooks';
 
-export const OpenOrdersMenu = () => {
+export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
   const { isReadOnly } = useVegaWallet();
   const create = useVegaTransactionStore((state) => state.create);
-  const hasAmendableOrder = useHasAmendableOrder();
+  const hasAmendableOrder = useHasAmendableOrder(marketId);
 
   if (isReadOnly) {
     return null;

libs/orders/src/lib/components/order-data-provider/order-data-provider.ts

@@ -239,11 +239,11 @@ export const hasActiveOrderProvider = makeDerivedDataProvider<
 export const hasAmendableOrderProvider = makeDerivedDataProvider<
   boolean,
   never,
-  { partyId: string }
+  { partyId: string; marketId?: string }
 >([activeOrdersProvider], (parts) => {
   const activeOrders = parts[0] as ReturnType<typeof getData>;
   const hasAmendableOrder = activeOrders.some(
-    (order) => !order.liquidityProvision
+    (order) => !(order.liquidityProvision || order.peggedOrder)
   );
   return hasAmendableOrder;
 });

libs/orders/src/lib/components/order-list-manager/order-list-manager.spec.tsx

@@ -1,18 +1,23 @@
-import { render, screen } from '@testing-library/react';
-import type { OrderListManagerProps } from './order-list-manager';
-import { OrderListManager, Filter } from './order-list-manager';
+import { render, screen, act } from '@testing-library/react';
+import { OrderListManager } from './order-list-manager';
 import * as useDataProviderHook from '@vegaprotocol/data-provider';
 import type { OrderFieldsFragment } from '../';
+import * as orderListMock from '../order-list/order-list';
+import { forwardRef } from 'react';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MockedProvider } from '@apollo/client/testing';
 
-const generateJsx = (props: Partial<OrderListManagerProps> | null = null) => {
+// @ts-ignore OrderList is read only but we need to override with the forwardRef to
+// avoid warnings about padding refs
+orderListMock.OrderListTable = forwardRef(() => <div>OrderList</div>);
+
+const generateJsx = () => {
   const pubKey = '0x123';
   return (
     <MockedProvider>
       <VegaWalletContext.Provider value={{ pubKey } as VegaWalletContextShape}>
-        <OrderListManager partyId={pubKey} isReadOnly={false} {...props} />
+        <OrderListManager partyId={pubKey} isReadOnly={false} />
       </VegaWalletContext.Provider>
     </MockedProvider>
   );
@@ -28,46 +33,9 @@ describe('OrderListManager', () => {
       reload: jest.fn(),
       load: jest.fn(),
     });
-    render(generateJsx());
-
-    expect(
-      await screen.getByRole('treegrid', {
-        name: (_, element) => element.classList.contains('ag-root'),
-      })
-    ).toBeInTheDocument();
-  });
-
-  it('should display order info', async () => {
-    jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
-      data: [{ id: '1' } as OrderFieldsFragment],
-      loading: false,
-      error: new Error('Query error'),
-      flush: jest.fn(),
-      reload: jest.fn(),
-      load: jest.fn(),
+    await act(async () => {
+      render(generateJsx());
     });
-
-    render(generateJsx());
-
-    expect(
-      await screen.getByText('Something went wrong: Query error')
-    ).toBeInTheDocument();
-  });
-
-  it('should display no rows overlay', async () => {
-    jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
-      data: [],
-      loading: false,
-      error: undefined,
-      flush: jest.fn(),
-      reload: jest.fn(),
-      load: jest.fn(),
-    });
-
-    render(
-      generateJsx({ filter: Filter.Closed, noRowsMessage: 'no rows message' })
-    );
-
-    expect(screen.getByText('no rows message')).toBeInTheDocument();
+    expect(await screen.findByText('OrderList')).toBeInTheDocument();
   });
 });

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -1,8 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
-import { useCallback, useRef, useState, useEffect } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import type { FilterChangedEvent } from 'ag-grid-community';
-import { OrderListTable } from '../order-list';
+import { OrderListTable } from '../order-list/order-list';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
@@ -12,7 +11,6 @@ import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/web3';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
 import type { Order } from '../order-data-provider';
 import { OrderViewDialog } from '../order-list/order-view-dialog';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 
 export enum Filter {
   'Open' = 'Open',
@@ -27,7 +25,6 @@ export interface OrderListManagerProps {
   isReadOnly: boolean;
   filter?: Filter;
   gridProps?: ReturnType<typeof useDataGridEvents>;
-  noRowsMessage?: string;
 }
 
 export const OrderListManager = ({
@@ -37,7 +34,6 @@ export const OrderListManager = ({
   isReadOnly,
   filter,
   gridProps,
-  noRowsMessage,
 }: OrderListManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [editOrder, setEditOrder] = useState<Order | null>(null);
@@ -60,29 +56,6 @@ export const OrderListManager = ({
     },
   });
 
-  const onFilterChanged = useCallback(
-    (event: FilterChangedEvent) => {
-      gridProps?.onFilterChanged?.(event);
-      if (event.api) {
-        const isEmpty = event.api.getDisplayedRowCount() === 0;
-        if (isEmpty) {
-          event.api.showNoRowsOverlay();
-        } else {
-          event.api.hideOverlay();
-        }
-      }
-    },
-    [gridProps]
-  );
-
-  useEffect(() => {
-    if (!data || !data.length) {
-      gridRef.current?.api?.showNoRowsOverlay();
-    } else {
-      gridRef.current?.api?.hideOverlay();
-    }
-  }, [data]);
-
   const cancel = useCallback(
     (order: Order) => {
       if (!order.market) return;
@@ -96,10 +69,6 @@ export const OrderListManager = ({
     [create]
   );
 
-  if (error) {
-    return <Splash>{t(`Something went wrong: ${error.message}`)}</Splash>;
-  }
-
   return (
     <>
       <div className="h-full relative">
@@ -113,9 +82,8 @@ export const OrderListManager = ({
           onMarketClick={onMarketClick}
           onOrderTypeClick={onOrderTypeClick}
           isReadOnly={isReadOnly}
-          overlayNoRowsTemplate={noRowsMessage || t('No orders')}
+          overlayNoRowsTemplate={error ? error.message : t('No orders')}
           {...gridProps}
-          onFilterChanged={onFilterChanged}
         />
       </div>
       {editOrder && (

libs/orders/src/lib/components/order-list/order-edit-dialog.spec.tsx

@@ -1,32 +0,0 @@
-import { act, render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { OrderEditDialog } from './order-edit-dialog';
-import { limitOrder } from '../mocks';
-
-describe('OrderEditDialog', () => {
-  it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', async () => {
-    // 7003-MORD-013
-    await act(async () => {
-      render(
-        <OrderEditDialog
-          order={limitOrder}
-          onChange={jest.fn()}
-          isOpen={true}
-          onSubmit={jest.fn()}
-        />
-      );
-    });
-    const editOrder = await screen.findByTestId('edit-order');
-    const limitPrice = within(editOrder).getByLabelText('Price');
-    await userEvent.type(limitPrice, '0.111111');
-    const submitButton = within(editOrder).getByRole('button', {
-      name: 'Update',
-    });
-    await userEvent.click(submitButton);
-    const inputErrorText = within(editOrder).getByTestId('input-error-text');
-    expect(inputErrorText).toHaveTextContent(
-      'Price accepts up to 1 decimal places'
-    );
-  });
-});

libs/orders/src/lib/components/order-list/order-list.spec.tsx

@@ -46,12 +46,6 @@ const generateJsx = (
 
 describe('OrderListTable', () => {
   it('should render correct columns', async () => {
-    //  7003-MORD-001
-    //  7003-MORD-002
-    //  7003-MORD-003
-    //  7003-MORD-004
-    //  7003-MORD-005
-    //  7003-MORD-006
     await act(async () => {
       render(generateJsx({ rowData: [marketOrder, limitOrder] }));
     });
@@ -190,7 +184,6 @@ describe('OrderListTable', () => {
 
   describe('amend cell', () => {
     it('allows cancelling and editing for permitted orders', async () => {
-      //  7003-MORD-007
       const mockEdit = jest.fn();
       const mockCancel = jest.fn();
       const order = generateOrder({
@@ -216,7 +209,6 @@ describe('OrderListTable', () => {
     });
 
     it('does not allow cancelling and editing for permitted orders if read only', async () => {
-      // 7003-MORD-008
       const mockEdit = jest.fn();
       const mockCancel = jest.fn();
       const order = generateOrder({
@@ -241,7 +233,6 @@ describe('OrderListTable', () => {
     });
 
     it('shows if an order is a liquidity provision order and does not show order actions', async () => {
-      // 7003-MORD-008
       const order = generateOrder({
         type: Schema.OrderType.TYPE_LIMIT,
         timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
@@ -260,7 +251,6 @@ describe('OrderListTable', () => {
     });
 
     it('shows if an order is a pegged order and does not show order actions', async () => {
-      // 7003-MORD-008
       const order = generateOrder({
         type: Schema.OrderType.TYPE_LIMIT,
         timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -34,7 +34,7 @@ import type {
 } from '@vegaprotocol/datagrid';
 import type { AgGridReact } from 'ag-grid-react';
 import type { Order } from '../order-data-provider';
-import { Filter } from '../order-list-manager/order-list-manager';
+import { Filter } from '../order-list-manager';
 import type { ColDef } from 'ag-grid-community';
 
 const defaultColDef = {

libs/orders/src/lib/order-hooks/use-has-amendable-order.ts

@@ -3,7 +3,7 @@ import { hasAmendableOrderProvider } from '../components/order-data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
-export const useHasAmendableOrder = () => {
+export const useHasAmendableOrder = (marketId?: string) => {
   const { pubKey } = useVegaWallet();
   const [hasAmendableOrder, setHasAmendableOrder] = useState(false);
   const update = useCallback(({ data }: { data: boolean | null }) => {
@@ -15,6 +15,7 @@ export const useHasAmendableOrder = () => {
     update,
     variables: {
       partyId: pubKey || '',
+      marketId,
     },
     skip: !pubKey,
   });

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

@@ -1,5 +1,2 @@
-export {
-  marketViewProposalsDataProvider,
-  proposalsDataProvider,
-} from './proposals-data-provider';
+export * from './proposals-data-provider';
 export * from './__generated__/Proposals';

libs/proposals/src/lib/proposals-data-provider/proposals-data-provider.spec.tsx

@@ -1,67 +0,0 @@
-import { update } from './proposals-data-provider';
-import type {
-  MarketViewProposalFieldsFragment,
-  MarketViewProposalsQueryVariables,
-} from './__generated__/Proposals';
-import * as Types from '@vegaprotocol/types';
-
-describe('proposals data provider', () => {
-  const proposal = {
-    id: '1',
-    state: Types.ProposalState.STATE_OPEN,
-    terms: {
-      change: {
-        __typename: 'UpdateMarketState',
-      },
-    },
-  } as MarketViewProposalFieldsFragment;
-  const data = [proposal];
-  const delta = { ...proposal };
-  const reload = jest.fn();
-
-  const variables: MarketViewProposalsQueryVariables = {
-    inState: Types.ProposalState.STATE_OPEN,
-    proposalType: Types.ProposalType.TYPE_UPDATE_MARKET_STATE,
-  };
-
-  it('update existing data', () => {
-    expect(update(data, delta, reload, variables)?.[0]).toBe(delta);
-  });
-
-  it('removes existing data if delta do not match inState', () => {
-    expect(
-      update(
-        data,
-        { ...delta, state: Types.ProposalState.STATE_PASSED },
-        reload,
-        variables
-      )?.length
-    ).toBe(0);
-  });
-
-  it('do not add delta if it do not match inState', () => {
-    expect(
-      update(
-        data,
-        { ...delta, id: '2', state: Types.ProposalState.STATE_PASSED },
-        reload,
-        variables
-      )?.length
-    ).toBe(1);
-  });
-
-  it('do not add delta if it do not match proposalType', () => {
-    expect(
-      update(
-        data,
-        {
-          ...delta,
-          id: '2',
-          terms: { ...delta.terms, change: { __typename: 'UpdateMarket' } },
-        },
-        reload,
-        variables
-      )?.length
-    ).toBe(1);
-  });
-});

libs/proposals/src/lib/proposals-data-provider/proposals-data-provider.tsx

@@ -1,7 +1,5 @@
-import type { Update } from '@vegaprotocol/data-provider';
 import { makeDataProvider } from '@vegaprotocol/data-provider';
 import produce from 'immer';
-import * as Types from '@vegaprotocol/types';
 import type {
   ProposalsListQuery,
   ProposalsListQueryVariables,
@@ -10,7 +8,6 @@ import type {
   MarketViewProposalFieldsFragment,
   MarketViewProposalsQuery,
   MarketViewProposalsQueryVariables,
-  MarketViewLiveProposalsSubscriptionVariables,
 } from './__generated__/Proposals';
 import {
   MarketViewLiveProposalsDocument,
@@ -45,61 +42,21 @@ export const proposalsDataProvider = makeDataProvider<
     errors.every((e) => e.message.match(/failed to get asset for ID/)),
 });
 
-const ProposalTypeMap: Record<
-  Types.ProposalType,
-  Types.ProposalChange['__typename']
-> = {
-  [Types.ProposalType.TYPE_CANCEL_TRANSFER]: 'CancelTransfer',
-  [Types.ProposalType.TYPE_NETWORK_PARAMETERS]: 'UpdateNetworkParameter',
-  [Types.ProposalType.TYPE_NEW_ASSET]: 'NewAsset',
-  [Types.ProposalType.TYPE_NEW_FREE_FORM]: 'NewFreeform',
-  [Types.ProposalType.TYPE_NEW_MARKET]: 'NewMarket',
-  [Types.ProposalType.TYPE_NEW_SPOT_MARKET]: 'NewSpotMarket',
-  [Types.ProposalType.TYPE_NEW_TRANSFER]: 'NewTransfer',
-  [Types.ProposalType.TYPE_UPDATE_ASSET]: 'UpdateAsset',
-  [Types.ProposalType.TYPE_UPDATE_MARKET]: 'UpdateMarket',
-  [Types.ProposalType.TYPE_UPDATE_MARKET_STATE]: 'UpdateMarketState',
-  [Types.ProposalType.TYPE_UPDATE_REFERRAL_PROGRAM]: 'UpdateReferralProgram',
-  [Types.ProposalType.TYPE_UPDATE_SPOT_MARKET]: 'UpdateSpotMarket',
-  [Types.ProposalType.TYPE_UPDATE_VOLUME_DISCOUNT_PROGRAM]:
-    'UpdateVolumeDiscountProgram',
-};
-
-const matchFilter = (
-  data: MarketViewProposalFieldsFragment,
-  variables: MarketViewProposalsQueryVariables
-) => {
-  return (
-    (!variables.inState || data.state === variables.inState) &&
-    (!variables.proposalType ||
-      data.terms.change.__typename === ProposalTypeMap[variables.proposalType])
-  );
-};
-
-export const update: Update<
-  MarketViewProposalFieldsFragment[] | null,
-  MarketViewProposalFieldsFragment,
-  MarketViewProposalsQueryVariables
-> = (
+const update = (
   data: MarketViewProposalFieldsFragment[] | null,
-  delta: MarketViewProposalFieldsFragment,
-  reload,
-  variables
+  delta: MarketViewProposalFieldsFragment
 ) => {
   const updateData = produce(data || [], (draft) => {
     const { id } = delta;
     const index = draft.findIndex((item) => item.id === id);
-    const match = matchFilter(delta, variables);
     if (index === -1) {
-      if (match) {
-        draft.unshift(delta);
-      }
+      draft.unshift(delta);
     } else {
-      if (match) {
-        draft[index] = delta;
-      } else {
-        draft.splice(index, 1);
-      }
+      const currNode = draft[index];
+      draft[index] = {
+        ...currNode,
+        ...delta,
+      };
     }
   });
   return updateData;
@@ -109,15 +66,12 @@ const getMarketProposalsData = (
   responseData: MarketViewProposalsQuery | null
 ) => removePaginationWrapper(responseData?.proposalsConnection?.edges) || [];
 
-const subscriptionVariables: MarketViewLiveProposalsSubscriptionVariables = {};
-
 export const marketViewProposalsDataProvider = makeDataProvider<
   MarketViewProposalsQuery,
   MarketViewProposalFieldsFragment[],
   MarketViewLiveProposalsSubscription,
   MarketViewProposalFieldsFragment,
-  MarketViewProposalsQueryVariables,
-  MarketViewLiveProposalsSubscriptionVariables
+  MarketViewProposalsQueryVariables
 >({
   query: MarketViewProposalsDocument,
   subscriptionQuery: MarketViewLiveProposalsDocument,
@@ -125,5 +79,4 @@ export const marketViewProposalsDataProvider = makeDataProvider<
   getDelta: (subscriptionData: MarketViewLiveProposalsSubscription) =>
     subscriptionData.proposals,
   getData: getMarketProposalsData,
-  getSubscriptionVariables: () => subscriptionVariables,
 });

libs/proposals/src/lib/proposals-hooks/index.ts

@@ -7,3 +7,4 @@ export * from './use-update-network-paramaters-toasts';
 export * from './use-successor-market-proposal-details';
 export * from './use-new-transfer-proposal-details';
 export * from './use-cancel-transfer-proposal-details';
+export * from './use-market-view-proposals';

libs/proposals/src/lib/proposals-hooks/use-market-view-proposals.ts

@@ -0,0 +1,29 @@
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { marketViewProposalsDataProvider } from '../proposals-data-provider';
+import type * as Types from '@vegaprotocol/types';
+
+export const useMarketViewProposals = ({
+  skip = false,
+  typename,
+  proposalType,
+  inState,
+}: {
+  typename: Types.ProposalChange['__typename'];
+  skip?: boolean;
+  inState: Types.ProposalState;
+  proposalType?: Types.ProposalType;
+}) => {
+  const variables = {
+    inState,
+    ...(proposalType ? { proposalType } : null),
+  };
+
+  const { data } = useDataProvider({
+    dataProvider: marketViewProposalsDataProvider,
+    skip,
+    variables,
+  });
+  return (data || []).filter(
+    (item) => item.terms.change.__typename === typename
+  );
+};

libs/proposals/src/lib/proposals-hooks/use-update-proposal.ts

@@ -1,9 +1,9 @@
+import { proposalsDataProvider } from '..';
 import * as Schema from '@vegaprotocol/types';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useMemo } from 'react';
 import first from 'lodash/first';
-import { proposalsDataProvider } from '../proposals-data-provider';
-import type { ProposalListFieldsFragment } from '../proposals-data-provider';
+import type { ProposalListFieldsFragment } from '..';
 
 type UseUpdateProposalProps = {
   id?: string;