fix: status text displayed when proposal is waiting for queuing (#3746)

.changeset/polite-rockets-decide.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+update status text displayed when proposal is waiting for queuing

apps/evm/src/__mocks__/models/proposals.ts

@@ -215,6 +215,7 @@ export const proposals: Proposal[] = [
     },
     endBlock: 33337008,
     endDate: new Date('2023-09-14T16:11:35.000Z'),
+    executionEtaDate: new Date('2023-12-14T16:11:35.000Z'),
     forVotesMantissa: new BigNumber('605461000000000000000000'),
     proposalId: 93,
     proposerAddress: '0x6eace20e1f89d0b24e5b295af1802dfbc730b37d',
@@ -237,4 +238,41 @@ export const proposals: Proposal[] = [
     proposalType: 0,
     remoteProposals,
   },
+  {
+    abstainedVotesMantissa: new BigNumber('0'),
+    againstVotesMantissa: new BigNumber('0'),
+    createdDate: new Date('2023-09-14T15:56:35.000Z'),
+    description: {
+      version: 'v2',
+      title: '123',
+      description: '123',
+      forDescription: 'Ok',
+      againstDescription: 'No',
+      abstainDescription: 'Meh',
+    },
+    endBlock: 33337008,
+    endDate: new Date('2023-09-14T16:11:35.000Z'),
+    forVotesMantissa: new BigNumber('605461000000000000000000'),
+    proposalId: 92,
+    proposerAddress: '0x6eace20e1f89d0b24e5b295af1802dfbc730b37d',
+    startDate: new Date('2023-09-14T16:04:05.000Z'),
+    state: ProposalState.Queued,
+    executionEtaDate: new Date('2023-09-14T16:11:35.000Z'),
+    createdTxHash: '0xd016993b6b81bfbc5e6070edd88106809ebb0b7b58e67d33b526d027c1f5f076',
+    totalVotesMantissa: new BigNumber('605461000000000000000000'),
+    proposalActions: [],
+    forVotes: [
+      {
+        proposalId: 92,
+        address: '0x2ce1d0ffd7e869d9df33e28552b12ddded326706',
+        support: 1,
+        votesMantissa: new BigNumber('605461000000000000000000'),
+        reason: '',
+      },
+    ],
+    againstVotes: [],
+    abstainVotes: [],
+    proposalType: 0,
+    remoteProposals,
+  },
 ];

apps/evm/src/libs/translations/translations/en.json

@@ -308,19 +308,17 @@
   },
   "interactive": {
     "addToWallet": {
-      "modalTitle": "Add token to wallet",
-      "tooltip": "Add token to wallet"
+      "modalTitle": "Add token to wallet"
     },
     "copy": {
       "address": {
-        "name": "Address",
         "modalTitle": "Copy token address",
+        "name": "Address",
         "tooltip": "Copy Address"
       }
     },
     "copyToClipboard": "{{name}} copied to clipboard",
     "goTo": {
-      "contract": "{{symbol}} contract",
       "modalTitle": "Go to token contract"
     }
   },
@@ -376,10 +374,6 @@
     },
     "testEnvWarning": "This is a test environment. Do not interact with it for any purpose other than testing. <Link>Go to the official Venus Protocol website</Link>"
   },
