Show lowest stake on targets (#3423)

* Show lowest stake on targets

* Non-zero total for usage

packages/page-staking/src/Targets/Summary.tsx

@@ -14,13 +14,14 @@ import { useTranslation } from '../translate';
 
 interface Props {
   avgStaked?: BN;
+  lowStaked?: BN;
   lastReward?: BN;
   numNominators?: number;
   numValidators?: number;
   totalStaked?: BN;
 }
 
-function Summary ({ avgStaked, lastReward, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
+function Summary ({ avgStaked, lastReward, lowStaked, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const totalIssuance = useCall<Balance>(api.query.balances?.totalIssuance, []);
@@ -36,6 +37,17 @@ function Summary ({ avgStaked, lastReward, numNominators, numValidators, totalSt
     [totalIssuance, totalStaked]
   );
 
+  const progressAvg = useMemo(
+    () => avgStaked && lowStaked && avgStaked.gtn(0)
+      ? {
+        hideValue: true,
+        total: avgStaked,
+        value: lowStaked
+      }
+      : undefined,
+    [avgStaked, lowStaked]
+  );
+
   return (
     <SummaryBox>
       <section className='ui--media-small'>
@@ -63,11 +75,18 @@ function Summary ({ avgStaked, lastReward, numNominators, numValidators, totalSt
           </CardSummary>
         )}
       </section>
-      {avgStaked && (
+      {avgStaked && lowStaked && (
         <CardSummary
           className='ui--media-medium'
-          label={`${t<string>('avg staked')}`}
+          label={`${t<string>('lowest / avg staked')}`}
+          progress={progressAvg}
         >
+          <FormatBalance
+            value={lowStaked}
+            withCurrency={false}
+            withSi
+          />
+          &nbsp;/&nbsp;
           <FormatBalance
             value={avgStaked}
             withSi
@@ -75,7 +94,10 @@ function Summary ({ avgStaked, lastReward, numNominators, numValidators, totalSt
         </CardSummary>
       )}
       {numValidators && numNominators && (
-        <CardSummary label={`${t<string>('nominators')} / ${t<string>('validators')}`}>
+        <CardSummary
+          className='ui--media-1600'
+          label={`${t<string>('nominators')} / ${t<string>('validators')}`}
+        >
           {numNominators}&nbsp;/&nbsp;{numValidators}
         </CardSummary>
       )}

packages/page-staking/src/Targets/index.tsx

@@ -65,7 +65,7 @@ function extractNominees (ownNominators: StakerState[] = []): string[] {
   return myNominees;
 }
 
-function Targets ({ className = '', isInElection, ownStashes, targets: { avgStaked, calcWith, lastReward, nominators, setCalcWith, totalStaked, validators }, toggleFavorite }: Props): React.ReactElement<Props> {
+function Targets ({ className = '', isInElection, ownStashes, targets: { avgStaked, calcWith, lastReward, lowStaked, nominators, setCalcWith, totalStaked, validators }, toggleFavorite }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const allSlashes = useAvailableSlashes();
   const ownNominators = useOwnNominators(ownStashes);
@@ -177,6 +177,7 @@ function Targets ({ className = '', isInElection, ownStashes, targets: { avgStak
       <Summary
         avgStaked={avgStaked}
         lastReward={lastReward}
+        lowStaked={lowStaked}
         numNominators={nominators?.length}
         numValidators={validators?.length}
         totalStaked={totalStaked}

packages/page-staking/src/types.ts

@@ -64,6 +64,7 @@ export interface SortedTargets {
   avgStaked?: BN;
   calcWith?: BN;
   lastReward?: BN;
+  lowStaked?: BN;
   nominators?: string[];
   setCalcWith: (amount?: BN) => void;
   totalStaked?: BN;

packages/page-staking/src/useSortedTargets.ts

@@ -63,9 +63,10 @@ function sortValidators (list: ValidatorInfo[]): ValidatorInfo[] {
     );
 }
 
-function extractSingle (allAccounts: string[], amount: BN = baseBalance(), { info }: DeriveStakingElected | DeriveStakingWaiting, favorites: string[], perValidatorReward: BN, isElected: boolean): [ValidatorInfo[], string[], BN] {
+function extractSingle (allAccounts: string[], amount: BN = baseBalance(), { info }: DeriveStakingElected | DeriveStakingWaiting, favorites: string[], perValidatorReward: BN, isElected: boolean): [ValidatorInfo[], string[], BN, BN] {
   const nominators: string[] = [];
   let totalStaked = BN_ZERO;
+  let lowStaked = BN_ZERO;
   const list = info.map(({ accountId, exposure: _exposure, stakingLedger, validatorPrefs }): ValidatorInfo => {
     const exposure = _exposure || {
       others: registry.createType('Vec<IndividualExposure>'),
@@ -103,6 +104,10 @@ function extractSingle (allAccounts: string[], amount: BN = baseBalance(), { inf
 
     totalStaked = totalStaked.add(bondTotal);
 
+    if ((lowStaked.isZero() || bondTotal.lt(lowStaked)) && _exposure && !_exposure.total.isEmpty) {
+      lowStaked = bondTotal;
+    }
+
     return {
       accountId,
       bondOther: bondTotal.sub(bondOwn),
@@ -131,17 +136,17 @@ function extractSingle (allAccounts: string[], amount: BN = baseBalance(), { inf
     };
   });
 
-  return [list, nominators, totalStaked];
+  return [list, nominators, totalStaked, lowStaked];
 }
 
 function extractInfo (allAccounts: string[], amount: BN = baseBalance(), electedDerive: DeriveStakingElected, waitingDerive: DeriveStakingWaiting, favorites: string[], lastReward = BN_ONE): Partial<SortedTargets> {
   const perValidatorReward = lastReward.divn(electedDerive.info.length);
-  const [elected, nominators, totalStaked] = extractSingle(allAccounts, amount, electedDerive, favorites, perValidatorReward, true);
+  const [elected, nominators, totalStaked, lowStaked] = extractSingle(allAccounts, amount, electedDerive, favorites, perValidatorReward, true);
   const [waiting] = extractSingle(allAccounts, amount, waitingDerive, favorites, perValidatorReward, false);
   const validators = sortValidators(elected.concat(waiting));
   const validatorIds = validators.map(({ accountId }) => accountId.toString());
 
-  return { avgStaked: totalStaked.divn(electedDerive.info.length), nominators, totalStaked, validatorIds, validators };
+  return { avgStaked: totalStaked.divn(electedDerive.info.length), lowStaked, nominators, totalStaked, validatorIds, validators };
 }
 
 export default function useSortedTargets (favorites: string[]): SortedTargets {