From 8e971ef7ebfd49b5eeefd617f33928f87ebce9ee Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 21 Jan 2020 15:47:44 +0100
Subject: [PATCH] Use ButtonCancel for all Cancel-only buttons (#2164)

* Use ButtonCancel for all Cancel-only buttons

* Small cleanups
---
 packages/app-accounts/src/modals/Backup.tsx   | 49 +++++--------------
 .../app-accounts/src/modals/ChangePass.tsx    |  9 +---
 packages/app-accounts/src/modals/Create.tsx   |  9 +---
 .../src/modals/CreateConfirmation.tsx         |  9 +---
 packages/app-accounts/src/modals/Derive.tsx   |  9 +---
 packages/app-accounts/src/modals/Identity.tsx |  9 +---
 packages/app-accounts/src/modals/Import.tsx   |  9 +---
 packages/app-accounts/src/modals/Transfer.tsx |  9 +---
 .../app-address-book/src/modals/Create.tsx    |  9 +---
 packages/app-contracts/src/Contracts/Call.tsx |  9 +---
 packages/app-contracts/src/Modal.tsx          | 11 +----
 packages/app-contracts/src/RemoveABI.tsx      |  9 +---
 packages/app-council/src/Motions/Slashing.tsx |  9 +---
 .../app-democracy/src/Overview/Seconding.tsx  |  9 +---
 .../app-generic-asset/src/modals/Create.tsx   | 22 +++------
 packages/app-settings/src/General.tsx         | 11 ++---
 .../src/Actions/Account/BondExtra.tsx         |  9 +---
 .../src/Actions/Account/InjectKeys.tsx        |  9 +---
 .../src/Actions/Account/Nominate.tsx          |  9 +---
 .../Actions/Account/SetControllerAccount.tsx  |  9 +---
 .../Actions/Account/SetRewardDestination.tsx  |  9 +---
 .../src/Actions/Account/SetSessionKey.tsx     |  9 +---
 .../src/Actions/Account/Unbond.tsx            |  9 +---
 .../src/Actions/Account/Validate.tsx          |  9 +---
 packages/app-staking/src/Actions/NewStake.tsx |  9 +---
 packages/app-toolbox/src/Unlock.tsx           |  9 +---
 .../app-treasury/src/Overview/Propose.tsx     |  9 +---
 .../app-treasury/src/Overview/Submission.tsx  |  9 +---
 packages/react-components/src/AccountName.tsx |  8 +--
 .../react-components/src/ButtonCancel.tsx     |  9 +++-
 packages/react-components/src/Forget.tsx      |  9 +---
 packages/react-components/src/TxModal.tsx     | 11 +----
 packages/react-components/src/TxModalNew.tsx  | 12 ++---
 packages/react-components/src/VoteActions.tsx |  8 +--
 packages/react-signer/src/Modal.tsx           |  7 +--
 35 files changed, 96 insertions(+), 277 deletions(-)

diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index 0f7a5d7ae5..55b72648f8 100644
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@@ -6,7 +6,7 @@ import { BareProps } from '@polkadot/react-components/types';
 
 import FileSaver from 'file-saver';
 import React, { useState, useMemo } from 'react';
-import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
@@ -16,12 +16,6 @@ interface Props extends BareProps {
   address: string;
 }
 
-interface ButtonsProps {
-  doBackup: () => void;
-  isPassValid: boolean;
-  onClose: () => void;
-}
-
 interface ContentProps {
   address: string;
   doBackup: () => void;
@@ -77,11 +71,18 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
         password={password}
         onChangePass={_onChangePass}
       />
-      <Buttons
-        doBackup={_doBackup}
-        isPassValid={isPassValid}
-        onClose={onClose}
-      />
+      <Modal.Actions>
+        <Button.Group>
+          <ButtonCancel onClick={onClose} />
+          <Button.Or />
+          <Button
+            icon='download'
+            isDisabled={!isPassValid}
+            label={t('Download')}
+            onClick={_doBackup}
+          />
+        </Button.Group>
+      </Modal.Actions>
     </Modal>
   );
 }
@@ -113,27 +114,3 @@ function Content ({ address, doBackup, isPassTouched, isPassValid, onChangePass,
     </Modal.Content>
   );
 }
