diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx
index 7815437b78bf..6b47be0efdec 100644
--- a/packages/app-accounts/src/Account.tsx
+++ b/packages/app-accounts/src/Account.tsx
@@ -9,7 +9,7 @@ import React, { useState, useEffect } from 'react';
 import { Label } from 'semantic-ui-react';
 import styled from 'styled-components';
 import { AddressInfo, AddressSmall, Button, ChainLock, Forget, Icon, InputTags, LinkPolkascan, Menu, Popup, Input } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
 import Backup from './modals/Backup';
@@ -31,16 +31,16 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
   const [tags, setTags] = useState<string[]>([]);
   const [accName, setAccName] = useState('');
   const [genesisHash, setGenesisHash] = useState<string | null>(null);
-  const [isBackupOpen, setIsBackupOpen] = useState(false);
-  const [isEditingName, setIsEditingName] = useState(false);
-  const [isEditingTags, setIsEditingTags] = useState(false);
-  const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false });
-  const [isDeriveOpen, setIsDeriveOpen] = useState(false);
-  const [isForgetOpen, setIsForgetOpen] = useState(false);
-  const [isPasswordOpen, setIsPasswordOpen] = useState(false);
-  const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
-  const [isTransferOpen, setIsTransferOpen] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
+  const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false });
+  const [isBackupOpen, toggleBackup] = useToggle();
+  const [isEditingName, toggleEditName] = useToggle();
+  const [isEditingTags, toggleEditTags] = useToggle();
+  const [isDeriveOpen, toggleDerive] = useToggle();
+  const [isForgetOpen, toggleForget] = useToggle();
+  const [isPasswordOpen, togglePassword] = useToggle();
+  const [isSettingsOpen, toggleSettings] = useToggle();
+  const [isTransferOpen, toggleTransfer] = useToggle();
 
   const _setTags = (tags: string[]): void => setTags(tags.sort());
 
@@ -73,16 +73,8 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
     return null;
   }
 
-  const _toggleEditName = (): void => setIsEditingName(!isEditingName);
-  const _toggleEditTags = (): void => setIsEditingTags(!isEditingTags);
-  const _toggleBackup = (): void => setIsBackupOpen(!isBackupOpen);
-  const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen);
-  const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
-  const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen);
-  const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
-  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _saveName = (): void => {
-    _toggleEditName();
+    toggleEditName();
 
     const meta = { name: accName, whenEdited: Date.now() };
 
@@ -97,7 +89,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
     }
   };
   const _saveTags = (): void => {
-    _toggleEditTags();
+    toggleEditTags();
 
     const meta = { tags, whenEdited: Date.now() };
 
@@ -165,7 +157,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
               )
               : undefined
           }
-          onClickName={_toggleEditName}
+          onClickName={toggleEditName}
           toggle={isEditingName}
           value={address}
         />
@@ -173,14 +165,14 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
           <Backup
             address={address}
             key='modal-backup-account'
-            onClose={_toggleBackup}
+            onClose={toggleBackup}
           />
         )}
         {isDeriveOpen && (
           <Derive
             from={address}
             key='modal-derive-account'
-            onClose={_toggleDerive}
+            onClose={toggleDerive}
           />
         )}
         {isForgetOpen && (
@@ -188,20 +180,20 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
             address={address}
             onForget={_onForget}
             key='modal-forget-account'
-            onClose={_toggleForget}
+            onClose={toggleForget}
           />
         )}
         {isPasswordOpen && (
           <ChangePass
             address={address}
             key='modal-change-pass'
-            onClose={_togglePass}
+            onClose={togglePassword}
           />
         )}
         {isTransferOpen && (
           <Transfer
             key='modal-transfer'
-            onClose={_toggleTransfer}
+            onClose={toggleTransfer}
             senderId={address}
           />
         )}
