Add countdown

Author: baomastr

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/VoteProposalUi/index.stories.tsx

@@ -21,34 +21,38 @@ export const Active = () => (
     votedAgainst="2130.02 XVS"
     abstain="100 XVS"
     voteStatus="votedFor"
-    cancelDate="27 Jun 13:54"
+    cancelDate={new Date(Date.now() + 3650000)}
   />
 );
 export const Queued = () => (
   <VoteProposalUi
     proposalNumber={58}
     proposalText="Buy back and burn and Tokenomic contribution finised soon"
     proposalStatus="queued"
+    cancelDate={new Date(Date.now() + 3650000)}
   />
 );
 export const ReadyToExecute = () => (
   <VoteProposalUi
     proposalNumber={58}
     proposalText="Buy back and burn and Tokenomic contribution finised 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"
     proposalStatus="executed"
+    cancelDate={new Date(Date.now() + 3650000)}
   />
 );
 export const Cancelled = () => (
   <VoteProposalUi
     proposalNumber={58}
     proposalText="Buy back and burn and Tokenomic contribution finised soon"
     proposalStatus="cancelled"
+    cancelDate={new Date(Date.now())}
   />
 );

src/components/v2/VoteProposalUi/index.tsx

@@ -1,5 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import React, { useMemo } from 'react';
+import Countdown from 'react-countdown';
+import { CountdownRenderProps } from 'react-countdown/dist/Countdown';
 import { SerializedStyles } from '@emotion/react';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
@@ -87,7 +89,7 @@ interface IVoteProposalUiProps {
   proposalNumber: number;
   proposalText: string;
   proposalStatus: ProposalStatus;
-  cancelDate?: string;
+  cancelDate?: Date;
   voteStatus?: VoteStatus;
   votedFor?: string;
   votedAgainst?: string;
@@ -121,6 +123,30 @@ export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({
     }
   }, [voteStatus]);
 
+  const countdownRenderer = ({
+    days,
+    hours,
+    minutes,
+    seconds,
+    completed,
+  }: CountdownRenderProps) => {
+    if (completed) {
+      // Render a completed state
+      return null;
+    }
+    // Render a countdown
+    if (days) {
+      return `${days}d ${hours}h : ${minutes}m : ${seconds}s`;
+    }
+    if (hours) {
+      return `${hours}h : ${minutes}m : ${seconds}s`;
+    }
+    if (minutes) {
+      return `${minutes}m : ${seconds}s`;
+    }
+    return `${seconds}s`;
+  };
+
   return (
     <Paper className={className} css={styles.root}>
       <Grid container>
@@ -157,13 +183,18 @@ export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({
               <Typography variant="small2">
                 {t('voteProposalUi.activeUntil')}
                 <Typography css={styles.activeUntilDate} variant="small2" color="textPrimary">
-                  {cancelDate}
+                  {cancelDate.toLocaleString('en-US', {
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
                 </Typography>
               </Typography>
             )}
 
             <Typography color="textPrimary" variant="small2">
-              27h : 13m : 54s {/* // TODO: countdown calculating */}
+              <Countdown date={cancelDate} renderer={countdownRenderer} />
             </Typography>
           </div>
         </Grid>

yarn.lock

@@ -18995,6 +18995,13 @@ react-copy-to-clipboard@^5.0.2:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
+react-countdown@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.2.tgz#4cc27f28f2dcd47237ee66e4b9f6d2a21fc0b0ad"
+  integrity sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"