Add vote proposal card UI

Add vote proposal card UI

Author: coreyar

package.json

@@ -55,6 +55,7 @@
     "noop-ts": "^1.0.3",
     "react": "^16.9.6",
     "react-copy-to-clipboard": "^5.0.2",
+    "react-countdown": "^2.3.2",
     "react-dom": "npm:@hot-loader/react-dom@^17.0.1",
     "react-i18next": "^11.16.5",
     "react-markdown": "^4.3.1",

src/components/v2/Icon/icons/check.tsx

@@ -2,12 +2,18 @@ import * as React from 'react';
 import { SVGProps } from 'react';
 
 const SvgCheck = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    viewBox="0 0 65 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    strokeWidth={4}
+    {...props}
+  >
     <circle cx={32.5} cy={32} r={24} fill="currentColor" />
     <path
       d="m41.5 26-12 12-6-6"
       stroke="#fff"
-      strokeWidth={4}
+      strokeWidth="inherit"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

src/components/v2/Icon/icons/dots.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDots = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="21"
+    height="4"
+    viewBox="0 0 21 4"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="10.5" cy="2" r="2" fill="currentColor" />
+    <circle cx="18.5" cy="2" r="2" fill="currentColor" />
+    <circle cx="2.5" cy="2" r="2" fill="currentColor" />
+  </svg>
+);
+
+export default SvgDots;

src/components/v2/Icon/icons/exclamation.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgExclamation = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 3 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx="1.5" cy="16.5" r="1.5" fill="currentColor" />
+    <rect x="0.5" width="2" height="12" rx="1" fill="currentColor" />
+  </svg>
+);
+
+export default SvgExclamation;

src/components/v2/Icon/icons/index.ts

@@ -37,6 +37,8 @@ export { default as checkInline } from './checkInline';
 export { default as mark } from './mark';
 export { default as arrowShaft } from './arrowShaft';
 export { default as notice } from './notice';
+export { default as dots } from './dots';
+export { default as exclamation } from './exclamation';
 
 // Coin icons
 export { default as aave } from './coins/aave';

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

@@ -13,6 +13,18 @@ export const ValidProgressBar = () => (
   <ProgressBar value={50} step={5} mark={75} ariaLabel="Storybook slider" min={0} max={100} />
 );
 
