feat(trading): add market successor proposal banner (#4401)

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

@@ -17,7 +17,10 @@ import {
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
-import { MarketSuccessorBanner } from '../../components/market-banner';
+import {
+  MarketSuccessorBanner,
+  MarketSuccessorProposalBanner,
+} from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradeGridProps {
@@ -162,7 +165,12 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && <MarketSuccessorBanner market={market} />}
+        {FLAGS.SUCCESSOR_MARKETS && (
+          <>
+            <MarketSuccessorBanner market={market} />
+            <MarketSuccessorProposalBanner marketId={market?.id} />
+          </>
+        )}
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="min-h-0 p-0.5">

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

@@ -12,7 +12,10 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { MarketSuccessorBanner } from '../../components/market-banner';
+import {
+  MarketSuccessorBanner,
+  MarketSuccessorProposalBanner,
+} from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
@@ -65,7 +68,12 @@ export const TradePanels = ({
   return (
     <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && <MarketSuccessorBanner market={market} />}
+        {FLAGS.SUCCESSOR_MARKETS && (
+          <>
+            <MarketSuccessorBanner market={market} />
+            <MarketSuccessorProposalBanner marketId={market?.id} />
+          </>
+        )}
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="h-full">

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

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

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

@@ -0,0 +1,155 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+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 { SuccessorProposalsListDocument } from '@vegaprotocol/proposals';
+
+const marketProposalMock: MockedResponse<SuccessorProposalsListQuery> = {
+  request: {
+    query: SuccessorProposalsListDocument,
+  },
+  result: {
+    data: {
+      proposalsConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'Proposal',
+              id: 'proposal-1',
+              terms: {
+                __typename: 'ProposalTerms',
+                change: {
+                  __typename: 'NewMarket',
+                  instrument: {
+                    name: 'New proposal of the market successor',
+                  },
+                  successorConfiguration: {
+                    parentMarketId: 'marketId',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+describe('MarketSuccessorProposalBanner', () => {
+  it('should display single proposal', async () => {
+    render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('A successors to this market has been proposed')
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen
+        .getByRole('link')
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-1') ?? false
+    ).toBe(true);
+  });
+  it('should display plural proposals', async () => {
+    const dualProposalMock = {
+      ...marketProposalMock,
+      result: {
+        ...marketProposalMock.result,
+        data: {
+          proposalsConnection: {
+            edges: [
+              ...((
+                marketProposalMock?.result as SingleExecutionResult<SuccessorProposalsListQuery>
+              )?.data?.proposalsConnection?.edges ?? []),
+              {
+                node: {
+                  __typename: 'Proposal',
+                  id: 'proposal-2',
+                  terms: {
+                    __typename: 'ProposalTerms',
+                    change: {
+                      __typename: 'NewMarket',
+                      instrument: {
+                        name: 'New second proposal of the market successor',
+                      },
+                      successorConfiguration: {
+                        parentMarketId: 'marketId',
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    };
+
+    render(
+      <MockedProvider mocks={[dualProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('Successors to this market have been proposed')
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen
+        .getAllByRole('link')[0]
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-1') ?? false
+    ).toBe(true);
+    expect(
+      screen
+        .getAllByRole('link')[1]
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-2') ?? false
+    ).toBe(true);
+  });
+
+  it('banner should be hidden because no proposals', () => {
+    const { container } = render(
+      <MockedProvider>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('banner should be hidden because no proposals for the market', () => {
+    const { container } = render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="otherMarketId" />
+      </MockedProvider>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('banner should be hidden after user close click', async () => {
+    const { container } = render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('A successors to this market has been proposed')
+      ).toBeInTheDocument();
+    });
+    await act(() => {
+      screen.getByTestId('notification-banner-close').click();
+    });
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import type {
+  SuccessorProposalListFieldsFragment,
+  NewMarketSuccessorFieldsFragment,
+} from '@vegaprotocol/proposals';
+import { useSuccessorProposalsListQuery } from '@vegaprotocol/proposals';
+import {
+  ExternalLink,
+  Intent,
+  NotificationBanner,
+} from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+
+export const MarketSuccessorProposalBanner = ({
+  marketId,
+}: {
+  marketId?: string;
+}) => {
+  const { data: proposals } = useSuccessorProposalsListQuery({
+    skip: !marketId,
+  });
+  const successors =
+    proposals?.proposalsConnection?.edges
+      ?.map((item) => item?.node as SuccessorProposalListFieldsFragment)
+      .filter(
+        (item: SuccessorProposalListFieldsFragment) =>
+          (item.terms?.change as NewMarketSuccessorFieldsFragment)
+            ?.successorConfiguration?.parentMarketId === marketId
+      ) ?? [];
+  const [visible, setVisible] = useState(true);
+  const tokenLink = useLinks(DApp.Token);
+  if (visible && successors.length) {
+    return (
+      <NotificationBanner
+        intent={Intent.Primary}
+        onClose={() => {
+          setVisible(false);
+        }}
+      >
+        <div className="uppercase mb-1">
+          {successors.length === 1
+            ? t('A successors to this market has been proposed')
+            : t('Successors to this market have been proposed')}
+        </div>
+        <div>
+          {successors.length === 1
+            ? t('Check out the terms of the proposal and vote:')
+            : t('Check out the terms of the proposals and vote:')}{' '}
+          {successors.map((item, i) => {
+            const externalLink = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', item.id || '')
+            );
+            return (
+              <>
+                <ExternalLink href={externalLink} key={i}>
+                  {
+                    (item.terms?.change as NewMarketSuccessorFieldsFragment)
+                      ?.instrument.name
+                  }
+                </ExternalLink>
+                {i < successors.length - 1 && ', '}
+              </>
+            );
+          })}
+        </div>
+      </NotificationBanner>
+    );
+  }
+  return null;
+};

libs/datagrid/src/lib/cells/centered-grid-cell.tsx

@@ -11,6 +11,6 @@ export const CenteredGridCellWrapper = ({
   <div
     className={classNames('flex h-[20px] p-0 justify-items-center', className)}
   >
-    <div className="self-center">{children}</div>
+    <div className="w-full self-center">{children}</div>
   </div>
 );

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

@@ -183,4 +183,4 @@ export function useSuccessorMarketLazyQuery(baseOptions?: Apollo.LazyQueryHookOp
         }
 export type SuccessorMarketQueryHookResult = ReturnType<typeof useSuccessorMarketQuery>;
 export type SuccessorMarketLazyQueryHookResult = ReturnType<typeof useSuccessorMarketLazyQuery>;
-export type SuccessorMarketQueryResult = Apollo.QueryResult<SuccessorMarketQuery, SuccessorMarketQueryVariables>;
+export type SuccessorMarketQueryResult = Apollo.QueryResult<SuccessorMarketQuery, SuccessorMarketQueryVariables>;

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

@@ -1,7 +1,12 @@
 import { useMemo } from 'react';
 import BigNumber from 'bignumber.js';
 import type { ColDef } from 'ag-grid-community';
-import { COL_DEFS, DateRangeFilter, SetFilter } from '@vegaprotocol/datagrid';
+import {
+  CenteredGridCellWrapper,
+  COL_DEFS,
+  DateRangeFilter,
+  SetFilter,
+} from '@vegaprotocol/datagrid';
 import compact from 'lodash/compact';
 import { useEnvironment, FLAGS } from '@vegaprotocol/environment';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
@@ -31,7 +36,6 @@ export const useColumnDefs = () => {
     return new BigNumber(requiredMajority).times(100);
   }, [params?.governance_proposal_market_requiredMajority]);
 
-  const cellCss = 'grid h-full items-center';
   const columnDefs: ColDef[] = useMemo(() => {
     return compact([
       {
@@ -94,7 +98,6 @@ export const useColumnDefs = () => {
       {
         colId: 'voting',
         headerName: t('Voting'),
-        cellClass: 'flex justify-between leading-tight font-mono',
         cellRenderer: ({
           data,
         }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
@@ -106,12 +109,12 @@ export const useColumnDefs = () => {
               ? new BigNumber(0)
               : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
             return (
-              <div className="uppercase flex h-full items-center justify-center">
+              <CenteredGridCellWrapper>
                 <VoteProgress
                   threshold={requiredMajorityPercentage}
                   progress={yesPercentage}
                 />
-              </div>
+              </CenteredGridCellWrapper>
             );
           }
           return '-';
@@ -160,7 +163,6 @@ export const useColumnDefs = () => {
   const defaultColDef: ColDef = useMemo(() => {
     return {
       sortable: true,
-      cellClass: cellCss,
       resizable: true,
       filter: true,
       filterParams: { buttons: ['reset'] },

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

@@ -327,3 +327,33 @@ query ProposalsList($proposalType: ProposalType, $inState: ProposalState) {
     }
   }
 }
+
+fragment NewMarketSuccessorFields on NewMarket {
+  instrument {
+    name
+  }
+  successorConfiguration {
+    parentMarketId
+  }
+}
+
+fragment SuccessorProposalListFields on Proposal {
+  id
+  terms {
+    change {
+      ... on NewMarket {
+        ...NewMarketSuccessorFields
+      }
+    }
+  }
+}
+
+query SuccessorProposalsList {
+  proposalsConnection(proposalType: TYPE_NEW_MARKET, inState: STATE_OPEN) {
+    edges {
+      node {
+        ...SuccessorProposalListFields
+      }
+    }
+  }
+}