Use ExpanderScroll on staking lists (#7406)

packages/page-staking/src/Actions/Account/ListNominees.tsx

@@ -6,7 +6,7 @@ import type { BN } from '@polkadot/util';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, Expander, MarkWarning } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll, MarkWarning } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
@@ -79,7 +79,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
   return (
     <>
       {renOver && (
-        <Expander
+        <ExpanderScroll
           className='stakeOver'
           help={t<string>('These validators are active but only the top {{max}} nominators by backing stake will be receiving rewards. The nominating stash is not one of those to be rewarded in the current era.', { replace: api.consts.staking?.maxNominatorRewardedPerValidator?.toString() })}
           renderChildren={renOver[1]}
@@ -87,28 +87,28 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
         />
       )}
       {renActive && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The validators selected by the Phragmen algorithm to nominate for this era.')}
           renderChildren={renActive[1]}
           summary={t<string>('Active nominations ({{count}})', { replace: { count: renActive[0] } })}
         />
       )}
       {renInactive && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The elected validator list that did not get selected by the Phragmen algorithm for this era. However they may be selected in the future.')}
           renderChildren={renInactive[1]}
           summary={t<string>('Inactive nominations ({{count}})', { replace: { count: renInactive[0] } })}
         />
       )}
       {renChilled && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The validators that got slashed and for which your nomination got auto-chilled. Re-nominating these will make them available to the Phragmen algorithm.')}
           renderChildren={renChilled[1]}
           summary={t<string>('Renomination required ({{count}})', { replace: { count: renChilled[0] } })}
         />
       )}
       {renWaiting && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The validators that are not in the validator set because they need more nominations or because they have willingly stopped validating. Any nominations made before the next election will also appear here.')}
           renderChildren={renWaiting[1]}
           summary={t<string>('Waiting nominations ({{count}})', { replace: { count: renWaiting[0] } })}

packages/page-staking/src/Actions/Account/index.tsx

@@ -236,7 +236,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
           </td>
         )
         : (
-          <td className='all expand left'>
+          <td className='all expand'>
             {isStashNominating && (
               <>
                 <ListNominees

packages/page-staking/src/Slashes/Row.tsx

@@ -5,7 +5,7 @@ import type { Slash } from './types';
 
 import React, { useCallback } from 'react';
 
-import { AddressMini, AddressSmall, Badge, Checkbox, Expander } from '@polkadot/react-components';
+import { AddressMini, AddressSmall, Badge, Checkbox, ExpanderScroll } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -26,6 +26,18 @@ function Row ({ index, isSelected, onSelect, slash: { isMine, slash: { others, o
     [index, onSelect]
   );
 
+  const renderOthers = useCallback(
+    () => others.map(([accountId, balance], index): React.ReactNode => (
+      <AddressMini
+        balance={balance}
+        key={index}
+        value={accountId}
+        withBalance
+      />
+    )),
+    [others]
+  );
+
   return (
     <tr>
       <td className='badge'>
@@ -41,16 +53,10 @@ function Row ({ index, isSelected, onSelect, slash: { isMine, slash: { others, o
       </td>
       <td className='expand all'>
         {!!others.length && (
-          <Expander summary={t<string>('Nominators ({{count}})', { replace: { count: formatNumber(others.length) } })}>
-            {others.map(([accountId, balance], index): React.ReactNode => (
-              <AddressMini
-                balance={balance}
-                key={index}
-                value={accountId}
-                withBalance
-              />
-            ))}
-          </Expander>
+          <ExpanderScroll
+            renderChildren={renderOthers}
+            summary={t<string>('Nominators ({{count}})', { replace: { count: formatNumber(others.length) } })}
+          />
         )}
       </td>
       <td className='address'>

packages/page-staking/src/Validators/Address/NominatedBy.tsx

@@ -6,7 +6,7 @@ import type { NominatedBy as NominatedByType } from '../../types';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, Expander } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../../translate';
@@ -63,13 +63,13 @@ function NominatedBy ({ nominators, slashingSpans }: Props): React.ReactElement<
   return (
     <td className='expand all'>
       {active && (
-        <Expander
+        <ExpanderScroll
           renderChildren={active[1]}
           summary={t<string>('Nominations ({{count}})', { replace: { count: formatNumber(active[0]) } })}
         />
       )}
       {chilled && (
-        <Expander
+        <ExpanderScroll
           renderChildren={chilled[1]}
           summary={t<string>('Renomination required ({{count}})', { replace: { count: formatNumber(chilled[0]) } })}
         />

packages/page-staking/src/Validators/Address/StakeOther.tsx

@@ -5,7 +5,7 @@ import type { NominatorValue } from './types';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, Expander } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { BN, BN_ZERO } from '@polkadot/util';
@@ -59,7 +59,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
     <td className='expand all'>
       {rewarded && (
         <>
-          <Expander
+          <ExpanderScroll
             renderChildren={rewarded[1]}
             summary={
               <FormatBalance
@@ -69,7 +69,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
             }
           />
           {unrewarded && (
-            <Expander
+            <ExpanderScroll
               className='stakeOver'
               renderChildren={unrewarded[1]}
               summary={

packages/react-components/src/ExpanderScroll.tsx

@@ -14,6 +14,14 @@ interface Props extends ExpanderProps {
   renderChildren?: () => React.ReactNode[];
 }
 
+function mapRow (row: React.ReactNode, key: number): React.ReactNode {
+  return (
+    <tr key={key}>
+      <td>{row}</td>
+    </tr>
+  );
+}
+
 function ExpanderScroll ({ children, className, empty, help, helpIcon, renderChildren, summary }: Props): React.ReactElement<Props> {
   const hasContent = useMemo(
     () => !!(renderChildren || children),
@@ -28,15 +36,10 @@ function ExpanderScroll ({ children, className, empty, help, helpIcon, renderChi
           isInline
         >
           {renderChildren
-            ? renderChildren().map((row, key) => (
-              <tr
-                className='expand'
-                key={key}
-              >
-                <td>{row}</td>
-              </tr>
-            ))
-            : <tr className='expand'><td>{children}</td></tr>
+            ? renderChildren().map(mapRow)
+            : Array.isArray(children)
+              ? children.map(mapRow)
+              : <tr><td>{children}</td></tr>
           }
         </Table>
       </div>
@@ -60,8 +63,8 @@ export default React.memo(styled(ExpanderScroll)`
     overflow-y: scroll;
     display: block;
     margin: 0 0 0 auto;
-    max-height: 14rem;
-    max-width: 30rem;
+    max-height: 13.75rem;
+    max-width: 25rem;
     overflow-x: hidden;
   }
 `);