Filter targets by blocking status (#4800)

packages/page-staking/src/Actions/partials/Nominate.tsx

@@ -24,7 +24,7 @@ interface Props {
   withSenders?: boolean;
 }
 
-function Nominate ({ className = '', controllerId, nominating, onChange, stashId, targets: { validatorIds = [] }, withSenders }: Props): React.ReactElement<Props> {
+function Nominate ({ className = '', controllerId, nominating, onChange, stashId, targets: { nominateIds = [] }, withSenders }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [favorites] = useFavorites(STORE_FAVS_BASE);
@@ -32,13 +32,13 @@ function Nominate ({ className = '', controllerId, nominating, onChange, stashId
   const [available] = useState<string[]>((): string[] => {
     const shortlist = [
       // ensure that the favorite is included in the list of stashes
-      ...favorites.filter((acc) => validatorIds.includes(acc)),
+      ...favorites.filter((acc) => nominateIds.includes(acc)),
       // make sure the nominee is not in our favorites already
       ...(nominating || []).filter((acc) => !favorites.includes(acc))
     ];
 
     return shortlist
-      .concat(...(validatorIds.filter((acc) => !shortlist.includes(acc))));
+      .concat(...(nominateIds.filter((acc) => !shortlist.includes(acc))));
   });
 
   useEffect((): void => {

packages/page-staking/src/Legend.tsx

@@ -59,6 +59,13 @@ function Legend ({ className }: Props): React.ReactElement<Props> {
         />
         {t('Slashed')}
       </span>
+      <span>
+        <Badge
+          color='red'
+          icon='user-slash'
+        />
+        {t('Blocks nominations')}
+      </span>
     </div>
   );
 }

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

@@ -68,7 +68,7 @@ function Validator ({ allSlashes, canSelect, filterName, info, isNominated, isSe
     return null;
   }
 
-  const { accountId, bondOther, bondOwn, bondTotal, commissionPer, isElected, isFavorite, key, lastPayout, numNominators, rankOverall, stakedReturnCmp } = info;
+  const { accountId, bondOther, bondOwn, bondTotal, commissionPer, isBlocking, isElected, isFavorite, key, lastPayout, numNominators, rankOverall, stakedReturnCmp } = info;
 
   return (
     <tr>
@@ -97,6 +97,12 @@ function Validator ({ allSlashes, canSelect, filterName, info, isNominated, isSe
           : <Badge color='transparent' />
         }
         <MaxBadge numNominators={numNominators || nominatedBy.length} />
+        {isBlocking && (
+          <Badge
+            color='red'
+            icon='user-slash'
+          />
+        )}
         {slashes.length !== 0 && (
           <Badge
             color='red'
@@ -132,7 +138,7 @@ function Validator ({ allSlashes, canSelect, filterName, info, isNominated, isSe
       <td className='number together media--1600'>{!bondOther.isZero() && <FormatBalance value={bondOther} />}</td>
       <td className='number together'>{(stakedReturnCmp > 0) && <>{stakedReturnCmp.toFixed(2)}%</>}</td>
       <td>
-        {(canSelect || isSelected) && (
+        {!isBlocking && (canSelect || isSelected) && (
           <Checkbox
             onChange={_toggleSelected}
             value={isSelected}

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

@@ -154,7 +154,8 @@ function extractNominees (ownNominators: StakerState[] = []): string[] {
 
   ownNominators.forEach(({ nominating = [] }: StakerState): void => {
     nominating.forEach((nominee: string): void => {
-      !myNominees.includes(nominee) && myNominees.push(nominee);
+      !myNominees.includes(nominee) &&
+        myNominees.push(nominee);
     });
   });
 
@@ -165,11 +166,10 @@ function selectProfitable (list: ValidatorInfo[]): string[] {
   const result: string[] = [];
 
   for (let i = 0; i < list.length && result.length < MAX_NOMINATIONS; i++) {
-    const { isFavorite, key, stakedReturnCmp } = list[i];
+    const { isBlocking, isFavorite, key, stakedReturnCmp } = list[i];
 
-    if (isFavorite || (stakedReturnCmp > 0)) {
+    (!isBlocking && (isFavorite || (stakedReturnCmp > 0))) &&
       result.push(key);
-    }
   }
 
   return result;

packages/page-staking/src/types.ts

@@ -52,6 +52,7 @@ export interface ValidatorInfo extends ValidatorInfoRank {
   commissionPer: number;
   exposure: Exposure;
   isActive: boolean;
+  isBlocking: boolean;
   isElected: boolean;
   isFavorite: boolean;
   isNominating: boolean;
@@ -77,6 +78,7 @@ export interface SortedTargets {
   medianComm: number;
   minNominated: BN;
   nominators?: string[];
+  nominateIds?: string[];
   totalStaked?: BN;
   totalIssuance?: BN;
   validators?: ValidatorInfo[];

packages/page-staking/src/useSortedTargets.ts

@@ -125,6 +125,7 @@ function extractSingle (api: ApiPromise, allAccounts: string[], derive: DeriveSt
       commissionPer: validatorPrefs.commission.unwrap().toNumber() / 10_000_000,
       exposure,
       isActive: !skipRewards,
+      isBlocking: !!(validatorPrefs.blocked && validatorPrefs.blocked.isTrue),
       isElected: !isWaitingDerive(derive) && derive.nextElected.some((e) => e.eq(accountId)),
       isFavorite: favorites.includes(key),
       isNominating: (exposure.others || []).reduce((isNominating, indv): boolean => {
@@ -196,9 +197,15 @@ function extractInfo (api: ApiPromise, allAccounts: string[], electedDerive: Der
     : 0;
 
   // ids
-  const electedIds = elected.map(({ key }) => key);
   const waitingIds = waiting.map(({ key }) => key);
-  const validatorIds = arrayFlatten([electedIds, waitingIds]);
+  const validatorIds = arrayFlatten([
+    elected.map(({ key }) => key),
+    waitingIds
+  ]);
+  const nominateIds = arrayFlatten([
+    elected.filter(({ isBlocking }) => !isBlocking).map(({ key }) => key),
+    waiting.filter(({ isBlocking }) => !isBlocking).map(({ key }) => key)
+  ]);
 
   return {
     avgStaked,
@@ -206,6 +213,7 @@ function extractInfo (api: ApiPromise, allAccounts: string[], electedDerive: Der
     lowStaked: activeTotals[0] || BN_ZERO,
     medianComm,
     minNominated,
+    nominateIds,
     nominators: Object.keys(nominators),
     totalIssuance,
     totalStaked,