Show society rotation & challenge periods (#2160)

* Shw rotation & challenge periods

* Display Bids

packages/app-society/src/Overview/Bid.tsx

@@ -0,0 +1,37 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Bid } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { AddressSmall } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  value: Bid;
+}
+
+export default function BidRow ({ value: { who, kind, value } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <tr>
+      <td className='top'>
+        <AddressSmall value={who} />
+      </td>
+      <td className='number top'>
+        <label>{t('kind')}</label>
+        {kind.type}
+      </td>
+      <td className='number top'>
+        <FormatBalance
+          label={<label>{t('value')}</label>}
+          value={value}
+        />
+      </td>
+    </tr>
+  );
+}

packages/app-society/src/Overview/Bids.tsx

@@ -0,0 +1,43 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Bid } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { Table } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import BidRow from './Bid';
+
+interface Props {
+  className?: string;
+}
+
+export default function Bids ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const bids = useCall<Bid[]>(api.query.society.bids, []);
+
+  return (
+    <div className={`overviewSection ${className}`}>
+      <h1>{t('bids')}</h1>
+      {bids?.length
+        ? (
+          <Table>
+            <Table.Body>
+              {bids.map((bid): React.ReactNode => (
+                <BidRow
+                  key={bid.who.toString()}
+                  value={bid}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No bids')
+      }
+    </div>
+  );
+}

packages/app-society/src/Overview/Candidate.tsx

@@ -24,11 +24,11 @@ export default function Candidate ({ value: { accountId, kind, value } }: Props)
       </td>
       <td className='number top'>
         <label>{t('kind')}</label>
-        {kind.toString()}
+        {kind.type}
       </td>
       <td className='number top'>
         <FormatBalance
-          label={t('value')}
+          label={<label>{t('value')}</label>}
           value={value}
         />
       </td>

packages/app-society/src/Overview/Summary.tsx

@@ -3,11 +3,11 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveSociety } from '@polkadot/api-derive/types';
-import { AccountId } from '@polkadot/types/interfaces';
+import { AccountId, BlockNumber } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import styled from 'styled-components';
-import { AccountName, IdentityIcon, SummaryBox, CardSummary } from '@polkadot/react-components';
+import { AccountIndex, IdentityIcon, SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
@@ -34,7 +34,7 @@ function Name ({ label, value }: NameProps): React.ReactElement<NameProps> | nul
           size={24}
           value={value}
         />
-        <AccountName value={value} />
+        <AccountIndex value={value} />
       </div>
     </CardSummary>
   );
@@ -45,6 +45,7 @@ function Summary ({ className }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const info = useCall<DeriveSociety>(api.derive.society.info, []);
   const members = useCall<any[]>(api.derive.society.members, []);
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
 
   const pot = info?.pot.gtn(0)
     ? info.pot.toString()
@@ -58,19 +59,42 @@ function Summary ({ className }: Props): React.ReactElement<Props> {
           value={info?.head}
         />
       </section>
-      <section>
+      <section className='ui--media-medium'>
         {info && members && (
           <CardSummary label={t('members')}>
             {members.length}/{info.maxMembers.toString()}
           </CardSummary>
         )}
       </section>
+      {bestNumber && (
+        <>
+          <section>
+            <CardSummary
+              label={t('rotation')}
+              progress={{
+                total: api.consts.society.rotationPeriod as BlockNumber,
+                value: bestNumber.mod(api.consts.society.rotationPeriod as BlockNumber)
+              }}
+            />
+          </section>
+          <section className='ui--media-large'>
+            <CardSummary
+              label={t('challenge')}
+              progress={{
+                total: api.consts.society.challengePeriod as BlockNumber,
+                value: bestNumber.mod(api.consts.society.challengePeriod as BlockNumber)
+              }}
+            />
+          </section>
+        </>
+      )}
       <section>
-        {pot && (
-          <CardSummary label={t('available')}>
-            {formatBalance(pot, false)}{formatBalance.calcSi(pot).value}
-          </CardSummary>
-        )}
+        <CardSummary label={t('pot')}>
+          {pot
+            ? <>{formatBalance(pot, false)}{formatBalance.calcSi(pot).value}</>
+            : '-'
+          }
+        </CardSummary>
       </section>
     </SummaryBox>
   );
@@ -80,7 +104,7 @@ export default styled(Summary)`
   .society--header--account {
     white-space: nowrap;
 
-    .ui--AccountName,
+    .ui--AccountIndex,
     .ui--IdentityIcon {
       display: inline-block;
     }

packages/app-society/src/Overview/index.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import Bids from './Bids';
 import Candidates from './Candidates';
 import Members from './Members';
 import Summary from './Summary';
@@ -19,6 +20,7 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
       <Summary />
       <Members />
       <Candidates />
+      <Bids />
     </div>
   );
 }