Target toggles (#3008)

* Additional target toggles

* Adjust toggle bar

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

@@ -22,7 +22,8 @@ interface Props {
   isSelected: boolean;
   toggleFavorite: (accountId: string) => void;
   toggleSelected: (accountId: string) => void;
-  withoutName: boolean;
+  withElected: boolean;
+  withIdentity: boolean;
 }
 
 function checkVisibility (api: ApiPromise, accountInfo: DeriveAccountInfo): boolean {
@@ -45,7 +46,7 @@ function checkVisibility (api: ApiPromise, accountInfo: DeriveAccountInfo): bool
   return isVisible;
 }
 
-function Validator ({ canSelect, info, isSelected, toggleFavorite, toggleSelected, withoutName }: Props): React.ReactElement<Props> | null {
+function Validator ({ canSelect, info, isSelected, toggleFavorite, toggleSelected, withElected, withIdentity }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const accountInfo = useCall<DeriveAccountInfo>(api.derive.accounts.info, [info.accountId]);
   const [hasName, setHasName] = useState(true);
@@ -71,7 +72,7 @@ function Validator ({ canSelect, info, isSelected, toggleFavorite, toggleSelecte
     [info.key, toggleSelected]
   );
 
-  if (!hasName && !withoutName) {
+  if ((withIdentity && !hasName) || (withElected && !info.isElected)) {
     return null;
   }
 

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

@@ -51,7 +51,8 @@ function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward,
   const ownNominators = useOwnNominators(ownStashes);
   const [selected, setSelected] = useState<string[]>([]);
   const [sorted, setSorted] = useState<number[] | undefined>();
-  const [withoutName, setWithoutName] = useState(true);
+  const [withElected, setWithElected] = useState(false);
+  const [withIdentity, setWithIdentity] = useState(false);
   const [{ sortBy, sortFromMax }, setSortBy] = useState<SortState>({ sortBy: 'rankOverall', sortFromMax: true });
 
   useEffect((): void => {
@@ -82,14 +83,14 @@ function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward,
   const _selectProfitable = useCallback(
     () => setSelected(
       (validators || []).reduce((result: string[], { hasIdentity, isElected, isFavorite, key, rewardPayout }): string[] => {
-        if ((result.length < MAX_NOMINATIONS) && (withoutName || hasIdentity) && (isElected || isFavorite) && !rewardPayout.isZero()) {
+        if ((result.length < MAX_NOMINATIONS) && (hasIdentity || !withIdentity) && (isElected || isFavorite) && !rewardPayout.isZero()) {
           result.push(key);
         }
 
         return result;
       }, [])
     ),
-    [validators, withoutName]
+    [validators, withIdentity]
   );
 
   const labels = useMemo(
@@ -127,23 +128,9 @@ function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward,
           onChange={setCalcWith}
           value={calcWith}
         />
-        <div className='staking--optionsBar'>
-          {api.query.identity && (
-            <Toggle
-              className='staking--buttonToggle'
-              label={
-                withoutName
-                  ? t<string>('with/without identity')
-                  : t<string>('only with an identity')
-              }
-              onChange={setWithoutName}
-              value={withoutName}
-            />
-          )}
-        </div>
       </div>
     )
-  ), [api, calcWith, setCalcWith, sorted, t, withoutName]);
+  ), [calcWith, setCalcWith, sorted, t]);
 
   return (
     <div className={className}>
@@ -154,6 +141,22 @@ function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward,
         totalStaked={totalStaked}
       />
       <Button.Group>
+        <span className='staking--optionsBar'>
+          <Toggle
+            className='staking--buttonToggle'
+            label={t<string>('limit to elected')}
+            onChange={setWithElected}
+            value={withElected}
+          />
+          {api.query.identity && (
+            <Toggle
+              className='staking--buttonToggle'
+              label={t<string>('only with an identity')}
+              onChange={setWithIdentity}
+              value={withIdentity}
+            />
+          )}
+        </span>
         <Button
           icon='check'
           isDisabled={!validators?.length || !ownNominators?.length}
@@ -178,7 +181,8 @@ function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward,
             key={validators[index].key}
             toggleFavorite={toggleFavorite}
             toggleSelected={_toggleSelected}
-            withoutName={withoutName}
+            withElected={withElected}
+            withIdentity={withIdentity}
           />
         )}
       </Table>

packages/page-staking/src/index.tsx

@@ -176,7 +176,8 @@ export default React.memo(styled(StakingApp)`
     text-align: right;
 
     .staking--buttonToggle {
-      margin-left: 1.5rem;
+      display: inline-block;
+      margin-right: 1rem;
       margin-top: 0.5rem;
     }
   }