feat(trading): 4387 market terminate warning banner (#4912)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

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

@@ -18,6 +18,7 @@ import { TradingViews } from './trade-views';
 import {
   MarketSuccessorBanner,
   MarketSuccessorProposalBanner,
+  MarketTerminationBanner,
 } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
@@ -172,6 +173,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
             <MarketSuccessorProposalBanner marketId={market?.id} />
           </>
         )}
+        <MarketTerminationBanner market={market} />
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="min-h-0 p-0.5">

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

@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import {
   MarketSuccessorBanner,
   MarketSuccessorProposalBanner,
+  MarketTerminationBanner,
 } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
@@ -59,6 +60,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
             <MarketSuccessorProposalBanner marketId={market?.id} />
           </>
         )}
+        <MarketTerminationBanner market={market} />
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div>{renderMenu()}</div>

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

@@ -1,2 +1,3 @@
 export * from './market-successor-banner';
 export * from './market-successor-proposal-banner';
+export * from './market-termination-banner';

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

@@ -3,12 +3,17 @@ import type { SingleExecutionResult } from '@apollo/client';
 import type { MockedResponse } from '@apollo/react-testing';
 import { MockedProvider } from '@apollo/react-testing';
 import { MarketSuccessorProposalBanner } from './market-successor-proposal-banner';
-import type { SuccessorProposalsListQuery } from '@vegaprotocol/proposals';
+import type { MarketViewProposalsQuery } from '@vegaprotocol/proposals';
-import { SuccessorProposalsListDocument } from '@vegaprotocol/proposals';
+import { MarketViewProposalsDocument } from '@vegaprotocol/proposals';
+import * as Types from '@vegaprotocol/types';
 
