Show nomination badge in overview (#3637)

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={

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} />
     </>
   );
 }

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}
         />