react-app: Handle remind to vote button for proposal vote list

refs oursky#128
hochiw · Jun 30, 2022 · 3980247 · 3980247
1 parent a15ed44
commit 3980247
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx b/react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx
@@ -4,14 +4,15 @@ import { useOutletContext, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import TallyResultIndicator from "../TallyResultIndicator/TallyResultIndicator";
 import * as SectionedTable from "../SectionedTable/SectionedTable";
-import { VoteOption } from "../../models/cosmos/gov";
+import { ProposalStatus, VoteOption } from "../../models/cosmos/gov";
 import LocalizedText from "../common/Localized/LocalizedText";
 import {
   isRequestStateError,
   isRequestStateLoaded,
 } from "../../models/RequestState";
 import PageContoller from "../common/PageController/PageController";
 import { useLocale } from "../../providers/AppLocaleProvider";
+import AppButton from "../common/Buttons/AppButton";
 import {
   Proposal,
   ProposalVote,
@@ -147,6 +148,33 @@ const ProposalVoteOption: React.FC<{ option: VoteOption | null }> = ({
   }
 };
 
+const RemindToVoteButton: React.FC<{
+  proposal: Proposal;
+  vote: ProposalVote;
+}> = ({ proposal, vote }) => {
+  if (
+    vote.option != null ||
+    vote.voter.__typename !== "Validator" ||
+    vote.voter.securityContact == null ||
+    proposal.status !== ProposalStatus.VotingPeriod
+  ) {
+    return null;
+  }
+
+  const email: string = vote.voter.securityContact;
+
+  return (
+    <AppButton
+      type="anchor"
+      theme="secondary"
+      size="regular"
+      className={cn("border", "border-likecoin-grey")}
+      messageID="ProposalDetail.votes.remindToVote"
+      href={`mailto:${email}`}
+    />
+  );
+};
+
 const ProposalVotesPanel: React.FC = () => {
   const proposal = useOutletContext<Proposal>();
   const { translate } = useLocale();
@@ -266,6 +294,12 @@ const ProposalVotesPanel: React.FC = () => {
         >
           {(item) => <ProposalVoteOption option={item.option ?? null} />}
         </SectionedTable.Column>
+        <SectionedTable.Column<ProposalVote>
+          id="action"
+          className={cn("text-right")}
+        >
+          {(item) => <RemindToVoteButton proposal={proposal} vote={item} />}
+        </SectionedTable.Column>
       </SectionedTable.Table>
       <PageContoller
         offsetBased={true}

diff --git a/react-app/src/i18n/translations/en.json b/react-app/src/i18n/translations/en.json
@@ -65,6 +65,7 @@
   "ProposalDetail.votes.option": "Option",
   "ProposalDetail.votes.option.notVoted": "Not Voted Yet",
   "ProposalDetail.votes.others": "Others",
+  "ProposalDetail.votes.remindToVote": "Remind to vote",
   "ProposalDetail.votes.requestState.error": "Failed to fetch proposal votes, please try again later.",
   "ProposalDetail.votes.voter": "Voter",
   "ProposalDetail.votes.voter.validator": "Validator",

diff --git a/react-app/src/i18n/translations/zh.json b/react-app/src/i18n/translations/zh.json
@@ -65,6 +65,7 @@
   "ProposalDetail.votes.option": "Option",
   "ProposalDetail.votes.option.notVoted": "Not Voted Yet",
   "ProposalDetail.votes.others": "Others",
+  "ProposalDetail.votes.remindToVote": "Remind to vote",
   "ProposalDetail.votes.requestState.error": "Failed to fetch proposal votes, please try again later.",
   "ProposalDetail.votes.voter": "Voter",
   "ProposalDetail.votes.voter.validator": "Validator",