Disable target nominations in election (#3014)

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

@@ -13,6 +13,7 @@ import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
+  isDisabled: boolean;
   ownNominators?: StakerState[];
   targets: string[];
 }
@@ -22,7 +23,7 @@ interface IdState {
   stashId: string;
 }
 
-function Nominate ({ className = '', ownNominators, targets }: Props): React.ReactElement<Props> {
+function Nominate ({ className = '', isDisabled, ownNominators, targets }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [ids, setIds] = useState<IdState | null>(null);
   const [filter, setFilter] = useState<string[]>([]);
@@ -51,7 +52,7 @@ function Nominate ({ className = '', ownNominators, targets }: Props): React.Rea
     <>
       <Button
         icon='hand paper outline'
-        isDisabled={!filter.length || !targets.length}
+        isDisabled={isDisabled || !filter.length || !targets.length}
         label={t<string>('Nominate selected')}
         onClick={toggleOpen}
       />

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

@@ -10,6 +10,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Icon, InputBalance, Table, Toggle } from '@polkadot/react-components';
 
+import ElectionBanner from '../ElectionBanner';
 import Filtering from '../Filtering';
 import { MAX_NOMINATIONS } from '../constants';
 import { useTranslation } from '../translate';
@@ -20,6 +21,7 @@ import useOwnNominators from './useOwnNominators';
 
 interface Props {
   className?: string;
+  isInElection: boolean;
   next?: string[];
   ownStashes?: StakerState[];
   stakingOverview?: DeriveStakingOverview;
@@ -45,7 +47,7 @@ function sort (sortBy: TargetSortBy, sortFromMax: boolean, validators: Validator
     );
 }
 
-function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward, nominators, setCalcWith, toggleFavorite, totalStaked, validators } }: Props): React.ReactElement<Props> {
+function Targets ({ className = '', isInElection, ownStashes, targets: { calcWith, lastReward, nominators, setCalcWith, toggleFavorite, totalStaked, validators } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const ownNominators = useOwnNominators(ownStashes);
   const [selected, setSelected] = useState<string[]>([]);
@@ -161,10 +163,12 @@ function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward,
           onClick={_selectProfitable}
         />
         <Nominate
+          isDisabled={isInElection}
           ownNominators={ownNominators}
           targets={selected}
         />
       </Button.Group>
+      <ElectionBanner isInElection={isInElection} />
       <Table
         empty={sorted && t<string>('No active validators to check')}
         filter={filter}

packages/page-staking/src/index.tsx

@@ -121,6 +121,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         </Route>
         <Route path={`${basePath}/targets`}>
           <Targets
+            isInElection={isInElection}
             next={next}
             ownStashes={ownStashes}
             stakingOverview={stakingOverview}