From 1d5a756b697d242644d23dd95ffb72d633dd7826 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 21 Jan 2020 17:34:34 +0100
Subject: [PATCH] Auto-add Button.Group inside Modal.Actions (#2165)

* Auto-add Button.Group inside Modal.Actions

* Pass onCancel prop through to Modal.Actions

* Cancel rendering in contracts
---
 packages/app-accounts/src/modals/Backup.tsx   |  20 ++-
 .../app-accounts/src/modals/ChangePass.tsx    |  24 ++--
 packages/app-accounts/src/modals/Create.tsx   |  22 ++--
 .../src/modals/CreateConfirmation.tsx         |  20 ++-
 packages/app-accounts/src/modals/Derive.tsx   |  48 ++++---
 packages/app-accounts/src/modals/Identity.tsx |  28 ++---
 packages/app-accounts/src/modals/Import.tsx   |  24 ++--
 packages/app-accounts/src/modals/Qr.tsx       |  22 ++--
 packages/app-accounts/src/modals/Transfer.tsx |  28 ++---
 .../app-address-book/src/modals/Create.tsx    |  22 ++--
 packages/app-contracts/src/Codes/Add.tsx      |  19 ++-
 packages/app-contracts/src/Codes/Upload.tsx   |  31 +++--
 packages/app-contracts/src/Contracts/Add.tsx  |  19 ++-
 packages/app-contracts/src/Deploy.tsx         |  43 +++----
 packages/app-contracts/src/Modal.tsx          |  13 +-
 packages/app-contracts/src/RemoveABI.tsx      |  20 ++-
 packages/app-council/src/Motions/Slashing.tsx |  28 ++---
 .../app-democracy/src/Overview/PreImage.tsx   |  35 ++----
 .../app-democracy/src/Overview/Propose.tsx    |  35 ++----
 .../app-democracy/src/Overview/Seconding.tsx  |  28 ++---
 .../app-generic-asset/src/modals/Create.tsx   |  22 ++--
 .../src/Actions/Account/BondExtra.tsx         |  28 ++---
 .../src/Actions/Account/InjectKeys.tsx        |  20 ++-
 .../src/Actions/Account/Nominate.tsx          |  28 ++---
 .../Actions/Account/SetControllerAccount.tsx  |  30 ++---
 .../Actions/Account/SetRewardDestination.tsx  |  30 ++---
 .../src/Actions/Account/SetSessionKey.tsx     |  44 +++----
 .../src/Actions/Account/Unbond.tsx            |  30 ++---
 .../src/Actions/Account/Validate.tsx          | 119 ++++--------------
 packages/app-staking/src/Actions/NewStake.tsx |  28 ++---
 packages/app-toolbox/src/Unlock.tsx           |  22 ++--
 .../app-treasury/src/Overview/Propose.tsx     |  28 ++---
 .../app-treasury/src/Overview/Submission.tsx  |  38 +++---
 packages/react-components/src/AccountName.tsx |  26 ++--
 .../react-components/src/ButtonCancel.tsx     |   5 +-
 packages/react-components/src/Forget.tsx      |  20 ++-
 packages/react-components/src/Modal.tsx       |  25 +++-
 packages/react-components/src/TxModal.tsx     |  20 +--
 packages/react-components/src/TxModalNew.tsx  |  28 ++---
 packages/react-components/src/VoteActions.tsx |  31 +++--
 packages/react-signer/src/Modal.tsx           |  90 +++++++------
 41 files changed, 506 insertions(+), 735 deletions(-)

diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index 55b72648f8..a686dfbed7 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, ButtonCancel, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
@@ -71,17 +71,13 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
         password={password}
         onChangePass={_onChangePass}
       />
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='download'
-            isDisabled={!isPassValid}
-            label={t('Download')}
-            onClick={_doBackup}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='download'
+          isDisabled={!isPassValid}
+          label={t('Download')}
+          onClick={_doBackup}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index b399d4dd64..eb641ec65c 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, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -50,19 +50,15 @@ class ChangePass extends TxComponent<Props, State> {
     const { isNewValid, isOldValid } = this.state;
 
     return (
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='sign-in'
-            isDisabled={!isNewValid || !isOldValid}
-            isPrimary
-            label={t('Change')}
-            onClick={this.doChange}
-            ref={this.button}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='sign-in'
+          isDisabled={!isNewValid || !isOldValid}
+          isPrimary
+          label={t('Change')}
+          onClick={this.doChange}
+          ref={this.button}
+        />
       </Modal.Actions>
     );
   }
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index 14ea9fb982..c83c2466bc 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, ButtonCancel, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, 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';
@@ -294,18 +294,14 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
           </details>
         </AddressRow>
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='plus'
-            isDisabled={!isValid}
-            isPrimary
-            label={t('Save')}
-            onClick={_toggleConfirmation}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='plus'
+          isDisabled={!isValid}
+          isPrimary
+          label={t('Save')}
+          onClick={_toggleConfirmation}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-accounts/src/modals/CreateConfirmation.tsx b/packages/app-accounts/src/modals/CreateConfirmation.tsx
index 76c0625107..72409b5459 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, ButtonCancel, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -30,17 +30,13 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
           <p>{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
         </AddressRow>
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='plus'
-            isPrimary
-            label={t('Create and backup account')}
-            onClick={onCommit}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='plus'
+          isPrimary
+          label={t('Create and backup account')}
+          onClick={onCommit}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-accounts/src/modals/Derive.tsx b/packages/app-accounts/src/modals/Derive.tsx
index fa9368852d..4bfc41cea4 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, ButtonCancel, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
+import { AddressRow, Button, 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';
@@ -196,31 +196,27 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
           </AddressRow>
         )}
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          {isLocked
-            ? (
-              <Button
-                icon='lock'
-                isDisabled={!rootPass}
-                isPrimary
-                label={t('Unlock')}
-                onClick={_onUnlock}
-              />
-            )
-            : (
-              <Button
-                icon='plus'
-                isDisabled={!isValid}
-                isPrimary
-                label={t('Save')}
-                onClick={_toggleConfirmation}
-              />
-            )
-          }
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        {isLocked
+          ? (
+            <Button
+              icon='lock'
+              isDisabled={!rootPass}
+              isPrimary
+              label={t('Unlock')}
+              onClick={_onUnlock}
+            />
+          )
+          : (
+            <Button
+              icon='plus'
+              isDisabled={!isValid}
+              isPrimary
+              label={t('Save')}
+              onClick={_toggleConfirmation}
+            />
+          )
+        }
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-accounts/src/modals/Identity.tsx b/packages/app-accounts/src/modals/Identity.tsx
index f5dceda4ac..2e07f22bd8 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, ButtonCancel, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { 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';
@@ -208,21 +208,17 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           />
         </WrapToggle> */}
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <TxButton
-            accountId={address}
-            icon='send'
-            isPrimary
-            label={t('Set Identity')}
-            onStart={onClose}
-            params={[info]}
-            tx='identity.setIdentity'
-            withSpinner={false}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={address}
+          icon='send'
+          isPrimary
+          label={t('Set Identity')}
+          onStart={onClose}
+          params={[info]}
+          tx='identity.setIdentity'
+          withSpinner={false}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index f9d81868d4..a7ea5eb7a9 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, ButtonCancel, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
@@ -40,19 +40,15 @@ class Import extends TxComponent<Props, State> {
     return (
       <Modal header={t('Add via backup file')}>
         {this.renderInput()}
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel onClick={onClose} />
-            <Button.Or />
-            <Button
-              icon='sync'
-              isDisabled={!isFileValid || !isPassValid}
-              isPrimary
-              onClick={this.onSave}
-              label={t('Restore')}
-              ref={this.button}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <Button
+            icon='sync'
+            isDisabled={!isFileValid || !isPassValid}
+            isPrimary
+            onClick={this.onSave}
+            label={t('Restore')}
+            ref={this.button}
+          />
         </Modal.Actions>
       </Modal>
     );
diff --git a/packages/app-accounts/src/modals/Qr.tsx b/packages/app-accounts/src/modals/Qr.tsx
index b2aecd26b7..fd13dc6532 100644
--- a/packages/app-accounts/src/modals/Qr.tsx
+++ b/packages/app-accounts/src/modals/Qr.tsx
@@ -6,7 +6,7 @@ import { ModalProps } from '../types';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import { QrScanAddress } from '@polkadot/react-qr';
 import keyring from '@polkadot/ui-keyring';
 
@@ -88,18 +88,14 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
             )
         }
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='sign-in'
-            isDisabled={!scanned || !isNameValid}
-            isPrimary
-            onClick={_onSave}
-            label={t('Create')}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='sign-in'
+          isDisabled={!scanned || !isNameValid}
+          isPrimary
+          onClick={_onSave}
+          label={t('Create')}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx
index 106dc9ab8e..440b049bc1 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, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { 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';
@@ -124,21 +124,17 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
           /> */}
         </div>
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <TxButton
-            accountId={senderId}
-            extrinsic={extrinsic}
-            icon='send'
-            isDisabled={!hasAvailable}
-            isPrimary
-            label={t('Make Transfer')}
-            onStart={onClose}
-            withSpinner={false}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={senderId}
+          extrinsic={extrinsic}
+          icon='send'
+          isDisabled={!hasAvailable}
+          isPrimary
+          label={t('Make Transfer')}
+          onStart={onClose}
+          withSpinner={false}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index c9d008faf7..2d5391a304 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, ButtonCancel, Input, InputAddress, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
@@ -104,18 +104,14 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
           />
         </AddressRow>
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='save'
-            isDisabled={!isValid}
-            isPrimary
-            onClick={_onCommit}
-            label={t('Save')}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='save'
+          isDisabled={!isValid}
+          isPrimary
+          onClick={_onCommit}
+          label={t('Save')}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-contracts/src/Codes/Add.tsx b/packages/app-contracts/src/Codes/Add.tsx
index d07ff00a6c..07663b413f 100644
--- a/packages/app-contracts/src/Codes/Add.tsx
+++ b/packages/app-contracts/src/Codes/Add.tsx
@@ -63,17 +63,14 @@ class Add extends ContractModal<Props, State> {
     const isValid = !isBusy && isCodeValid && isNameValid;
 
     return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <Button
-          icon='save'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Save')}
-          onClick={this.onSave}
-          ref={this.button}
-        />
-      </Button.Group>
+      <Button
+        icon='save'
+        isDisabled={!isValid}
+        isPrimary
+        label={t('Save')}
+        onClick={this.onSave}
+        ref={this.button}
+      />
     );
   }
 