@@ -221,7 +213,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
             />
           )
           : (
-            <div className='tags--toggle' onClick={_toggleEditTags}>
+            <div className='tags--toggle' onClick={toggleEditTags}>
               {tags.length
                 ? tags.map((tag): React.ReactNode => (
                   <Label key={tag} size='tiny' color='grey'>{tag}</Label>
@@ -252,19 +244,19 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
           icon='paper plane'
           isPrimary
           label={t('send')}
-          onClick={_toggleTransfer}
+          onClick={toggleTransfer}
           size='small'
           tooltip={t('Send funds from this account')}
         />
         <Popup
           className='theme--default'
-          onClose={_toggleSettingPopup}
-          open={isSettingPopupOpen}
+          onClose={toggleSettings}
+          open={isSettingsOpen}
           position='bottom right'
           trigger={
             <Button
               icon='setting'
-              onClick={_toggleSettingPopup}
+              onClick={toggleSettings}
               size='small'
             />
           }
@@ -272,11 +264,11 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
           <Menu
             vertical
             text
-            onClick={_toggleSettingPopup}
+            onClick={toggleSettings}
           >
             <Menu.Item
               disabled={!isEditable || isExternal}
-              onClick={_toggleDerive}
+              onClick={toggleDerive}
             >
               {t('Derive account from source')}
             </Menu.Item>
@@ -285,19 +277,19 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
             </Menu.Item>
             <Menu.Item
               disabled={!isEditable || isExternal || isDevelopment}
-              onClick={_toggleBackup}
+              onClick={toggleBackup}
             >
               {t('Create a backup file for this account')}
             </Menu.Item>
             <Menu.Item
               disabled={!isEditable || isExternal || isDevelopment}
-              onClick={_togglePass}
+              onClick={togglePassword}
             >
               {t("Change this account's password")}
             </Menu.Item>
             <Menu.Item
               disabled={!isEditable || isDevelopment}
-              onClick={_toggleForget}
+              onClick={toggleForget}
             >
               {t('Forget this account')}
             </Menu.Item>
diff --git a/packages/app-accounts/src/Overview.tsx b/packages/app-accounts/src/Overview.tsx
index 99859420fa7c..cdf7053ff6f8 100644
--- a/packages/app-accounts/src/Overview.tsx
+++ b/packages/app-accounts/src/Overview.tsx
@@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import keyring from '@polkadot/ui-keyring';
 import { getLedger, isLedger } from '@polkadot/react-api';
-import { useAccounts, useFavorites } from '@polkadot/react-hooks';
+import { useAccounts, useFavorites, useToggle } from '@polkadot/react-hooks';
 import { Button, InputTags, Table } from '@polkadot/react-components';
 
 import CreateModal from './modals/Create';
@@ -41,9 +41,9 @@ async function queryLedger (): Promise<void> {
 
 function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
   const { allAccounts, hasAccounts } = useAccounts();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [isImportOpen, setIsImportOpen] = useState(false);
-  const [isQrOpen, setIsQrOpen] = useState(false);
+  const [isCreateOpen, toggleCreate] = useToggle();
+  const [isImportOpen, toggleImport] = useToggle();
+  const [isQrOpen, toggleQr] = useToggle();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
   const [sortedAccounts, setSortedAccounts] = useState<SortedAccount[]>([]);
   const [tags, setTags] = useState<string[]>([]);
@@ -62,28 +62,24 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
     );
   }, [allAccounts, favorites]);
 
-  const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
-  const _toggleImport = (): void => setIsImportOpen(!isImportOpen);
-  const _toggleQr = (): void => setIsQrOpen(!isQrOpen);
-
   return (
     <div className={className}>
       <Banner />
       {isCreateOpen && (
         <CreateModal
-          onClose={_toggleCreate}
+          onClose={toggleCreate}
           onStatusChange={onStatusChange}
         />
       )}
       {isImportOpen && (
         <ImportModal
-          onClose={_toggleImport}
+          onClose={toggleImport}
           onStatusChange={onStatusChange}
         />
       )}
       {isQrOpen && (
         <QrModal
-          onClose={_toggleQr}
+          onClose={toggleQr}
           onStatusChange={onStatusChange}
         />
       )}
@@ -92,21 +88,21 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
           icon='add'
           isPrimary
           label={t('Add account')}
-          onClick={_toggleCreate}
+          onClick={toggleCreate}
         />
         <Button.Or />
         <Button
           icon='sync'
           isPrimary
           label={t('Restore JSON')}
-          onClick={_toggleImport}
+          onClick={toggleImport}
         />
         <Button.Or />
         <Button
           icon='qrcode'
           isPrimary
           label={t('Add via Qr')}
-          onClick={_toggleQr}
+          onClick={toggleQr}
         />
         {isLedger() && (
           <>
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index 263d29bf9509..688c31b59101 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
 import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { isHex, u8aToHex } from '@polkadot/util';
@@ -153,9 +153,9 @@ function createAccount (suri: string, pairType: KeypairType, name: string, passw
 function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type: propsType }: Props): React.ReactElement<Props> {
   const { isDevelopment } = useApi();
   const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
-  const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
   const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
+  const [isConfirmationOpen, toggleConfirmation] = useToggle();
   const isValid = !!address && !deriveError && isNameValid && isPassValid && isSeedValid;
 
   const _onChangePass = (password: string): void =>
@@ -172,7 +172,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
     }
   };
   const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
-  const _toggleConfirmation = (): void => setIsConfirmationOpen(!isConfirmationOpen);
 
   const _onCommit = (): void => {
     if (!isValid) {
@@ -181,7 +180,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
 
     const status = createAccount(`${seed}${derivePath}`, pairType, name, password, t('created account'));
 
-    _toggleConfirmation();
+    toggleConfirmation();
     onStatusChange(status);
     onClose();
   };
@@ -197,7 +196,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
           address={address}
           name={name}
           onCommit={_onCommit}
-          onClose={_toggleConfirmation}
+          onClose={toggleConfirmation}
         />
       )}
       <Modal.Content>
@@ -301,7 +300,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
             isDisabled={!isValid}
             isPrimary
             label={t('Save')}
-            onClick={_toggleConfirmation}
+            onClick={toggleConfirmation}
           />
         </Button.Group>
       </Modal.Actions>
diff --git a/packages/app-accounts/src/modals/Derive.tsx b/packages/app-accounts/src/modals/Derive.tsx
index 797159263e8a..7f469d01a133 100644
--- a/packages/app-accounts/src/modals/Derive.tsx
+++ b/packages/app-accounts/src/modals/Derive.tsx
@@ -9,7 +9,7 @@ import { KeypairType } from '@polkadot/util-crypto/types';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
-import { useDebounce } from '@polkadot/react-hooks';
+import { useDebounce, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { keyExtractPath } from '@polkadot/util-crypto';
 
@@ -71,12 +71,12 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
   const { queueAction } = useContext(StatusContext);
   const [source] = useState(keyring.getPair(from));
   const [{ address, deriveError }, setDerived] = useState<DerivedAddress>({ address: null, deriveError: null });
-  const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
   const [isLocked, setIsLocked] = useState(source.isLocked);
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
   const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
   const [rootPass, setRootPass] = useState('');
   const [suri, setSuri] = useState('');
+  const [isConfirmationOpen, toggleConfirmation] = useToggle();
   const debouncedSuri = useDebounce(suri);
   const isValid = !!address && !deriveError && isNameValid && isPassValid;
 
@@ -101,7 +101,6 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
 
   const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
   const _onChangePass = (password: string): void => setPassword({ isPassValid: keyring.isPassValid(password), password });
-  const _toggleConfirmation = (): void => setIsConfirmationOpen(!isConfirmationOpen);
   const _onUnlock = (): void => {
     try {
       source.decodePkcs8(rootPass);
@@ -119,7 +118,7 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
 
     const status = createAccount(source, suri, name, password, t('created account'));
 
-    _toggleConfirmation();
+    toggleConfirmation();
     queueAction(status);
     onClose();
   };
@@ -144,7 +143,7 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
           address={address}
           name={name}
           onCommit={_onCommit}
-          onClose={_toggleConfirmation}
+          onClose={toggleConfirmation}
         />
       )}
       <Modal.Content>
@@ -221,7 +220,7 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
                 isDisabled={!isValid}
                 isPrimary
                 label={t('Save')}
-                onClick={_toggleConfirmation}
+                onClick={toggleConfirmation}
               />
             )
           }
diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx
index a0fe97fd3c8d..47e61a06c98f 100644
--- a/packages/app-address-book/src/Address.tsx
+++ b/packages/app-address-book/src/Address.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react';
 import { Label } from 'semantic-ui-react';
 import styled from 'styled-components';
 import { AddressSmall, AddressInfo, Button, ChainLock, Icon, InputTags, Input, LinkPolkascan, Forget, Menu, Popup } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
 import Transfer from '@polkadot/app-accounts/modals/Transfer';
@@ -36,12 +36,12 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
   const [accName, setAccName] = useState('');
   const [current, setCurrent] = useState<KeyringAddress | null>(null);
   const [genesisHash, setGenesisHash] = useState<string | null>(null);
-  const [isEditingName, setIsEditingName] = useState(false);
-  const [isEditingTags, setIsEditingTags] = useState(false);
-  const [isForgetOpen, setIsForgetOpen] = useState(false);
-  const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
-  const [isTransferOpen, setIsTransferOpen] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
+  const [isEditingName, toggleEditName] = useToggle();
+  const [isEditingTags, toggleEditTags] = useToggle();
+  const [isForgetOpen, toggleForget] = useToggle();
+  const [isSettingsOpen, toggleSettings] = useToggle();
+  const [isTransferOpen, toggleTransfer] = useToggle();
 
   const _setTags = (tags: string[]): void => setTags(tags.sort());
 
@@ -75,11 +75,6 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
     return null;
   }
 
-  const _toggleEditName = (): void => setIsEditingName(!isEditingName);
-  const _toggleEditTags = (): void => setIsEditingTags(!isEditingTags);
-  const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
-  const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
-  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _onForget = (): void => {
     if (address) {
       const status: Partial<ActionStatus> = {
@@ -108,7 +103,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
   };
   const _onFavorite = (): void => toggleFavorite(address);
   const _saveName = (): void => {
-    _toggleEditName();
+    toggleEditName();
 
     const meta = { name: accName, whenEdited: Date.now() };
 
@@ -123,7 +118,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
     }
   };
   const _saveTags = (): void => {
-    _toggleEditTags();
+    toggleEditTags();
 
     const meta = { tags, whenEdited: Date.now() };
 
@@ -164,7 +159,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
               )
               : undefined
           }
-          onClickName={_toggleEditName}
+          onClickName={toggleEditName}
           toggle={isEditingName}
           value={address}
         />
@@ -176,13 +171,13 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
                 onForget={_onForget}
                 key='modal-forget-account'
                 mode='address'
-                onClose={_toggleForget}
+                onClose={toggleForget}
               />
             )}
             {isTransferOpen && (
               <Transfer
                 key='modal-transfer'
-                onClose={_toggleTransfer}
+                onClose={toggleTransfer}
                 recipientId={address}
               />
             )}
