Display extrinsic weights (#5145)

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

@@ -73,7 +73,7 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
               [t('parent'), 'start'],
               [t('extrinsics'), 'start'],
               [t('state'), 'start'],
-              []
+              [undefined, 'media--1200']
             ]
             : [['...', 'start', 6]]
         }
@@ -96,7 +96,7 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
               }</td>
               <td className='hash overflow'>{getHeader.extrinsicsRoot.toHex()}</td>
               <td className='hash overflow'>{getHeader.stateRoot.toHex()}</td>
-              <td>
+              <td className='media--1200'>
                 <LinkExternal
                   data={value}
                   type='block'

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

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { KeyedEvent } from '@polkadot/react-query/types';
-import type { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
+import type { BlockNumber, DispatchInfo, Extrinsic, Weight } from '@polkadot/types/interfaces';
 
+import BN from 'bn.js';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -18,9 +19,12 @@ interface Props {
   className?: string;
   events?: KeyedEvent[];
   index: number;
+  maxBlockWeight?: Weight;
   value: Extrinsic;
 }
 
+const BN_TEN_THOUSAND = new BN(10_000);
+
 function getEra ({ era }: Extrinsic, blockNumber?: BlockNumber): [number, number] | null {
   if (blockNumber && era.isMortalEra) {
     const mortalEra = era.asMortalEra;
@@ -31,11 +35,29 @@ function getEra ({ era }: Extrinsic, blockNumber?: BlockNumber): [number, number
   return null;
 }
 
-function filterEvents (index: number, events: KeyedEvent[] = []): KeyedEvent[] {
-  return events.filter(({ record: { phase } }) => phase.isApplyExtrinsic && phase.asApplyExtrinsic.eq(index));
+function filterEvents (index: number, events: KeyedEvent[] = [], maxBlockWeight?: Weight): [DispatchInfo | undefined, number, KeyedEvent[]] {
+  const filtered = events.filter(({ record: { phase } }) =>
+    phase.isApplyExtrinsic &&
+    phase.asApplyExtrinsic.eq(index)
+  );
+  const withInfo = filtered.filter(({ record: { event: { method, section } } }) =>
+    section === 'system' &&
+    ['ExtrinsicFailed', 'ExtrinsicSuccess'].includes(method)
+  );
+  const dispatchInfo = withInfo.length
+    ? withInfo[0].record.event.data[0] as DispatchInfo
+    : undefined;
+
+  return [
+    dispatchInfo,
+    dispatchInfo && maxBlockWeight
+      ? dispatchInfo.weight.mul(BN_TEN_THOUSAND).div(maxBlockWeight).toNumber() / 100
+      : 0,
+    filtered
+  ];
 }
 
-function ExtrinsicDisplay ({ blockNumber, className = '', events, index, value }: Props): React.ReactElement<Props> {
+function ExtrinsicDisplay ({ blockNumber, className = '', events, index, maxBlockWeight, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const { meta, method, section } = useMemo(
@@ -63,9 +85,9 @@ function ExtrinsicDisplay ({ blockNumber, className = '', events, index, value }
     [blockNumber, t, value]
   );
 
-  const thisEvents = useMemo(
-    () => filterEvents(index, events),
-    [index, events]
+  const [dispatchInfo, weightPercentage, thisEvents] = useMemo(
+    () => filterEvents(index, events, maxBlockWeight),
+    [index, events, maxBlockWeight]
   );
 
   return (
@@ -92,7 +114,7 @@ function ExtrinsicDisplay ({ blockNumber, className = '', events, index, value }
         </Expander>
       </td>
       <td
-        className='top'
+        className='top media--1000'
         colSpan={2}
       >
         {thisEvents.map(({ key, record }) =>
@@ -103,7 +125,15 @@ function ExtrinsicDisplay ({ blockNumber, className = '', events, index, value }
           />
         )}
       </td>
-      <td className='top'>
+      <td className='top number media--1400'>
+        {dispatchInfo && (
+          <>
+            <>{formatNumber(dispatchInfo.weight)}</>
+            <div>{weightPercentage.toFixed(2)}%</div>
+          </>
+        )}
+      </td>
+      <td className='top media--1200'>
         {value.isSigned && (
           <>
             <AddressMini value={value.signer} />

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

@@ -7,6 +7,7 @@ import type { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
 import React, { useMemo } from 'react';
 
 import { Table } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import ExtrinsicDisplay from './Extrinsic';
@@ -21,11 +22,13 @@ interface Props {
 
 function Extrinsics ({ blockNumber, className = '', events, label, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
 
   const header = useMemo(() => [
     [label || t<string>('extrinsics'), 'start', 2],
-    [t('events'), 'start', 2],
-    [t('signer'), 'address']
+    [t('events'), 'start media--1000', 2],
+    [t('weight'), 'media--1400'],
+    [t('signer'), 'address media--1200']
   ], [label, t]);
 
   return (
@@ -41,6 +44,7 @@ function Extrinsics ({ blockNumber, className = '', events, label, value }: Prop
           events={events}
           index={index}
           key={`extrinsic:${index}`}
+          maxBlockWeight={api.consts.system.blockWeights?.maxBlock}
           value={extrinsic}
         />
       )}