diff --git a/packages/app-contracts/src/Codes/Upload.tsx b/packages/app-contracts/src/Codes/Upload.tsx
index bc6ce08aa1..c951101a64 100644
--- a/packages/app-contracts/src/Codes/Upload.tsx
+++ b/packages/app-contracts/src/Codes/Upload.tsx
@@ -9,7 +9,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { SubmittableResult } from '@polkadot/api';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
-import { Button, InputFile, TxButton } from '@polkadot/react-components';
+import { InputFile, TxButton } from '@polkadot/react-components';
 import { compactAddLength } from '@polkadot/util';
 
 import ContractModal, { ContractModalProps, ContractModalState } from '../Modal';
@@ -71,22 +71,19 @@ class Upload extends ContractModal<Props, State> {
     const isValid = !isBusy && accountId && isNameValid && isWasmValid && !gasLimit.isZero() && !!accountId;
 
     return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <TxButton
-          accountId={accountId}
-          icon='upload'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Upload')}
-          onClick={this.toggleBusy(true)}
-          onSuccess={this.onSuccess}
-          onFailed={this.toggleBusy(false)}
-          params={[gasLimit, wasm]}
-          tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
-          ref={this.button}
-        />
-      </Button.Group>
+      <TxButton
+        accountId={accountId}
+        icon='upload'
+        isDisabled={!isValid}
+        isPrimary
+        label={t('Upload')}
+        onClick={this.toggleBusy(true)}
+        onSuccess={this.onSuccess}
+        onFailed={this.toggleBusy(false)}
+        params={[gasLimit, wasm]}
+        tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
+        ref={this.button}
+      />
     );
   }
 
