Links from events to blocks (#2761)

packages/page-explorer/src/BlockHeader.tsx

@@ -20,12 +20,11 @@ function BlockHeader ({ value }: Props): React.ReactElement<Props> | null {
   }
 
   const hashHex = value.hash.toHex();
-  const textNumber = formatNumber(value.number);
 
   return (
     <tr>
       <td className='number'>
-        <h2><Link to={`/explorer/query/${hashHex}`}>{textNumber}</Link></h2>
+        <h2><Link to={`/explorer/query/${hashHex}`}>{formatNumber(value.number)}</Link></h2>
       </td>
       <td className='all hash overflow'>{hashHex}</td>
       <td className='address'>

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

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

packages/page-explorer/src/Event.tsx

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

packages/page-explorer/src/Events.tsx

@@ -5,19 +5,23 @@
 import { KeyedEvent } from './types';
 
 import React, { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { Table } from '@polkadot/react-components';
+import { formatNumber } from '@polkadot/util';
 
 import Event from './Event';
 import { useTranslation } from './translate';
 
 interface Props {
+  className?: string;
   emptyLabel?: React.ReactNode;
   events?: KeyedEvent[];
   eventClassName?: string;
   label?: React.ReactNode;
 }
 
-function Events ({ emptyLabel, eventClassName, events, label }: Props): React.ReactElement<Props> {
+function Events ({ className, emptyLabel, eventClassName, events, label }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -26,21 +30,24 @@ function Events ({ emptyLabel, eventClassName, events, label }: Props): React.Re
 
   return (
     <Table
+      className={className}
       empty={emptyLabel || t('No events available')}
       header={header}
     >
       {events && events
         .filter(({ record: { event: { method, section } } }) => !!method && !!section)
-        .map(({ blockNumber, key, record }): React.ReactNode => (
+        .map(({ blockHash, blockNumber, index, key, record }): React.ReactNode => (
           <tr
             className={eventClassName}
             key={key}
           >
             <td className='overflow'>
-              <Event
-                blockNumber={blockNumber}
-                value={record}
-              />
+              <Event value={record} />
+              {blockNumber && (
+                <Link
+                  className='event-link'
+                  to={`/explorer/query/${blockHash}`}>{formatNumber(blockNumber)}-{index}</Link>
+              )}
             </td>
           </tr>
         ))
@@ -49,4 +56,14 @@ function Events ({ emptyLabel, eventClassName, events, label }: Props): React.Re
   );
 }
 
-export default React.memo(Events);
+export default React.memo(styled(Events)`
+  td.overflow {
+    position: relative;
+
+    .event-link {
+      position: absolute;
+      right: 0.75rem;
+      top: 0.5rem;
+    }
+  }
+`);

packages/page-explorer/src/types.ts

@@ -5,7 +5,9 @@
 import { BlockNumber, EventRecord } from '@polkadot/types/interfaces';
 
 export interface KeyedEvent {
+  blockHash?: string;
   blockNumber?: BlockNumber;
+  index?: number;
   key: string;
   record: EventRecord;
 }

packages/react-query/src/Events.tsx

@@ -9,11 +9,15 @@ import { useApi } from '@polkadot/react-hooks';
 import { stringToU8a } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-interface KeyedEvent {
+interface IndexedEvent {
+  index: number;
+  record: EventRecord;
+}
+
+interface KeyedEvent extends IndexedEvent {
   blockHash: string;
   blockNumber: BlockNumber;
   key: string;
-  record: EventRecord;
 }
 
 type Events = KeyedEvent[];
@@ -37,7 +41,9 @@ function EventsBase ({ children }: Props): React.ReactElement<Props> {
       let prevEventHash: string | null = null;
 
       api.query.system.events((records): void => {
-        const newEvents = records.filter(({ event }) => event.section !== 'system');
+        const newEvents: IndexedEvent[] = records
+          .map((record, index) => ({ index, record }))
+          .filter(({ record: { event: { section } } }) => section !== 'system');
         const newEventHash = xxhashAsHex(stringToU8a(JSON.stringify(newEvents)));
 
         if (newEventHash !== prevEventHash && newEvents.length) {
@@ -52,9 +58,10 @@ function EventsBase ({ children }: Props): React.ReactElement<Props> {
               prevBlockHash = blockHash;
 
               setState((events) => [
-                ...newEvents.map((record, index): KeyedEvent => ({
+                ...newEvents.map(({ index, record }): KeyedEvent => ({
                   blockHash,
                   blockNumber,
+                  index,
                   key: `${blockNumber}-${blockHash}-${index}`,
                   record
                 })),