chore: add market update and market updates state banner content

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

@@ -1,10 +1,6 @@
 import compact from 'lodash/compact';
-import { type Proposal, ProposalState, MarketState } from '@vegaprotocol/types';
-import {
-  ExternalLink,
-  Intent,
-  NotificationBanner,
-} from '@vegaprotocol/ui-toolkit';
+import { type Proposal, type ProposalState, MarketState } from '@vegaprotocol/types';
+import { Intent, NotificationBanner } from '@vegaprotocol/ui-toolkit';
 import {
   useSuccessorMarket,
   useMarketState,
@@ -12,9 +8,10 @@ import {
   type Market,
 } from '@vegaprotocol/markets';
 import { useState } from 'react';
-import { Trans } from 'react-i18next';
 import { useMarketProposals } from '@vegaprotocol/proposals';
 import { MarketSuspendedBanner } from './market-suspended-banner';
+import { MarketUpdateBanner } from './market-update-banner';
+import { MarketUpdateStateBanner } from './market-update-state-banner';
 
 type UpdateMarketBanner = {
   kind: 'UpdateMarket';
@@ -87,7 +84,7 @@ export const MarketBanner = ({ marketId }: { marketId: string }) => {
   const { data: marketState } = useMarketState(marketId);
 
   const { proposals: openProposals, loading: openLoading } =
-    useProposalsForMarket(marketId, ProposalState.STATE_OPEN);
+    useProposalsForMarket(marketId);
 
   // eslint-disable-next-line
   const { data: successorData, loading: successorLoading } =
@@ -133,23 +130,11 @@ const NotificationQueue = ({ notifications }: { notifications: Banner[] }) => {
 
     switch (n.kind) {
       case 'UpdateMarket': {
-        content = (
-          <p data-testid="market-proposal-notification">
-            <Trans
-              i18nKey="Changes have been proposed for this market. <0>View proposals</0>"
-              components={[
-                // TODO: Fix link
-                <ExternalLink key="view-link" href={'https://google.com'}>
-                  View proposals
-                </ExternalLink>,
-              ]}
-            />
-          </p>
-        );
+        content = <MarketUpdateBanner proposal={n.data} />;
         break;
       }
       case 'UpdateMarketState': {
-        content = <p>UpdateMarketState</p>;
+        content = <MarketUpdateStateBanner proposal={n.data} />;
         break;
       }
       case 'NewMarket': {

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

@@ -0,0 +1,24 @@
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { Trans } from 'react-i18next';
+
+export const MarketUpdateBanner = ({
+  proposal,
+}: {
+  proposal: { id: string };
+}) => {
+  const tokenLink = useLinks(DApp.Governance);
+  const proposalLink = tokenLink(TOKEN_PROPOSAL.replace(':id', proposal.id));
+  return (
+    <p data-testid="market-proposal-notification">
+      <Trans
+        i18nKey="Changes have been proposed for this market. <0>View proposals</0>"
+        components={[
+          <ExternalLink key="view-link" href={proposalLink}>
+            View proposals
+          </ExternalLink>,
+        ]}
+      />
+    </p>
+  );
+};

apps/trading/components/market-banner/market-update-state-banner.tsx

@@ -0,0 +1,7 @@
+export const MarketUpdateStateBanner = ({
+  proposal,
+}: {
+  proposal: { id: string };
+}) => {
+  return <p>Market may or may not close with price X at Y time</p>;
+};

libs/i18n/src/locales/en/trading.json

@@ -28,6 +28,7 @@
   "By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>": "By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>",
   "Chart": "Chart",
   "Change (24h)": "Change (24h)",
+  "Changes have been proposed for this market. <0>View proposals</0>": "Changes have been proposed for this market. <0>View proposals</0>",
   "Chart": "Chart",
   "Chart by <0>TradingView</0>": "Chart by <0>TradingView</0>",
   "checkOutProposalsAndVote": "Check out the terms of the proposals and vote:",