From bec5f32323e5e258f198d9dbf440b7564a12d8bb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 8 Sep 2020 12:39:52 +0200
Subject: [PATCH] Show nomination badge in overview (#3637)

---
 .../src/Overview/Address/StakeOther.tsx       |  4 ++--
 .../src/Overview/Address/Status.tsx           | 24 +++++++++++++++----
 .../src/Overview/Address/index.tsx            |  2 +-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/page-staking/src/Overview/Address/StakeOther.tsx b/packages/page-staking/src/Overview/Address/StakeOther.tsx
index 5e82d11d48..891a454910 100644
--- a/packages/page-staking/src/Overview/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Overview/Address/StakeOther.tsx
@@ -40,7 +40,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
 
   return (
     <td className='number all'>
-      {rewarded.length > 0 && (
+      {!!rewarded.length && (
         <>
           <Expander summary={
             <FormatBalance
@@ -57,7 +57,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
               />
             )}
           </Expander>
-          {unrewarded.length > 0 && (
+          {!!unrewarded.length && (
             <Expander
               className='stakeOver'
               summary={
diff --git a/packages/page-staking/src/Overview/Address/Status.tsx b/packages/page-staking/src/Overview/Address/Status.tsx
index c0a3ca53ae..e77e5afd1a 100644
--- a/packages/page-staking/src/Overview/Address/Status.tsx
+++ b/packages/page-staking/src/Overview/Address/Status.tsx
@@ -3,24 +3,40 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import BN from 'bn.js';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Badge, Icon } from '@polkadot/react-components';
+import { useAccounts } from '@polkadot/react-hooks';
 
 import MaxBadge from '../../MaxBadge';
 
 interface Props {
   isElected: boolean;
   isMain?: boolean;
-  numNominators?: number;
+  nominators?: ([string, BN] | [string, BN, number])[];
   onlineCount?: false | BN;
   onlineMessage?: boolean;
 }
 
-function Status ({ isElected, isMain, numNominators, onlineCount, onlineMessage }: Props): React.ReactElement<Props> {
+function Status ({ isElected, isMain, nominators = [], onlineCount, onlineMessage }: Props): React.ReactElement<Props> {
+  const { allAccounts } = useAccounts();
   const blockCount = onlineCount && onlineCount.toNumber();
 
+  const isNominating = useMemo(
+    () => nominators.some(([nominatorId]) => allAccounts.includes(nominatorId)),
+    [allAccounts, nominators]
+  );
+
   return (
     <>
+      {isNominating
+        ? (
+          <Badge
+            color='green'
+            icon='hand-paper'
+          />
+        )
+        : <Badge color='transparent' />
+      }
       {isElected
         ? (
           <Badge
@@ -40,7 +56,7 @@ function Status ({ isElected, isMain, numNominators, onlineCount, onlineMessage
           )
           : <Badge color='transparent' />
       )}
-      <MaxBadge numNominators={numNominators} />
+      <MaxBadge numNominators={nominators.length} />
     </>
   );
 }
diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx
index 62b169137c..1e36163e49 100644
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/packages/page-staking/src/Overview/Address/index.tsx
@@ -118,7 +118,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
         <Status
           isElected={isElected}
           isMain={isMain}
-          numNominators={(nominatedBy || nominators).length}
+          nominators={nominatedBy || nominators}
           onlineCount={onlineCount}
           onlineMessage={onlineMessage}
         />