fix(governance): fix market info not showing in proposals (#6104)

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

@@ -47,7 +47,7 @@ export const SubHeading = ({
 
   return (
     <h2
-      className={classNames('text-2xl font-alpha calt uppercase break-words', {
+      className={classNames('text-2xl font-alpha calt break-words', {
         'mx-auto': centerContent,
         'mb-0': !marginBottom,
         'mb-4': marginBottom,

apps/governance/src/routes/proposals/components/proposal-market-data/proposal-market-data.tsx

@@ -50,7 +50,7 @@ export const useMarketDataDialogStore = create<MarketDataDialogState>(
 const marketDataHeaderStyles =
   'font-alpha calt text-base border-b border-vega-dark-200 mt-2 py-2';
 
-export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
+export const ProposalMarketData = ({ marketId }: { marketId: string }) => {
   const { t } = useTranslation();
   const { isOpen, open, close } = useMarketDataDialogStore();
   const [showDetails, setShowDetails] = useState(false);
@@ -59,7 +59,7 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
     dataProvider: marketInfoProvider,
     skipUpdates: true,
     variables: {
-      marketId: proposalId,
+      marketId: marketId,
     },
   });
 
@@ -72,7 +72,7 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
     },
   });
 
-  if (!marketData || !parentMarketData) {
+  if (!marketData) {
     return null;
   }
 
@@ -134,13 +134,13 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
             <h2 className={marketDataHeaderStyles}>{t('Key details')}</h2>
             <KeyDetailsInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData ? parentMarketData : undefined}
             />
 
             <h2 className={marketDataHeaderStyles}>{t('Instrument')}</h2>
             <InstrumentInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData ? parentMarketData : undefined}
             />
 
             {settlementData &&
@@ -156,7 +156,7 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
                     isParentSettlementDataEqual ||
                     isParentSettlementScheduleDataEqual
                       ? undefined
-                      : parentMarketData
+                      : parentMarketData || undefined
                   }
                 />
               </>
@@ -169,7 +169,9 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
                   market={marketData}
                   type="settlementData"
                   parentMarket={
-                    isParentSettlementDataEqual ? undefined : parentMarketData
+                    isParentSettlementDataEqual
+                      ? undefined
+                      : parentMarketData || undefined
                   }
                 />
 
@@ -185,7 +187,7 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
                       parentMarket={
                         isParentTerminationDataEqual
                           ? undefined
-                          : parentMarketData
+                          : parentMarketData || undefined
                       }
                     />
                   </div>
@@ -203,7 +205,7 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
                       parentMarket={
                         isParentSettlementScheduleDataEqual
                           ? undefined
-                          : parentMarketData
+                          : parentMarketData || undefined
                       }
                     />
                   </div>
@@ -217,19 +219,19 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
             <h2 className={marketDataHeaderStyles}>{t('Settlement assets')}</h2>
             <SettlementAssetInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
 
             <h2 className={marketDataHeaderStyles}>{t('Metadata')}</h2>
             <MetadataInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
 
             <h2 className={marketDataHeaderStyles}>{t('Risk model')}</h2>
             <RiskModelInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
 
             <h2 className={marketDataHeaderStyles}>
@@ -237,13 +239,13 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
             </h2>
             <MarginScalingFactorsPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
 
             <h2 className={marketDataHeaderStyles}>{t('Risk factors')}</h2>
             <RiskFactorsInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
 
             {showParentPriceMonitoringBounds && (
@@ -268,14 +270,14 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
             </h2>
             <LiquidityMonitoringParametersInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
             <h2 className={marketDataHeaderStyles}>
               {t('Liquidity price range')}
             </h2>
             <LiquidityPriceRangeInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
 
             <h2 className={marketDataHeaderStyles}>
@@ -283,7 +285,7 @@ export const ProposalMarketData = ({ proposalId }: { proposalId: string }) => {
             </h2>
             <LiquiditySLAParametersInfoPanel
               market={marketData}
-              parentMarket={parentMarketData}
+              parentMarket={parentMarketData || undefined}
             />
           </div>
         </>

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

@@ -17,17 +17,20 @@ import { type ProposalNode } from './proposal-utils';
 import { Lozenge } from '@vegaprotocol/ui-toolkit';
 import { Indicator } from './indicator';
 import { SubHeading } from '../../../../components/heading';
+import { determineId } from '@vegaprotocol/wallet';
 
 export const ProposalChangeDetails = ({
   proposal,
   terms,
   restData,
   indicator,
+  termsCount = 0,
 }: {
   proposal: Proposal | BatchProposal;
   terms: ProposalTermsFieldsFragment;
   restData: ProposalNode | null;
   indicator?: number;
+  termsCount?: number;
 }) => {
   const { t } = useTranslation();
   let details = null;
@@ -61,7 +64,18 @@ export const ProposalChangeDetails = ({
     }
     case 'NewMarket': {
       if (proposal.id) {
-        details = <ProposalMarketData proposalId={proposal.id} />;
+        let marketId = proposal.id;
+
+        // TODO: when https://github.com/vegaprotocol/vega/issues/11005 gets merged
+        // this will need to be updated to loop forward from 0. Right now subProposals
+        // are returned (when using GQL) in the reverse order
+        if (proposal.__typename === 'BatchProposal') {
+          for (let i = termsCount - 1; i >= 0; i--) {
+            marketId = determineId(marketId);
+          }
+        }
+
+        details = <ProposalMarketData marketId={marketId} />;
       }
       break;
     }
@@ -69,7 +83,7 @@ export const ProposalChangeDetails = ({
       if (proposal.id) {
         details = (
           <div className="flex flex-col gap-4">
-            <ProposalMarketData proposalId={proposal.id} />
+            <ProposalMarketData marketId={proposal.id} />
             <ProposalMarketChanges
               indicator={indicator}
               marketId={terms.change.marketId}

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

@@ -78,6 +78,7 @@ export const Proposal = ({ proposal, restData }: ProposalProps) => {
                 proposal={proposal}
                 terms={p.terms}
                 restData={restData}
+                termsCount={proposal.subProposals?.length}
               />
             );
           })

apps/governance/src/styles.css

@@ -13,7 +13,7 @@
   }
 
   h1 {
-    @apply text-2xl text-white uppercase mb-4;
+    @apply text-2xl text-white mb-4;
   }
   h2 {
     @apply text-xl text-white mb-4;