Display time left (not blocks) (#3259)

* Display time left (not blocks)

* Poll percentages

* Poll progress

packages/page-poll/src/index.tsx

@@ -69,8 +69,6 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
     );
   }
 
-  console.error(turnout);
-
   const blocksLeft = (api.consts.poll.end as BlockNumber).sub(bestNumber);
   const canVote = blocksLeft.gt(BN_ZERO);
   const options: [string, string, boolean, (value: boolean) => void][] = [
@@ -136,8 +134,12 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
                       <div className='result'>
                         <FormatBalance value={totals[index]} />
                         <Progress
-                          total={DIV}
-                          value={progress[index]}
+                          isDisabled={!turnout}
+                          percent={
+                            turnout?.voted.gtn(0)
+                              ? totals[index].muln(10000).div(turnout.voted).toNumber() / 100
+                              : 0
+                          }
                         />
                       </div>
                     )

packages/react-components/src/CardSummary.tsx

@@ -69,11 +69,18 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
               <div className={isTimed ? 'isSecondary' : 'isPrimary'}>
                 {!left || isUndefined(progress.total)
                   ? '-'
-                  : `${left}${progress.isPercent ? '' : '/'}${
-                    progress.isPercent
-                      ? '%'
-                      : formatNumber(progress.total)
-                  }`
+                  : !isTimed || progress.isPercent || !progress.value
+                    ? `${left}${progress.isPercent ? '' : '/'}${
+                      progress.isPercent
+                        ? '%'
+                        : formatNumber(progress.total)
+                    }`
+                    : (
+                      <BlockToTime
+                        blocks={progress.total.sub(progress.value)}
+                        className='timer'
+                      />
+                    )
                 }
               </div>
             </>
@@ -129,9 +136,13 @@ export default React.memo(styled(CardSummary)`
     }
 
     .isSecondary {
-      font-size: 1.1rem;
-      font-weight: normal;
+      font-size: 1rem;
+      font-weight: 100;
       margin-top: 0.25rem;
+
+      .timer {
+        min-width: 8rem;
+      }
     }
   }
 

packages/react-components/src/Progress.tsx

@@ -10,9 +10,11 @@ import { bnToBn, isBn, isUndefined } from '@polkadot/util';
 
 interface Props {
   className?: string;
+  isDisabled?: boolean;
   percent?: BN | number;
   total?: UInt | BN | number;
   value?: UInt | BN | number;
+  withSummary?: boolean;
 }
 
 interface RotateProps {
@@ -33,7 +35,7 @@ function DivClip ({ angle, type }: RotateProps): React.ReactElement<RotateProps>
 
 const Clip = React.memo(DivClip);
 
-function Progress ({ className = '', percent, total, value }: Props): React.ReactElement<Props> | null {
+function Progress ({ className = '', isDisabled, percent, total, value, withSummary = true }: Props): React.ReactElement<Props> | null {
   const _total = bnToBn(total);
   const _value = bnToBn(value);
   const width = _total.gtn(0)
@@ -49,7 +51,7 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac
   const angle = width * 360 / 100;
 
   return (
-    <div className={`ui--Progress ${className}`}>
+    <div className={`ui--Progress${isDisabled ? ' isDisabled' : ''} ${className}`}>
       <div className='background ui--highlight--bg' />
       <Clip
         angle={
@@ -68,7 +70,7 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac
         type='second'
       />
       <div className='inner'>
-        <div>{width.toFixed(1)}%</div>
+        {withSummary && <div>{width.toFixed(1)}%</div>}
       </div>
     </div>
   );
@@ -76,11 +78,16 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac
 
 export default React.memo(styled(Progress)`
   border-radius: 100%;
+  clip-path: circle(50%);
   height: 4.5rem;
-  overflow: hidden;
   position: relative;
   width: 4.5rem;
 
+  &.isDisabled {
+    filter: grayscale(100%);
+    opacity: 0.25;
+  }
+
   .background,
   .clip {
     bottom: 0;