diff --git a/packages/app-123code/src/Transfer.tsx b/packages/app-123code/src/Transfer.tsx
index 98102378d6c8..7966334832cd 100644
--- a/packages/app-123code/src/Transfer.tsx
+++ b/packages/app-123code/src/Transfer.tsx
@@ -37,6 +37,7 @@ export default function Transfer ({ accountId }: Props): React.ReactElement<Prop
               label='make transfer'
               params={[recipientId, amount]}
               tx='balances.transfer'
+              withSpinner
             />
           </Button.Group>
         </div>
diff --git a/packages/app-accounts/src/modals/Identity.tsx b/packages/app-accounts/src/modals/Identity.tsx
index 2e07f22bd832..96032daf189c 100644
--- a/packages/app-accounts/src/modals/Identity.tsx
+++ b/packages/app-accounts/src/modals/Identity.tsx
@@ -217,7 +217,6 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           onStart={onClose}
           params={[info]}
           tx='identity.setIdentity'
-          withSpinner={false}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/app-accounts/src/modals/RecoverAccount.tsx b/packages/app-accounts/src/modals/RecoverAccount.tsx
index 9d46fb3a0c71..13df51df3a03 100644
--- a/packages/app-accounts/src/modals/RecoverAccount.tsx
+++ b/packages/app-accounts/src/modals/RecoverAccount.tsx
@@ -41,10 +41,9 @@ export default function RecoverAccount ({ address, className, onClose }: Props):
           icon='recycle'
           isDisabled={!recover || recover === address}
           label={t('Start recovery')}
-          onClick={onClose}
+          onStart={onClose}
           params={[recover]}
           tx='recovery.initiateRecovery'
-          withSpinner={false}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/app-accounts/src/modals/RecoverSetup.tsx b/packages/app-accounts/src/modals/RecoverSetup.tsx
index d81971601483..3e4160140bda 100644
--- a/packages/app-accounts/src/modals/RecoverSetup.tsx
+++ b/packages/app-accounts/src/modals/RecoverSetup.tsx
@@ -77,10 +77,9 @@ export default function RecoverSetup ({ address, className, onClose }: Props): R
           icon='share alternate'
           isDisabled={isErrorHelpers || isErrorThreshold || isErrorDelay}
           label={t('Make recoverable')}
-          onClick={onClose}
+          onStart={onClose}
           params={[helpers, threshold, delay]}
           tx='recovery.createRecovery'
-          withSpinner={false}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx
index 13f1a071f097..01f1cee6056f 100644
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@@ -135,7 +135,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
           isPrimary
           label={t('Make Transfer')}
           onStart={onClose}
-          withSpinner={false}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/app-contracts/src/Codes/Upload.tsx b/packages/app-contracts/src/Codes/Upload.tsx
index c951101a6437..2df1deb8662a 100644
--- a/packages/app-contracts/src/Codes/Upload.tsx
+++ b/packages/app-contracts/src/Codes/Upload.tsx
@@ -83,6 +83,7 @@ class Upload extends ContractModal<Props, State> {
         params={[gasLimit, wasm]}
         tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
         ref={this.button}
+        withSpinner
       />
     );
   }
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index 2269bd8e93d7..6dff9a7c87f5 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@@ -220,6 +220,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
                 onSuccess={_toggleBusy}
                 params={_constructTx}
                 tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
+                withSpinner
               />
             )
           }
diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx
index 102787a9d853..3d4f9d4057dc 100644
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/packages/app-contracts/src/Deploy.tsx
@@ -242,6 +242,7 @@ class Deploy extends ContractModal<Props, State> {
             : 'contract.create' // V1
         }
         ref={this.button}
+        withSpinner
       />
     );
   }
diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx
index 85a3183dfc52..508b88c12378 100644
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@@ -83,7 +83,6 @@ function PreImage ({ className, isImminent: propsIsImminent, matchHash, onClose
           onStart={onClose}
           params={[encodedProposal]}
           tx={isImminent ? 'democracy.noteImminentPreimage' : 'democracy.notePreimage'}
-          withSpinner={false}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
index 1dce4b6a59fd..06285e00a34a 100644
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@@ -62,7 +62,6 @@ export default function Propose ({ className, onClose }: Props): React.ReactElem
           onStart={onClose}
           params={[hash, balance]}
           tx='democracy.propose'
-          withSpinner={false}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index 5a7dba8b00fb..2dc1d6b8c0a7 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -7,7 +7,7 @@ import { AccountId, Proposal } from '@polkadot/types/interfaces';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 
@@ -22,14 +22,13 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [isSecondingOpen, setIsSecondingOpen] = useState(false);
+  const [isSecondingOpen, toggleSeconding] = useToggle();
 
   if (!hasAccounts) {
     return null;
   }
 
   const isDepositor = depositors.some((depositor): boolean => depositor.eq(accountId));
-  const _toggleSeconding = (): void => setIsSecondingOpen(!isSecondingOpen);
 
   return (
     <>
@@ -51,14 +50,14 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
               withLabel
             />
           </Modal.Content>
-          <Modal.Actions onCancel={_toggleSeconding}>
+          <Modal.Actions onCancel={toggleSeconding}>
             <TxButton
               accountId={accountId}
               isDisabled={!accountId || isDepositor}
               isPrimary
               label={t('Second')}
               icon='sign-in'
-              onStart={_toggleSeconding}
+              onStart={toggleSeconding}
               params={[proposalId]}
               tx='democracy.second'
             />
@@ -69,7 +68,7 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
         isPrimary
         label={t('Second')}
         icon='toggle off'
-        onClick={_toggleSeconding}
+        onClick={toggleSeconding}
       />
     </>
   );
diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx
index 87bceeea4a08..b2fff8abcac7 100644
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@@ -60,6 +60,7 @@ class Selection extends TxComponent<Props, State> {
             label={t('Submit Unsigned')}
             icon='sign-in'
             extrinsic={extrinsic}
+            withSpinner
           />
           <Button.Or />
           <TxButton
@@ -70,6 +71,7 @@ class Selection extends TxComponent<Props, State> {
             icon='sign-in'
             extrinsic={extrinsic}
             ref={this.button}
+            withSpinner
           />
         </Button.Group>
       </div>
diff --git a/packages/app-generic-asset/src/Transfer.tsx b/packages/app-generic-asset/src/Transfer.tsx
index 7a775372a6ff..6a8587e562bf 100644
--- a/packages/app-generic-asset/src/Transfer.tsx
+++ b/packages/app-generic-asset/src/Transfer.tsx
@@ -118,7 +118,6 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
           label={t('Make Transfer')}
           icon='send'
           onStart={onClose}
-          withSpinner={false}
         />
       </Button.Group>
     </div>
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index d35f6de72db9..3bba2a6049d3 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -78,9 +78,10 @@ class BondExtra extends TxComponent<Props, State> {
             isPrimary
             label={t('Bond more')}
             icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
             extrinsic={extrinsic}
             ref={this.button}
+            withSpinner
           />
         </Modal.Actions>
       </Modal>
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index 0a0935311206..0516a155c979 100644
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@@ -91,7 +91,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
           accountId={controllerId}
           isDisabled={!selection.length}
           isPrimary
-          onClick={onClose}
+          onStart={onClose}
           params={[selection]}
           label={t('Nominate')}
           icon='hand paper outline'
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index a077ebb5c648..490b2e440246 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -87,10 +87,11 @@ class SetControllerAccount extends TxComponent<Props, State> {
             isPrimary
             label={t('Set controller')}
             icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
             params={[controllerId]}
             tx='staking.setController'
             ref={this.button}
+            withSpinner
           />
         </Modal.Actions>
       </Modal>
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index d830171851fe..6254007d6ecb 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -49,10 +49,11 @@ class SetRewardDestination extends TxComponent<Props, State> {
             isPrimary
             label={t('Set reward destination')}
             icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
             params={[destination]}
             tx={'staking.setPayee'}
             ref={this.button}
+            withSpinner
           />
         </Modal.Actions>
       </Modal>
diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
index 23b7d92c501a..c5990454691f 100644
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@@ -87,7 +87,7 @@ export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionI
           isPrimary
           label={t('Set Session Key')}
           icon='sign-in'
-          onClick={onClose}
+          onStart={onClose}
           params={
             isSubstrateV2
               ? [keys, EMPTY_PROOF]
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 81a461ff7151..75e7e79a5bd8 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -73,10 +73,11 @@ class Unbond extends TxComponent<Props, State> {
             isPrimary
             label={t('Unbond')}
             icon='sign-out'
-            onClick={onClose}
+            onStart={onClose}
             params={[maxUnbond]}
             tx='staking.unbond'
             ref={this.button}
+            withSpinner
           />
         </Modal.Actions>
       </Modal>
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index a2b088985e7b..703519cc74d3 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -91,10 +91,11 @@ class Validate extends TxComponent<Props, State> {
           isPrimary
           label={t('Validate')}
           icon='check circle outline'
-          onClick={onClose}
+          onStart={onClose}
           params={[{ commission }]}
           tx='staking.validate'
           ref={this.button}
+          withSpinner
         />
       </Modal.Actions>
     );
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index bce5baa8dd38..99ec88e56513 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -120,9 +120,10 @@ class NewStake extends TxComponent<Props, State> {
             isPrimary
             label={t('Bond')}
             icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
             extrinsic={extrinsic}
             ref={this.button}
+            withSpinner
           />
         </Modal.Actions>
       </Modal>
diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx
index 35a3da545552..cf9d5c125449 100644
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@@ -53,6 +53,7 @@ class Propose extends TxComponent<Props, State> {
               isDisabled={!method || !isValid}
               params={method ? [createType(registry, 'Proposal', method)] : []}
               ref={this.button}
+              withSpinner
             />
           </Button.Group>
         </section>
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index aec21e3fcd75..83f64956dd23 100644
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@@ -5,6 +5,7 @@
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 import useCouncilMembers from '@polkadot/app-council/useCouncilMembers';
 
 import { useTranslation } from '../translate';
@@ -18,11 +19,9 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
   const { isMember, members } = useCouncilMembers();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [beneficiary, setBeneficiary] = useState<string | null>(null);
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
+  const [isProposeOpen, togglePropose] = useToggle();
   const [value, setValue] = useState<BN | undefined>();
 
-  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
-
   const hasValue = value?.gtn(0);
 
   return (
@@ -57,14 +56,14 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
               onChange={setValue}
             />
           </Modal.Content>
-          <Modal.Actions onCancel={_togglePropose}>
+          <Modal.Actions onCancel={togglePropose}>
             <TxButton
               accountId={accountId}
               icon='add'
               isDisabled={!accountId || !hasValue}
               isPrimary
               label={t('Submit proposal')}
-              onClick={_togglePropose}
+              onStart={togglePropose}
               params={[value, beneficiary]}
               tx='treasury.proposeSpend'
             />
@@ -76,7 +75,7 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
         isDisabled={!isMember}
         isPrimary
         label={t('Submit proposal')}
-        onClick={_togglePropose}
+        onClick={togglePropose}
       />
     </>
   );
diff --git a/packages/app-treasury/src/Overview/Submission.tsx b/packages/app-treasury/src/Overview/Submission.tsx
index 96797184c905..2335c7a730fd 100644
--- a/packages/app-treasury/src/Overview/Submission.tsx
+++ b/packages/app-treasury/src/Overview/Submission.tsx
@@ -75,7 +75,7 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
               isDisabled={!accountId || !councilThreshold}
               isPrimary
               label={t('Send to council')}
-              onClick={toggleOpen}
+              onStart={toggleOpen}
               params={[
                 councilThreshold,
                 councilType === 'reject'
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index cfe05cae0423..b2b97cfe5837 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -256,7 +256,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
               icon='check'
               isDisabled={registrarIndex === -1}
               label={t('Judge')}
-              onClick={toggleJudgement}
+              onStart={toggleJudgement}
               params={[registrarIndex, accountId, judgementEnum]}
               tx='identity.provideJudgement'
             />
diff --git a/packages/react-components/src/TxButton.tsx b/packages/react-components/src/TxButton.tsx
index fd8fca35663e..2460b4110414 100644
--- a/packages/react-components/src/TxButton.tsx
+++ b/packages/react-components/src/TxButton.tsx
@@ -62,7 +62,7 @@ class TxButtonInner extends React.PureComponent<InnerProps> {
   }
 
   protected send = (): void => {
-    const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = true } = this.props;
+    const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = false } = this.props;
     let extrinsic: any;
 
     if (propsExtrinsic) {
diff --git a/packages/react-components/src/VoteActions.tsx b/packages/react-components/src/VoteActions.tsx
index bd4854821858..4b22ac6d43d9 100644
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@@ -31,7 +31,7 @@ export default function VoteActions ({ accountId, className, isDisabled, onClick
         isDisabled={!accountId || isDisabled}
         isPrimary
         label={t('Vote')}
-        onClick={onClick}
+        onStart={onClick}
         params={params}
         tx={tx}
       />