Add block number to events on explorer page (#2759)

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

@@ -77,8 +77,9 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
         className='top'
         colSpan={2}
       >
-        {thisEvents.map(({ key, record }) =>
+        {thisEvents.map(({ blockNumber, key, record }) =>
           <Event
+            blockNumber={blockNumber}
             className='explorer--BlockByHash-event'
             key={key}
             value={record}

packages/page-explorer/src/Event.tsx

@@ -2,21 +2,23 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { EventRecord } from '@polkadot/types/interfaces';
+import { BlockNumber, EventRecord } from '@polkadot/types/interfaces';
+import { formatNumber } from '@polkadot/util';
 
 import React from 'react';
 import { Event as EventDisplay, Expander } from '@polkadot/react-components';
 
 interface Props {
+  blockNumber?: BlockNumber;
   className?: string;
   value: EventRecord;
 }
 
-function Event ({ className, value: { event } }: Props): React.ReactElement<Props> {
+function Event ({ blockNumber, className, value: { event } }: Props): React.ReactElement<Props> {
   return (
     <Expander
       className={className}
-      summary={`${event.section}.${event.method}`}
+      summary={`${event.section}.${event.method}${blockNumber ? ` [${formatNumber(blockNumber)}]` : ''}`}
       summaryMeta={event.meta}
     >
       <EventDisplay

packages/page-explorer/src/Events.tsx

@@ -31,13 +31,16 @@ function Events ({ emptyLabel, eventClassName, events, label }: Props): React.Re
     >
       {events && events
         .filter(({ record: { event: { method, section } } }) => !!method && !!section)
-        .map(({ key, record }): React.ReactNode => (
+        .map(({ blockNumber, key, record }): React.ReactNode => (
           <tr
             className={eventClassName}
             key={key}
           >
             <td className='overflow'>
-              <Event value={record} />
+              <Event
+                blockNumber={blockNumber}
+                value={record}
+              />
             </td>
           </tr>
         ))

packages/page-explorer/src/types.ts

@@ -2,9 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { EventRecord } from '@polkadot/types/interfaces';
+import { BlockNumber, EventRecord } from '@polkadot/types/interfaces';
 
 export interface KeyedEvent {
+  blockNumber?: BlockNumber;
   key: string;
   record: EventRecord;
 }