+export const ProgressBarWithCustomProgressColor = () => (
+  <ProgressBar
+    successColor="yellow"
+    value={50}
+    step={5}
+    mark={75}
+    ariaLabel="Storybook slider"
+    min={0}
+    max={100}
+  />
+);
+
 export const ValidProgressBarWithTooltip = () => (
   <ProgressBar
     value={50}

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,6 +20,7 @@ export interface IProgressBarProps {
   markTooltip?: ITooltipProps['title'];
   className?: string;
   tooltipPlacement?: ITooltipProps['placement'];
+  successColor?: string;
 }
 
 export const ProgressBar = ({
@@ -33,13 +35,15 @@ export const ProgressBar = ({
   markTooltip,
   className,
   tooltipPlacement = 'top',
+  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,
+    successColor,
   });
 
   const renderMark = (props?: NonNullable<SliderTypeMap['props']['componentsProps']>['mark']) => (

src/components/v2/ProgressBar/styles.ts

@@ -1,22 +1,28 @@
 import { css } from '@emotion/react';
 import { useTheme } from '@mui/material';
 
-export const useStyles = ({ over, secondaryOver }: { over: boolean; secondaryOver: boolean }) => {
+export const useStyles = ({
+  over,
+  secondaryOver,
+  successColor,
+}: {
+  over: boolean;
+  secondaryOver: boolean;
+  successColor: string;
+}) => {
   const theme = useTheme();
   return {
     slider: css`
       display: block;
-      color: ${over ? theme.palette.interactive.error50 : theme.palette.interactive.success};
+      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: ${over ? theme.palette.interactive.error50 : successColor};
       }
       .MuiSlider-track {
-        background-color: ${over
-          ? theme.palette.interactive.error50
-          : theme.palette.interactive.success};
+        background-color: ${over ? theme.palette.interactive.error50 : successColor};
         height: ${theme.spacing(2)};
         border-radius: ${theme.spacing(1)};
       }

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

@@ -0,0 +1,117 @@
+/** @jsxImportSource @emotion/react */
+import React, { useMemo } from 'react';
+import { BigNumber } from 'bignumber.js';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'translation';
+import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
+import { TokenId } from 'types';
+import { convertWeiToCoins } from 'utilities/common';
+import { ProgressBar } from '../../ProgressBar';
+import { useStyles } from '../styles';
+
+interface IActiveVotingProgressProps {
+  tokenId: TokenId;
+  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,
+  votedForWei,
+  votedAgainstWei,
+  abstainedWei,
+  votedTotalWei,
+}) => {
+  const styles = useStyles();
+  const { t } = useTranslation();
+
+  const votedTotalCoins = getValueNumber(tokenId, votedTotalWei);
+
+  const defaultProgressbarProps = {
+    step: 0.0001,
+    min: 0,
+
+    // || 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: getValueString(tokenId, votedForWei),
+        progressBarProps: {
+          ariaLabel: t('voteProposalUi.statusCard.ariaLabelFor'),
+          value: getValueNumber(tokenId, votedForWei),
+        },
+      },
+      {
+        id: 'against',
+        label: t('voteProposalUi.statusCard.against'),
+        value: getValueString(tokenId, votedAgainstWei),
+        progressBarProps: {
+          successColor: PALETTE.interactive.error50,
+          ariaLabel: t('voteProposalUi.statusCard.ariaLabelAgainst'),
+          value: getValueNumber(tokenId, votedAgainstWei),
+        },
+      },
+      {
+        id: 'abstain',
+        label: t('voteProposalUi.statusCard.abstain'),
+        value: getValueString(tokenId, abstainedWei),
+        progressBarProps: {
+          successColor: PALETTE.text.secondary,
+          ariaLabel: t('voteProposalUi.statusCard.ariaLabelAbstain'),
+          value: getValueNumber(tokenId, abstainedWei),
+        },
+      },
+    ],
+    [votedForWei, votedAgainstWei, abstainedWei],
+  );
+
+  return (
+    <div css={styles.votesWrapper}>
+      {activeProposalVotingData.map(({ id, label, value, progressBarProps }) => {
+        if (!value) {
+          return null;
+        }
+        return (
+          <React.Fragment key={id}>
+            <div css={styles.voteRow}>
+              <Typography variant="small2" color="textPrimary">
+                {label}
+              </Typography>
+
+              <Typography variant="small2" color="textPrimary">
+                {value}
+              </Typography>
+            </div>
+            <ProgressBar {...defaultProgressbarProps} {...progressBarProps} />
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { BigNumber } from 'bignumber.js';
+import { withThemeProvider, withCenterStory } from 'stories/decorators';
+import { VoteProposalUi } from '.';
+
+export default {
+  title: 'Components/VoteProposalUi',
+  decorators: [withThemeProvider, withCenterStory({ width: 750 })],
+  parameters: {
+    backgrounds: {
+      default: 'Primary',
+    },
+  },
+};
+
+export const Active = () => (
+  <VoteProposalUi
+    proposalNumber={58}
+    proposalText="Buy back and burn and Tokenomic contribution finished soon"
+    proposalStatus="active"
+    votedForWei={new BigNumber('500000000000000000')}
+    votedAgainstWei={new BigNumber('2000000000000000000')}
+    abstainedWei={new BigNumber('0')}
+    userVoteStatus="votedFor"
+    cancelDate={new Date(Date.now() + 3650000)}
+    tokenId="xvs"
+  />
+);
+export const Queued = () => (
+  <VoteProposalUi
+    proposalNumber={58}
+    proposalText="Buy back and burn and Tokenomic contribution finished soon with very very very very very very very very very very very very very very very very long text example"
+    proposalStatus="queued"
+    cancelDate={new Date(Date.now() + 3650000)}
+  />
+);
+export const ReadyToExecute = () => (
+  <VoteProposalUi
+    proposalNumber={58}
+    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 finished soon"
+    proposalStatus="executed"
+    cancelDate={new Date(Date.now() + 3650000)}
+  />
+);
+export const Cancelled = () => (
+  <VoteProposalUi
+    proposalNumber={58}
+    proposalText="Buy back and burn and Tokenomic contribution finished soon"
+    proposalStatus="cancelled"
+    cancelDate={new Date(Date.now())}
+  />
+);