-const marketProposalMock: MockedResponse<SuccessorProposalsListQuery> = {
+const marketProposalMock: MockedResponse<MarketViewProposalsQuery> = {
   request: {
-    query: SuccessorProposalsListDocument,
+    query: MarketViewProposalsDocument,
+    variables: {
+      inState: Types.ProposalState.STATE_OPEN,
+      proposalType: Types.ProposalType.TYPE_NEW_MARKET,
+    },
   },
   result: {
     data: {
@@ -18,8 +23,11 @@ const marketProposalMock: MockedResponse<SuccessorProposalsListQuery> = {
             node: {
               __typename: 'Proposal',
               id: 'proposal-1',
+              state: Types.ProposalState.STATE_OPEN,
               terms: {
                 __typename: 'ProposalTerms',
+                closingDatetime: '2023-09-27',
+                enactmentDatetime: '2023-09-28',
                 change: {
                   __typename: 'NewMarket',
                   instrument: {
@@ -66,12 +74,13 @@ describe('MarketSuccessorProposalBanner', () => {
           proposalsConnection: {
             edges: [
               ...((
-                marketProposalMock?.result as SingleExecutionResult<SuccessorProposalsListQuery>
+                marketProposalMock?.result as SingleExecutionResult<MarketViewProposalsQuery>
               )?.data?.proposalsConnection?.edges ?? []),
               {
                 node: {
                   __typename: 'Proposal',
                   id: 'proposal-2',
+                  state: Types.ProposalState.STATE_OPEN,
                   terms: {
                     __typename: 'ProposalTerms',
                     change: {

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

@@ -1,9 +1,6 @@
 import { Fragment, useState } from 'react';
-import type {
+import type { NewMarketSuccessorFieldsFragment } from '@vegaprotocol/proposals';
-  SuccessorProposalListFieldsFragment,
+import { useMarketViewProposals } from '@vegaprotocol/proposals';
-  NewMarketSuccessorFieldsFragment,
-} from '@vegaprotocol/proposals';
-import { useSuccessorProposalsListQuery } from '@vegaprotocol/proposals';
 import {
   ExternalLink,
   Intent,
@@ -11,23 +8,33 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import * as Types from '@vegaprotocol/types';
 
 export const MarketSuccessorProposalBanner = ({
   marketId,
 }: {
   marketId?: string;
 }) => {
-  const { data: proposals } = useSuccessorProposalsListQuery({
+  const proposals = useMarketViewProposals({
     skip: !marketId,
+    inState: Types.ProposalState.STATE_OPEN,
+    proposalType: Types.ProposalType.TYPE_NEW_MARKET,
+    typename: 'NewMarket',
   });
+
   const successors =
-    proposals?.proposalsConnection?.edges
+    proposals?.filter((item) => {
-      ?.map((item) => item?.node as SuccessorProposalListFieldsFragment)
+      if (item.terms.change.__typename === 'NewMarket') {
-      .filter(
+        const newMarket = item.terms.change;
-        (item: SuccessorProposalListFieldsFragment) =>
+        if (
-          (item.terms?.change as NewMarketSuccessorFieldsFragment)
+          newMarket.successorConfiguration?.parentMarketId === marketId &&
-            ?.successorConfiguration?.parentMarketId === marketId
+          item.state === Types.ProposalState.STATE_OPEN
-      ) ?? [];
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }) ?? [];
   const [visible, setVisible] = useState(true);
   const tokenLink = useLinks(DApp.Governance);
   if (visible && successors.length) {

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

@@ -0,0 +1,111 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import * as Types from '@vegaprotocol/types';
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import type { MarketViewProposalsQuery } from '@vegaprotocol/proposals';
+import { MarketViewProposalsDocument } from '@vegaprotocol/proposals';
+import type { Market } from '@vegaprotocol/markets';
+import { MarketTerminationBanner } from './market-termination-banner';
+
+const marketMock = {
+  id: 'market-1',
+  decimalPlaces: 3,
+  tradableInstrument: {
+    instrument: {
+      product: {
+        __typename: 'Future',
+        quoteName: 'tDAI',
+      },
+    },
+  },
+} as Market;
+
+const proposalMock: MockedResponse<MarketViewProposalsQuery> = {
+  request: {
+    query: MarketViewProposalsDocument,
+    variables: { inState: Types.ProposalState.STATE_PASSED },
+  },
+  result: {
+    data: {
+      proposalsConnection: {
+        edges: [
+          {
+            node: {
+              id: 'first-id',
+              state: Types.ProposalState.STATE_PASSED,
+              terms: {
+                closingDatetime: '2023-09-27T11:48:18Z',
+                enactmentDatetime: '2023-09-30T11:48:18',
+                change: {
+                  __typename: 'UpdateMarketState',
+                  updateType:
+                    Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE,
+                  price: '',
+                  market: {
+                    id: 'market-1',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market one name',
+                        code: 'Market one',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            node: {
+              id: 'second-id',
+              state: Types.ProposalState.STATE_PASSED,
+              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-2',
+                    tradableInstrument: {
+                      instrument: {
+                        name: 'Market two name',
+                        code: 'Market two',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+const mocks: MockedResponse[] = [proposalMock];
+
+describe('MarketTerminationBanner', () => {
+  beforeAll(() => {
+    jest.useFakeTimers().setSystemTime(new Date('2023-09-28T10:10:10.000Z'));
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('should be properly rendered', async () => {
+    const { container } = render(
+      <MockedProvider mocks={mocks}>
+        <MarketTerminationBanner market={marketMock} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(container).not.toBeEmptyDOMElement();
+    });
+    expect(
+      screen.getByTestId('termination-warning-banner-market-1')
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { format, formatDuration, intervalToDuration } from 'date-fns';
+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';
+
+export const MarketTerminationBanner = ({
+  market,
+}: {
+  market: Market | null;
+}) => {
+  const [visible, setVisible] = useState(true);
+  const skip = !market || !visible;
+  const proposalsData = useMarketViewProposals({
+    skip,
+    inState: Types.ProposalState.STATE_PASSED,
+    typename: 'UpdateMarketState',
+  });
+
+  if (!market) return null;
+  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 enactmentDatetime = new Date(marketFound?.terms.enactmentDatetime);
+  const name =
+    marketFound?.terms.change.__typename === 'UpdateMarketState'
+      ? marketFound.terms.change.market.tradableInstrument.instrument.code
+      : '';
+
+  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, dayMonthDate])}
+        </div>
+        <div>
+          {t(
+            'You will no longer be able to hold a position on this market when it closes in %s.',
+            [formattedDuration]
+          )}{' '}
+          {price &&
+            assetSymbol &&
+            t('The final price will be %s %s.', [
+              addDecimalsFormatNumber(price, market.decimalPlaces),
+              assetSymbol,
+            ])}
+        </div>
+      </NotificationBanner>
+    );
+  }
+  return null;
+};

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

@@ -1,3 +1,17 @@
+fragment UpdateMarketStateFields on UpdateMarketState {
+  market {
+    id
+    tradableInstrument {
+      instrument {
+        name
+        code
+      }
+    }
+  }
+  updateType
+  price
+}
+
 fragment NewMarketFields on NewMarket {
   instrument {
     name
@@ -438,10 +452,17 @@ fragment NewMarketSuccessorFields on NewMarket {
   }
 }
 
-fragment SuccessorProposalListFields on Proposal {
+fragment MarketViewProposalFields on Proposal {
   id
+  state
   terms {
+    closingDatetime
+    enactmentDatetime
     change {
+      __typename
+      ... on UpdateMarketState {
+        ...UpdateMarketStateFields
+      }
       ... on NewMarket {
         ...NewMarketSuccessorFields
       }
@@ -449,12 +470,21 @@ fragment SuccessorProposalListFields on Proposal {
   }
 }
 
-query SuccessorProposalsList {
+query MarketViewProposals(
-  proposalsConnection(proposalType: TYPE_NEW_MARKET, inState: STATE_OPEN) {
+  $proposalType: ProposalType
+  $inState: ProposalState
+) {
+  proposalsConnection(proposalType: $proposalType, inState: $inState) {
     edges {
       node {
-        ...SuccessorProposalListFields
+        ...MarketViewProposalFields
       }
     }
   }
 }
+
+subscription MarketViewLiveProposals {
+  proposals {
+    ...MarketViewProposalFields
+  }
+}

libs/proposals/src/lib/proposals-data-provider/__generated__/Proposals.ts

@@ -3,6 +3,8 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
+export type UpdateMarketStateFieldsFragment = { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } } } };
+
 export type NewMarketFieldsFragment = { __typename?: 'NewMarket', decimalPlaces: number, metadata?: Array<string> | null, instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string }, dataSourceSpecForSettlementData: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', operator: Types.ConditionOperator, value?: string | null }> | null }> | null } | { __typename?: 'EthCallSpec' } } | { __typename?: 'DataSourceDefinitionInternal' } }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', operator: Types.ConditionOperator, value?: string | null }> | null }> | null } | { __typename?: 'EthCallSpec' } } | { __typename?: 'DataSourceDefinitionInternal' } }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecToFutureBinding', settlementDataProperty: string, tradingTerminationProperty: string } } | null }, riskParameters: { __typename?: 'LogNormalRiskModel', riskAversionParameter: number, tau: number, params: { __typename?: 'LogNormalModelParams', mu: number, r: number, sigma: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null };
 
 export type UpdateMarketFieldsFragment = { __typename?: 'UpdateMarket', marketId: string, updateMarketConfiguration: { __typename?: 'UpdateMarketConfiguration', metadata?: Array<string | null> | null, instrument: { __typename?: 'UpdateInstrumentConfiguration', code: string, product: { __typename?: 'UpdateFutureProduct', quoteName: string, dataSourceSpecForSettlementData: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', operator: Types.ConditionOperator, value?: string | null }> | null }> | null } | { __typename?: 'EthCallSpec' } } | { __typename?: 'DataSourceDefinitionInternal' } }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', operator: Types.ConditionOperator, value?: string | null }> | null }> | null } | { __typename?: 'EthCallSpec' } } | { __typename?: 'DataSourceDefinitionInternal' } }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecToFutureBinding', settlementDataProperty: string, tradingTerminationProperty: string } } | { __typename?: 'UpdatePerpetualProduct', quoteName: string, dataSourceSpecForSettlementData: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', operator: Types.ConditionOperator, value?: string | null }> | null }> | null } | { __typename?: 'EthCallSpec' } } | { __typename?: 'DataSourceDefinitionInternal' } }, dataSourceSpecForSettlementSchedule: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', operator: Types.ConditionOperator, value?: string | null }> | null }> | null } | { __typename?: 'EthCallSpec' } } | { __typename?: 'DataSourceDefinitionInternal' } }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecPerpetualBinding', settlementDataProperty: string, settlementScheduleProperty: string } } }, priceMonitoringParameters: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null }, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: string, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, riskParameters: { __typename: 'UpdateMarketLogNormalRiskModel', logNormal?: { __typename?: 'LogNormalRiskModel', riskAversionParameter: number, tau: number, params: { __typename?: 'LogNormalModelParams', mu: number, r: number, sigma: number } } | null } | { __typename: 'UpdateMarketSimpleRiskModel', simple?: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } | null } } };
@@ -29,12 +31,20 @@ export type ProposalsListQuery = { __typename?: 'Query', proposalsConnection?: {
 
 export type NewMarketSuccessorFieldsFragment = { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null };
 
-export type SuccessorProposalListFieldsFragment = { __typename?: 'Proposal', id?: string | null, terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
+export type MarketViewProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'CancelTransfer' } | { __typename: 'NewAsset' } | { __typename: 'NewFreeform' } | { __typename: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null } | { __typename: 'NewSpotMarket' } | { __typename: 'NewTransfer' } | { __typename: 'UpdateAsset' } | { __typename: 'UpdateMarket' } | { __typename: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } } } } | { __typename: 'UpdateNetworkParameter' } | { __typename: 'UpdateReferralProgram' } | { __typename: 'UpdateSpotMarket' } | { __typename: 'UpdateVolumeDiscountProgram' } } };
 
-export type SuccessorProposalsListQueryVariables = Types.Exact<{ [key: string]: never; }>;
+export type MarketViewProposalsQueryVariables = Types.Exact<{
+  proposalType?: Types.InputMaybe<Types.ProposalType>;
+  inState?: Types.InputMaybe<Types.ProposalState>;
+}>;
 
 
-export type SuccessorProposalsListQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } } } | null> | null } | null };
+export type MarketViewProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'CancelTransfer' } | { __typename: 'NewAsset' } | { __typename: 'NewFreeform' } | { __typename: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null } | { __typename: 'NewSpotMarket' } | { __typename: 'NewTransfer' } | { __typename: 'UpdateAsset' } | { __typename: 'UpdateMarket' } | { __typename: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } } } } | { __typename: 'UpdateNetworkParameter' } | { __typename: 'UpdateReferralProgram' } | { __typename: 'UpdateSpotMarket' } | { __typename: 'UpdateVolumeDiscountProgram' } } } } | null> | null } | null };
+
+export type MarketViewLiveProposalsSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type MarketViewLiveProposalsSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'CancelTransfer' } | { __typename: 'NewAsset' } | { __typename: 'NewFreeform' } | { __typename: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string }, successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string } | null } | { __typename: 'NewSpotMarket' } | { __typename: 'NewTransfer' } | { __typename: 'UpdateAsset' } | { __typename: 'UpdateMarket' } | { __typename: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } } } } | { __typename: 'UpdateNetworkParameter' } | { __typename: 'UpdateReferralProgram' } | { __typename: 'UpdateSpotMarket' } | { __typename: 'UpdateVolumeDiscountProgram' } } } };
 
 export const NewTransferFieldsFragmentDoc = gql`
     fragment NewTransferFields on NewTransfer {
@@ -451,6 +461,21 @@ ${UpdateMarketFieldsFragmentDoc}
 ${NewAssetFieldsFragmentDoc}
 ${UpdateAssetFieldsFragmentDoc}
 ${UpdateNetworkParameterFieldsFragmentDoc}`;
