Chore: fixes

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}

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,15 +35,15 @@ export const ProgressBar = ({
   markTooltip,
   className,
   tooltipPlacement = 'top',
-  progressColorOverride,
+  successColor = PALETTE.interactive.success,
 }: IProgressBarProps) => {
   const safeValue = value < max ? value : max;
 
   const marks = mark ? [{ value: mark }] : undefined;
   const styles = useStyles({
     over: mark ? safeValue > mark : false,
     secondaryOver: mark ? !!(secondaryValue && secondaryValue > mark) : false,
-    progressColorOverride,
+    successColor,
   });
 
   const renderMark = (props?: NonNullable<SliderTypeMap['props']['componentsProps']>['mark']) => (

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)};
       }

src/components/v2/VoteProposalUi/ActiveVotingProgress/index.tsx

@@ -11,93 +11,88 @@ 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(
     () => [
       {
         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>
   );
 };

src/components/v2/VoteProposalUi/index.stories.tsx

@@ -8,19 +8,19 @@ export default {
   decorators: [withThemeProvider, withCenterStory({ width: 750 })],
   parameters: {
     backgrounds: {
-      default: 'Default',
+      default: 'Primary',
     },
   },
 };
 
 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,23 +37,23 @@ 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)}
   />
 );
 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)}
   />
 );
 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())}
   />

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}
               />
             )
           ) : (

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;