Adjust summary for bounty-specific (UI-like countdown, total bounty summary) (#4652)

packages/page-bounties/src/Summary.tsx

@@ -1,12 +1,12 @@
 // Copyright 2017-2020 @polkadot/app-bounties authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import BN from 'bn.js';
+import React, { useMemo } from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
-import Progress from '@polkadot/react-components/Progress';
 import { useTreasury } from '@polkadot/react-hooks';
-import { BlockToTime, FormatBalance } from '@polkadot/react-query';
+import { FormatBalance } from '@polkadot/react-query';
 
 import { useBounties } from './hooks';
 import { useTranslation } from './translate';
@@ -18,9 +18,13 @@ interface Props {
 
 function Summary ({ activeBounties, className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { bestNumber, bountyIndex } = useBounties();
+  const { bestNumber, bounties, bountyIndex } = useBounties();
+  const { spendPeriod } = useTreasury();
 
-  const { spendPeriod, value } = useTreasury();
+  const totalValue = useMemo(
+    () => (bounties || []).reduce((total, { bounty: { value } }) => total.iadd(value), new BN(0)),
+    [bounties]
+  );
 
   return (
     <SummaryBox className={`ui--BountySummary ${className}`}>
@@ -35,37 +39,22 @@ function Summary ({ activeBounties, className = '' }: Props): React.ReactElement
         )}
       </section>
       <section>
-        {value && (
-          <CardSummary label={t<string>('treasury')}>
-            <FormatBalance
-              value={value}
-              withSi
-            />
-          </CardSummary>
-        )}
+        <CardSummary label={t<string>('active total')}>
+          <FormatBalance
+            value={totalValue}
+            withSi
+          />
+        </CardSummary>
+      </section>
+      <section>
         {bestNumber && spendPeriod.gtn(0) && (
-          <CardSummary label={t<string>('next bounty funding in')}>
-            <BlockToTime
-              blocks={spendPeriod.sub(bestNumber.mod(spendPeriod))}
-              className='timer'
-            />
-          </CardSummary>
-        )}
-        {spendPeriod.gtn(0) && (
           <CardSummary
-            label={t<string>('spend period')}
-          >
-            <BlockToTime
-              blocks={spendPeriod}
-              className='timer'
-            />
-          </CardSummary>
-        )}
-        {bestNumber && spendPeriod.gtn(0) && (
-          <Progress
-            className='media--1000'
-            total={spendPeriod}
-            value={bestNumber.mod(spendPeriod)}
+            label={t<string>('funding period')}
+            progress={{
+              total: spendPeriod,
+              value: bestNumber.mod(spendPeriod),
+              withTime: true
+            }}
           />
         )}
       </section>