Disable batching usage without utility pallet (#2760)

* Disable batching usage without utility pallet

* Formatting

packages/page-accounts/src/Accounts/index.tsx

@@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import keyring from '@polkadot/ui-keyring';
 import { getLedger, isLedger } from '@polkadot/react-api';
-import { useAccounts, useFavorites, useToggle } from '@polkadot/react-hooks';
+import { useApi, useAccounts, useFavorites, useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Button, Input, Table } from '@polkadot/react-components';
 
@@ -92,6 +92,7 @@ function sortAccounts (addresses: string[], favorites: string[]): SortedAccount[
 
 function Overview ({ className, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
   const { allAccounts } = useAccounts();
   const [isCreateOpen, toggleCreate] = useToggle();
   const [isImportOpen, toggleImport] = useToggle();
@@ -208,6 +209,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
         )}
         <Button
           icon='add'
+          isDisabled={!api.tx.utility}
           label={t('Multisig')}
           onClick={toggleMultisig}
         />

packages/page-staking/src/Actions/NewNominator.tsx

@@ -7,7 +7,8 @@ import { SortedTargets } from '../types';
 
 import React, { useCallback, useState } from 'react';
 import { Button, Modal, TxButton } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
+import { useApi, useToggle } from '@polkadot/react-hooks';
+import { isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import BondPartial from './partials/Bond';
@@ -25,10 +26,12 @@ const NUM_STEPS = 2;
 
 function NewNominator ({ isInElection, next, targets, validators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
   const [isVisible, toggleVisible] = useToggle();
   const [{ bondOwnTx, bondTx, controllerId, controllerTx, stashId }, setBondInfo] = useState<BondInfo>({});
   const [{ nominateTx }, setNominateInfo] = useState<NominateInfo>({});
   const [step, setStep] = useState(1);
+  const isDisabled = isInElection || !isFunction(api.tx.utility?.batch);
 
   const _nextStep = useCallback(
     () => setStep((step) => step + 1),
@@ -54,7 +57,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
     <>
       <Button
         icon='add'
-        isDisabled={isInElection}
+        isDisabled={isDisabled}
         key='new-nominator'
         label={t('Nominator')}
         onClick={_toggle}

packages/page-staking/src/Actions/NewValidator.tsx

@@ -6,7 +6,8 @@ import { BondInfo, SessionInfo, ValidateInfo } from './partials/types';
 
 import React, { useCallback, useState } from 'react';
 import { Button, Modal, TxButton } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
+import { useApi, useToggle } from '@polkadot/react-hooks';
+import { isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import BondPartial from './partials/Bond';
@@ -21,12 +22,13 @@ const NUM_STEPS = 2;
 
 function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
   const [isVisible, toggleVisible] = useToggle();
   const [{ bondOwnTx, bondTx, controllerId, controllerTx, stashId }, setBondInfo] = useState<BondInfo>({});
   const [{ sessionTx }, setSessionInfo] = useState<SessionInfo>({});
   const [{ validateTx }, setValidateInfo] = useState<ValidateInfo>({});
-
   const [step, setStep] = useState(1);
+  const isDisabled = isInElection || !isFunction(api.tx.utility?.batch);
 
   const _nextStep = useCallback(
     () => setStep((step) => step + 1),
@@ -53,7 +55,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
     <>
       <Button
         icon='add'
-        isDisabled={isInElection}
+        isDisabled={isDisabled}
         key='new-validator'
         label={t('Validator')}
         onClick={_toggle}

packages/page-staking/src/Payouts/PayButton.tsx

@@ -18,7 +18,7 @@ interface Props {
   payout?: PayoutValidator | PayoutValidator[];
 }
 
-function createExtrinsic (api: ApiPromise, payout: PayoutValidator | PayoutValidator[]): SubmittableExtrinsic<'promise'> {
+function createExtrinsic (api: ApiPromise, payout: PayoutValidator | PayoutValidator[]): SubmittableExtrinsic<'promise'> | null {
   if (Array.isArray(payout)) {
     if (payout.length === 1) {
       return createExtrinsic(api, payout[0]);
@@ -49,10 +49,10 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic<'promise'> | null>(null);
 
   useEffect((): void => {
-    payout && setExtrinsic(
+    api.tx.utility && payout && setExtrinsic(
       () => createExtrinsic(api, payout)
     );
-  }, [api, payout]);
+  }, [api, isDisabled, payout]);
 
   const isPayoutEmpty = !payout || (Array.isArray(payout) && payout.length === 0);
 
@@ -122,7 +122,11 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
       <Button
         icon='credit card outline'
         isDisabled={isDisabled || isPayoutEmpty}
-        label={(isAll || Array.isArray(payout)) ? t('Payout all') : t('Payout')}
+        label={
+          (isAll || Array.isArray(payout))
+            ? t('Payout all')
+            : t('Payout')
+        }
         onClick={togglePayout}
       />
     </>

packages/page-staking/src/Payouts/Stash.tsx

@@ -63,7 +63,7 @@ function Stash ({ className, isDisabled, payout: { available, rewards, stashId }
       const available = rewards.filter(({ era }) => era.lt(stakerPayoutsAfter));
 
       setExtrinsic(
-        available.length
+        api.tx.utility && available.length
           ? createPrevPayout(api, available)
           : null
       );

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

@@ -11,6 +11,7 @@ import styled from 'styled-components';
 import { Button, Table } from '@polkadot/react-components';
 import { useApi, useOwnEraRewards } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
+import { isFunction } from '@polkadot/util';
 
 import ElectionBanner from '../ElectionBanner';
 import { useTranslation } from '../translate';
@@ -95,6 +96,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
   const stakerPayoutsAfter = useStakerPayouts();
   const { allRewards } = useOwnEraRewards();
   const { t } = useTranslation();
+  const isDisabled = isInElection || !isFunction(api.tx.utility?.batch);
 
   useEffect((): void => {
     if (allRewards) {
@@ -143,7 +145,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
         <Button.Group>
           <PayButton
             isAll
-            isDisabled={isInElection}
+            isDisabled={isDisabled}
             payout={validators}
           />
         </Button.Group>
@@ -158,7 +160,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
       >
         {stashes?.map((payout): React.ReactNode => (
           <Stash
-            isDisabled={isInElection}
+            isDisabled={isDisabled}
             key={payout.stashId}
             payout={payout}
             stakerPayoutsAfter={stakerPayoutsAfter}
@@ -172,7 +174,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
         >
           {validators.map((payout): React.ReactNode => (
             <Validator
-              isDisabled={isInElection}
+              isDisabled={isDisabled}
               key={payout.validatorId}
               payout={payout}
             />