diff --git a/packages/app-contracts/src/Contracts/Add.tsx b/packages/app-contracts/src/Contracts/Add.tsx
index 3f5bf0b26e..110722c999 100644
--- a/packages/app-contracts/src/Contracts/Add.tsx
+++ b/packages/app-contracts/src/Contracts/Add.tsx
@@ -75,17 +75,14 @@ class Add extends ContractModal<Props, State> {
     const isValid = isNameValid && isAddressValid && isAbiValid;
 
     return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <Button
-          icon='save'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Save')}
-          onClick={this.onAdd}
-          ref={this.button}
-        />
-      </Button.Group>
+      <Button
+        icon='save'
+        isDisabled={!isValid}
+        isPrimary
+        label={t('Save')}
+        onClick={this.onAdd}
+        ref={this.button}
+      />
     );
   }
 
diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx
index 907a5e22f7..102787a9d8 100644
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/packages/app-contracts/src/Deploy.tsx
@@ -14,7 +14,7 @@ import { SubmittableResult } from '@polkadot/api';
 import { Abi } from '@polkadot/api-contract';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
-import { Button, Dropdown, InputBalance, MessageSignature, TxButton } from '@polkadot/react-components';
+import { Dropdown, InputBalance, MessageSignature, TxButton } from '@polkadot/react-components';
 import createValues from '@polkadot/react-params/values';
 
 import ContractModal, { ContractModalProps, ContractModalState } from './Modal';
@@ -224,28 +224,25 @@ class Deploy extends ContractModal<Props, State> {
     const isValid = isAbiValid && isHashValid && isEndowValid && isGasValid && !!accountId && isNameValid;
 
     return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <TxButton
-          accountId={accountId}
-          icon='cloud upload'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Deploy')}
-          onClick={this.toggleBusy(true)}
-          onFailed={this.toggleBusy(false)}
-          onSuccess={this.onSuccess}
-          params={this.constructCall}
-          tx={
-            api.tx.contracts
-              ? api.tx.contracts.instantiate
-                ? 'contracts.instantiate' // V2 (new)
-                : 'contracts.create' // V2 (old)
-              : 'contract.create' // V1
-          }
-          ref={this.button}
-        />
-      </Button.Group>
+      <TxButton
+        accountId={accountId}
+        icon='cloud upload'
+        isDisabled={!isValid}
+        isPrimary
+        label={t('Deploy')}
+        onClick={this.toggleBusy(true)}
+        onFailed={this.toggleBusy(false)}
+        onSuccess={this.onSuccess}
+        params={this.constructCall}
+        tx={
+          api.tx.contracts
+            ? api.tx.contracts.instantiate
+              ? 'contracts.instantiate' // V2 (new)
+              : 'contracts.create' // V2 (old)
+            : 'contract.create' // V1
+        }
+        ref={this.button}
+      />
     );
   }
 
diff --git a/packages/app-contracts/src/Modal.tsx b/packages/app-contracts/src/Modal.tsx
index ebd2555374..6277cb19ca 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, ButtonCancel, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
+import { Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
 
 import ABI from './ABI';
 
@@ -61,7 +61,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
         <Modal.Content>
           {this.renderContent()}
         </Modal.Content>
-        <Modal.Actions>
+        <Modal.Actions onCancel={this.onClose}>
           {this.renderButtons()}
         </Modal.Actions>
       </Modal>
@@ -157,15 +157,6 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     );
   }
 
-  protected renderCancelButton (): React.ReactNode {
-    return (
-      <>
-        <ButtonCancel onClick={this.onClose} />
-        <Button.Or />
-      </>
-    );
-  }
-
   protected reset = (): void => {
     this.setState(
       this.defaultState
diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx
index 0b23a41c3f..c208b20050 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, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
+import { Button, CodeRow, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -38,17 +38,13 @@ export default function RemoveABI ({ code, onClose, onRemove }: Props): React.Re
           <p>{t('This operation does not impact the associated on-chain code or any of its contracts.')}</p>
         </CodeRow>
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            isPrimary
-            onClick={_onRemove}
-            label={t('Remove')}
-            icon='trash'
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          isPrimary
+          onClick={_onRemove}
+          label={t('Remove')}
+          icon='trash'
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-council/src/Motions/Slashing.tsx b/packages/app-council/src/Motions/Slashing.tsx
index 2621716756..d5d5091951 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, ButtonCancel, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -114,21 +114,17 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
               )
             }
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <ButtonCancel onClick={toggleVisible} />
-              <Button.Or />
-              <TxButton
-                accountId={accountId}
-                icon='repeat'
-                isDisabled={!threshold || !isSelectedMember || !proposal}
-                isPrimary
-                label={t('Revert')}
-                onStart={toggleVisible}
-                params={[threshold, proposal]}
-                tx='council.propose'
-              />
-            </Button.Group>
+          <Modal.Actions onCancel={toggleVisible}>
+            <TxButton
+              accountId={accountId}
+              icon='repeat'
+              isDisabled={!threshold || !isSelectedMember || !proposal}
+              isPrimary
+              label={t('Revert')}
+              onStart={toggleVisible}
+              params={[threshold, proposal]}
+              tx='council.propose'
+            />
           </Modal.Actions>
         </Modal>
       )}
diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx
index 761a043ea2..4841e595e8 100644
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@@ -6,7 +6,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Input, InputAddress, Extrinsic, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, Extrinsic, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import { blake2AsHex } from '@polkadot/util-crypto';
@@ -65,27 +65,18 @@ function PreImage ({ className, onClose }: Props): React.ReactElement<Props> {
           value={isImminent}
         />
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            label={t('Cancel')}
-            icon='add'
-            onClick={onClose}
-          />
-          <Button.Or />
-          <TxButton
-            accountId={accountId}
-            isDisabled={!proposal || !accountId}
-            isPrimary
-            label={t('Submit preimage')}
-            icon='add'
-            onStart={onClose}
-            params={[hex]}
-            tx={isImminent ? 'democracy.noteImminentPreimage' : 'democracy.notePreimage'}
-            withSpinner={false}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={accountId}
+          isDisabled={!proposal || !accountId}
+          isPrimary
+          label={t('Submit preimage')}
+          icon='add'
+          onStart={onClose}
+          params={[hex]}
+          tx={isImminent ? 'democracy.noteImminentPreimage' : 'democracy.notePreimage'}
+          withSpinner={false}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
index 5d83394f06..7086afb345 100644
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { Available } from '@polkadot/react-query';
 import { isHex } from '@polkadot/util';
 
@@ -52,27 +52,18 @@ export default function Propose ({ className, onClose }: Props): React.ReactElem
           onChange={setBalance}
         />
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            label={t('Cancel')}
-            icon='add'
-            onClick={onClose}
-          />
-          <Button.Or />
-          <TxButton
-            accountId={accountId}
-            isDisabled={!balance || balance.lten(0) || !isHashValid || !accountId}
-            isPrimary
-            label={t('Submit proposal')}
-            icon='add'
-            onStart={onClose}
-            params={[hash, balance]}
-            tx='democracy.propose'
-            withSpinner={false}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={accountId}
+          isDisabled={!balance || balance.lten(0) || !isHashValid || !accountId}
+          isPrimary
+          label={t('Submit proposal')}
+          icon='add'
+          onStart={onClose}
+          params={[hash, balance]}
+          tx='democracy.propose'
+          withSpinner={false}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index 7df6dfe2d9..7e740707a3 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, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -46,21 +46,17 @@ export default function Seconding ({ depositors, proposalId }: Props): React.Rea
               withLabel
             />
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <ButtonCancel onClick={_toggleSeconding} />
-              <Button.Or />
-              <TxButton
-                accountId={accountId}
-                isDisabled={!accountId || isDepositor}
-                isPrimary
-                label={t('Second')}
-                icon='sign-in'
-                onStart={_toggleSeconding}
-                params={[proposalId]}
-                tx='democracy.second'
-              />
-            </Button.Group>
+          <Modal.Actions onCancel={_toggleSeconding}>
+            <TxButton
+              accountId={accountId}
+              isDisabled={!accountId || isDepositor}
+              isPrimary
+              label={t('Second')}
+              icon='sign-in'
+              onStart={_toggleSeconding}
+              params={[proposalId]}
+              tx='democracy.second'
+            />
           </Modal.Actions>
         </Modal>
       )}
diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx
index 926b28f0af..5eca03b4d4 100644
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, ButtonCancel, Input, InputNumber, Modal } from '@polkadot/react-components';
+import { Button, Input, InputNumber, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -48,18 +48,14 @@ export default function Create ({ onClose, onRegister }: Props): React.ReactElem
           value={name}
         />
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            isDisabled={!name}
-            isPrimary
-            onClick={onClose}
-            label={t('Register')}
-            icon='registered'
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          isDisabled={!name}
+          isPrimary
+          onClick={onClose}
+          label={t('Register')}
+          icon='registered'
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index d9e131ec28..53e86ba8ad 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, ButtonCancel, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Available, 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';
@@ -71,21 +71,17 @@ class BondExtra extends TxComponent<Props, State> {
         size='small'
       >
         {this.renderContent()}
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel onClick={onClose} />
-            <Button.Or />
-            <TxButton
-              accountId={stashId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Bond more')}
-              icon='sign-in'
-              onClick={onClose}
-              extrinsic={extrinsic}
-              ref={this.button}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <TxButton
+            accountId={stashId}
+            isDisabled={!canSubmit}
+            isPrimary
+            label={t('Bond more')}
+            icon='sign-in'
+            onClick={onClose}
+            extrinsic={extrinsic}
+            ref={this.button}
+          />
         </Modal.Actions>
       </Modal>
     );
diff --git a/packages/app-staking/src/Actions/Account/InjectKeys.tsx b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
index 3747724456..3d01ea75d7 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, ButtonCancel, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
+import { Button, 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';
@@ -109,17 +109,13 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
           <div><Icon name='warning sign' />{t('This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.')}</div>
         </article>
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            icon='sign-in'
-            isPrimary
-            label={t('Submit key')}
-            onClick={_onSubmit}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='sign-in'
+          isPrimary
+          label={t('Submit key')}
+          onClick={_onSubmit}
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index 2307e67b2b..0a09353112 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, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { AddressMulti, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../../constants';
@@ -86,21 +86,17 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
           value={selection}
         />
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <TxButton
-            accountId={controllerId}
-            isDisabled={!selection.length}
-            isPrimary
-            onClick={onClose}
-            params={[selection]}
-            label={t('Nominate')}
-            icon='hand paper outline'
-            tx='staking.nominate'
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={controllerId}
+          isDisabled={!selection.length}
+          isPrimary
+          onClick={onClose}
+          params={[selection]}
+          label={t('Nominate')}
+          icon='hand paper outline'
+          tx='staking.nominate'
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index 1355104765..a077ebb5c6 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, ButtonCancel, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
@@ -80,22 +80,18 @@ class SetControllerAccount extends TxComponent<Props, State> {
             onError={this.onControllerError}
           />
         </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel onClick={onClose} />
-            <Button.Or />
-            <TxButton
-              accountId={stashId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Set controller')}
-              icon='sign-in'
-              onClick={onClose}
-              params={[controllerId]}
-              tx='staking.setController'
-              ref={this.button}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <TxButton
+            accountId={stashId}
+            isDisabled={!canSubmit}
+            isPrimary
+            label={t('Set controller')}
+            icon='sign-in'
+            onClick={onClose}
+            params={[controllerId]}
+            tx='staking.setController'
+            ref={this.button}
+          />
         </Modal.Actions>
       </Modal>
     );
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index f7033b6f22..d830171851 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, ButtonCancel, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
@@ -42,22 +42,18 @@ class SetRewardDestination extends TxComponent<Props, State> {
         size='small'
       >
         {this.renderContent()}
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel onClick={onClose} />
-            <Button.Or />
-            <TxButton
-              accountId={controllerId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Set reward destination')}
-              icon='sign-in'
-              onClick={onClose}
-              params={[destination]}
-              tx={'staking.setPayee'}
-              ref={this.button}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <TxButton
+            accountId={controllerId}
+            isDisabled={!canSubmit}
+            isPrimary
+            label={t('Set reward destination')}
+            icon='sign-in'
+            onClick={onClose}
+            params={[destination]}
+            tx={'staking.setPayee'}
+            ref={this.button}
+          />
         </Modal.Actions>
       </Modal>
     );
diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
index 4abc1a1fde..23b7d92c50 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, ButtonCancel, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import ValidationSessionKey from './InputValidationSessionKey';
@@ -80,29 +80,25 @@ export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionI
           )
         }
       </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <TxButton
-            accountId={controllerId}
-            isDisabled={hasError}
-            isPrimary
-            label={t('Set Session Key')}
-            icon='sign-in'
-            onClick={onClose}
-            params={
-              isSubstrateV2
-                ? [keys, EMPTY_PROOF]
-                : [keys]
-            }
-            tx={
-              isSubstrateV2
-                ? 'session.setKeys'
-                : 'session.setKey'
-            }
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={controllerId}
+          isDisabled={hasError}
+          isPrimary
+          label={t('Set Session Key')}
+          icon='sign-in'
+          onClick={onClose}
+          params={
+            isSubstrateV2
+              ? [keys, EMPTY_PROOF]
+              : [keys]
+          }
+          tx={
+            isSubstrateV2
+              ? 'session.setKeys'
+              : 'session.setKey'
+          }
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 628f5ad59a..81a461ff71 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, ButtonCancel, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { AddressInfo, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
@@ -66,22 +66,18 @@ class Unbond extends TxComponent<Props, State> {
         size='small'
       >
         {this.renderContent()}
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel onClick={onClose} />
-            <Button.Or />
-            <TxButton
-              accountId={controllerId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Unbond')}
-              icon='sign-out'
-              onClick={onClose}
-              params={[maxUnbond]}
-              tx='staking.unbond'
-              ref={this.button}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <TxButton
+            accountId={controllerId}
+            isDisabled={!canSubmit}
+            isPrimary
+            label={t('Unbond')}
+            icon='sign-out'
+            onClick={onClose}
+            params={[maxUnbond]}
+            tx='staking.unbond'
+            ref={this.button}
+          />
         </Modal.Actions>
       </Modal>
     );
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index bcf51ee915..a2b088985e 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -2,18 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ValidatorPrefs, ValidatorPrefsTo145, ValidatorPrefsTo196 } from '@polkadot/types/interfaces';
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 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, ButtonCancel, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { createType } from '@polkadot/types';
+import { InputAddress, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 
-import InputValidationUnstakeThreshold from './InputValidationUnstakeThreshold';
 import translate from '../../translate';
 
 interface Props extends ApiProps, I18nProps {
@@ -21,15 +17,10 @@ interface Props extends ApiProps, I18nProps {
   isOpen: boolean;
   onClose: () => void;
   stashId: string;
-  validatorPrefs?: ValidatorPrefs | ValidatorPrefsTo145 | ValidatorPrefsTo196;
 }
 
 interface State {
-  hasCommission: boolean;
   commission: BN;
-  unstakeThreshold: BN;
-  unstakeThresholdError: string | null;
-  validatorPayment: BN;
 }
 
 const COMM_MUL = new BN(10000000);
@@ -37,11 +28,7 @@ const MAX_COMM = new BN(100);
 
 class Validate extends TxComponent<Props, State> {
   public state: State = {
-    hasCommission: !!(createType(registry, 'ValidatorPrefs').commission),
-    commission: new BN(0),
-    unstakeThreshold: new BN(3),
-    unstakeThresholdError: null,
-    validatorPayment: new BN(0)
+    commission: new BN(0)
   };
 
   // FIXME Borken with new InputBalance
@@ -94,40 +81,27 @@ class Validate extends TxComponent<Props, State> {
   }
 
   private renderButtons (): React.ReactNode {
-    const { controllerId, isSubstrateV2, onClose, t } = this.props;
-    const { commission, hasCommission, unstakeThreshold, unstakeThresholdError, validatorPayment } = this.state;
+    const { controllerId, onClose, t } = this.props;
+    const { commission } = this.state;
 
     return (
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <TxButton
-            accountId={controllerId}
-            isDisabled={!!unstakeThresholdError}
-            isPrimary
-            label={t('Validate')}
-            icon='check circle outline'
-            onClick={onClose}
-            params={[
-              isSubstrateV2
-                ? hasCommission
-                  ? { commission }
-                  : { validatorPayment }
-                : { unstakeThreshold, validatorPayment }
-            ]}
-            tx='staking.validate'
-            ref={this.button}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={controllerId}
+          isPrimary
+          label={t('Validate')}
+          icon='check circle outline'
+          onClick={onClose}
+          params={[{ commission }]}
+          tx='staking.validate'
+          ref={this.button}
+        />
       </Modal.Actions>
     );
   }
 
   private renderContent (): React.ReactNode {
-    const { controllerId, isSubstrateV2, stashId, t, validatorPrefs } = this.props;
-    const { hasCommission, unstakeThreshold, unstakeThresholdError } = this.state;
-    const defaultThreshold = validatorPrefs && (validatorPrefs as ValidatorPrefsTo145).unstakeThreshold && (validatorPrefs as ValidatorPrefsTo145).unstakeThreshold.toBn();
+    const { controllerId, stashId, t } = this.props;
 
     return (
       <Modal.Content className='ui--signer-Signer-Content'>
@@ -143,46 +117,15 @@ class Validate extends TxComponent<Props, State> {
           isDisabled
           label={t('controller account')}
         />
-        {!isSubstrateV2 && (
-          <>
-            <InputNumber
-              autoFocus
-              bitLength={32}
-              className='medium'
-              defaultValue={defaultThreshold}
-              help={t('The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)')}
-              isError={!!unstakeThresholdError}
-              label={t('automatic unstake threshold')}
-              onChange={this.onChangeThreshold}
-              onEnter={this.sendTx}
-            />
-            <InputValidationUnstakeThreshold
-              onError={this.onUnstakeThresholdError}
-              unstakeThreshold={unstakeThreshold}
-            />
-          </>
-        )}
-        {
-          hasCommission
-            ? <InputNumber
-              className='medium'
-              help={t('The percentage reward (0-100) that should be applied for the validator')}
-              isZeroable
-              label={t('reward commission percentage')}
-              maxValue={MAX_COMM}
-              onChange={this.onChangeCommission}
-              onEnter={this.sendTx}
-            />
-            : <InputBalance
-              className='medium'
-              defaultValue={(validatorPrefs as ValidatorPrefsTo196)?.validatorPayment?.toBn()}
-              help={t('Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators')}
-              isZeroable
-              label={t('validator payment')}
-              onChange={this.onChangePayment}
-              onEnter={this.sendTx}
-            />
-        }
+        <InputNumber
+          className='medium'
+          help={t('The percentage reward (0-100) that should be applied for the validator')}
+          isZeroable
+          label={t('reward commission percentage')}
+          maxValue={MAX_COMM}
+          onChange={this.onChangeCommission}
+          onEnter={this.sendTx}
+        />
       </Modal.Content>
     );
   }
@@ -190,18 +133,6 @@ class Validate extends TxComponent<Props, State> {
   private onChangeCommission = (commission?: BN): void => {
     commission && this.setState({ commission: commission.mul(COMM_MUL) });
   }
-
-  private onChangePayment = (validatorPayment?: BN): void => {
-    validatorPayment && this.setState({ validatorPayment });
-  }
-
-  private onChangeThreshold = (unstakeThreshold?: BN): void => {
-    unstakeThreshold && this.setState({ unstakeThreshold });
-  }
-
-  private onUnstakeThresholdError = (unstakeThresholdError: string | null): void => {
-    this.setState({ unstakeThresholdError });
-  }
 }
 
 export default withMulti(
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index a4c48072f3..bce5baa8dd 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, ButtonCancel, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../translate';
@@ -113,21 +113,17 @@ class NewStake extends TxComponent<Props, State> {
             value={destination}
           />
         </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel onClick={onClose} />
-            <Button.Or />
-            <TxButton
-              accountId={stashId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Bond')}
-              icon='sign-in'
-              onClick={onClose}
-              extrinsic={extrinsic}
-              ref={this.button}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <TxButton
+            accountId={stashId}
+            isDisabled={!canSubmit}
+            isPrimary
+            label={t('Bond')}
+            icon='sign-in'
+            onClick={onClose}
+            extrinsic={extrinsic}
+            ref={this.button}
+          />
         </Modal.Actions>
       </Modal>
     );
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 4175f99971..fb08d52725 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, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
 
 import translate from './translate';
 
@@ -57,18 +57,14 @@ class Unlock extends TxComponent<Props, State> {
     const { t } = this.props;
 
     return (
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={this.onCancel} />
-          <Button.Or />
-          <Button
-            isPrimary
-            onClick={this.onUnlock}
-            label={t('Unlock')}
-            icon='unlock'
-            ref={this.button}
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={this.onCancel}>
+        <Button
+          isPrimary
+          onClick={this.onUnlock}
+          label={t('Unlock')}
+          icon='unlock'
+          ref={this.button}
+        />
       </Modal.Actions>
     );
   }
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index ee20c3932c..3e745c42f4 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, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -60,21 +60,17 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
               onChange={setValue}
             />
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <ButtonCancel onClick={_togglePropose} />
-              <Button.Or />
-              <TxButton
-                accountId={accountId}
-                icon='add'
-                isDisabled={!accountId || !hasValue}
-                isPrimary
-                label={t('Submit proposal')}
-                onClick={_togglePropose}
-                params={[value, beneficiary]}
-                tx='treasury.proposeSpend'
-              />
-            </Button.Group>
+          <Modal.Actions onCancel={_togglePropose}>
+            <TxButton
+              accountId={accountId}
+              icon='add'
+              isDisabled={!accountId || !hasValue}
+              isPrimary
+              label={t('Submit proposal')}
+              onClick={_togglePropose}
+              params={[value, beneficiary]}
+              tx='treasury.proposeSpend'
+            />
           </Modal.Actions>
         </Modal>
       )}
diff --git a/packages/app-treasury/src/Overview/Submission.tsx b/packages/app-treasury/src/Overview/Submission.tsx
index fe8101074f..96797184c9 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, ButtonCancel, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -68,26 +68,22 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
               value={councilType}
             />
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <ButtonCancel onClick={toggleOpen} />
-              <Button.Or />
-              <TxButton
-                accountId={accountId}
-                icon='check'
-                isDisabled={!accountId || !councilThreshold}
-                isPrimary
-                label={t('Send to council')}
-                onClick={toggleOpen}
-                params={[
-                  councilThreshold,
-                  councilType === 'reject'
-                    ? api.tx.treasury.rejectProposal(id)
-                    : api.tx.treasury.approveProposal(id)
-                ]}
-                tx='council.propose'
-              />
-            </Button.Group>
+          <Modal.Actions onCancel={toggleOpen}>
+            <TxButton
+              accountId={accountId}
+              icon='check'
+              isDisabled={!accountId || !councilThreshold}
+              isPrimary
+              label={t('Send to council')}
+              onClick={toggleOpen}
+              params={[
+                councilThreshold,
+                councilType === 'reject'
+                  ? api.tx.treasury.rejectProposal(id)
+                  : api.tx.treasury.approveProposal(id)
+              ]}
+              tx='council.propose'
+            />
           </Modal.Actions>
         </Modal>
       )}
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index f1c766e941..ce22c42464 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -15,8 +15,6 @@ import { useTranslation } from './translate';
 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';
@@ -277,20 +275,16 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
               value={judgementEnum}
             />
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <ButtonCancel onClick={toggleJudgement} />
-              <Button.Or />
-              <TxButton
-                accountId={judgementAccountId}
-                icon='check'
-                isDisabled={registrarIndex === -1}
-                label={t('Judge')}
-                onClick={toggleJudgement}
-                params={[registrarIndex, accountId, judgementEnum]}
-                tx='identity.provideJudgement'
-              />
-            </Button.Group>
+          <Modal.Actions onCancel={toggleJudgement}>
+            <TxButton
+              accountId={judgementAccountId}
+              icon='check'
+              isDisabled={registrarIndex === -1}
+              label={t('Judge')}
+              onClick={toggleJudgement}
+              params={[registrarIndex, accountId, judgementEnum]}
+              tx='identity.provideJudgement'
+            />
           </Modal.Actions>
         </Modal>
       )}
diff --git a/packages/react-components/src/ButtonCancel.tsx b/packages/react-components/src/ButtonCancel.tsx
index bc1dd5c931..75be25d68b 100644
--- a/packages/react-components/src/ButtonCancel.tsx
+++ b/packages/react-components/src/ButtonCancel.tsx
@@ -10,12 +10,11 @@ import { useTranslation } from './translate';
 interface Props {
   className?: string;
   isDisabled?: boolean;
-  label?: React.ReactNode;
   onClick: () => void;
   tabIndex?: number;
 }
 
-export default function ButtonCancel ({ className, isDisabled, label, onClick, tabIndex }: Props): React.ReactElement<Props> {
+export default function ButtonCancel ({ className, isDisabled, onClick, tabIndex }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -24,7 +23,7 @@ export default function ButtonCancel ({ className, isDisabled, label, onClick, t
       icon='cancel'
       isDisabled={isDisabled}
       isNegative
-      label={label || t('Cancel')}
+      label={t('Cancel')}
       onClick={onClick}
       tabIndex={tabIndex}
     />
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index 653e772d03..ce2761993c 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, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, CodeRow, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -104,17 +104,13 @@ export default function Forget (props: Props): React.ReactElement<Props> {
       onClose={onClose}
     >
       <Modal.Content>{renderContent(props, t)}</Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          <Button.Or />
-          <Button
-            isPrimary
-            onClick={onForget}
-            label={t('Forget')}
-            icon='trash'
-          />
-        </Button.Group>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          isPrimary
+          onClick={onForget}
+          label={t('Forget')}
+          icon='trash'
+        />
       </Modal.Actions>
     </Modal>
   );
diff --git a/packages/react-components/src/Modal.tsx b/packages/react-components/src/Modal.tsx
index b605438460..93e2d427a4 100644
--- a/packages/react-components/src/Modal.tsx
+++ b/packages/react-components/src/Modal.tsx
@@ -7,16 +7,23 @@ import { BareProps } from './types';
 import React from 'react';
 import SUIModal from 'semantic-ui-react/dist/commonjs/modules/Modal/Modal';
 
+import Button from './Button';
+import ButtonCancel from './ButtonCancel';
 import { classes } from './util';
 
-interface Props extends BareProps {
+interface ModalProps extends BareProps {
   children: React.ReactNode;
   header?: React.ReactNode;
   open?: boolean;
   [index: string]: any;
 }
 
-function Modal (props: Props): React.ReactElement<Props> {
+interface ActionsProps extends BareProps {
+  children: React.ReactNode;
+  onCancel: () => void;
+}
+
+function Modal (props: ModalProps): React.ReactElement<ModalProps> {
   const { className, children, header, open = true } = props;
 
   return (
@@ -35,7 +42,19 @@ function Modal (props: Props): React.ReactElement<Props> {
   );
 }
 
-Modal.Actions = SUIModal.Actions;
+function Actions ({ className, children, onCancel }: ActionsProps): React.ReactElement<ActionsProps> {
+  return (
+    <SUIModal.Actions>
+      <Button.Group className={className}>
+        <ButtonCancel onClick={onCancel} />
+        <Button.Or />
+        {children}
+      </Button.Group>
+    </SUIModal.Actions>
+  );
+}
+
+Modal.Actions = Actions;
 Modal.Content = SUIModal.Content;
 Modal.Header = SUIModal.Header;
 Modal.Description = SUIModal.Description;
diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx
index e7840002d0..63902819bc 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, ButtonCancel, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 
 export interface TxModalProps extends I18nProps {
   onSubmit?: () => void;
@@ -46,7 +46,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
             {this.renderInputAccount()}
             {this.renderContent()}
           </Modal.Content>
-          <Modal.Actions>
+          <Modal.Actions onCancel={this.hideModal}>
             {this.renderButtons()}
           </Modal.Actions>
         </Modal>
@@ -116,12 +116,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
   protected renderTrigger?: () => React.ReactNode = (): React.ReactNode => null;
 
   protected renderButtons: () => React.ReactNode = (): React.ReactNode => {
-    return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        {this.renderTxButton()}
-      </Button.Group>
-    );
+    return this.renderTxButton();
   }
 
   protected renderInputAccount (): React.ReactNode {
@@ -165,15 +160,6 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
     );
   }
 
-  protected renderCancelButton (): React.ReactNode {
-    return (
-      <>
-        <ButtonCancel onClick={this.hideModal} />
-        <Button.Or />
-      </>
-    );
-  }
-
   protected reset = (): void => {
     this.setState(
       this.defaultState
diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx
index 7d770c65ac..8f9287bb63 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, ButtonCancel, InputAddress, Modal } from '@polkadot/react-components';
+import { Button, InputAddress, Modal } from '@polkadot/react-components';
 // import { useTx } from '@polkadot/react-hooks';
 import { isUndefined } from '@polkadot/util';
 
@@ -28,7 +28,6 @@ function TxModal<P extends Props> ({
   inputAddressLabel = t('using my account'),
   inputAddressHelp = t('Select the account to use for this action.'),
   inputAddressProps = {},
-  cancelButtonLabel,
   submitButtonIcon = 'sign-in',
   submitButtonLabel = t('Submit'),
   submitButtonProps = {},
@@ -113,22 +112,15 @@ function TxModal<P extends Props> ({
           />
           {children}
         </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <ButtonCancel
-              label={cancelButtonLabel}
-              onClick={onClose}
-            />
-            <Button.Or />
-            <Button
-              isDisabled={isDisabled || isSending || !accountId || !isSubmittable}
-              isPrimary
-              label={submitButtonLabel}
-              icon={submitButtonIcon}
-              onClick={onSend}
-              {...submitButtonProps}
-            />
-          </Button.Group>
+        <Modal.Actions onCancel={onClose}>
+          <Button
+            isDisabled={isDisabled || isSending || !accountId || !isSubmittable}
+            isPrimary
+            label={submitButtonLabel}
+            icon={submitButtonIcon}
+            onClick={onSend}
+            {...submitButtonProps}
+          />
         </Modal.Actions>
       </Modal>
     </>
diff --git a/packages/react-components/src/VoteActions.tsx b/packages/react-components/src/VoteActions.tsx
index 0ce758ea3f..bd48548218 100644
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@@ -4,8 +4,6 @@
 
 import React from 'react';
 
-import Button from './Button';
-import ButtonCancel from './ButtonCancel';
 import Modal from './Modal';
 import TxButton from './TxButton';
 import { useTranslation } from './translate';
@@ -23,21 +21,20 @@ export default function VoteActions ({ accountId, className, isDisabled, onClick
   const { t } = useTranslation();
 
   return (
-    <Modal.Actions>
-      <Button.Group className={className}>
-        <ButtonCancel onClick={onClick} />
-        <Button.Or />
-        <TxButton
-          accountId={accountId}
-          icon='check'
-          isDisabled={!accountId || isDisabled}
-          isPrimary
-          label={t('Vote')}
-          onClick={onClick}
-          params={params}
-          tx={tx}
-        />
-      </Button.Group>
+    <Modal.Actions
+      className={className}
+      onCancel={onClick}
+    >
+      <TxButton
+        accountId={accountId}
+        icon='check'
+        isDisabled={!accountId || isDisabled}
+        isPrimary
+        label={t('Vote')}
+        onClick={onClick}
+        params={params}
+        tx={tx}
+      />
     </Modal.Actions>
   );
 }
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index e5f4ba968b..c84e25894b 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, ButtonCancel, InputBalance, Modal, Toggle, ErrorBoundary } from '@polkadot/react-components';
+import { Button, 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';
@@ -183,53 +183,49 @@ class Signer extends React.PureComponent<Props, State> {
     const { isExternal, isHardware, hardwareType } = extractExternal(currentItem.accountId);
 
     return (
-      <Modal.Actions>
-        <Button.Group>
-          <ButtonCancel
-            onClick={
-              isQrVisible
-                ? this.onCancelQr
-                : this.onCancel
-            }
-            tabIndex={3}
-          />
-          {!isRenderError && (!isQrVisible || !isQrScanning) && (
-            <>
-              <Button.Or />
-              <Button
-                className='ui--signer-Signer-Submit'
-                isDisabled={!isSendable}
-                isPrimary
-                onClick={
-                  isQrVisible
-                    ? this.activateQrScanning
-                    : this.onSend
-                }
-                tabIndex={2}
-                label={
-                  isQrVisible
-                    ? t('Scan Signature Qr')
-                    : currentItem.isUnsigned
-                      ? t('Submit (no signature)')
-                      : isHardware
-                        ? t('Sign via {{hardwareType}}', { replace: { hardwareType: hardwareType || 'hardware' } })
-                        : isExternal
-                          ? t('Sign via Qr')
-                          : t('Sign and Submit')
-                }
-                icon={
-                  isQrVisible
-                    ? 'qrcode'
-                    : currentItem.isUnsigned
-                      ? 'sign-in'
+      <Modal.Actions
+        onCancel={
+          isQrVisible
+            ? this.onCancelQr
+            : this.onCancel
+        }
+      >
+        {!isRenderError && (!isQrVisible || !isQrScanning) && (
+          <>
+            <Button.Or />
+            <Button
+              className='ui--signer-Signer-Submit'
+              isDisabled={!isSendable}
+              isPrimary
+              onClick={
+                isQrVisible
+                  ? this.activateQrScanning
+                  : this.onSend
+              }
+              tabIndex={2}
+              label={
+                isQrVisible
+                  ? t('Scan Signature Qr')
+                  : currentItem.isUnsigned
+                    ? t('Submit (no signature)')
+                    : isHardware
+                      ? t('Sign via {{hardwareType}}', { replace: { hardwareType: hardwareType || 'hardware' } })
                       : isExternal
-                        ? 'qrcode'
-                        : 'sign-in'
-                }
-              />
-            </>
-          )}
-        </Button.Group>
+                        ? t('Sign via Qr')
+                        : t('Sign and Submit')
+              }
+              icon={
+                isQrVisible
+                  ? 'qrcode'
+                  : currentItem.isUnsigned
+                    ? 'sign-in'
+                    : isExternal
+                      ? 'qrcode'
+                      : 'sign-in'
+              }
+            />
+          </>
+        )}
       </Modal.Actions>
     );
   }