From 05a8c8e5237fbe8a0cf83fb1259f3c3f42391fc8 Mon Sep 17 00:00:00 2001
From: Dan Forbes <dan@danforbes.dev>
Date: Sat, 16 May 2020 23:19:43 -0700
Subject: [PATCH] Add block number to events on explorer page (#2759)

---
 packages/page-explorer/src/BlockInfo/Extrinsic.tsx | 3 ++-
 packages/page-explorer/src/Event.tsx               | 8 +++++---
 packages/page-explorer/src/Events.tsx              | 7 +++++--
 packages/page-explorer/src/types.ts                | 3 ++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
index 14a6be4342..999caf2bb6 100644
--- a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
+++ b/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}
diff --git a/packages/page-explorer/src/Event.tsx b/packages/page-explorer/src/Event.tsx
index ac03576294..d51ccba6f0 100644
--- a/packages/page-explorer/src/Event.tsx
+++ b/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
diff --git a/packages/page-explorer/src/Events.tsx b/packages/page-explorer/src/Events.tsx
index 4efbf7facb..b46d1a38e0 100644
--- a/packages/page-explorer/src/Events.tsx
+++ b/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>
         ))
diff --git a/packages/page-explorer/src/types.ts b/packages/page-explorer/src/types.ts
index 798d032dd0..ac34147640 100644
--- a/packages/page-explorer/src/types.ts
+++ b/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;
 }