-  "legacyPool": {
-    "description": "Venus’ primary pool is composed of large-cap tokens that meet minimum liquidity requirements.",
-    "name": "Core Pool"
-  },
   "markdownEditor": {
     "markdownTabLabel": "Write",
     "placeholder": "Nothing to preview",
@@ -700,7 +694,6 @@
     "active": "Active",
     "bridged": "Bridged",
     "canceled": "Canceled",
-    "created": "Created",
     "defeated": "Defeated",
     "executed": "Executed",
     "expired": "Expired",
@@ -1122,7 +1115,6 @@
   },
   "voteProposalUi": {
     "activeUntilDate": "Active until: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
-    "cancelButtonLabel": "Cancel",
     "canceledDate": "Canceled: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
     "command": {
       "actionButton": {
@@ -1167,14 +1159,11 @@
     },
     "defeatedDate": "Defeated: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
     "description": "Description",
-    "executeButtonLabel": "Execute",
     "executedDate": "Executed: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
     "expiredDate": "Expired: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
     "greenPulseAnimation": {
       "altText": "Green pulse animation"
     },
-    "operation": "Operation",
-    "proposalHistory": "Proposal History",
     "proposalState": {
       "activeTimestamp": "Active since: <Span>{{date, dd MMM yyyy HH:mm}}</Span>",
       "canceledTimestamp": "Canceled: <Span>{{date, dd MMM yyyy HH:mm}}</Span>",
@@ -1184,18 +1173,16 @@
       "queuedTimestamp": "Queued: <Span>{{date, dd MMM yyyy HH:mm}}</Span>",
       "succeededTimestamp": "Succeeded: <Span>{{date, dd MMM yyyy HH:mm}}</Span>"
     },
-    "queueButtonLabel": "Queue",
     "queuedUntilDate": "Queued until: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
     "status": {
       "executedPayloads": "Executed payloads",
-      "readyForExecution": "Ready for execution"
+      "readyForExecution": "Ready for execution",
+      "readyForQueuing": "Ready for queuing"
     },
     "statusCard": {
       "ariaLabelAbstain": "votes abstain",
       "ariaLabelAgainst": "votes against",
-      "ariaLabelFor": "votes for",
-      "dateOnly": "{{date, dd MMM yyyy}}",
-      "timeOnly": "{{date, h:mm a}}"
+      "ariaLabelFor": "votes for"
     },
     "timeUntilExecutable": "Executable at: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
     "timeUntilVotable": "Voting starts at: <Date>{{ date, dd MMM yyyy h:mm a }}</Date>",
@@ -1249,7 +1236,6 @@
       "ens": "ENS Name",
       "spaceId": "Space ID Name"
     },
-    "providersAlt": "Provider Icon",
     "tooltip": {
       "address": "({{address}})"
     }

apps/evm/src/pages/Governance/ProposalList/CreateProposalModal/ProposalInfo/index.tsx

@@ -16,6 +16,7 @@ const ProposalInfo: React.FC = () => {
         label={t('vote.createProposalForm.proposalType')}
         css={styles.formBottomMargin}
         className="w-full"
+        variant="secondary"
         options={[
           { value: ProposalType.NORMAL, label: t('vote.proposalType.normal') },
           { value: ProposalType.FAST_TRACK, label: t('vote.proposalType.fastTrack') },

apps/evm/src/pages/Governance/ProposalList/GovernanceProposal/Status/index.tsx

@@ -10,11 +10,13 @@ import { Indicator } from './Indicator';
 export interface StatusProps extends React.HTMLAttributes<HTMLDivElement> {
   state: ProposalState;
   remoteProposals: RemoteProposal[];
+  executionEtaDate?: Date;
 }
 
 export const Status: React.FC<StatusProps> = ({
   state,
   remoteProposals,
+  executionEtaDate,
   className,
   ...otherProps
 }) => {
@@ -47,12 +49,22 @@ export const Status: React.FC<StatusProps> = ({
       return t('voteProposalUi.status.executedPayloads');
     }
 
-    if (state === ProposalState.Succeeded) {
+    const isExecutable = isProposalExecutable({
+      now,
+      isQueued: state === ProposalState.Queued,
+      executionEtaDate,
+    });
+
+    if (isExecutable) {
       return t('voteProposalUi.status.readyForExecution');
     }
 
+    if (state === ProposalState.Succeeded) {
+      return t('voteProposalUi.status.readyForQueuing');
+    }
+
     return getProposalStateLabel({ state });
-  }, [t, state, shouldShowExecutedPayloadsStatus]);
+  }, [t, state, shouldShowExecutedPayloadsStatus, now, executionEtaDate]);
 
   return (
     <div

apps/evm/src/pages/Governance/ProposalList/GovernanceProposal/index.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 
 import { ActiveVotingProgress, Countdown, ProposalTypeChip } from 'components';
 import { routes } from 'constants/routing';
+import { useIsProposalExecutable } from 'hooks/useIsProposalExecutable';
 import { useTranslation } from 'libs/translations';
 import { type Proposal, ProposalState, ProposalType, type Token, VoteSupport } from 'types';
 
@@ -51,6 +52,11 @@ const GovernanceProposalUi: React.FC<GovernanceProposalProps> = ({
   const styles = useStyles();
   const { t, Trans } = useTranslation();
 
+  const isExecutable = useIsProposalExecutable({
+    isQueued: state === ProposalState.Queued,
+    executionEtaDate,
+  });
+
   const voteStatusText = useMemo(() => {
     switch (userVoteSupport) {
       case VoteSupport.For:
@@ -73,15 +79,17 @@ const GovernanceProposalUi: React.FC<GovernanceProposalProps> = ({
       case ProposalState.Executed:
         return [executedDate, 'voteProposalUi.executedDate'];
       case ProposalState.Queued:
-        return [executionEtaDate, 'voteProposalUi.queuedUntilDate'];
+        return isExecutable
+          ? [undefined, undefined]
+          : [executionEtaDate, 'voteProposalUi.queuedUntilDate'];
       case ProposalState.Defeated:
         return [endDate, 'voteProposalUi.defeatedDate'];
       case ProposalState.Expired:
         return [expiredDate, 'voteProposalUi.expiredDate'];
       default:
         return [undefined, undefined];
     }
-  }, [state, cancelDate, executedDate, endDate, executionEtaDate, expiredDate]);
+  }, [state, cancelDate, executedDate, endDate, executionEtaDate, expiredDate, isExecutable]);
 
   const contentRightItemDom = useMemo(() => {
     if (state === ProposalState.Active) {
@@ -95,8 +103,18 @@ const GovernanceProposalUi: React.FC<GovernanceProposalProps> = ({
       );
     }
 
-    return <Status state={state} remoteProposals={remoteProposals} />;
-  }, [state, remoteProposals, forVotesMantissa, againstVotesMantissa, abstainedVotesMantissa, xvs]);
+    return (
+      <Status state={state} remoteProposals={remoteProposals} executionEtaDate={executionEtaDate} />
+    );
+  }, [
+    state,
+    remoteProposals,
+    forVotesMantissa,
+    againstVotesMantissa,
+    abstainedVotesMantissa,
+    xvs,
+    executionEtaDate,
+  ]);
 
   return (
     <ProposalCard

apps/evm/src/pages/Governance/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Governance > displays proposals correctly 1`] = `"Proposals+ Create proposalStateAll#98Not votedVIP Comptroller Diamond proxyExecuted: 21 Sep 2023 7:54 AM3/7Executed payloads#97Not votedVIP Comptroller Diamond proxyActive until: 20 Sep 2023 7:54 AMFor605.46K XVSAgainst500K XVSAbstain500K XVS#96Not votedVIP Comptroller Diamond proxyCanceled: 19 Sep 2023 3:46 PMCanceled#95Not votedtestDefeated: 15 Sep 2023 10:23 AMDefeated#94Not voted123Ready for execution#93Not voted123QueuedItems 1 - 10 out of 1001234"`;
+exports[`Governance > displays proposals correctly 1`] = `"Proposals+ Create proposalStateAll#98Not votedVIP Comptroller Diamond proxyExecuted: 21 Sep 2023 7:54 AM3/7Executed payloads#97Not votedVIP Comptroller Diamond proxyActive until: 20 Sep 2023 7:54 AMFor605.46K XVSAgainst500K XVSAbstain500K XVS#96Not votedVIP Comptroller Diamond proxyCanceled: 19 Sep 2023 3:46 PMCanceled#95Not votedtestDefeated: 15 Sep 2023 10:23 AMDefeated#94Not voted123Ready for queuing#93Not voted123Queued#92Not voted123Ready for executionItems 1 - 10 out of 1001234"`;

apps/evm/src/pages/Governance/__tests__/index.spec.tsx

@@ -20,6 +20,7 @@ import {
 import CREATE_PROPOSAL_THRESHOLD_MANTISSA from 'constants/createProposalThresholdMantissa';
 import { routes } from 'constants/routing';
 import { type UseIsFeatureEnabled, useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
+import { useNow } from 'hooks/useNow';
 import { en } from 'libs/translations';
 import { CHAIN_ID_SEARCH_PARAM } from 'libs/wallet/constants';
 import { ChainId, ProposalState } from 'types';
@@ -29,6 +30,10 @@ import GOVERNANCE_PROPOSAL_TEST_IDS from '../ProposalList/GovernanceProposal/tes
 import VOTING_WALLET_TEST_IDS from '../VotingWallet/testIds';
 import TEST_IDS from '../testIds';
 
+vi.mock('hooks/useNow');
+
+const fakeNow = new Date('2023-10-14T16:11:35.000Z');
+
 const fakeUserVotingWeight = CREATE_PROPOSAL_THRESHOLD_MANTISSA;
 
 describe('Governance', () => {
@@ -42,6 +47,8 @@ describe('Governance', () => {
     (getCurrentVotes as Vi.Mock).mockImplementation(() => ({
       votesMantissa: fakeUserVotingWeight,
     }));
+
+    (useNow as Vi.Mock).mockImplementation(() => fakeNow);
   });
 
   it('renders without crashing', async () => {