Align line splits along era boundaries (#2706)

packages/page-staking/src/Payouts/Stash.tsx

@@ -25,7 +25,7 @@ interface Props {
 }
 
 interface EraInfo {
-  eraStr: string;
+  eraStr: React.ReactNode;
   oldestEra?: BN;
 }
 

packages/page-staking/src/Payouts/Validator.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 interface State {
-  eraStr: string;
+  eraStr: React.ReactNode;
   nominators: Record<string, BN>;
   numNominators: number;
   oldestEra?: BN;

packages/page-staking/src/Payouts/index.tsx

@@ -187,5 +187,9 @@ export default React.memo(styled(Payouts)`
   .payout-eras {
     padding-left: 0.25rem;
     vertical-align: middle;
+
+    span {
+      white-space: nowrap;
+    }
   }
 `);

packages/page-staking/src/Payouts/util.tsx

@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import React from 'react';
 import BN from 'bn.js';
 import { formatNumber } from '@polkadot/util';
 
@@ -9,12 +10,12 @@ function isSingle (entry: BN | [BN, BN]): entry is BN {
   return !Array.isArray(entry);
 }
 
-export function createErasString (eras: BN[]): string {
+export function createErasString (eras: BN[]): React.ReactNode {
   if (!eras.length) {
     return '';
   }
 
-  return eras
+  const parts = eras
     .reduce((result: (BN | [BN, BN])[], era): (BN | [BN, BN])[] => {
       if (result.length === 0) {
         return [era];
@@ -38,10 +39,20 @@ export function createErasString (eras: BN[]): string {
 
       return result;
     }, [])
-    .map((entry): string =>
+    .map((entry) =>
       isSingle(entry)
         ? formatNumber(entry)
         : `${formatNumber(entry[0])}-${formatNumber(entry[1])}`
-    )
-    .join(', ');
+    );
+
+  return (
+    <>
+      {parts.map((section, index) => (
+        <React.Fragment key={section}>
+          {index !== 0 && ', '}
+          <span>{section}</span>
+        </React.Fragment>
+      ))}
+    </>
+  );
 }