Apply useToggle as appropriate (polkadot-js#2036)

* Apply useToggle as appropriate

* Update inset

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,43 +157,43 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
               )
               : undefined
           }
-          onClickName={_toggleEditName}
+          onClickName={toggleEditName}
           toggle={isEditingName}
           value={address}
         />
         {isBackupOpen && (
           <Backup
             address={address}
             key='modal-backup-account'
-            onClose={_toggleBackup}
+            onClose={toggleBackup}
           />
         )}
         {isDeriveOpen && (
           <Derive
             from={address}
             key='modal-derive-account'
-            onClose={_toggleDerive}
+            onClose={toggleDerive}
           />
         )}
         {isForgetOpen && (
           <Forget
             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,31 +244,31 @@ 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'
             />
           }
         >
           <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>

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() && (
           <>

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>

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}
               />
             )
           }