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>
This commit is contained in:
Thibaut Sardan 2020-09-18 15:42:04 +02:00 committed by GitHub
parent 528325483d
commit e1424e5a4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>