From 0b49db56a05d805fc435636472cc6eb7d1946295 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 2 Aug 2020 10:49:43 +0200
Subject: [PATCH] Cleanup slashing display (#3316)

* Cleanup slashing display

* Dedupe headers
---
 packages/page-staking/src/Slashes/Row.tsx   | 37 +++++++++++++--------
 packages/page-staking/src/Slashes/index.tsx | 10 +++---
 packages/page-staking/src/Slashes/types.ts  |  1 +
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/packages/page-staking/src/Slashes/Row.tsx b/packages/page-staking/src/Slashes/Row.tsx
index 7e527bdffe..eaa8ea532d 100644
--- a/packages/page-staking/src/Slashes/Row.tsx
+++ b/packages/page-staking/src/Slashes/Row.tsx
@@ -5,39 +5,50 @@
 import { Slash } from './types';
 
 import React from 'react';
-import { AddressMini, AddressSmall } from '@polkadot/react-components';
+import { AddressMini, AddressSmall, Expander } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
+import { useTranslation } from '../translate';
+
 interface Props {
   slash: Slash;
   withEra: boolean;
 }
 
-function Row ({ slash: { era, slash: { others, own, payout, reporters, validator }, total }, withEra }: Props): React.ReactElement<Props> {
+function Row ({ slash: { era, slash: { others, own, payout, reporters, validator }, total, totalOther }, withEra }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <tr>
       <td className='number'>
-        <h1>{withEra && formatNumber(era)}</h1>
+        <h1>{withEra ? formatNumber(era) : <>&nbsp;</>}</h1>
       </td>
       <td className='address'>
         <AddressSmall value={validator} />
       </td>
+      <td className='start 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>
+        )}
+      </td>
       <td className='number together'>
         <FormatBalance value={own} />
       </td>
       <td className='number together'>
-        <FormatBalance value={total} />
+        <FormatBalance value={totalOther} />
       </td>
-      <td className='address all'>
-        {others.map(([accountId, balance], index): React.ReactNode => (
-          <AddressMini
-            balance={balance}
-            key={index}
-            value={accountId}
-            withBalance
-          />
-        ))}
+      <td className='number together'>
+        <FormatBalance value={total} />
       </td>
       <td className='address'>
         {reporters.map((reporter, index): React.ReactNode => (
diff --git a/packages/page-staking/src/Slashes/index.tsx b/packages/page-staking/src/Slashes/index.tsx
index 6ab6e92c94..bd68058351 100644
--- a/packages/page-staking/src/Slashes/index.tsx
+++ b/packages/page-staking/src/Slashes/index.tsx
@@ -19,10 +19,10 @@ interface Props {
 function Slashes ({ slashes }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const header = useMemo(() => [
-    [t('unapplied slashes'), 'start', 2],
+    [t('unapplied slashes'), 'start', 3],
     [t('own')],
+    [t('other')],
     [t('total')],
-    [t('nominators'), 'start'],
     [t('reporters'), 'start'],
     [t('payout')]
   ], [t]);
@@ -30,11 +30,11 @@ function Slashes ({ slashes }: Props): React.ReactElement<Props> | null {
     return slashes
       .reduce((rows: Slash[], [era, slashes]): Slash[] => {
         return slashes.reduce((rows: Slash[], slash): Slash[] => {
-          const total = slash.others.reduce((total: BN, [, value]): BN => {
+          const totalOther = slash.others.reduce((total: BN, [, value]): BN => {
             return total.add(value);
-          }, slash.own);
+          }, new BN(0));
 
-          rows.push({ era, slash, total });
+          rows.push({ era, slash, total: slash.own.add(totalOther), totalOther });
 
           return rows;
         }, rows);
diff --git a/packages/page-staking/src/Slashes/types.ts b/packages/page-staking/src/Slashes/types.ts
index 28734d1878..f260fca6d6 100644
--- a/packages/page-staking/src/Slashes/types.ts
+++ b/packages/page-staking/src/Slashes/types.ts
@@ -10,4 +10,5 @@ export interface Slash {
   era: BN;
   slash: UnappliedSlash;
   total: BN;
+  totalOther: BN;
 }