feat(1820): Present vote progress bar as an indication of result (#2047)

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

@@ -555,7 +555,7 @@
   "rejectionReason": "Rejection reason",
   "reference": "Reference",
   "voteBreakdown": "Vote breakdown",
-  "willPass": "Will pass",
+  "expectedToPass": "Expected to pass",
   "majorityMet": "Token majority met",
   "majorityLPMet": "Liquidity majority met",
   "participationMet": "Token participation met",
@@ -572,7 +572,8 @@
   "yesPercentage": "Yes percentage",
   "noPercentage": "No percentage",
   "proposalTerms": "Proposal terms",
-  "currentlySetTo": "Vote currently set to ",
+  "currentlySetTo": "Currently expected to ",
+  "finalOutcomeMayDiffer": "Final outcome may differ",
   "rankingScore": "Ranking score",
   "stakeScore": "Stake score",
   "performanceScore": "Performance",

apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.spec.tsx

@@ -79,7 +79,7 @@ it('Proposal open - renders will fail state if the proposal will fail', async ()
     },
   };
   renderComponent({ proposal: failedProposal });
-  expect(await screen.findByText('Vote currently set to')).toBeInTheDocument();
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
   expect(await screen.findByText('fail')).toBeInTheDocument();
 });
 
@@ -87,7 +87,7 @@ it('Proposal open - renders will pass state if the proposal will pass', async ()
   const proposal = generateProposal();
 
   renderComponent({ proposal });
-  expect(await screen.findByText('Vote currently set to')).toBeInTheDocument();
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
   expect(await screen.findByText('pass')).toBeInTheDocument();
 });
 
@@ -152,7 +152,7 @@ it('Proposal waiting for node vote - will pass  - renders if the vote will pass
   expect(
     await screen.findByText('Waiting for nodes to validate asset.')
   ).toBeInTheDocument();
-  expect(await screen.findByText('Vote currently set to')).toBeInTheDocument();
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
   expect(await screen.findByText('fail')).toBeInTheDocument();
 });
 
@@ -168,7 +168,7 @@ it('Proposal waiting for node vote - will fail - renders if the vote will pass a
   expect(
     await screen.findByText('Waiting for nodes to validate asset.')
   ).toBeInTheDocument();
-  expect(await screen.findByText('Vote currently set to')).toBeInTheDocument();
+  expect(await screen.findByText('Currently expected to')).toBeInTheDocument();
   expect(await screen.findByText('pass')).toBeInTheDocument();
 });
 

apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.tsx

@@ -27,6 +27,7 @@ const WillPass = ({
       <>
         {children}
         <StatusPass>{t('pass')}</StatusPass>
+        <span>{t('finalOutcomeMayDiffer')}</span>
       </>
     );
   } else {
@@ -34,6 +35,7 @@ const WillPass = ({
       <>
         {children}
         <StatusFail>{t('fail')}</StatusFail>
+        <span>{t('finalOutcomeMayDiffer')}</span>
       </>
     );
   }

apps/token/src/routes/governance/components/proposal-votes-table/proposal-votes-table.spec.tsx

@@ -46,7 +46,7 @@ describe('Proposal Votes Table', () => {
 
   it('should show vote breakdown fields, excluding custom update market fields', () => {
     renderComponent();
-    expect(screen.getByText('Will pass')).toBeInTheDocument();
+    expect(screen.getByText('Expected to pass')).toBeInTheDocument();
     expect(screen.getByText('Token majority met')).toBeInTheDocument();
     expect(screen.getByText('Token participation met')).toBeInTheDocument();
     expect(screen.getByText('Tokens for proposal')).toBeInTheDocument();

apps/token/src/routes/governance/components/proposal-votes-table/proposal-votes-table.tsx

@@ -61,7 +61,7 @@ export const ProposalVotesTable = ({
       headingLevel={4}
     >
       <KeyValueTableRow>
-        {t('willPass')}
+        {t('expectedToPass')}
         {isUpdateMarket ? (
           updateMarketWillPass ? (
             <Thumbs up={true} text={updateMarketVotePassMethod} />

apps/token/src/routes/governance/components/vote-details/vote-details.tsx

@@ -1,11 +1,14 @@
 import { useTranslation } from 'react-i18next';
+import { formatDistanceToNow } from 'date-fns';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { ProposalState } from '@vegaprotocol/types';
 import { formatNumber } from '../../../../lib/format-number';
 import { ConnectToVega } from '../../../../components/connect-to-vega';
 import { useVoteInformation } from '../../hooks';
 import { useUserVote } from './use-user-vote';
+import { CurrentProposalStatus } from '../current-proposal-status';
 import { VoteButtonsContainer } from './vote-buttons';
 import { VoteProgress } from './vote-progress';
-import { useVegaWallet } from '@vegaprotocol/wallet';
 import { ProposalType } from '../proposal/proposal';
 import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
 
@@ -45,12 +48,22 @@ export const VoteDetails = ({
     proposal.votes.no.votes
   );
   const defaultDecimals = 2;
+  const daysLeft = t('daysLeft', {
+    daysLeft: formatDistanceToNow(new Date(proposal.terms.closingDatetime)),
+  });
 
   return (
     <>
       {proposalType === ProposalType.PROPOSAL_UPDATE_MARKET && (
         <section>
           <h3 className="text-xl mb-2">{t('liquidityVotes')}</h3>
+          <p>
+            <span>
+              <CurrentProposalStatus proposal={proposal} />
+            </span>
+            {'. '}
+            {proposal.state === ProposalState.STATE_OPEN ? daysLeft : null}
+          </p>
           <table className="w-full mb-8">
             <thead>
               <tr>
@@ -93,6 +106,13 @@ export const VoteDetails = ({
       )}
       <section>
         <h3 className="text-xl mb-2">{t('tokenVotes')}</h3>
+        <p>
+          <span>
+            <CurrentProposalStatus proposal={proposal} />
+          </span>
+          {'. '}
+          {proposal.state === ProposalState.STATE_OPEN ? daysLeft : null}
+        </p>
         <table className="w-full mb-4">
           <thead>
             <tr>