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
2020-01-21 17:34:34 +01:00 · 2020-01-21 17:34:34 +01:00 · 1d5a756b69
commit 1d5a756b69
parent a96adfcecf
41 changed files with 506 additions and 735 deletions
--- 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>
  );
--- 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>
    );
  }
--- 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>
  );
--- 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>
  );
--- 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>
  );
--- 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>
  );
--- 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>
    );
--- 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>
  );
--- 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>
  );
--- 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>
  );
--- 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}
+      />
    );
  }

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

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

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

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