From 9f20a2847c86eb4b5d9d2825b7084660c44824de Mon Sep 17 00:00:00 2001
From: Dmitriy Lisyanskiy <dmitriy.lisyanskiy@ankr.com>
Date: Wed, 1 Jun 2022 15:37:47 +0400
Subject: [PATCH] Chore: fixes

---
 .../v2/ProgressBar/index.stories.tsx          |  2 +-
 src/components/v2/ProgressBar/index.tsx       |  7 +-
 src/components/v2/ProgressBar/styles.ts       | 15 +--
 .../ActiveVotingProgress/index.tsx            | 99 +++++++++----------
 .../v2/VoteProposalUi/index.stories.tsx       | 16 +--
 src/components/v2/VoteProposalUi/index.tsx    | 37 ++++---
 src/components/v2/VoteProposalUi/styles.ts    |  6 ++
 src/translation/translations/en.json          | 12 ++-
 8 files changed, 100 insertions(+), 94 deletions(-)

diff --git a/src/components/v2/ProgressBar/index.stories.tsx b/src/components/v2/ProgressBar/index.stories.tsx
index 2bdfb4dad9..e62a526b83 100644
--- a/src/components/v2/ProgressBar/index.stories.tsx
+++ b/src/components/v2/ProgressBar/index.stories.tsx
@@ -15,7 +15,7 @@ export const ValidProgressBar = () => (
 
 export const ProgressBarWithCustomProgressColor = () => (
   <ProgressBar
-    progressColorOverride="yellow"
+    successColor="yellow"
     value={50}
     step={5}
     mark={75}
diff --git a/src/components/v2/ProgressBar/index.tsx b/src/components/v2/ProgressBar/index.tsx
index 15dade4606..beed419646 100644
--- a/src/components/v2/ProgressBar/index.tsx
+++ b/src/components/v2/ProgressBar/index.tsx
@@ -4,6 +4,7 @@ import MaterialSlider from '@mui/material/Slider';
 import Box from '@mui/material/Box';
 import { SliderTypeMap } from '@mui/material/Slider/Slider';
 
+import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
 import { Tooltip, ITooltipProps } from '../Tooltip';
 import { useStyles } from './styles';
 
@@ -19,7 +20,7 @@ export interface IProgressBarProps {
   markTooltip?: ITooltipProps['title'];
   className?: string;
   tooltipPlacement?: ITooltipProps['placement'];
-  progressColorOverride?: string;
+  successColor?: string;
 }
 
 export const ProgressBar = ({
@@ -34,7 +35,7 @@ export const ProgressBar = ({
   markTooltip,
   className,
   tooltipPlacement = 'top',
-  progressColorOverride,
+  successColor = PALETTE.interactive.success,
 }: IProgressBarProps) => {
   const safeValue = value < max ? value : max;
 
@@ -42,7 +43,7 @@ export const ProgressBar = ({
   const styles = useStyles({
     over: mark ? safeValue > mark : false,
     secondaryOver: mark ? !!(secondaryValue && secondaryValue > mark) : false,
-    progressColorOverride,
+    successColor,
   });
 
   const renderMark = (props?: NonNullable<SliderTypeMap['props']['componentsProps']>['mark']) => (
diff --git a/src/components/v2/ProgressBar/styles.ts b/src/components/v2/ProgressBar/styles.ts
index 4efaa62e1e..63352a19c7 100644
--- a/src/components/v2/ProgressBar/styles.ts
+++ b/src/components/v2/ProgressBar/styles.ts
@@ -4,30 +4,25 @@ import { useTheme } from '@mui/material';
 export const useStyles = ({
   over,
   secondaryOver,
-  progressColorOverride,
+  successColor,
 }: {
   over: boolean;
   secondaryOver: boolean;
-  progressColorOverride?: string;
+  successColor: string;
 }) => {
   const theme = useTheme();
   return {
     slider: css`
       display: block;
-      color: ${over ? theme.palette.interactive.error50 : theme.palette.interactive.success};
-      color: ${progressColorOverride};
+      color: ${over ? theme.palette.interactive.error50 : successColor};
       background-color: ${theme.palette.background.default};
       height: ${theme.spacing(2)};
       padding: 0 !important;
       &.Mui-disabled {
-        color: ${over ? theme.palette.interactive.error50 : theme.palette.interactive.success};
-        color: ${progressColorOverride};
+        color: ${over ? theme.palette.interactive.error50 : successColor};
       }
       .MuiSlider-track {
-        background-color: ${over
-          ? theme.palette.interactive.error50
-          : theme.palette.interactive.success};
-        background-color: ${progressColorOverride};
+        background-color: ${over ? theme.palette.interactive.error50 : successColor};
         height: ${theme.spacing(2)};
         border-radius: ${theme.spacing(1)};
       }
diff --git a/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx b/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx
index 87cfac6306..a5cf6752f8 100644
--- a/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx
+++ b/src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx
@@ -11,30 +11,49 @@ import { useStyles } from '../styles';
 
 interface IActiveVotingProgressProps {
   tokenId: TokenId;
-  votedFor: BigNumber;
-  votedAgainst: BigNumber;
-  abstain: BigNumber;
+  votedForWei?: BigNumber;
+  votedAgainstWei?: BigNumber;
+  abstainedWei?: BigNumber;
+  votedTotalWei?: BigNumber;
 }
 
+const getValueString = (tokenId: TokenId, valueWei?: BigNumber) => {
+  // if !valueWei the progress row will not be rendered
+  if (!valueWei) return undefined;
+  return convertWeiToCoins({
+    valueWei,
+    tokenId,
+    returnInReadableFormat: true,
+  });
+};
+
+const getValueNumber = (tokenId: TokenId, valueWei?: BigNumber) => {
+  if (!valueWei) return 0;
+  return +convertWeiToCoins({
+    valueWei,
+    tokenId,
+    returnInReadableFormat: false,
+  }).toFormat();
+};
+
 export const ActiveVotingProgress: React.FC<IActiveVotingProgressProps> = ({
   tokenId,
-  votedFor,
-  votedAgainst,
-  abstain,
+  votedForWei,
+  votedAgainstWei,
+  abstainedWei,
+  votedTotalWei,
 }) => {
   const styles = useStyles();
   const { t } = useTranslation();
-  const votedTotalWei = votedFor.plus(votedAgainst.plus(abstain));
-  const votedTotalCoins = +convertWeiToCoins({
-    valueWei: votedTotalWei,
-    tokenId,
-    returnInReadableFormat: false,
-  }).toFormat();
+
+  const votedTotalCoins = getValueNumber(tokenId, votedTotalWei);
 
   const defaultProgressbarProps = {
-    step: 0.1,
+    step: 0.0001,
     min: 0,
-    max: votedTotalCoins,
+
+    // || 1 is used for rendering an empty progressbar for case when votedTotalCoins is 0
+    max: votedTotalCoins || 1,
   };
 
   const activeProposalVotingData = useMemo(
@@ -42,62 +61,38 @@ export const ActiveVotingProgress: React.FC<IActiveVotingProgressProps> = ({
       {
         id: 'for',
         label: t('voteProposalUi.statusCard.for'),
-        value: convertWeiToCoins({
-          valueWei: votedFor,
-          tokenId,
-          returnInReadableFormat: true,
-        }),
+        value: getValueString(tokenId, votedForWei),
         progressBarProps: {
-          ariaLabel: 'votes for',
-          value: +convertWeiToCoins({
-            valueWei: votedFor,
-            tokenId,
-            returnInReadableFormat: false,
-          }).toFormat(),
+          ariaLabel: t('voteProposalUi.statusCard.ariaLabelFor'),
+          value: getValueNumber(tokenId, votedForWei),
         },
       },
       {
         id: 'against',
         label: t('voteProposalUi.statusCard.against'),
-        value: convertWeiToCoins({
-          valueWei: votedAgainst,
-          tokenId,
-          returnInReadableFormat: true,
-        }),
+        value: getValueString(tokenId, votedAgainstWei),
         progressBarProps: {
-          progressColorOverride: PALETTE.interactive.error50,
-          ariaLabel: 'votes against',
-          value: +convertWeiToCoins({
-            valueWei: votedAgainst,
-            tokenId,
-            returnInReadableFormat: false,
-          }).toFormat(),
+          successColor: PALETTE.interactive.error50,
+          ariaLabel: t('voteProposalUi.statusCard.ariaLabelAgainst'),
+          value: getValueNumber(tokenId, votedAgainstWei),
         },
       },
       {
         id: 'abstain',
         label: t('voteProposalUi.statusCard.abstain'),
-        value: convertWeiToCoins({
-          valueWei: abstain,
-          tokenId,
-          returnInReadableFormat: true,
-        }),
+        value: getValueString(tokenId, abstainedWei),
         progressBarProps: {
-          progressColorOverride: PALETTE.text.secondary,
-          ariaLabel: 'votes abstain',
-          value: +convertWeiToCoins({
-            valueWei: abstain,
-            tokenId,
-            returnInReadableFormat: false,
-          }).toFormat(),
+          successColor: PALETTE.text.secondary,
+          ariaLabel: t('voteProposalUi.statusCard.ariaLabelAbstain'),
+          value: getValueNumber(tokenId, abstainedWei),
         },
       },
     ],
-    [votedFor, votedAgainst, abstain],
+    [votedForWei, votedAgainstWei, abstainedWei],
   );
 
   return (
-    <>
+    <div css={styles.votesWrapper}>
       {activeProposalVotingData.map(({ id, label, value, progressBarProps }) => {
         if (!value) {
           return null;
@@ -117,6 +112,6 @@ export const ActiveVotingProgress: React.FC<IActiveVotingProgressProps> = ({
           </React.Fragment>
         );
       })}
-    </>
+    </div>
   );
 };
diff --git a/src/components/v2/VoteProposalUi/index.stories.tsx b/src/components/v2/VoteProposalUi/index.stories.tsx
index 0be0053b4f..1bcc13fefa 100644
--- a/src/components/v2/VoteProposalUi/index.stories.tsx
+++ b/src/components/v2/VoteProposalUi/index.stories.tsx
@@ -8,7 +8,7 @@ export default {
   decorators: [withThemeProvider, withCenterStory({ width: 750 })],
   parameters: {
     backgrounds: {
-      default: 'Default',
+      default: 'Primary',
     },
   },
 };
@@ -16,11 +16,11 @@ export default {
 export const Active = () => (
   <VoteProposalUi
     proposalNumber={58}
-    proposalText="Buy back and burn and Tokenomic contribution finised soon"
+    proposalText="Buy back and burn and Tokenomic contribution finished soon"
     proposalStatus="active"
-    votedForWei={new BigNumber('300000000000000000000')}
-    votedAgainstWei={new BigNumber('200000000000000000000')}
-    abstainWei={new BigNumber('100000000000000000000')}
+    votedForWei={new BigNumber('500000000000000000')}
+    votedAgainstWei={new BigNumber('2000000000000000000')}
+    abstainedWei={new BigNumber('0')}
     userVoteStatus="votedFor"
     cancelDate={new Date(Date.now() + 3650000)}
     tokenId="xvs"
@@ -37,7 +37,7 @@ export const Queued = () => (
 export const ReadyToExecute = () => (
   <VoteProposalUi
     proposalNumber={58}
-    proposalText="Buy back and burn and Tokenomic contribution finised soon"
+    proposalText="Buy back and burn and Tokenomic contribution finished soon"
     proposalStatus="readyToExecute"
     cancelDate={new Date(Date.now() + 3650000)}
   />
@@ -45,7 +45,7 @@ export const ReadyToExecute = () => (
 export const Executed = () => (
   <VoteProposalUi
     proposalNumber={58}
-    proposalText="Buy back and burn and Tokenomic contribution finised soon"
+    proposalText="Buy back and burn and Tokenomic contribution finished soon"
     proposalStatus="executed"
     cancelDate={new Date(Date.now() + 3650000)}
   />
@@ -53,7 +53,7 @@ export const Executed = () => (
 export const Cancelled = () => (
   <VoteProposalUi
     proposalNumber={58}
-    proposalText="Buy back and burn and Tokenomic contribution finised soon"
+    proposalText="Buy back and burn and Tokenomic contribution finished soon"
     proposalStatus="cancelled"
     cancelDate={new Date(Date.now())}
   />
diff --git a/src/components/v2/VoteProposalUi/index.tsx b/src/components/v2/VoteProposalUi/index.tsx
index 721bfd36d9..9c08a5c9b9 100644
--- a/src/components/v2/VoteProposalUi/index.tsx
+++ b/src/components/v2/VoteProposalUi/index.tsx
@@ -95,7 +95,7 @@ interface IVoteProposalUiProps {
   userVoteStatus?: UserVoteStatus;
   votedForWei?: BigNumber;
   votedAgainstWei?: BigNumber;
-  abstainWei?: BigNumber;
+  abstainedWei?: BigNumber;
   tokenId?: TokenId;
 }
 
@@ -108,7 +108,7 @@ export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({
   userVoteStatus,
   votedForWei,
   votedAgainstWei,
-  abstainWei,
+  abstainedWei,
   tokenId,
 }) => {
   const styles = useStyles();
@@ -140,17 +140,23 @@ export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({
     }
     // Render a countdown
     if (days) {
-      return `${days}d ${hours}h : ${minutes}m : ${seconds}s`;
+      return t('voteProposalUi.countdownFormat.daysIncluded', { days, hours, minutes, seconds });
     }
     if (hours) {
-      return `${hours}h : ${minutes}m : ${seconds}s`;
+      return t('voteProposalUi.countdownFormat.hoursIncluded', { hours, minutes, seconds });
     }
     if (minutes) {
-      return `${minutes}m : ${seconds}s`;
+      return t('voteProposalUi.countdownFormat.minutesIncluded', { minutes, seconds });
     }
-    return `${seconds}s`;
+    return t('voteProposalUi.countdownFormat.minutesIncluded', { seconds });
   };
 
+  const votedTotalWei = BigNumber.sum.apply(null, [
+    votedForWei || 0,
+    votedAgainstWei || 0,
+    abstainedWei || 0,
+  ]);
+
   return (
     <Paper className={className} css={styles.root}>
       <Grid container>
@@ -187,12 +193,7 @@ export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({
               <Typography variant="small2">
                 {t('voteProposalUi.activeUntil')}
                 <Typography css={styles.activeUntilDate} variant="small2" color="textPrimary">
-                  {cancelDate.toLocaleString('en-US', {
-                    month: 'long',
-                    day: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                  })}
+                  {t('voteProposalUi.activeUntilDate', { date: cancelDate })}
                 </Typography>
               </Typography>
             )}
@@ -204,15 +205,13 @@ export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({
         </Grid>
         <Grid css={[styles.gridItem, styles.gridItemRight]} item xs={12} sm={4}>
           {proposalStatus === 'active' ? (
-            tokenId &&
-            votedForWei &&
-            votedAgainstWei &&
-            abstainWei && (
+            tokenId && (
               <ActiveVotingProgress
                 tokenId={tokenId}
-                votedFor={votedForWei}
-                votedAgainst={votedAgainstWei}
-                abstain={abstainWei}
+                votedForWei={votedForWei}
+                votedAgainstWei={votedAgainstWei}
+                abstainedWei={abstainedWei}
+                votedTotalWei={votedTotalWei}
               />
             )
           ) : (
diff --git a/src/components/v2/VoteProposalUi/styles.ts b/src/components/v2/VoteProposalUi/styles.ts
index 834505211b..e5c39be236 100644
--- a/src/components/v2/VoteProposalUi/styles.ts
+++ b/src/components/v2/VoteProposalUi/styles.ts
@@ -29,6 +29,7 @@ export const useStyles = () => {
     cardHeader: css`
       display: flex;
       justify-content: space-between;
+      align-items: center;
     `,
     cardBadges: css`
       /* TODO */
@@ -80,6 +81,11 @@ export const useStyles = () => {
     `,
 
     /* StatusCard styles */
+    votesWrapper: css`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    `,
     voteRow: css`
       display: flex;
       justify-content: space-between;
diff --git a/src/translation/translations/en.json b/src/translation/translations/en.json
index 6160524f6a..a4597d6102 100644
--- a/src/translation/translations/en.json
+++ b/src/translation/translations/en.json
@@ -549,8 +549,11 @@
   "voteProposalUi": {
     "statusCard": {
       "for": "For",
+      "ariaLabelFor": "votes for",
       "against": "Against",
+      "ariaLabelAgainst": "votes against",
       "abstain": "Abstain",
+      "ariaLabelAbstain": "votes abstain",
       "queued": "Queue",
       "readyToExecute": "Ready to execute",
       "executed": "Executed",
@@ -565,7 +568,14 @@
       "abstained": "Abstained",
       "notVoted": "Not voted"
     },
-    "activeUntil": "Active until:"
+    "activeUntil": "Active until:",
+    "activeUntilDate": "{{ date, dd MMM HH:mm }}",
+    "countdownFormat": {
+      "daysIncluded": "{{days}}d {{hours}}h : {{minutes}}m : {{seconds}}s",
+      "hoursIncluded": "{{hours}}h : {{minutes}}m : {{seconds}}s",
+      "minutesIncluded": "{{minutes}}m : {{seconds}}s",
+      "secondsIncluded": "{{seconds}}s"
+    }
   },
   "vaultItemUi": {
     "reward": "Reward:",