Display justifications (#4876)

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

@@ -15,6 +15,7 @@ import { formatNumber } from '@polkadot/util';
 import Events from '../Events';
 import { useTranslation } from '../translate';
 import Extrinsics from './Extrinsics';
+import Justifications from './Justifications';
 import Logs from './Logs';
 
 interface Props {
@@ -122,6 +123,7 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
             </Columar.Column>
             <Columar.Column>
               <Logs value={getHeader.digest.logs} />
+              <Justifications value={getBlock.justifications} />
             </Columar.Column>
           </Columar>
         </>

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

@@ -0,0 +1,67 @@
+// Copyright 2017-2021 @polkadot/app-explorer authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Option, Tuple } from '@polkadot/types';
+import type { Justifications } from '@polkadot/types/interfaces';
+import type { Codec, TypeDef } from '@polkadot/types/types';
+
+import React, { useRef } from 'react';
+
+import { Expander, Table } from '@polkadot/react-components';
+import Params from '@polkadot/react-params';
+import { getTypeDef } from '@polkadot/types/create';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  value: Option<Justifications>;
+}
+
+function formatTuple (tuple: Tuple): React.ReactNode {
+  const params = tuple.Types.map((type): { type: TypeDef } => ({
+    type: getTypeDef(type)
+  }));
+  const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
+    isValid: true,
+    value
+  }));
+
+  return (
+    <Params
+      isDisabled
+      params={params}
+      values={values}
+    />
+  );
+}
+
+function JustificationList ({ value }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
+  const headerRef = useRef([[t('justifications'), 'start']]);
+
+  const justifications = value.unwrapOr(null);
+
+  if (!justifications) {
+    return null;
+  }
+
+  return (
+    <Table
+      empty={t<string>('No justifications available')}
+      header={headerRef.current}
+    >
+      {justifications?.map((justification, index) => (
+        <tr key={`justification:${index}`}>
+          <td className='overflow'>
+            <Expander summary={justification[0].toString()}>
+              {formatTuple(justification as unknown as Tuple)}
+            </Expander>
+          </td>
+        </tr>
+      ))}
+    </Table>
+  );
+}
+
+export default React.memo(JustificationList);

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

@@ -28,10 +28,9 @@ function formatU8a (value: Raw): React.ReactNode {
 }
 
 function formatStruct (struct: Struct): React.ReactNode {
-  const types: Record<string, string> = struct.Type;
-  const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({
+  const params = Object.entries(struct.Type).map(([name, value]): { name: string; type: TypeDef } => ({
     name,
-    type: getTypeDef(types[name])
+    type: getTypeDef(value)
   }));
   const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({
     isValid: true,
@@ -48,8 +47,7 @@ function formatStruct (struct: Struct): React.ReactNode {
 }
 
 function formatTuple (tuple: Tuple): React.ReactNode {
-  const types = tuple.Types;
-  const params = types.map((type): { type: TypeDef } => ({
+  const params = tuple.Types.map((type): { type: TypeDef } => ({
     type: getTypeDef(type)
   }));
   const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
@@ -100,8 +98,7 @@ function formatItem (item: DigestItem): React.ReactNode {
   return <div>{item.value.toString().split(',').join(', ')}</div>;
 }
 
-function Logs (props: Props): React.ReactElement<Props> | null {
-  const { value } = props;
+function Logs ({ value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
   const headerRef = useRef([[t('logs'), 'start']]);