@@ -204,7 +199,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
             />
           )
           : (
-            <div className='tags--toggle' onClick={_toggleEditTags}>
+            <div className='tags--toggle' onClick={toggleEditTags}>
               {tags.length
                 ? tags.map((tag): React.ReactNode => (
                   <Label key={tag} size='tiny' color='grey'>{tag}</Label>
@@ -236,19 +231,19 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
           isPrimary
           key='deposit'
           label={t('deposit')}
-          onClick={_toggleTransfer}
+          onClick={toggleTransfer}
           size='small'
           tooltip={t('Send funds to this address')}
         />
         <Popup
           className='theme--default'
-          onClose={_toggleSettingPopup}
-          open={isSettingPopupOpen}
+          onClose={toggleSettings}
+          open={isSettingsOpen}
           position='bottom right'
           trigger={
             <Button
               icon='setting'
-              onClick={_toggleSettingPopup}
+              onClick={toggleSettings}
               size='small'
             />
           }
@@ -256,11 +251,11 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
           <Menu
             vertical
             text
-            onClick={_toggleSettingPopup}
+            onClick={toggleSettings}
           >
             <Menu.Item
               disabled={!isEditable}
-              onClick={_toggleForget}
+              onClick={toggleForget}
             >
               {t('Forget this address')}
             </Menu.Item>
diff --git a/packages/app-address-book/src/Overview.tsx b/packages/app-address-book/src/Overview.tsx
index 5bb901c7c2d8..0159c5896ad6 100644
--- a/packages/app-address-book/src/Overview.tsx
+++ b/packages/app-address-book/src/Overview.tsx
@@ -8,7 +8,7 @@ import { ComponentProps } from './types';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, InputTags, Table } from '@polkadot/react-components';
-import { useAddresses, useFavorites } from '@polkadot/react-hooks';
+import { useAddresses, useFavorites, useToggle } from '@polkadot/react-hooks';
 
 import CreateModal from './modals/Create';
 import Address from './Address';
@@ -23,10 +23,10 @@ const STORE_FAVS = 'accounts:favorites';
 
 function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
   const { hasAddresses, allAddresses } = useAddresses();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
   const [sortedAddresses, setSortedAddresses] = useState<SortedAddress[]>([]);
   const [tags, setTags] = useState<string[]>([]);
+  const [isCreateOpen, toggleCreate] = useToggle();
 
   useEffect((): void => {
     setSortedAddresses(
@@ -42,8 +42,6 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
     );
   }, [allAddresses, favorites]);
 
-  const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
-
   return (
     <div className={className}>
       <Button.Group>
@@ -51,12 +49,12 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
           icon='add'
           isPrimary
           label={t('Add contact')}
-          onClick={_toggleCreate}
+          onClick={toggleCreate}
         />
       </Button.Group>
       {isCreateOpen && (
         <CreateModal
-          onClose={_toggleCreate}
+          onClose={toggleCreate}
           onStatusChange={onStatusChange}
         />
       )}
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index c53cf6f3dfab..369d4b037fd8 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@@ -13,6 +13,7 @@ import styled from 'styled-components';
 import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
 import { withApi, withMulti } from '@polkadot/react-api';
+import { useToggle } from '@polkadot/react-hooks';
 import { createValue } from '@polkadot/react-params/values';
 import { isNull } from '@polkadot/util';
 
@@ -42,14 +43,13 @@ function Call (props: Props): React.ReactElement<Props> | null {
 
   const hasRpc = api.rpc.contracts && api.rpc.contracts.call;
   let callMessage = callContract.getMessage(callMessageIndex);
-
   const [accountId, setAccountId] = useState<StringOrNull>(null);
   const [endowment, setEndowment] = useState<BN>(new BN(0));
   const [gasLimit, setGasLimit] = useState<BN>(new BN(GAS_LIMIT));
-  const [isBusy, setIsBusy] = useState(false);
   const [outcomes, setOutcomes] = useState<ContractCallOutcome[]>([]);
   const [params, setParams] = useState<any[]>(callMessage ? callMessage.def.args.map(({ type }): any => createValue({ type })) : []);
   const [useRpc, setUseRpc] = useState(callMessage && !callMessage.def.mutates);
+  const [isBusy, toggleBusy] = useToggle();
 
   useEffect((): void => {
     callMessage = callContract.getMessage(callMessageIndex);
@@ -76,9 +76,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
 
   const _onChangeEndowment = (endowment?: BN): void => endowment && setEndowment(endowment);
   const _onChangeGasLimit = (gasLimit?: BN): void => gasLimit && setGasLimit(gasLimit);
-
   const _onChangeParams = (params: any[]): void => setParams(params);
-  const _toggleBusy = (): void => setIsBusy(!isBusy);
 
   const _constructTx = (): any[] => {
     if (!accountId || !callMessage || !callMessage.fn || !callContract || !callContract.address) {
@@ -218,9 +216,9 @@ function Call (props: Props): React.ReactElement<Props> | null {
                 isDisabled={!isValid}
                 isPrimary
                 label={t('Call')}
-                onClick={_toggleBusy}
-                onFailed={_toggleBusy}
-                onSuccess={_toggleBusy}
+                onClick={toggleBusy}
+                onFailed={toggleBusy}
+                onSuccess={toggleBusy}
                 params={_constructTx}
                 tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
               />
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index ab3474c75ede..9f5318c73f87 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 
@@ -20,14 +20,13 @@ interface Props extends I18nProps {
 function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Props> | null {
   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 (
     <>
@@ -50,7 +49,7 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
             <Button.Group>
               <Button
                 isNegative
-                onClick={_toggleSeconding}
+                onClick={toggleSeconding}
                 label={t('Cancel')}
                 icon='cancel'
               />
@@ -61,7 +60,7 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
                 isPrimary
                 label={t('Second')}
                 icon='sign-in'
-                onStart={_toggleSeconding}
+                onStart={toggleSeconding}
                 params={[proposalId]}
                 tx='democracy.second'
               />
@@ -73,7 +72,7 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
         isPrimary
         label={t('Second')}
         icon='toggle off'
-        onClick={_toggleSeconding}
+        onClick={toggleSeconding}
       />
     </>
   );
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index 9544fc99e699..2184ac012737 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
 import translate from '../translate';
@@ -19,14 +19,13 @@ interface Props extends I18nProps {
 function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [isVotingOpen, setIsVotingOpen] = useState(false);
   const [voteValue, setVoteValue] = useState(true);
+  const [isVotingOpen, toggleVoting] = useToggle();
 
   if (!hasAccounts) {
     return null;
   }
 
-  const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
   const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
 
   return (
@@ -46,7 +45,7 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
           </Modal.Content>
           <VoteActions
             accountId={accountId}
-            onClick={_toggleVoting}
+            onClick={toggleVoting}
             params={[referendumId, voteValue]}
             tx='democracy.vote'
           />
@@ -56,7 +55,7 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
         icon='check'
         isPrimary
         label={t('Vote')}
-        onClick={_toggleVoting}
+        onClick={toggleVoting}
       />
     </>
   );
diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx
index 4de359ab849c..27e870a4f760 100644
--- a/packages/app-democracy/src/Overview/index.tsx
+++ b/packages/app-democracy/src/Overview/index.tsx
@@ -4,9 +4,10 @@
 
 import { I18nProps as Props } from '@polkadot/react-components/types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 import DispatchQueue from './DispatchQueue';
@@ -18,11 +19,8 @@ import PreImage from './PreImage';
 import Propose from './Propose';
 
 function Overview ({ className, t }: Props): React.ReactElement {
-  const [isPreimageOpen, setIsPreimageOpen] = useState(false);
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
-
-  const _togglePreimage = (): void => setIsPreimageOpen(!isPreimageOpen);
-  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
+  const [isPreimageOpen, togglePreimage] = useToggle();
+  const [isProposeOpen, togglePropose] = useToggle();
 
   return (
     <div className={className}>
@@ -32,21 +30,21 @@ function Overview ({ className, t }: Props): React.ReactElement {
           icon='add'
           isPrimary
           label={t('Submit preimage')}
-          onClick={_togglePreimage}
+          onClick={togglePreimage}
         />
         <Button.Or />
         <Button
           icon='add'
           isPrimary
           label={t('Submit proposal')}
-          onClick={_togglePropose}
+          onClick={togglePropose}
         />
       </Button.Group>
       {isPreimageOpen && (
-        <PreImage onClose={_togglePreimage} />
+        <PreImage onClose={togglePreimage} />
       )}
       {isProposeOpen && (
-        <Propose onClose={_togglePropose} />
+        <Propose onClose={togglePropose} />
       )}
       <Referendums />
       <Proposals />
diff --git a/packages/app-generic-asset/src/Assets.tsx b/packages/app-generic-asset/src/Assets.tsx
index febd605d505b..1ea85ea6480c 100644
--- a/packages/app-generic-asset/src/Assets.tsx
+++ b/packages/app-generic-asset/src/Assets.tsx
@@ -5,9 +5,10 @@
 import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, CardGrid } from '@polkadot/react-components';
 import { withMulti, withObservable } from '@polkadot/react-api';
+import { useToggle } from '@polkadot/react-hooks';
 
 import assetRegistry, { AssetsSubjectInfo } from './assetsRegistry';
 import AssetCard from './AssetCard';
@@ -19,13 +20,12 @@ type Props = I18nProps & {
 };
 
 function Assets ({ assets, t }: Props): React.ReactElement<Props> {
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [isCreateOpen, toggleCreate] = useToggle();
   const emptyScreen = !isCreateOpen && (!assets || Object.keys(assets).length === 0);
 
   const _onForget = (id: string): void => assetRegistry.remove(id);
   const _onRegister = (id: BN, name: string): void => assetRegistry.add(id.toString(), name);
   const _onSaveName = (id: string, name: string): void => assetRegistry.add(id, name);
-  const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
 
   return (
     <CardGrid
@@ -35,7 +35,7 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
             isPrimary
             label={t('Register Asset')}
             icon='registered'
-            onClick={_toggleCreate}
+            onClick={toggleCreate}
           />
         </Button.Group>
       }
@@ -44,7 +44,7 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
     >
       {isCreateOpen && (
         <CreateModal
-          onClose={_toggleCreate}
+          onClose={toggleCreate}
           onRegister={_onRegister}
         />
       )}
diff --git a/packages/app-staking/src/Actions/index.tsx b/packages/app-staking/src/Actions/index.tsx
index 98406f52bab5..6c254874172d 100644
--- a/packages/app-staking/src/Actions/index.tsx
+++ b/packages/app-staking/src/Actions/index.tsx
@@ -8,7 +8,7 @@ import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 import { Button, Table } from '@polkadot/react-components';
-import { useCall, useApi, useAccounts } from '@polkadot/react-hooks';
+import { useApi, useAccounts, useCall, useToggle } from '@polkadot/react-hooks';
 import { Option } from '@polkadot/types';
 
 import Account from './Account';
@@ -52,15 +52,14 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
   const { allAccounts } = useAccounts();
   const queryBonded = useCall<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
   const queryLedger = useCall<Option<StakingLedger>[]>(api.query.staking.ledger.multi as any, [allAccounts]);
-  const [isNewStakeOpen, setIsNewStateOpen] = useState(false);
   const [foundStashes, setFoundStashes] = useState<[string, boolean][] | null>(null);
   const [stashTypes, setStashTypes] = useState<Record<string, number>>({});
+  const [isNewStakeOpen, toggleNewStake] = useToggle();
 
   useEffect((): void => {
     setFoundStashes(getStashes(allAccounts, stashTypes, queryBonded, queryLedger));
   }, [allAccounts, queryBonded, queryLedger, stashTypes]);
 
-  const _toggleNewStake = (): void => setIsNewStateOpen(!isNewStakeOpen);
   const _onUpdateType = (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other'): void =>
     setStashTypes({
       ...stashTypes,
@@ -79,11 +78,11 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
           key='new-stake'
           label={t('New stake')}
           icon='add'
-          onClick={_toggleNewStake}
+          onClick={toggleNewStake}
         />
       </Button.Group>
       {isNewStakeOpen && (
-        <StartStaking onClose={_toggleNewStake} />
+        <StartStaking onClose={toggleNewStake} />
       )}
       {foundStashes?.length
         ? (
diff --git a/packages/app-tech-comm/src/Proposals/Voting.tsx b/packages/app-tech-comm/src/Proposals/Voting.tsx
index 1644ef951084..1a921d62c1b7 100644
--- a/packages/app-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/app-tech-comm/src/Proposals/Voting.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
 import translate from '../translate';
@@ -20,14 +20,13 @@ interface Props extends I18nProps {
 function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | null {
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [isVotingOpen, setIsVotingOpen] = useState(false);
   const [voteValue, setVoteValue] = useState(true);
+  const [isVotingOpen, toggleVoting] = useToggle();
 
   if (!hasAccounts) {
     return null;
   }
 
-  const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
   const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
 
   return (
@@ -47,7 +46,7 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
           </Modal.Content>
           <VoteActions
             accountId={accountId}
-            onClick={_toggleVoting}
+            onClick={toggleVoting}
             params={[hash, proposalId, voteValue]}
             tx='technicalCommittee.vote'
           />
@@ -57,7 +56,7 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
         icon='check'
         isPrimary
         label={t('Vote')}
-        onClick={_toggleVoting}
+        onClick={toggleVoting}
       />
     </>
   );
diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx
index febac97a8940..94f31933add1 100644
--- a/packages/app-tech-comm/src/Proposals/index.tsx
+++ b/packages/app-tech-comm/src/Proposals/index.tsx
@@ -6,8 +6,9 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { Hash } from '@polkadot/types/interfaces';
 import { ComponentProps } from '../types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Table } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 import Proposal from './Proposal';
@@ -16,15 +17,14 @@ import Propose from './Propose';
 interface Props extends ComponentProps, I18nProps {}
 
 function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
-  const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
+  const [isProposeOpen, toggleProposal] = useToggle();
 
   return (
     <div className={className}>
       {isProposeOpen && (
         <Propose
           memberCount={members?.length}
-          onClose={_toggleProposal}
+          onClose={toggleProposal}
         />
       )}
       <Button.Group>
@@ -32,7 +32,7 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
           isPrimary
           label={t('Submit proposal')}
           icon='add'
-          onClick={_toggleProposal}
+          onClick={toggleProposal}
         />
       </Button.Group>
       {proposals?.length
diff --git a/packages/app-toolbox/src/Sign.tsx b/packages/app-toolbox/src/Sign.tsx
index f95a0e82bcda..4e72847a67ee 100644
--- a/packages/app-toolbox/src/Sign.tsx
+++ b/packages/app-toolbox/src/Sign.tsx
@@ -10,6 +10,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { Button, Input, InputAddress, Output, Static } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { hexToU8a, isFunction, isHex, stringToHex, stringToU8a, u8aToHex } from '@polkadot/util';
 
@@ -37,7 +38,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
   const [isLocked, setIsLocked] = useState(false);
   const [{ isUsable, signer }, setSigner] = useState<{ isUsable: boolean; signer: Signer | null }>({ isUsable: true, signer: null });
   const [signature, setSignature] = useState('');
-  const [isUnlockVisible, setIsUnlockVisible] = useState<boolean>(false);
+  const [isUnlockVisible, toggleUnlock] = useToggle();
 
   useEffect((): void => {
     const isExternal = currentPair?.meta.isExternal || false;
@@ -45,11 +46,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
     const isInjected = currentPair?.meta.isInjected || false;
     const isUsable = !(isExternal || isHardware || isInjected);
 
-    setAccountState({
-      isExternal,
-      isHardware,
-      isInjected
-    });
+    setAccountState({ isExternal, isHardware, isInjected });
     setIsLocked(
       isInjected
         ? false
@@ -71,7 +68,6 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
     }
   }, [currentPair]);
 
-  const _toggleUnlock = (): void => setIsUnlockVisible(!isUnlockVisible);
   const _onChangeAccount = (accountId: string | null): void => setCurrentPair(keyring.getPair(accountId || ''));
   const _onChangeData = (data: string): void => setData({ data, isHexData: isHex(data) });
   const _onSign = (): void => {
@@ -103,7 +99,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
   };
   const _onUnlock = (): void => {
     setIsLocked(false);
-    _toggleUnlock();
+    toggleUnlock();
   };
 
   return (
@@ -163,7 +159,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
                 <Button.Group>
                   <Button
                     isPrimary
-                    onClick={_toggleUnlock}
+                    onClick={toggleUnlock}
                     label={t('Unlock account')}
                     icon='unlock'
                   />
@@ -186,7 +182,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
         </div>
         {isUnlockVisible && (
           <Unlock
-            onClose={_toggleUnlock}
+            onClose={toggleUnlock}
             onUnlock={_onUnlock}
             pair={currentPair}
           />
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index 86295d7a20aa..aa8b5d08bd8e 100644
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@@ -7,7 +7,7 @@ import { I18nProps as Props } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 
@@ -15,15 +15,13 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [beneficiary, setBeneficiary] = useState<string | null>(null);
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
   const [value, setValue] = useState<BN | undefined>();
+  const [isProposeOpen, togglePropose] = useToggle();
 
   if (!hasAccounts) {
     return null;
   }
 
-  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
-
   const hasValue = value?.gtn(0);
 
   return (
@@ -64,7 +62,7 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
                 icon='cancel'
                 isNegative
                 label={t('Cancel')}
-                onClick={_togglePropose}
+                onClick={togglePropose}
               />
               <Button.Or />
               <TxButton
@@ -73,7 +71,7 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
                 isDisabled={!accountId || !hasValue}
                 isPrimary
                 label={t('Submit proposal')}
-                onClick={_togglePropose}
+                onClick={togglePropose}
                 params={[value, beneficiary]}
                 tx='treasury.proposeSpend'
               />
@@ -85,7 +83,7 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
         icon='check'
         isPrimary
         label={t('Submit proposal')}
-        onClick={_togglePropose}
+        onClick={togglePropose}
       />
     </>
   );
diff --git a/packages/app-treasury/src/Overview/Voting.tsx b/packages/app-treasury/src/Overview/Voting.tsx
index fe662ec5b28b..2792d7890b0e 100644
--- a/packages/app-treasury/src/Overview/Voting.tsx
+++ b/packages/app-treasury/src/Overview/Voting.tsx
@@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { Button, Dropdown, Input, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
 import translate from '../translate';
@@ -28,8 +28,8 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
   const [councilOptId, setCouncilOptId] = useState<number>(0);
   const [accountId, setAccountId] = useState<string | null>(null);
   const [{ councilId, councilHash }, setCouncilInfo] = useState<{ councilId: ProposalIndex | null; councilHash: Hash | null }>({ councilId: null, councilHash: null });
-  const [isVotingOpen, setIsVotingOpen] = useState(false);
   const [voteValue, setVoteValue] = useState(true);
+  const [isVotingOpen, toggleVoting] = useToggle();
 
   useEffect((): void => {
     const available = proposals
@@ -47,7 +47,6 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
     return null;
   }
 
-  const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
   const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
   const _onChangeProposal = (optionId: number): void => {
     const councilProp = proposals.find(({ votes }): boolean => !!(votes?.index.eq(optionId)));
@@ -91,7 +90,7 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
           <VoteActions
             accountId={accountId}
             isDisabled={!councilHash}
-            onClick={_toggleVoting}
+            onClick={toggleVoting}
             params={[councilHash, councilId, voteValue]}
             tx='council.vote'
           />
@@ -101,7 +100,7 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
         icon='check'
         isPrimary
         label={t('Vote')}
-        onClick={_toggleVoting}
+        onClick={toggleVoting}
       />
     </>
   );
diff --git a/packages/react-components/src/HelpOverlay.tsx b/packages/react-components/src/HelpOverlay.tsx
index 52195f5c8c13..1a87843e28f9 100644
--- a/packages/react-components/src/HelpOverlay.tsx
+++ b/packages/react-components/src/HelpOverlay.tsx
@@ -4,9 +4,10 @@
 
 import { BareProps } from './types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import ReactMd from 'react-markdown';
 import styled from 'styled-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import Icon from './Icon';
 
@@ -15,23 +16,21 @@ interface Props extends BareProps {
 }
 
 function HelpOverlay ({ className, md }: Props): React.ReactElement<Props> {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const _toggleVisible = (): void => setIsVisible(!isVisible);
+  const [isVisible, toggleVisible] = useToggle();
 
   return (
     <div className={className}>
       <div className='help-button'>
         <Icon
           name='help circle'
-          onClick={_toggleVisible}
+          onClick={toggleVisible}
         />
       </div>
       <div className={`help-slideout ${isVisible ? 'open' : 'closed'}`}>
         <div className='help-button'>
           <Icon
             name='close'
-            onClick={_toggleVisible}
+            onClick={toggleVisible}
           />
         </div>
         <ReactMd
diff --git a/packages/react-components/src/Inset.tsx b/packages/react-components/src/Inset.tsx
index 6fb16c33a3b1..2210d0bc7bc7 100644
--- a/packages/react-components/src/Inset.tsx
+++ b/packages/react-components/src/Inset.tsx
@@ -2,9 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import Icon from './Icon';
 import { classes } from './util';
@@ -23,7 +24,7 @@ export interface InsetProps {
 
 function Inset ({ children, className, header, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
   const history = useHistory();
-  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isCollapsed, toggleCollapsed] = useToggle();
 
   if (!children) {
     return null;
@@ -32,7 +33,6 @@ function Inset ({ children, className, header, href, isCollapsible, isError, isS
   const _onClick = (): void => {
     href && history.push(href);
   };
-  const _toggleCollapsed = (): void => setIsCollapsed(!isCollapsed);
 
   return (
     <div
@@ -52,7 +52,7 @@ function Inset ({ children, className, header, href, isCollapsible, isError, isS
       {isCollapsible && (
         <div
           className='header'
-          onClick={_toggleCollapsed}
+          onClick={toggleCollapsed}
         >
           <h3>{header}</h3>
           <Icon
diff --git a/packages/react-components/src/LabelHelp.tsx b/packages/react-components/src/LabelHelp.tsx
index f51f07d57b63..7c097968dd3a 100644
--- a/packages/react-components/src/LabelHelp.tsx
+++ b/packages/react-components/src/LabelHelp.tsx
@@ -4,8 +4,9 @@
 
 import { BareProps } from './types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import Icon from './Icon';
 import { classes } from './util';
@@ -16,9 +17,7 @@ interface Props extends BareProps {
 }
 
 function LabelHelp ({ className, help, style }: Props): React.ReactElement<Props> {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-
-  const _toggleTooltip = (): void => setIsTooltipOpen(!isTooltipOpen);
+  const [isTooltipOpen, toggleTooltip] = useToggle();
 
   return (
     <div
@@ -29,8 +28,8 @@ function LabelHelp ({ className, help, style }: Props): React.ReactElement<Props
         name='help circle'
         data-tip
         data-for='controlled-trigger'
-        onMouseOver={_toggleTooltip}
-        onMouseOut={_toggleTooltip}
+        onMouseOver={toggleTooltip}
+        onMouseOut={toggleTooltip}
       />
       {isTooltipOpen && (
         <Tooltip
diff --git a/packages/react-components/src/Password.tsx b/packages/react-components/src/Password.tsx
index 35bcf4566b75..afaf29df9a62 100644
--- a/packages/react-components/src/Password.tsx
+++ b/packages/react-components/src/Password.tsx
@@ -4,7 +4,8 @@
 
 import { BareProps } from './types';
 
-import React, { useState } from 'react';
+import React from 'react';
+import { useToggle } from '@polkadot/react-hooks';
 import { MAX_PASS_LEN } from '@polkadot/ui-keyring/defaults';
 
 import { classes } from './util';
@@ -29,9 +30,7 @@ interface Props extends BareProps {
 }
 
 export default function Password ({ autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const _toggleVisible = (): void => setIsVisible(!isVisible);
+  const [isVisible, toggleVisible] = useToggle();
 
   return (
     <Input
@@ -65,7 +64,7 @@ export default function Password ({ autoFocus, children, className, defaultValue
             : 'unhide'
         }
         isPrimary
-        onClick={_toggleVisible}
+        onClick={toggleVisible}
       />
       {children}
     </Input>
diff --git a/packages/react-params/src/Param/Bytes.tsx b/packages/react-params/src/Param/Bytes.tsx
index 181440066117..c786ec44b623 100644
--- a/packages/react-params/src/Param/Bytes.tsx
+++ b/packages/react-params/src/Param/Bytes.tsx
@@ -4,17 +4,17 @@
 
 import { Props } from '../types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Compact } from '@polkadot/types';
 import { Button } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import BaseBytes from './BaseBytes';
 import File from './File';
 
 export default function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
-  const [isFileDrop, setIsFileDrop] = useState(false);
+  const [isFileDrop, toggleFile] = useToggle();
 
-  const _toggleFile = (): void => setIsFileDrop(true);
   const _onChangeFile = (value: Uint8Array): void => {
     onChange && onChange({
       isValid: value.length !== 0,
@@ -54,7 +54,7 @@ export default function Bytes ({ className, defaultValue, isDisabled, isError, l
         {!isDisabled && (
           <Button
             icon='file'
-            onClick={_toggleFile}
+            onClick={toggleFile}
           />
         )}
       </BaseBytes>