+export const UpdateMarketStateFieldsFragmentDoc = gql`
+    fragment UpdateMarketStateFields on UpdateMarketState {
+  market {
+    id
+    tradableInstrument {
+      instrument {
+        name
+        code
+      }
+    }
+  }
+  updateType
+  price
+}
+    `;
 export const NewMarketSuccessorFieldsFragmentDoc = gql`
     fragment NewMarketSuccessorFields on NewMarket {
   instrument {
@@ -461,18 +486,26 @@ export const NewMarketSuccessorFieldsFragmentDoc = gql`
   }
 }
     `;
-export const SuccessorProposalListFieldsFragmentDoc = gql`
+export const MarketViewProposalFieldsFragmentDoc = gql`
-    fragment SuccessorProposalListFields on Proposal {
+    fragment MarketViewProposalFields on Proposal {
   id
+  state
   terms {
+    closingDatetime
+    enactmentDatetime
     change {
+      __typename
+      ... on UpdateMarketState {
+        ...UpdateMarketStateFields
+      }
       ... on NewMarket {
         ...NewMarketSuccessorFields
       }
     }
   }
 }
-    ${NewMarketSuccessorFieldsFragmentDoc}`;
+    ${UpdateMarketStateFieldsFragmentDoc}
+${NewMarketSuccessorFieldsFragmentDoc}`;
 export const ProposalsListDocument = gql`
     query ProposalsList($proposalType: ProposalType, $inState: ProposalState) {
   proposalsConnection(proposalType: $proposalType, inState: $inState) {
@@ -513,41 +546,72 @@ export function useProposalsListLazyQuery(baseOptions?: Apollo.LazyQueryHookOpti
 export type ProposalsListQueryHookResult = ReturnType<typeof useProposalsListQuery>;
 export type ProposalsListLazyQueryHookResult = ReturnType<typeof useProposalsListLazyQuery>;
 export type ProposalsListQueryResult = Apollo.QueryResult<ProposalsListQuery, ProposalsListQueryVariables>;
-export const SuccessorProposalsListDocument = gql`
+export const MarketViewProposalsDocument = gql`
-    query SuccessorProposalsList {
+    query MarketViewProposals($proposalType: ProposalType, $inState: ProposalState) {
-  proposalsConnection(proposalType: TYPE_NEW_MARKET, inState: STATE_OPEN) {
+  proposalsConnection(proposalType: $proposalType, inState: $inState) {
     edges {
       node {
-        ...SuccessorProposalListFields
+        ...MarketViewProposalFields
       }
     }
   }
 }
-    ${SuccessorProposalListFieldsFragmentDoc}`;
+    ${MarketViewProposalFieldsFragmentDoc}`;
 
 /**
- * __useSuccessorProposalsListQuery__
+ * __useMarketViewProposalsQuery__
  *
- * To run a query within a React component, call `useSuccessorProposalsListQuery` and pass it any options that fit your needs.
+ * To run a query within a React component, call `useMarketViewProposalsQuery` and pass it any options that fit your needs.
- * When your component renders, `useSuccessorProposalsListQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * When your component renders, `useMarketViewProposalsQuery` 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 } = useSuccessorProposalsListQuery({
+ * const { data, loading, error } = useMarketViewProposalsQuery({
+ *   variables: {
+ *      proposalType: // value for 'proposalType'
+ *      inState: // value for 'inState'
+ *   },
+ * });
+ */
+export function useMarketViewProposalsQuery(baseOptions?: Apollo.QueryHookOptions<MarketViewProposalsQuery, MarketViewProposalsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketViewProposalsQuery, MarketViewProposalsQueryVariables>(MarketViewProposalsDocument, options);
+      }
+export function useMarketViewProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketViewProposalsQuery, MarketViewProposalsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketViewProposalsQuery, MarketViewProposalsQueryVariables>(MarketViewProposalsDocument, options);
+        }
+export type MarketViewProposalsQueryHookResult = ReturnType<typeof useMarketViewProposalsQuery>;
+export type MarketViewProposalsLazyQueryHookResult = ReturnType<typeof useMarketViewProposalsLazyQuery>;
+export type MarketViewProposalsQueryResult = Apollo.QueryResult<MarketViewProposalsQuery, MarketViewProposalsQueryVariables>;
+export const MarketViewLiveProposalsDocument = gql`
+    subscription MarketViewLiveProposals {
+  proposals {
+    ...MarketViewProposalFields
+  }
+}
+    ${MarketViewProposalFieldsFragmentDoc}`;
+
+/**
+ * __useMarketViewLiveProposalsSubscription__
+ *
+ * To run a query within a React component, call `useMarketViewLiveProposalsSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useMarketViewLiveProposalsSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketViewLiveProposalsSubscription({
  *   variables: {
  *   },
  * });
  */
-export function useSuccessorProposalsListQuery(baseOptions?: Apollo.QueryHookOptions<SuccessorProposalsListQuery, SuccessorProposalsListQueryVariables>) {
+export function useMarketViewLiveProposalsSubscription(baseOptions?: Apollo.SubscriptionHookOptions<MarketViewLiveProposalsSubscription, MarketViewLiveProposalsSubscriptionVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<SuccessorProposalsListQuery, SuccessorProposalsListQueryVariables>(SuccessorProposalsListDocument, options);
+        return Apollo.useSubscription<MarketViewLiveProposalsSubscription, MarketViewLiveProposalsSubscriptionVariables>(MarketViewLiveProposalsDocument, options);
       }
-export function useSuccessorProposalsListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SuccessorProposalsListQuery, SuccessorProposalsListQueryVariables>) {
+export type MarketViewLiveProposalsSubscriptionHookResult = ReturnType<typeof useMarketViewLiveProposalsSubscription>;
-          const options = {...defaultOptions, ...baseOptions}
+export type MarketViewLiveProposalsSubscriptionResult = Apollo.SubscriptionResult<MarketViewLiveProposalsSubscription>;
-          return Apollo.useLazyQuery<SuccessorProposalsListQuery, SuccessorProposalsListQueryVariables>(SuccessorProposalsListDocument, options);
-        }
-export type SuccessorProposalsListQueryHookResult = ReturnType<typeof useSuccessorProposalsListQuery>;
-export type SuccessorProposalsListLazyQueryHookResult = ReturnType<typeof useSuccessorProposalsListLazyQuery>;
-export type SuccessorProposalsListQueryResult = Apollo.QueryResult<SuccessorProposalsListQuery, SuccessorProposalsListQueryVariables>;

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

@@ -1,10 +1,20 @@
 import { makeDataProvider } from '@vegaprotocol/data-provider';
+import produce from 'immer';
 import type {
   ProposalsListQuery,
   ProposalsListQueryVariables,
   ProposalListFieldsFragment,
+  MarketViewLiveProposalsSubscription,
+  MarketViewProposalFieldsFragment,
+  MarketViewProposalsQuery,
+  MarketViewProposalsQueryVariables,
 } from './__generated__/Proposals';
-import { ProposalsListDocument } from './__generated__/Proposals';
+import {
+  MarketViewLiveProposalsDocument,
+  MarketViewProposalsDocument,
+  ProposalsListDocument,
+} from './__generated__/Proposals';
+import { removePaginationWrapper } from '@vegaprotocol/utils';
 
 const getData = (responseData: ProposalsListQuery | null) =>
   responseData?.proposalsConnection?.edges
@@ -31,3 +41,42 @@ export const proposalsDataProvider = makeDataProvider<
   errorPolicyGuard: (errors) =>
     errors.every((e) => e.message.match(/failed to get asset for ID/)),
 });
+
+const update = (
+  data: MarketViewProposalFieldsFragment[] | null,
+  delta: MarketViewProposalFieldsFragment
+) => {
+  const updateData = produce(data || [], (draft) => {
+    const { id } = delta;
+    const index = draft.findIndex((item) => item.id === id);
+    if (index === -1) {
+      draft.unshift(delta);
+    } else {
+      const currNode = draft[index];
+      draft[index] = {
+        ...currNode,
+        ...delta,
+      };
+    }
+  });
+  return updateData;
+};
+
+const getMarketProposalsData = (
+  responseData: MarketViewProposalsQuery | null
+) => removePaginationWrapper(responseData?.proposalsConnection?.edges) || [];
+
+export const marketViewProposalsDataProvider = makeDataProvider<
+  MarketViewProposalsQuery,
+  MarketViewProposalFieldsFragment[],
+  MarketViewLiveProposalsSubscription,
+  MarketViewProposalFieldsFragment,
+  MarketViewProposalsQueryVariables
+>({
+  query: MarketViewProposalsDocument,
+  subscriptionQuery: MarketViewLiveProposalsDocument,
+  update,
+  getDelta: (subscriptionData: MarketViewLiveProposalsSubscription) =>
+    subscriptionData.proposals,
+  getData: getMarketProposalsData,
+});

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

specs/6002-MDET-market-details.md

@@ -128,7 +128,7 @@ When I look into market info I **Must** see following governance information:
 
   When I look at the succession line list I **Should** easily distinguish which market is the currently viewed market so I can see the ancestor-descendant relations between the current and other markets on the list.
 
-## Market successor
+## Market successor & warning for termination
 
 When I'm tranding on the market, I **Must** see there are:
 
@@ -139,3 +139,8 @@ When I'm tranding on the market, I **Must** see there are:
 - Proposal for the market successor : (<a name="6002-MDET-402" href="#6002-MDET-402">6002-MDET-402</a>)
   - link to governance proposal
   - name of the proposed market
+- Enacted proposal for the market termination: (<a name="6002-MDET-403" href="#6002-MDET-403">6002-MDET-403</a>)
+  - I should be informed immediately when a close market proposal for a market I have a position in is successful
+  - I can tell how much time remains before the market will close and/or the exact time of closure
+  - I can tell what the final price will be at the time of closing
+  - The notification is showed regardless of market type