Display deposit period in ProposalDetail

MPR #351
oursky · Aug 2, 2022 · 0197737 · 0197737
2 parents 3ce2abe + dcede66
commit 0197737
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 40 deletions.
diff --git a/react-app/src/components/ProposalDetailScreen/ProposalDetailScreenAPI.ts b/react-app/src/components/ProposalDetailScreen/ProposalDetailScreenAPI.ts
@@ -406,21 +406,29 @@ export function useProposalQuery(id: number | null): {
         const depositEndTime = proposal.depositEndTime
           ? new Date(proposal.depositEndTime)
           : null;
+        const submitTime = new Date(proposal.submitTime);
 
         return {
           ...proposal,
 
           votingStartTime: votingStartTime,
           votingEndTime: votingEndTime,
           depositEndTime: depositEndTime,
-          submitTime: new Date(proposal.submitTime),
+          submitTime: submitTime,
           turnout: proposal.turnout ?? null,
           remainingVotingDuration:
             votingStartTime && votingEndTime && isAfter(votingEndTime, now)
               ? formatDistance(votingEndTime, now, {
                   locale: dateFnsLocale,
                 })
               : null,
+          remainingDepositDuration:
+            depositEndTime && isAfter(depositEndTime, now)
+              ? formatDistance(depositEndTime, now, {
+                  locale: dateFnsLocale,
+                })
+              : null,
+
           depositTotal: convertMinimalTokenToToken(
             proposal.depositTotal.find((t) => t.denom === CoinMinimalDenom)
               ?.amount ?? 0

diff --git a/react-app/src/components/ProposalDetailScreen/ProposalDetailScreenModel.ts b/react-app/src/components/ProposalDetailScreen/ProposalDetailScreenModel.ts
@@ -39,6 +39,8 @@ export interface Proposal
    */
   remainingVotingDuration: string | null;
 
+  remainingDepositDuration: string | null;
+
   reactions: ReactionItem[];
 
   depositTotal: BigNumber;

diff --git a/react-app/src/components/ProposalDetailScreen/ProposalHeader.tsx b/react-app/src/components/ProposalDetailScreen/ProposalHeader.tsx
@@ -46,16 +46,79 @@ const ProposalTitle: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
   );
 };
 
-const ProposalStatistics: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
+const ProposalPeriod: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
   const {
-    votingStartTime,
+    depositEndTime,
+    submitTime,
+    remainingDepositDuration,
+    status,
     votingEndTime,
+    votingStartTime,
     remainingVotingDuration,
-    depositTotal,
-    turnout,
-    status,
   } = proposal;
 
+  if (status === ProposalStatus.DepositPeriod) {
+    return (
+      <div className={cn("col-span-2", "flex", "flex-col", "items-center")}>
+        <LocalizedText messageID="ProposalDetail.depositPeriod" />
+
+        <p className={cn("mb-1", "text-sm", "text-center")}>
+          {depositEndTime ? (
+            <LocalizedText
+              messageID="ProposalDetail.dateRange"
+              messageArgs={{
+                from: <UTCDatetime date={submitTime} />,
+                to: <UTCDatetime date={depositEndTime} />,
+              }}
+            />
+          ) : (
+            "-"
+          )}
+        </p>
+        {remainingDepositDuration && (
+          <Badge color="likecoin-yellow">
+            <LocalizedText
+              messageID="ProposalDetail.durationRemaining"
+              messageArgs={{ duration: remainingDepositDuration }}
+            />
+          </Badge>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("col-span-2", "flex", "flex-col", "items-center")}>
+      <LocalizedText messageID="ProposalDetail.votingPeriod" />
+
+      <p className={cn("mb-1", "text-sm", "text-center")}>
+        {votingStartTime && votingEndTime ? (
+          <LocalizedText
+            messageID="ProposalDetail.dateRange"
+            messageArgs={{
+              from: <UTCDatetime date={votingStartTime} />,
+              to: <UTCDatetime date={votingEndTime} />,
+            }}
+          />
+        ) : (
+          "-"
+        )}
+      </p>
+      {remainingVotingDuration && (
+        <Badge color="likecoin-yellow">
+          <LocalizedText
+            messageID="ProposalDetail.durationRemaining"
+            messageArgs={{ duration: remainingVotingDuration }}
+          />
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+const ProposalStatistics: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
+  const { depositTotal, turnout } = proposal;
+
   const totalDepositString = useMemo(() => {
     if (depositTotal.lt(1)) {
       return depositTotal.toFixed(3);
@@ -79,31 +142,7 @@ const ProposalStatistics: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
         "gap-y-5"
       )}
     >
-      <div className={cn("col-span-2", "flex", "flex-col", "items-center")}>
-        <LocalizedText messageID="ProposalDetail.votingPeriod" />
-
-        <p className={cn("mb-1", "text-sm", "text-center")}>
-          {votingStartTime && votingEndTime ? (
-            <LocalizedText
-              messageID="ProposalDetail.votingDateRange"
-              messageArgs={{
-                from: <UTCDatetime date={votingStartTime} />,
-                to: <UTCDatetime date={votingEndTime} />,
-              }}
-            />
-          ) : (
-            "-"
-          )}
-        </p>
-        {remainingVotingDuration && status === ProposalStatus.VotingPeriod && (
-          <Badge color="likecoin-yellow">
-            <LocalizedText
-              messageID="ProposalDetail.votingDurationRemaining"
-              messageArgs={{ duration: remainingVotingDuration }}
-            />
-          </Badge>
-        )}
-      </div>
+      <ProposalPeriod proposal={proposal} />
       <div className={cn("flex", "flex-col", "items-center", "grow")}>
         <LocalizedText messageID="ProposalDetail.deposit" />
         <p>{`${totalDepositString} ${CoinDenom}`}</p>
@@ -169,7 +208,7 @@ const ProposalTypeAndProposer: React.FC<{ proposal: Proposal }> = ({
   );
 };
 
-enum ProposalPeriod {
+enum ProposalPeriodType {
   Voting = "voting",
   Deposit = "deposit",
 }
@@ -200,7 +239,7 @@ const ProposalActionArea: React.FC<ProposalActionAreaProps> = (props) => {
       proposal.depositEndTime &&
       isBefore(now, proposal.depositEndTime)
     ) {
-      return ProposalPeriod.Deposit;
+      return ProposalPeriodType.Deposit;
     }
 
     if (
@@ -214,7 +253,7 @@ const ProposalActionArea: React.FC<ProposalActionAreaProps> = (props) => {
           end: proposal.votingEndTime,
         })
       ) {
-        return ProposalPeriod.Voting;
+        return ProposalPeriodType.Voting;
       }
     }
 
@@ -255,12 +294,12 @@ const ProposalActionArea: React.FC<ProposalActionAreaProps> = (props) => {
           theme="primary"
           className={cn("text-base", "leading-6", "font-medium", "px-6")}
           messageID={
-            proposalPeriod === ProposalPeriod.Voting
+            proposalPeriod === ProposalPeriodType.Voting
               ? "ProposalDetail.voteNow"
               : "ProposalDetail.deposit"
           }
           onClick={
-            proposalPeriod === ProposalPeriod.Voting
+            proposalPeriod === ProposalPeriodType.Voting
               ? onVoteClick
               : onDepositClick
           }

diff --git a/react-app/src/i18n/translations/en.json b/react-app/src/i18n/translations/en.json
@@ -69,7 +69,9 @@
   "Proposal.status.rejected": "Rejected",
   "Proposal.status.votingPeriod": "Voting",
   "ProposalDetail.copyLink": "Copy Link",
+  "ProposalDetail.dateRange": "{from} to {to}",
   "ProposalDetail.deposit": "Deposit",
+  "ProposalDetail.depositPeriod": "Deposit Period",
   "ProposalDetail.deposits": "Deposits",
   "ProposalDetail.deposits.amount": "Amount",
   "ProposalDetail.deposits.delegatedValidators": "Delegated Validators",
@@ -81,6 +83,7 @@
   "ProposalDetail.deposits.others": "Others",
   "ProposalDetail.deposits.requestState.error": "Failed to fetch proposal deposits, please try again later.",
   "ProposalDetail.deposits.total": "Total",
+  "ProposalDetail.durationRemaining": "{duration} left",
   "ProposalDetail.govParams.requestState.error": "Failed to fetch governance parameters, please try again later.",
   "ProposalDetail.proposal.requestState.empty": "Proposal {id} does not exist.",
   "ProposalDetail.proposal.requestState.error": "Failed to fetch proposal, please try again later.",
@@ -104,8 +107,6 @@
   "ProposalDetail.votes.voter": "Voter",
   "ProposalDetail.votes.voter.noSecurityContact": "Contact information for this validator is not available",
   "ProposalDetail.votes.voter.validator": "Validator",
-  "ProposalDetail.votingDateRange": "{from} to {to}",
-  "ProposalDetail.votingDurationRemaining": "{duration} left",
   "ProposalDetail.votingPeriod": "Voting Period",
   "ProposalHistory.comment": "Comment",
   "ProposalHistory.filters.deposited": "Deposited Proposals",

diff --git a/react-app/src/i18n/translations/zh.json b/react-app/src/i18n/translations/zh.json
@@ -69,7 +69,9 @@
   "Proposal.status.rejected": "Rejected",
   "Proposal.status.votingPeriod": "Voting",
   "ProposalDetail.copyLink": "Copy Link",
+  "ProposalDetail.dateRange": "{from} to {to}",
   "ProposalDetail.deposit": "Deposit",
+  "ProposalDetail.depositPeriod": "Deposit Period",
   "ProposalDetail.deposits": "Deposits",
   "ProposalDetail.deposits.amount": "Amount",
   "ProposalDetail.deposits.delegatedValidators": "Delegated Validators",
@@ -81,6 +83,7 @@
   "ProposalDetail.deposits.others": "Others",
   "ProposalDetail.deposits.requestState.error": "Failed to fetch proposal deposits, please try again later.",
   "ProposalDetail.deposits.total": "Total",
+  "ProposalDetail.durationRemaining": "{duration} left",
   "ProposalDetail.govParams.requestState.error": "Failed to fetch governance parameters, please try again later.",
   "ProposalDetail.proposal.requestState.empty": "Proposal {id} does not exist.",
   "ProposalDetail.proposal.requestState.error": "Failed to fetch proposal, please try again later.",
@@ -104,8 +107,6 @@
   "ProposalDetail.votes.voter": "Voter",
   "ProposalDetail.votes.voter.noSecurityContact": "Contact information for this validator is not available",
   "ProposalDetail.votes.voter.validator": "Validator",
-  "ProposalDetail.votingDateRange": "{from} 至 {to}",
-  "ProposalDetail.votingDurationRemaining": "剩餘{duration}",
   "ProposalDetail.votingPeriod": "Voting Period",
   "ProposalHistory.comment": "Comment",
   "ProposalHistory.filters.deposited": "Deposited Proposals",