Expand block summary (#5189)

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from '../translate';
 import Extrinsics from './Extrinsics';
 import Justifications from './Justifications';
 import Logs from './Logs';
+import Summary from './Summary';
 
 interface Props {
   className?: string;
@@ -80,6 +81,10 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
 
   return (
     <div className={className}>
+      <Summary
+        events={events}
+        signedBlock={getBlock}
+      />
       <Table
         header={header}
         isFixed

packages/page-explorer/src/BlockInfo/Summary.tsx

@@ -0,0 +1,100 @@
+// Copyright 2017-2021 @polkadot/app-explorer authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { KeyedEvent } from '@polkadot/react-query/types';
+import type { Balance, DispatchInfo, SignedBlock } from '@polkadot/types/interfaces';
+
+import BN from 'bn.js';
+import React, { useMemo } from 'react';
+
+import { CardSummary, SummaryBox } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber } from '@polkadot/util';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  events?: KeyedEvent[];
+  signedBlock?: SignedBlock;
+}
+
+function Summary ({ events, signedBlock }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
+  const totalWeight = useMemo(
+    () => events
+      ?.filter(({ record: { event: { method, section } } }) =>
+        section === 'system' &&
+        ['ExtrinsicFailed', 'ExtrinsicSuccess'].includes(method)
+      )
+      .reduce((weight: BN, { record: { event: { data, method } } }) =>
+        weight.iadd(
+          (method === 'ExtrinsicSuccess'
+            ? data[0] as DispatchInfo
+            : data[1] as DispatchInfo
+          ).weight
+        ), new BN(0)
+      ),
+    [events]
+  );
+
+  const deposits = useMemo(
+    () => events
+      ?.filter(({ record: { event: { method, section } } }) =>
+        section === 'balances' &&
+        ['Deposit'].includes(method)
+      )
+      .reduce((deposits: BN, { record: { event: { data } } }) =>
+        deposits.iadd(
+          data[1] as Balance
+        ), new BN(0)
+      ),
+    [events]
+  );
+
+  const transfers = useMemo(
+    () => events
+      ?.filter(({ record: { event: { method, section } } }) =>
+        section === 'balances' &&
+        ['Transfer'].includes(method)
+      )
+      .reduce((deposits: BN, { record: { event: { data } } }) =>
+        deposits.iadd(
+          data[2] as Balance
+        ), new BN(0)
+      ),
+    [events]
+  );
+
+  if (!events || !signedBlock) {
+    return null;
+  }
+
+  return (
+    <SummaryBox>
+      <section>
+        <CardSummary label={t<string>('deposits')}>
+          <FormatBalance value={deposits} />
+        </CardSummary>
+        <CardSummary label={t<string>('transfers')}>
+          <FormatBalance value={transfers} />
+        </CardSummary>
+      </section>
+      <section>
+        <CardSummary label={t<string>('block weight')}>
+          {formatNumber(totalWeight)}
+        </CardSummary>
+      </section>
+      <section>
+        <CardSummary label={t<string>('event count')}>
+          {formatNumber(events.length)}
+        </CardSummary>
+        <CardSummary label={t<string>('extrinsic count')}>
+          {formatNumber(signedBlock.block.extrinsics.length)}
+        </CardSummary>
+      </section>
+    </SummaryBox>
+  );
+}
+
+export default React.memo(Summary);