-
-function Buttons ({ doBackup, isPassValid, onClose }: ButtonsProps): React.ReactElement<ButtonsProps> {
-  const { t } = useTranslation();
-
-  return (
-    <Modal.Actions>
-      <Button.Group>
-        <Button
-          icon='cancel'
-          isNegative
-          label={t('Cancel')}
-          onClick={onClose}
-        />
-        <Button.Or />
-        <Button
-          icon='download'
-          isDisabled={!isPassValid}
-          label={t('Download')}
-          onClick={doBackup}
-        />
-      </Button.Group>
-    </Modal.Actions>
-  );
-}
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index 537d31f7db..b399d4dd64 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -52,12 +52,7 @@ class ChangePass extends TxComponent<Props, State> {
     return (
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='sign-in'
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index f785652381..14ea9fb982 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -11,7 +11,7 @@ import FileSaver from 'file-saver';
 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 { AddressRow, Button, ButtonCancel, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -296,12 +296,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='plus'
diff --git a/packages/app-accounts/src/modals/CreateConfirmation.tsx b/packages/app-accounts/src/modals/CreateConfirmation.tsx
index 968d27002f..76c0625107 100644
--- a/packages/app-accounts/src/modals/CreateConfirmation.tsx
+++ b/packages/app-accounts/src/modals/CreateConfirmation.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import { AddressRow, Button, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -32,12 +32,7 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='plus'
diff --git a/packages/app-accounts/src/modals/Derive.tsx b/packages/app-accounts/src/modals/Derive.tsx
index 11b6410486..fa9368852d 100644
--- a/packages/app-accounts/src/modals/Derive.tsx
+++ b/packages/app-accounts/src/modals/Derive.tsx
@@ -7,7 +7,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 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 { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
 import { useDebounce } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { keyExtractPath } from '@polkadot/util-crypto';
@@ -198,12 +198,7 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           {isLocked
             ? (
diff --git a/packages/app-accounts/src/modals/Identity.tsx b/packages/app-accounts/src/modals/Identity.tsx
index 06ae7d69e7..f5dceda4ac 100644
--- a/packages/app-accounts/src/modals/Identity.tsx
+++ b/packages/app-accounts/src/modals/Identity.tsx
@@ -6,7 +6,7 @@ import { Registration } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { getAddressMeta } from '@polkadot/react-components/util';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { Data, Option } from '@polkadot/types';
@@ -210,12 +210,7 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={address}
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index 5b77d9309e..f9d81868d4 100644
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { ModalProps } from '../types';
 
 import React from 'react';
-import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
@@ -42,12 +42,7 @@ class Import extends TxComponent<Props, State> {
         {this.renderInput()}
         <Modal.Actions>
           <Button.Group>
-            <Button
-              icon='cancel'
-              isNegative
-              label={t('Cancel')}
-              onClick={onClose}
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <Button
               icon='sync'
diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx
index 90915e34cf..106dc9ab8e 100644
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@@ -7,7 +7,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 // import Checks from '@polkadot/react-signer/Checks';
@@ -126,12 +126,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={senderId}
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index 8dd0925505..c9d008faf7 100644
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@@ -7,7 +7,7 @@ import { ModalProps as Props } from '../types';
 
 import React, { useState } from 'react';
 
-import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
@@ -106,12 +106,7 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='save'
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index fcdcfff94b..2269bd8e93 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@@ -8,7 +8,7 @@ import { BareProps, StringOrNull } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
 import { useApi } from '@polkadot/react-hooks';
 import { createValue } from '@polkadot/react-params/values';
@@ -196,12 +196,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
           />
         )}
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           {useRpc
             ? (
diff --git a/packages/app-contracts/src/Modal.tsx b/packages/app-contracts/src/Modal.tsx
index 8bd1abd87a..ebd2555374 100644
--- a/packages/app-contracts/src/Modal.tsx
+++ b/packages/app-contracts/src/Modal.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React from 'react';
 import { Abi } from '@polkadot/api-contract';
-import { Button, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
 
 import ABI from './ABI';
 
@@ -158,16 +158,9 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
   }
 
   protected renderCancelButton (): React.ReactNode {
-    const { t } = this.props;
-
     return (
       <>
-        <Button
-          icon='cancel'
-          isNegative
-          onClick={this.onClose}
-          label={t('Cancel')}
-        />
+        <ButtonCancel onClick={this.onClose} />
         <Button.Or />
       </>
     );
diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx
index ba08bb4f47..0b23a41c3f 100644
--- a/packages/app-contracts/src/RemoveABI.tsx
+++ b/packages/app-contracts/src/RemoveABI.tsx
@@ -5,7 +5,7 @@
 import { CodeStored } from '@polkadot/app-contracts/types';
 
 import React from 'react';
-import { Button, CodeRow, Modal } from '@polkadot/react-components';
+import { Button, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -40,12 +40,7 @@ export default function RemoveABI ({ code, onClose, onRemove }: Props): React.Re
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             isPrimary
diff --git a/packages/app-council/src/Motions/Slashing.tsx b/packages/app-council/src/Motions/Slashing.tsx
index 1c66bdb67b..2621716756 100644
--- a/packages/app-council/src/Motions/Slashing.tsx
+++ b/packages/app-council/src/Motions/Slashing.tsx
@@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces';
 import { CallFunction } from '@polkadot/types/types';
 
 import React, { useEffect, useState } from 'react';
-import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -116,12 +116,7 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                isNegative
-                icon='cancel'
-                label={t('Cancel')}
-                onClick={toggleVisible}
-              />
+              <ButtonCancel onClick={toggleVisible} />
               <Button.Or />
               <TxButton
                 accountId={accountId}
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index cbdad556be..7df6dfe2d9 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -48,12 +48,7 @@ export default function Seconding ({ depositors, proposalId }: Props): React.Rea
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                isNegative
-                onClick={_toggleSeconding}
-                label={t('Cancel')}
-                icon='cancel'
-              />
+              <ButtonCancel onClick={_toggleSeconding} />
               <Button.Or />
               <TxButton
                 accountId={accountId}
diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx
index f409c65813..926b28f0af 100644
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@@ -2,22 +2,23 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { InputNumber, Button, Input, Modal } from '@polkadot/react-components';
+import { Button, ButtonCancel, Input, InputNumber, Modal } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
 export interface ModalProps {
   onClose: () => void;
   onRegister: (id: BN, name: string) => void;
 }
 
-interface Props extends ModalProps, I18nProps {}
+interface Props extends ModalProps {
+  className?: string;
+}
 
-function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
+export default function Create ({ onClose, onRegister }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [assetId, setAssetId] = useState(new BN(0));
   const [name, setName] = useState('new asset');
 
@@ -49,12 +50,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             isDisabled={!name}
@@ -68,5 +64,3 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
     </Modal>
   );
 }
-
-export default translate(Create);
diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index 49c298b189..dc63d36303 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -7,7 +7,7 @@ import { Option, SetOption } from './types';
 
 import React, { useEffect, useState, useMemo } from 'react';
 import { isLedgerCapable } from '@polkadot/react-api';
-import { Button, Dropdown } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown } from '@polkadot/react-components';
 import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
 
 import translate from './translate';
@@ -16,7 +16,7 @@ import SelectUrl from './SelectUrl';
 
 interface Props extends I18nProps{
   isModalContent?: boolean;
-  onClose?: () => void;
+  onClose: () => void;
 }
 
 const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
@@ -132,12 +132,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
       <Button.Group>
         {isModalContent && (
           <>
-            <Button
-              isNegative
-              label={t('Cancel')}
-              icon='cancel'
-              onClick={onClose}
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
           </>
         )}
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index 8a27e24f71..d9e131ec28 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../../types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { Available, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Available, Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { calcTxLength } from '@polkadot/react-signer/Checks';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
@@ -73,12 +73,7 @@ class BondExtra extends TxComponent<Props, State> {
         {this.renderContent()}
         <Modal.Actions>
           <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <TxButton
               accountId={stashId}
diff --git a/packages/app-staking/src/Actions/Account/InjectKeys.tsx b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
index 87cafd106e..3747724456 100644
--- a/packages/app-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 import { assert, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicValidate } from '@polkadot/util-crypto';
@@ -111,12 +111,7 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='sign-in'
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index 0d73da15b9..2307e67b2b 100644
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@@ -6,7 +6,7 @@ import { DerivedStakingOverview } from '@polkadot/api-derive/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { AddressMulti, Button, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../../constants';
@@ -88,12 +88,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={controllerId}
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index ed915bdbf9..1355104765 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -6,7 +6,7 @@ import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
@@ -82,12 +82,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
         </Modal.Content>
         <Modal.Actions>
           <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <TxButton
               accountId={stashId}
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 631d38f44a..f7033b6f22 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { Button, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
@@ -44,12 +44,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
         {this.renderContent()}
         <Modal.Actions>
           <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <TxButton
               accountId={controllerId}
diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
index 89a9f9ff0d..4abc1a1fde 100644
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useState } from 'react';
-import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import ValidationSessionKey from './InputValidationSessionKey';
@@ -82,12 +82,7 @@ export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionI
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={controllerId}
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 88274ba990..628f5ad59a 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -11,7 +11,7 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { Option } from '@polkadot/types';
-import { AddressInfo, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { AddressInfo, Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
@@ -68,12 +68,7 @@ class Unbond extends TxComponent<Props, State> {
         {this.renderContent()}
         <Modal.Actions>
           <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <TxButton
               accountId={controllerId}
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index f70eaf2e29..bcf51ee915 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -10,7 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { registry } from '@polkadot/react-api';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
-import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { createType } from '@polkadot/types';
 
 import InputValidationUnstakeThreshold from './InputValidationUnstakeThreshold';
@@ -100,12 +100,7 @@ class Validate extends TxComponent<Props, State> {
     return (
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            label={t('Cancel')}
-            icon='cancel'
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={controllerId}
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index 5413754d13..a4c48072f3 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../types';
 import BN from 'bn.js';
 import React from 'react';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { Button, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../translate';
@@ -115,12 +115,7 @@ class NewStake extends TxComponent<Props, State> {
         </Modal.Content>
         <Modal.Actions>
           <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <TxButton
               accountId={stashId}
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 40fd5c2c38..4175f99971 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { KeyringPair } from '@polkadot/keyring/types';
 
 import React from 'react';
-import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
 
 import translate from './translate';
 
@@ -59,12 +59,7 @@ class Unlock extends TxComponent<Props, State> {
     return (
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={this.onCancel}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={this.onCancel} />
           <Button.Or />
           <Button
             isPrimary
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index a127a95a68..ee20c3932c 100644
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -62,12 +62,7 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                icon='cancel'
-                isNegative
-                label={t('Cancel')}
-                onClick={_togglePropose}
-              />
+              <ButtonCancel onClick={_togglePropose} />
               <Button.Or />
               <TxButton
                 accountId={accountId}
diff --git a/packages/app-treasury/src/Overview/Submission.tsx b/packages/app-treasury/src/Overview/Submission.tsx
index 1ed5545cdd..fe8101074f 100644
--- a/packages/app-treasury/src/Overview/Submission.tsx
+++ b/packages/app-treasury/src/Overview/Submission.tsx
@@ -6,7 +6,7 @@ import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
 import { ProposalIndex } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
-import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -70,12 +70,7 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                icon='cancel'
-                isNegative
-                label={t('Cancel')}
-                onClick={toggleOpen}
-              />
+              <ButtonCancel onClick={toggleOpen} />
               <Button.Or />
               <TxButton
                 accountId={accountId}
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 86107901f6..f1c766e941 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -16,6 +16,7 @@ import { getAddressName } from './util';
 import AddressMini from './AddressMini';
 import Badge from './Badge';
 import Button from './Button';
+import ButtonCancel from './ButtonCancel';
 import Dropdown from './Dropdown';
 import Icon from './Icon';
 import Input from './Input';
@@ -278,12 +279,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                icon='cancel'
-                isNegative
-                label={t('Cancel')}
-                onClick={toggleJudgement}
-              />
+              <ButtonCancel onClick={toggleJudgement} />
               <Button.Or />
               <TxButton
                 accountId={judgementAccountId}
diff --git a/packages/react-components/src/ButtonCancel.tsx b/packages/react-components/src/ButtonCancel.tsx
index e98861ee2c..bc1dd5c931 100644
--- a/packages/react-components/src/ButtonCancel.tsx
+++ b/packages/react-components/src/ButtonCancel.tsx
@@ -9,19 +9,24 @@ import { useTranslation } from './translate';
 
 interface Props {
   className?: string;
+  isDisabled?: boolean;
+  label?: React.ReactNode;
   onClick: () => void;
+  tabIndex?: number;
 }
 
-export default function ButtonCancel ({ className, onClick }: Props): React.ReactElement<Props> {
+export default function ButtonCancel ({ className, isDisabled, label, onClick, tabIndex }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <Button
       className={className}
       icon='cancel'
+      isDisabled={isDisabled}
       isNegative
-      label={t('Cancel')}
+      label={label || t('Cancel')}
       onClick={onClick}
+      tabIndex={tabIndex}
     />
   );
 }
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index 26be73c829..653e772d03 100644
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@@ -5,7 +5,7 @@
 import { CodeStored } from '@polkadot/app-contracts/types';
 
 import React from 'react';
-import { AddressRow, Button, CodeRow, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -106,12 +106,7 @@ export default function Forget (props: Props): React.ReactElement<Props> {
       <Modal.Content>{renderContent(props, t)}</Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             isPrimary
diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx
index a3b49a394b..e7840002d0 100644
--- a/packages/react-components/src/TxModal.tsx
+++ b/packages/react-components/src/TxModal.tsx
@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { Button, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 
 export interface TxModalProps extends I18nProps {
   onSubmit?: () => void;
@@ -166,16 +166,9 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
   }
 
   protected renderCancelButton (): React.ReactNode {
-    const { t } = this.props;
-
     return (
       <>
-        <Button
-          isNegative
-          onClick={this.hideModal}
-          label={t('Cancel')}
-          icon='cancel'
-        />
+        <ButtonCancel onClick={this.hideModal} />
         <Button.Or />
       </>
     );
diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx
index ce5942aa23..7d770c65ac 100644
--- a/packages/react-components/src/TxModalNew.tsx
+++ b/packages/react-components/src/TxModalNew.tsx
@@ -5,7 +5,7 @@
 import { TxModalProps as Props } from './types';
 
 import React, { useState, useEffect } from 'react';
-import { Button, InputAddress, Modal } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, Modal } from '@polkadot/react-components';
 // import { useTx } from '@polkadot/react-hooks';
 import { isUndefined } from '@polkadot/util';
 
@@ -28,7 +28,7 @@ function TxModal<P extends Props> ({
   inputAddressLabel = t('using my account'),
   inputAddressHelp = t('Select the account to use for this action.'),
   inputAddressProps = {},
-  cancelButtonLabel = t('Cancel'),
+  cancelButtonLabel,
   submitButtonIcon = 'sign-in',
   submitButtonLabel = t('Submit'),
   submitButtonProps = {},
@@ -96,7 +96,7 @@ function TxModal<P extends Props> ({
 
   return (
     <>
-      {Trigger ? <Trigger onOpen={onOpen} /> : null}
+      {Trigger && <Trigger onOpen={onOpen} />}
       <Modal {...allModalProps}>
         <Modal.Content>
           {preContent}
@@ -115,11 +115,9 @@ function TxModal<P extends Props> ({
         </Modal.Content>
         <Modal.Actions>
           <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
+            <ButtonCancel
               label={cancelButtonLabel}
-              icon='cancel'
+              onClick={onClose}
             />
             <Button.Or />
             <Button
diff --git a/packages/react-components/src/VoteActions.tsx b/packages/react-components/src/VoteActions.tsx
index 9359218819..0ce758ea3f 100644
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@@ -5,6 +5,7 @@
 import React from 'react';
 
 import Button from './Button';
+import ButtonCancel from './ButtonCancel';
 import Modal from './Modal';
 import TxButton from './TxButton';
 import { useTranslation } from './translate';
@@ -24,12 +25,7 @@ export default function VoteActions ({ accountId, className, isDisabled, onClick
   return (
     <Modal.Actions>
       <Button.Group className={className}>
-        <Button
-          icon='cancel'
-          isNegative
-          label={t('Cancel')}
-          onClick={onClick}
-        />
+        <ButtonCancel onClick={onClick} />
         <Button.Or />
         <TxButton
           accountId={accountId}
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index 6d00e09231..e5f4ba968b 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 import { SubmittableResult } from '@polkadot/api';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { createType } from '@polkadot/types';
-import { Button, InputBalance, Modal, Toggle, ErrorBoundary } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputBalance, Modal, Toggle, ErrorBoundary } from '@polkadot/react-components';
 import { registry } from '@polkadot/react-api';
 import { withApi, withMulti, withObservable } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
@@ -185,16 +185,13 @@ class Signer extends React.PureComponent<Props, State> {
     return (
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
+          <ButtonCancel
             onClick={
               isQrVisible
                 ? this.onCancelQr
                 : this.onCancel
             }
             tabIndex={3}
-            label={t('Cancel')}
-            icon='cancel'
           />
           {!isRenderError && (!isQrVisible || !isQrScanning) && (
             <>