Cleanup expander use (#2483)

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

@@ -46,7 +46,6 @@ function Extrinsics ({ className, blockNumber, label, value }: Props): React.Rea
             return (
               <tr key={`extrinsic:${index}`}>
                 <td className='relative overflow'>
-                  <div>{section}.{method}&nbsp;(#{formatNumber(index)})</div>
                   {extrinsic.isSigned && (
                     <div className='explorer--BlockByHash-header'>
                       <div>
@@ -57,7 +56,10 @@ function Extrinsics ({ className, blockNumber, label, value }: Props): React.Rea
                       </div>
                     </div>
                   )}
-                  <Expander summaryMeta={meta}>
+                  <Expander
+                    summary={`${section}.${method} (#${formatNumber(index)})`}
+                    summaryMeta={meta}
+                  >
                     <Call
                       className='details'
                       mortality={

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

@@ -117,8 +117,7 @@ function Logs (props: Props): React.ReactElement<Props> | null {
           {value.map((log, index) => (
             <tr key={`log:${index}`}>
               <td className='overflow'>
-                <div>{log.type.toString()}</div>
-                <Expander summary={t('Details')}>
+                <Expander summary={log.type.toString()}>
                   {formatItem(log)}
                 </Expander>
               </td>

packages/page-explorer/src/Event.tsx

@@ -0,0 +1,34 @@
+// Copyright 2017-2020 @polkadot/app-explorer authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { KeyedEvent } from './types';
+
+import React from 'react';
+import { Event as EventDisplay, Expander } from '@polkadot/react-components';
+import { formatNumber } from '@polkadot/util';
+
+interface Props {
+  event: KeyedEvent;
+  withoutIndex?: boolean;
+}
+
+function Event ({ event: { record: { event, phase } }, withoutIndex }: Props): React.ReactElement<Props> {
+  return (
+    <Expander
+      summary={`${event.section}.${event.method} ${
+        !withoutIndex && phase.isApplyExtrinsic
+          ? `(#${formatNumber(phase.asApplyExtrinsic)})`
+          : ''
+      }`}
+      summaryMeta={event.meta}
+    >
+      <EventDisplay
+        className='details'
+        value={event}
+      />
+    </Expander>
+  );
+}
+
+export default React.memo(Event);

packages/page-explorer/src/Events.tsx

@@ -5,9 +5,9 @@
 import { KeyedEvent } from './types';
 
 import React from 'react';
-import { Event as EventDisplay, Expander, Table } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
+import { Table } from '@polkadot/react-components';
 
+import Event from './Event';
 import { useTranslation } from './translate';
 
 interface Props {
@@ -29,23 +29,16 @@ function Events ({ emptyLabel, eventClassName, events, label, withoutIndex }: Pr
       <Table.Body empty={emptyLabel || t('No events available')}>
         {events
           .filter(({ record: { event: { method, section } } }): boolean => !!method && !!section)
-          .map(({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => (
+          .map((event: KeyedEvent): React.ReactNode => (
             <tr
               className={eventClassName}
-              key={key}
+              key={event.key}
             >
               <td className='overflow'>
-                <div>{event.section}.{event.method}&nbsp;{
-                  !withoutIndex && phase.isApplyExtrinsic
-                    ? `(#${formatNumber(phase.asApplyExtrinsic)})`
-                    : ''
-                }</div>
-                <Expander summaryMeta={event.meta}>
-                  <EventDisplay
-                    className='details'
-                    value={event}
-                  />
-                </Expander>
+                <Event
+                  event={event}
+                  withoutIndex={withoutIndex}
+                />
               </td>
             </tr>
           ))

packages/react-components/src/Expander.tsx

@@ -55,11 +55,11 @@ function Expander ({ children, className, isOpen, summary, summaryMeta, withDot,
   );
 
   return (
-    <div
-      className={`ui--Expander ${isExpanded && 'isExpanded'} ${hasContent && 'hasContent'} ${className}`}
-      onClick={toggleExpanded}
-    >
-      <div className='ui--Expander-summary'>
+    <div className={`ui--Expander ${isExpanded && 'isExpanded'} ${hasContent && 'hasContent'} ${className}`}>
+      <div
+        className='ui--Expander-summary'
+        onClick={toggleExpanded}
+      >
         <div className='ui--Expander-summary-header'>
           {hasContent
             ? <Icon name={isExpanded ? 'angle double down' : 'angle double right'} />