Display turnout (#2732)

packages/page-democracy/src/Overview/DispatchEntry.tsx

@@ -46,7 +46,7 @@ function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): Reac
           />
         )}
       </td>
-      <td className='mini'>
+      <td className='mini hide-small'>
         <LinkExternal
           data={index}
           type='referendum'

packages/page-democracy/src/Overview/DispatchQueue.tsx

@@ -23,7 +23,8 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
   const header = useMemo(() => [
     [t('dispatch queue'), 'start', 2],
     [t('enact')],
-    [undefined, undefined, 2]
+    [undefined, undefined],
+    [undefined, 'hide-small']
   ], [t]);
 
   return (

packages/page-democracy/src/Overview/Proposal.tsx

@@ -64,7 +64,7 @@ function Proposal ({ className, value: { balance, image, imageHash, index, propo
           )}
         </Button.Group>
       </td>
-      <td className='mini'>
+      <td className='mini hide-small'>
         <LinkExternal
           data={index}
           type='proposal'

packages/page-democracy/src/Overview/Proposals.tsx

@@ -24,7 +24,8 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
     [t('proposals'), 'start', 2],
     [t('proposer'), 'address'],
     [t('locked')],
-    [undefined, undefined, 3]
+    [undefined, undefined, 2],
+    [undefined, 'hide-small']
   ], [t]);
 
   return (

packages/page-democracy/src/Overview/Referendum.tsx

@@ -3,13 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveReferendumExt } from '@polkadot/api-derive/types';
-import { BlockNumber } from '@polkadot/types/interfaces';
+import { Balance, BlockNumber } from '@polkadot/types/interfaces';
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Badge, Button, Icon, LinkExternal } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { BlockToTime } from '@polkadot/react-query';
+import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { formatNumber, isBoolean } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -28,12 +28,20 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
+  const totalIssuance = useCall<Balance>(api.query.balances.totalIssuance, []);
+  const [turnoutPercentage, setTurnoutPercentage] = useState<string>('');
   const { changeAye, changeNay } = useChangeCalc(status.threshold, votedAye, votedNay, votedTotal);
   const threshold = useMemo(
     () => status.threshold.type.toString().replace('majority', ' majority '),
     [status]
   );
 
+  useEffect((): void => {
+    totalIssuance && votedTotal && setTurnoutPercentage(
+      `${((votedTotal.muln(10000).div(totalIssuance).toNumber()) / 100).toFixed(2)}%`
+    );
+  }, [totalIssuance, votedTotal]);
+
   if (!bestNumber || status.end.sub(bestNumber).lten(0)) {
     return null;
   }
@@ -48,6 +56,14 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
         imageHash={imageHash}
         proposal={image?.proposal}
       />
+      <td className='number together hide-medium'>
+        {turnoutPercentage && (
+          <>
+            <FormatBalance value={votedTotal} />
+            <div>{turnoutPercentage}</div>
+          </>
+        )}
+      </td>
       <td className='number together'>
         <BlockToTime blocks={remainBlock} />
         {t('{{blocks}} blocks', { replace: { blocks: formatNumber(remainBlock) } })}
@@ -97,7 +113,7 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
           )}
         </Button.Group>
       </td>
-      <td className='mini'>
+      <td className='mini hide-small'>
         <LinkExternal
           data={index}
           type='referendum'

packages/page-democracy/src/Overview/Referendums.tsx

@@ -20,11 +20,13 @@ function Referendums ({ className, referendums }: Props): React.ReactElement<Pro
 
   const header = useMemo(() => [
     [t('referenda'), 'start', 2],
+    [t('turnout'), 'hide-medium'],
     [t('remaining')],
     [t('activate')],
     [t('aye')],
     [t('nay')],
-    [undefined, undefined, 3]
+    [undefined, undefined, 2],
+    [undefined, 'hide-small']
   ], [t]);
 
   return (

packages/react-components/src/Table/index.tsx

@@ -96,6 +96,18 @@ export default React.memo(styled(Table)`
             white-space: normal;
           }
         }
+
+        &.hide-medium {
+          @media only screen and (max-width: 1400px) {
+            display: none;
+          }
+        }
+
+        &.hide-small {
+          @media only screen and (max-width: 1000px) {
+            display: none;
+          }
+        }
       }
     }
   }