From b641c82ad8744fa2e2710e71b35060c92d747040 Mon Sep 17 00:00:00 2001
From: Sam Keen <samuel@vegaprotocol.io>
Date: Thu, 11 May 2023 13:59:28 +0100
Subject: [PATCH] feat(governance): voting blog link and button title (#3717)

---
 apps/governance/src/i18n/translations/dev.json     |  1 +
 .../components/vote-details/vote-buttons.spec.tsx  |  4 +++-
 .../components/vote-details/vote-buttons.tsx       | 14 ++++++++++++--
 .../components/vote-details/vote-details.tsx       | 12 ++++++++++--
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/apps/governance/src/i18n/translations/dev.json b/apps/governance/src/i18n/translations/dev.json
index d714cc82b..c8f60b63b 100644
--- a/apps/governance/src/i18n/translations/dev.json
+++ b/apps/governance/src/i18n/translations/dev.json
@@ -202,6 +202,7 @@
   "tokenVotes": "Token votes",
   "liquidityVotes": "Liquidity votes",
   "castYourVote": "Cast your vote",
+  "yourVote": "Your vote",
   "for": "For",
   "against": "Against",
   "majorityRequired": "Majority Required",
diff --git a/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.spec.tsx b/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.spec.tsx
index d4aa90279..7f1ae36b6 100644
--- a/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.spec.tsx
+++ b/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.spec.tsx
@@ -111,7 +111,9 @@ describe('Vote buttons', () => {
       </AppStateProvider>
     );
     expect(
-      screen.getByText('You need some VEGA tokens to participate in governance')
+      screen.getByText(
+        'You need some VEGA tokens to participate in governance.'
+      )
     ).toBeTruthy();
   });
 
diff --git a/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx b/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx
index 3101758f6..7b2c16203 100644
--- a/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx
+++ b/apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx
@@ -2,7 +2,12 @@ import { format } from 'date-fns';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { AsyncRenderer, Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
+import {
+  AsyncRenderer,
+  Button,
+  ButtonLink,
+  ExternalLink,
+} from '@vegaprotocol/ui-toolkit';
 import { addDecimal, toBigNum } from '@vegaprotocol/utils';
 import { ProposalState, VoteValue } from '@vegaprotocol/types';
 import {
@@ -161,7 +166,12 @@ export const VoteButtons = ({
       {changeVote || (voteState === VoteState.NotCast && proposalVotable) ? (
         <>
           {currentStakeAvailable.isLessThanOrEqualTo(0) && (
-            <p data-testid="no-stake-available">{t('noGovernanceTokens')}</p>
+            <>
+              <p data-testid="no-stake-available">{t('noGovernanceTokens')}.</p>
+              <ExternalLink href="https://blog.vega.xyz/how-to-vote-on-vega-2195d1e52ec5">
+                {t('findOutMoreAboutHowToVote')}
+              </ExternalLink>
+            </>
           )}
 
           <div className="flex gap-4" data-testid="vote-buttons">
diff --git a/apps/governance/src/routes/proposals/components/vote-details/vote-details.tsx b/apps/governance/src/routes/proposals/components/vote-details/vote-details.tsx
index 19746d9c2..a819118a4 100644
--- a/apps/governance/src/routes/proposals/components/vote-details/vote-details.tsx
+++ b/apps/governance/src/routes/proposals/components/vote-details/vote-details.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { formatDistanceToNow } from 'date-fns';
-import { RoundedWrapper, Icon } from '@vegaprotocol/ui-toolkit';
+import { RoundedWrapper, Icon, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { ProposalState } from '@vegaprotocol/types';
 import { useVoteSubmit, VoteProgress } from '@vegaprotocol/proposals';
@@ -202,7 +202,12 @@ export const VoteDetails = ({
         )}
 
         <section className="mt-10">
-          <SubHeading title={t('castYourVote')} />
+          {proposal?.state === ProposalState.STATE_OPEN ? (
+            <SubHeading title={t('castYourVote')} />
+          ) : (
+            <SubHeading title={t('yourVote')} />
+          )}
+
           {pubKey ? (
             proposal && (
               <VoteButtonsContainer
@@ -224,6 +229,9 @@ export const VoteDetails = ({
                   <Icon name={'info-sign'} />
                   <div>{t('connectAVegaWalletToVote')}</div>
                 </div>
+                <ExternalLink href="https://blog.vega.xyz/how-to-vote-on-vega-2195d1e52ec5">
+                  {t('findOutMoreAboutHowToVote')}
+                </ExternalLink>
               </div>
               <ConnectToVega />
             </RoundedWrapper>