feat(governance): show multisig penalty in tooltip (#4140)

apps/governance-e2e/src/integration/view/validators.cy.ts

@@ -30,7 +30,6 @@ const normalisedVotingPowerToolTip =
   '[data-testid="normalised-voting-power-tooltip"]';
 const performancePenaltyToolTip = '[data-testid="performance-penalty-tooltip"]';
 const overstakedPenaltyToolTip = '[data-testid="overstaked-penalty-tooltip"]';
-const totalPenaltyToolTip = '[data-testid="total-penalty-tooltip"]';
 const epochCountDown = '[data-testid="epoch-countdown"]';
 const stakeNumberRegex = /^\d{1,3}(,\d{3})*(\.\d+)?$/;
 
@@ -143,9 +142,6 @@ context('Validators Page - verify elements on page', function () {
         cy.get(overstakedPenaltyToolTip)
           .invoke('text')
           .should('contain', 'Overstaked penalty: 60.00%'); // value not asserted due to #2886
-        cy.get(totalPenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Total penalties: 60.00%');
       });
 
       it('Should be able to see validator pending stake', function () {

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

@@ -786,6 +786,7 @@
   "performancePenalty": "Performance penalty",
   "overstaked": "Overstaked",
   "overstakedPenalty": "Overstaked penalty",
+  "multisigPenalty": "Multisig penalty",
   "homeProposalsIntro": "Decisions on the Vega network are on-chain, with tokenholders creating proposals that other tokenholders vote to approve or reject. Network upgrades are proposed and approved by validators.",
   "homeProposalsButtonText": "Browse, vote, and propose",
   "homeValidatorsIntro": "Vega runs on a delegated proof of stake blockchain, where validators earn fees for validating block transactions. Tokenholders can nominate validators by staking tokens to them.",

apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -36,6 +36,7 @@ import {
   toBigNum,
 } from '@vegaprotocol/utils';
 import { VALIDATOR_LOGO_MAP } from './logo-map';
+import { getMultisigStatusInfo } from '../../../../lib/get-multisig-status-info';
 
 interface CanonisedConsensusNodeProps {
   id: string;
@@ -137,6 +138,10 @@ export const ConsensusValidatorsTable = ({
     [totalStake]
   );
 
+  const multisigStatus = previousEpochData
+    ? getMultisigStatusInfo(previousEpochData)
+    : undefined;
+
   const allNodesInPreviousEpoch = removePaginationWrapper(
     previousEpochData?.epoch.validatorsConnection?.edges
   );
@@ -223,6 +228,8 @@ export const ConsensusValidatorsTable = ({
             [ValidatorFields.USER_STAKE_SHARE]: userStakeShare
               ? formatNumberPercentage(new BigNumber(userStakeShare), 2)
               : undefined,
+            [ValidatorFields.MULTISIG_ERROR]:
+              multisigStatus?.showMultisigStatusError,
           };
         }
       );
@@ -332,6 +339,7 @@ export const ConsensusValidatorsTable = ({
     data,
     decimals,
     hideTopThird,
+    multisigStatus?.showMultisigStatusError,
     previousEpochData,
     thirdOfTotalStake,
     validatorsView,

apps/governance/src/routes/staking/home/validator-tables/shared.tsx

@@ -39,6 +39,7 @@ export enum ValidatorFields {
   STAKED_BY_USER = 'stakedByUser',
   PENDING_USER_STAKE = 'pendingUserStake',
   USER_STAKE_SHARE = 'userStakeShare',
+  MULTISIG_ERROR = 'multisigError',
 }
 
 export const addUserDataToValidator = (
@@ -326,6 +327,7 @@ interface TotalPenaltiesRendererProps {
     overstakedAmount: string;
     overstakingPenalty: string;
     totalPenalties: string;
+    multisigError?: boolean;
   };
 }
 
@@ -344,10 +346,11 @@ export const TotalPenaltiesRenderer = ({
           <div data-testid="overstaked-penalty-tooltip">
             {t('overstakedPenalty')}: {data.overstakingPenalty}
           </div>
-          <div data-testid="total-penalty-tooltip">
-            {t('totalPenalties')}:{' '}
-            <span className="font-bold">{data.totalPenalties}</span>
-          </div>
+          {data.multisigError && (
+            <div data-testid="multisig-error-tooltip">
+              {t('multisigPenalty')}: 100%
+            </div>
+          )}
         </>
       }
     >

libs/ui-toolkit/src/components/tooltip/tooltip.tsx

@@ -10,7 +10,7 @@ import {
 import type { ITooltipParams } from 'ag-grid-community';
 
 const tooltipContentClasses =
-  'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs break-word';
+  'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs text-black dark:text-white break-word';
 export interface TooltipProps {
   children: React.ReactElement;
   description?: string | ReactNode;