From c99c2ce89ad355ab9b09c7b5d3a136bc5f5711d4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:56:29 +0700
Subject: [PATCH] feat: voting overview veto alert

---
 CHANGELOG.md                                  |   1 +
 .../VotingOverviewThreshold.tsx               | 150 +++++++++++++-----
 2 files changed, 113 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3fe39ea32..6fd11dfea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#779](https://github.com/alleslabs/celatone-frontend/pull/779) Proposal period overview voting - no with veto alert
 - [#778](https://github.com/alleslabs/celatone-frontend/pull/778) Proposal period overview voting
 - [#775](https://github.com/alleslabs/celatone-frontend/pull/775) Proposal period overview deposit
 - [#766](https://github.com/alleslabs/celatone-frontend/pull/766) Proposal status summary body
diff --git a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewThreshold.tsx b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewThreshold.tsx
index dad7dc72a..6d8c88163 100644
--- a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewThreshold.tsx
+++ b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewThreshold.tsx
@@ -7,6 +7,7 @@ import { CustomIcon } from "lib/components/icon";
 import { StatusChip } from "lib/components/table";
 import {
   extractParams,
+  formatPrettyPercent,
   getVoteResult,
   normalizeVotesInfo,
 } from "lib/pages/proposal-details/utils";
@@ -16,6 +17,7 @@ import {
   type ProposalParams,
   type ProposalVotesInfo,
 } from "lib/types";
+import { divWithDefault } from "lib/utils";
 
 interface VotingOverviewThresholdProps {
   proposalData: ProposalData;
@@ -32,7 +34,8 @@ export const VotingOverviewThreshold = ({
     params,
     proposalData.isExpedited
   );
-  const { totalVotes } = normalizeVotesInfo(votesInfo);
+  const { noWithVeto, totalVotes } = normalizeVotesInfo(votesInfo);
+  const noWithVetoRatio = divWithDefault(noWithVeto, totalVotes, 0);
 
   const { result, resultColor } = getVoteResult(
     threshold,
@@ -41,46 +44,117 @@ export const VotingOverviewThreshold = ({
   );
 
   return (
-    <Flex
-      direction="column"
-      gap={4}
-      pt={4}
-      borderTop="1px solid"
-      borderTopColor="gray.700"
-    >
-      {(proposalData.status === ProposalStatus.VOTING_PERIOD ||
-        totalVotes.gte(quorum)) && (
-        <Flex gap={2} alignItems="center">
-          <VoteThresholdBadge status={proposalData.status} isCompact />
-          {proposalData.status === ProposalStatus.VOTING_PERIOD ? (
-            <Text variant="body1" color="text.main">
-              Current Voting Result
-            </Text>
-          ) : (
-            <Flex gap={2} alignItems="center">
+    <>
+      <Flex
+        direction="column"
+        gap={4}
+        pt={4}
+        borderTop="1px solid"
+        borderTopColor="gray.700"
+      >
+        {(proposalData.status === ProposalStatus.VOTING_PERIOD ||
+          totalVotes.gte(quorum)) && (
+          <Flex gap={2} alignItems="center">
+            <VoteThresholdBadge status={proposalData.status} isCompact />
+            {proposalData.status === ProposalStatus.VOTING_PERIOD ? (
               <Text variant="body1" color="text.main">
-                Final Vote Result:
+                Current Voting Result
               </Text>
-              {proposalData.status === ProposalStatus.FAILED ? (
-                <StatusChip status={ProposalStatus.FAILED} />
-              ) : (
-                <>
-                  <CustomIcon
-                    name="circle"
-                    boxSize="14px"
-                    color={resultColor}
-                  />
-                  <Text variant="body2" color="text.main" fontWeight={700}>
-                    {result}
-                  </Text>
-                </>
-              )}
-            </Flex>
-          )}
+            ) : (
+              <Flex gap={2} alignItems="center">
+                <Text variant="body1" color="text.main">
+                  Final Vote Result:
+                </Text>
+                {proposalData.status === ProposalStatus.FAILED ? (
+                  <StatusChip status={ProposalStatus.FAILED} />
+                ) : (
+                  <>
+                    <CustomIcon
+                      name="circle"
+                      boxSize="14px"
+                      color={resultColor}
+                    />
+                    <Text variant="body2" color="text.main" fontWeight={700}>
+                      {result}
+                    </Text>
+                  </>
+                )}
+              </Flex>
+            )}
+          </Flex>
+        )}
+        <VoteThresholdBar
+          threshold={threshold}
+          votesInfo={votesInfo}
+          isCompact
+        />
+        <VpPercentThreshold votesInfo={votesInfo} isCompact />
+      </Flex>
+      {noWithVetoRatio.gte(vetoThreshold) && (
+        <Flex
+          gap={3}
+          p="12px 16px"
+          bgColor="warning.background"
+          border="1px solid var(--chakra-colors-warning-dark)"
+          borderRadius="8px"
+          alignItems="center"
+        >
+          <CustomIcon
+            boxSize={4}
+            name="alert-circle-solid"
+            color="warning.main"
+          />
+          <Text variant="body2" color="warning.main">
+            {proposalData.status === ProposalStatus.VOTING_PERIOD ? (
+              <>
+                Currently, the &ldquo;No with veto&rdquo; vote proportion
+                constitutes{" "}
+                <span
+                  style={{
+                    fontWeight: 700,
+                  }}
+                >
+                  {formatPrettyPercent(noWithVetoRatio.toNumber())}{" "}
+                </span>
+                of the total votes, including &ldquo;Abstain&rdquo;, which
+                exceeds the{" "}
+                <span
+                  style={{
+                    fontWeight: 700,
+                  }}
+                >
+                  {formatPrettyPercent(vetoThreshold)} threshold
+                </span>
+                . If the proposal concludes with this voting outcome, it will be
+                regardless of &ldquo;Yes&rdquo; votes.
+              </>
+            ) : (
+              <>
+                Due to the &ldquo;No with veto&rdquo; vote proportion
+                constitutes{" "}
+                <span
+                  style={{
+                    fontWeight: 700,
+                  }}
+                >
+                  {formatPrettyPercent(noWithVetoRatio.toNumber())}{" "}
+                </span>
+                of the total votes including &ldquo;Abstain&rdquo;, which
+                exceeds the{" "}
+                <span
+                  style={{
+                    fontWeight: 700,
+                  }}
+                >
+                  {formatPrettyPercent(vetoThreshold)} threshold
+                </span>
+                , the proposal is rejected regardless of &ldquo;Yes&rdquo;
+                votes.
+              </>
+            )}
+          </Text>
         </Flex>
       )}
-      <VoteThresholdBar threshold={threshold} votesInfo={votesInfo} isCompact />
-      <VpPercentThreshold votesInfo={votesInfo} isCompact />
-    </Flex>
+    </>
   );
 };