From e1424e5a4d7d5030a102ca4abb907fb29e8ccc14 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Fri, 18 Sep 2020 15:42:04 +0200
Subject: [PATCH] Show nomination balance below nominees (#3714)

* show nomination balance belo nominees

* alphabetical order

* with useCall and useMemo

* derive staking may be undefined

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

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

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

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

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

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 .../src/Actions/Account/ListNominees.tsx      | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/page-staking/src/Actions/Account/ListNominees.tsx b/packages/page-staking/src/Actions/Account/ListNominees.tsx
index 478325fef3..c23d1f646c 100644
--- a/packages/page-staking/src/Actions/Account/ListNominees.tsx
+++ b/packages/page-staking/src/Actions/Account/ListNominees.tsx
@@ -1,9 +1,11 @@
 // Copyright 2017-2020 @polkadot/app-staking authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import BN from 'bn.js';
+import React, { useMemo } from 'react';
+import { DeriveEraExposure, DeriveSessionProgress } from '@polkadot/api-derive/types';
 import { AddressMini, Expander } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../../translate';
 import useInactives from '../useInactives';
@@ -17,6 +19,29 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
   const { t } = useTranslation();
   const { api } = useApi();
   const { nomsActive, nomsChilled, nomsInactive, nomsOver, nomsWaiting } = useInactives(stashId, nominating);
+  const sessionInfo = useCall<DeriveSessionProgress>(api.query.staking && api.derive.session?.progress);
+  const eraExposure = useCall<DeriveEraExposure>(api.query.staking.erasStakers && api.derive.staking.eraExposure, [sessionInfo?.activeEra]);
+  const nomBalanceMap: Record<string, BN> = useMemo(() => {
+    const res: Record<string, BN> = {};
+
+    if (nomsActive && eraExposure) {
+      // for every active nominee
+      nomsActive.forEach((nom) => {
+        // cycle through its nominator to find our current stash
+        eraExposure.validators?.[nom].others.some((o) => {
+          if (o.who.eq(stashId)) {
+            res[nom] = o.value.toBn();
+
+            return true;
+          }
+
+          return false;
+        });
+      });
+    }
+
+    return res;
+  }, [eraExposure, nomsActive, stashId]);
 
   const max = api.consts.staking?.maxNominatorRewardedPerValidator?.toString();
 
@@ -44,9 +69,10 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
         >
           {nomsActive.map((nomineeId, index): React.ReactNode => (
             <AddressMini
+              balance={nomBalanceMap[nomineeId]}
               key={index}
               value={nomineeId}
-              withBalance={false}
+              withBalance={!!eraExposure}
             />
           ))}
         </Expander>