neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use ButtonCancel for all Cancel-only buttons (#2164)

Browse Source 
* Use ButtonCancel for all Cancel-only buttons

* Small cleanups
This commit is contained in:
Jaco Greeff 2020-01-21 15:47:44 +01:00 committed by GitHub
parent 2739164f0c
commit 8e971ef7eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 96 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/app-accounts/src/modals/Backup.tsx
View File

@ -6,7 +6,7 @@ import { BareProps } from '@polkadot/react-components/types';
import FileSaver from 'file-saver';
import React, { useState, useMemo } from 'react';
import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Modal, Password } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
import { useTranslation } from '../translate';
@ -16,12 +16,6 @@ interface Props extends BareProps {
address: string;
}
interface ButtonsProps {
doBackup: () => void;
isPassValid: boolean;
onClose: () => void;
}
interface ContentProps {
address: string;
doBackup: () => void;
@ -77,11 +71,18 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
password={password}
onChangePass={_onChangePass}
/>
<Buttons
doBackup={_doBackup}
isPassValid={isPassValid}
onClose={onClose}
/>
<Modal.Actions>
<Button.Group>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='download'
isDisabled={!isPassValid}
label={t('Download')}
onClick={_doBackup}
/>
</Button.Group>
</Modal.Actions>
</Modal>
);
}
@ -113,27 +114,3 @@ function Content ({ address, doBackup, isPassTouched, isPassValid, onChangePass,
</Modal.Content>
);
}
function Buttons ({ doBackup, isPassValid, onClose }: ButtonsProps): React.ReactElement<ButtonsProps> {
const { t } = useTranslation();
return (
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<Button.Or />
<Button
icon='download'
isDisabled={!isPassValid}
label={t('Download')}
onClick={doBackup}
/>
</Button.Group>
</Modal.Actions>
);
}

9
packages/app-accounts/src/modals/ChangePass.tsx
View File

@ -5,7 +5,7 @@
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
import { ActionStatus } from '@polkadot/react-components/Status/types';
import keyring from '@polkadot/ui-keyring';
@ -52,12 +52,7 @@ class ChangePass extends TxComponent<Props, State> {
return (
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='sign-in'

9
packages/app-accounts/src/modals/Create.tsx
View File

@ -11,7 +11,7 @@ import FileSaver from 'file-saver';
import React, { useState } from 'react';
import styled from 'styled-components';
import { DEV_PHRASE } from '@polkadot/keyring/defaults';
import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import uiSettings from '@polkadot/ui-settings';
@ -296,12 +296,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='plus'

9
packages/app-accounts/src/modals/CreateConfirmation.tsx
View File

@ -3,7 +3,7 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import React from 'react';
import { AddressRow, Button, Modal } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Modal } from '@polkadot/react-components';
import { useTranslation } from '../translate';
@ -32,12 +32,7 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='plus'

9
packages/app-accounts/src/modals/Derive.tsx
View File

@ -7,7 +7,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
import { KeypairType } from '@polkadot/util-crypto/types';
import React, { useContext, useEffect, useState } from 'react';
import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
import { useDebounce } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import { keyExtractPath } from '@polkadot/util-crypto';
@ -198,12 +198,7 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
{isLocked
? (

9
packages/app-accounts/src/modals/Identity.tsx
View File

@ -6,7 +6,7 @@ import { Registration } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { Button, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { getAddressMeta } from '@polkadot/react-components/util';
import { useApi, useCall } from '@polkadot/react-hooks';
import { Data, Option } from '@polkadot/types';
@ -210,12 +210,7 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={address}

9
packages/app-accounts/src/modals/Import.tsx
View File

@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
import { ModalProps } from '../types';
import React from 'react';
import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
import { isHex, isObject, u8aToString } from '@polkadot/util';
import keyring from '@polkadot/ui-keyring';
@ -42,12 +42,7 @@ class Import extends TxComponent<Props, State> {
{this.renderInput()}
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='sync'

9
packages/app-accounts/src/modals/Transfer.tsx
View File

@ -7,7 +7,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { Available } from '@polkadot/react-query';
// import Checks from '@polkadot/react-signer/Checks';
@ -126,12 +126,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={senderId}

9
packages/app-address-book/src/modals/Create.tsx
View File

@ -7,7 +7,7 @@ import { ModalProps as Props } from '../types';
import React, { useState } from 'react';
import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
import { useTranslation } from '../translate';
@ -106,12 +106,7 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
onClick={onClose}
label={t('Cancel')}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='save'

9
packages/app-contracts/src/Contracts/Call.tsx
View File

@ -8,7 +8,7 @@ import { BareProps, StringOrNull } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { PromiseContract as ApiContract } from '@polkadot/api-contract';
import { useApi } from '@polkadot/react-hooks';
import { createValue } from '@polkadot/react-params/values';
@ -196,12 +196,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
/>
)}
<Button.Group>
<Button
icon='cancel'
isNegative
onClick={onClose}
label={t('Cancel')}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
{useRpc
? (

11
packages/app-contracts/src/Modal.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React from 'react';
import { Abi } from '@polkadot/api-contract';
import { Button, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
import { Button, ButtonCancel, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
import ABI from './ABI';
@ -158,16 +158,9 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
}
protected renderCancelButton (): React.ReactNode {
const { t } = this.props;
return (
<>
<Button
icon='cancel'
isNegative
onClick={this.onClose}
label={t('Cancel')}
/>
<ButtonCancel onClick={this.onClose} />
<Button.Or />
</>
);

9
packages/app-contracts/src/RemoveABI.tsx
View File

@ -5,7 +5,7 @@
import { CodeStored } from '@polkadot/app-contracts/types';
import React from 'react';
import { Button, CodeRow, Modal } from '@polkadot/react-components';
import { Button, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
import { useTranslation } from './translate';
@ -40,12 +40,7 @@ export default function RemoveABI ({ code, onClose, onRemove }: Props): React.Re
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
isPrimary

9
packages/app-council/src/Motions/Slashing.tsx
View File

@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces';
import { CallFunction } from '@polkadot/types/types';
import React, { useEffect, useState } from 'react';
import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
import { useTranslation } from '../translate';
@ -116,12 +116,7 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
icon='cancel'
label={t('Cancel')}
onClick={toggleVisible}
/>
<ButtonCancel onClick={toggleVisible} />
<Button.Or />
<TxButton
accountId={accountId}

9
packages/app-democracy/src/Overview/Seconding.tsx
View File

@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useTranslation } from '../translate';
@ -48,12 +48,7 @@ export default function Seconding ({ depositors, proposalId }: Props): React.Rea
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={_toggleSeconding}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={_toggleSeconding} />
<Button.Or />
<TxButton
accountId={accountId}

22
packages/app-generic-asset/src/modals/Create.tsx
View File

@ -2,22 +2,23 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState } from 'react';
import { InputNumber, Button, Input, Modal } from '@polkadot/react-components';
import { Button, ButtonCancel, Input, InputNumber, Modal } from '@polkadot/react-components';
import translate from '../translate';
import { useTranslation } from '../translate';
export interface ModalProps {
onClose: () => void;
onRegister: (id: BN, name: string) => void;
}
interface Props extends ModalProps, I18nProps {}
interface Props extends ModalProps {
className?: string;
}
function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
export default function Create ({ onClose, onRegister }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const [assetId, setAssetId] = useState(new BN(0));
const [name, setName] = useState('new asset');
@ -49,12 +50,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
isDisabled={!name}
@ -68,5 +64,3 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
</Modal>
);
}
export default translate(Create);

11
packages/app-settings/src/General.tsx
View File

@ -7,7 +7,7 @@ import { Option, SetOption } from './types';
import React, { useEffect, useState, useMemo } from 'react';
import { isLedgerCapable } from '@polkadot/react-api';
import { Button, Dropdown } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown } from '@polkadot/react-components';
import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
import translate from './translate';
@ -16,7 +16,7 @@ import SelectUrl from './SelectUrl';
interface Props extends I18nProps{
isModalContent?: boolean;
onClose?: () => void;
onClose: () => void;
}
const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
@ -132,12 +132,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
<Button.Group>
{isModalContent && (
<>
<Button
isNegative
label={t('Cancel')}
icon='cancel'
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
</>
)}

9
packages/app-staking/src/Actions/Account/BondExtra.tsx
View File

@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../../types';
import BN from 'bn.js';
import React from 'react';
import { Available, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { Available, Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { calcTxLength } from '@polkadot/react-signer/Checks';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
@ -73,12 +73,7 @@ class BondExtra extends TxComponent<Props, State> {
{this.renderContent()}
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={stashId}

9
packages/app-staking/src/Actions/Account/InjectKeys.tsx
View File

@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import { KeypairType } from '@polkadot/util-crypto/types';
import React, { useContext, useEffect, useState } from 'react';
import { Button, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
import { assert, u8aToHex } from '@polkadot/util';
import { keyExtractSuri, mnemonicValidate } from '@polkadot/util-crypto';
@ -111,12 +111,7 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
icon='sign-in'

9
packages/app-staking/src/Actions/Account/Nominate.tsx
View File

@ -6,7 +6,7 @@ import { DerivedStakingOverview } from '@polkadot/api-derive/types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { AddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { AddressMulti, Button, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useFavorites } from '@polkadot/react-hooks';
import { STORE_FAVS_BASE } from '../../constants';
@ -88,12 +88,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={controllerId}

9
packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
View File

@ -6,7 +6,7 @@ import { ApiProps } from '@polkadot/react-api/types';
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { Button, ButtonCancel, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
import translate from '../../translate';
@ -82,12 +82,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={stashId}

9
packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
View File

@ -5,7 +5,7 @@
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { Button, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withMulti } from '@polkadot/react-api/hoc';
import translate from '../../translate';
@ -44,12 +44,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
{this.renderContent()}
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={controllerId}

9
packages/app-staking/src/Actions/Account/SetSessionKey.tsx
View File

@ -3,7 +3,7 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import React, { useState } from 'react';
import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import ValidationSessionKey from './InputValidationSessionKey';
@ -82,12 +82,7 @@ export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionI
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={controllerId}

9
packages/app-staking/src/Actions/Account/Unbond.tsx
View File

@ -11,7 +11,7 @@ import BN from 'bn.js';
import React from 'react';
import styled from 'styled-components';
import { Option } from '@polkadot/types';
import { AddressInfo, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { AddressInfo, Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
import translate from '../../translate';
@ -68,12 +68,7 @@ class Unbond extends TxComponent<Props, State> {
{this.renderContent()}
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={controllerId}

9
packages/app-staking/src/Actions/Account/Validate.tsx
View File

@ -10,7 +10,7 @@ import BN from 'bn.js';
import React from 'react';
import { registry } from '@polkadot/react-api';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { Button, ButtonCancel, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { createType } from '@polkadot/types';
import InputValidationUnstakeThreshold from './InputValidationUnstakeThreshold';
@ -100,12 +100,7 @@ class Validate extends TxComponent<Props, State> {
return (
<Modal.Actions>
<Button.Group>
<Button
isNegative
label={t('Cancel')}
icon='cancel'
onClick={onClose}
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={controllerId}

9
packages/app-staking/src/Actions/NewStake.tsx
View File

@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../types';
import BN from 'bn.js';
import React from 'react';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import { Button, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
import translate from '../translate';
@ -115,12 +115,7 @@ class NewStake extends TxComponent<Props, State> {
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<TxButton
accountId={stashId}

9
packages/app-toolbox/src/Unlock.tsx
View File

@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import { KeyringPair } from '@polkadot/keyring/types';
import React from 'react';
import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
import translate from './translate';
@ -59,12 +59,7 @@ class Unlock extends TxComponent<Props, State> {
return (
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={this.onCancel}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={this.onCancel} />
<Button.Or />
<Button
isPrimary

9
packages/app-treasury/src/Overview/Propose.tsx
View File

@ -4,7 +4,7 @@
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useTranslation } from '../translate';
@ -62,12 +62,7 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={_togglePropose}
/>
<ButtonCancel onClick={_togglePropose} />
<Button.Or />
<TxButton
accountId={accountId}

9
packages/app-treasury/src/Overview/Submission.tsx
View File

@ -6,7 +6,7 @@ import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
import { ProposalIndex } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { Button, ButtonCancel, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
import { useTranslation } from '../translate';
@ -70,12 +70,7 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={toggleOpen}
/>
<ButtonCancel onClick={toggleOpen} />
<Button.Or />
<TxButton
accountId={accountId}

8
packages/react-components/src/AccountName.tsx
View File

@ -16,6 +16,7 @@ import { getAddressName } from './util';
import AddressMini from './AddressMini';
import Badge from './Badge';
import Button from './Button';
import ButtonCancel from './ButtonCancel';
import Dropdown from './Dropdown';
import Icon from './Icon';
import Input from './Input';
@ -278,12 +279,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={toggleJudgement}
/>
<ButtonCancel onClick={toggleJudgement} />
<Button.Or />
<TxButton
accountId={judgementAccountId}

9
packages/react-components/src/ButtonCancel.tsx
View File

@ -9,19 +9,24 @@ import { useTranslation } from './translate';
interface Props {
className?: string;
isDisabled?: boolean;
label?: React.ReactNode;
onClick: () => void;
tabIndex?: number;
}
export default function ButtonCancel ({ className, onClick }: Props): React.ReactElement<Props> {
export default function ButtonCancel ({ className, isDisabled, label, onClick, tabIndex }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
return (
<Button
className={className}
icon='cancel'
isDisabled={isDisabled}
isNegative
label={t('Cancel')}
label={label || t('Cancel')}
onClick={onClick}
tabIndex={tabIndex}
/>
);
}

9
packages/react-components/src/Forget.tsx
View File

@ -5,7 +5,7 @@
import { CodeStored } from '@polkadot/app-contracts/types';
import React from 'react';
import { AddressRow, Button, CodeRow, Modal } from '@polkadot/react-components';
import { AddressRow, Button, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
import { useTranslation } from './translate';
@ -106,12 +106,7 @@ export default function Forget (props: Props): React.ReactElement<Props> {
<Modal.Content>{renderContent(props, t)}</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={onClose} />
<Button.Or />
<Button
isPrimary

11
packages/react-components/src/TxModal.tsx
View File

@ -5,7 +5,7 @@
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { Button, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { Button, ButtonCancel, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
export interface TxModalProps extends I18nProps {
onSubmit?: () => void;
@ -166,16 +166,9 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
}
protected renderCancelButton (): React.ReactNode {
const { t } = this.props;
return (
<>
<Button
isNegative
onClick={this.hideModal}
label={t('Cancel')}
icon='cancel'
/>
<ButtonCancel onClick={this.hideModal} />
<Button.Or />
</>
);

12
packages/react-components/src/TxModalNew.tsx
View File

@ -5,7 +5,7 @@
import { TxModalProps as Props } from './types';
import React, { useState, useEffect } from 'react';
import { Button, InputAddress, Modal } from '@polkadot/react-components';
import { Button, ButtonCancel, InputAddress, Modal } from '@polkadot/react-components';
// import { useTx } from '@polkadot/react-hooks';
import { isUndefined } from '@polkadot/util';
@ -28,7 +28,7 @@ function TxModal<P extends Props> ({
inputAddressLabel = t('using my account'),
inputAddressHelp = t('Select the account to use for this action.'),
inputAddressProps = {},
cancelButtonLabel = t('Cancel'),
cancelButtonLabel,
submitButtonIcon = 'sign-in',
submitButtonLabel = t('Submit'),
submitButtonProps = {},
@ -96,7 +96,7 @@ function TxModal<P extends Props> ({
return (
<>
{Trigger ? <Trigger onOpen={onOpen} /> : null}
{Trigger && <Trigger onOpen={onOpen} />}
<Modal {...allModalProps}>
<Modal.Content>
{preContent}
@ -115,11 +115,9 @@ function TxModal<P extends Props> ({
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button
isNegative
onClick={onClose}
<ButtonCancel
label={cancelButtonLabel}
icon='cancel'
onClick={onClose}
/>
<Button.Or />
<Button

8
packages/react-components/src/VoteActions.tsx
View File

@ -5,6 +5,7 @@
import React from 'react';
import Button from './Button';
import ButtonCancel from './ButtonCancel';
import Modal from './Modal';
import TxButton from './TxButton';
import { useTranslation } from './translate';
@ -24,12 +25,7 @@ export default function VoteActions ({ accountId, className, isDisabled, onClick
return (
<Modal.Actions>
<Button.Group className={className}>
<Button
icon='cancel'
isNegative
label={t('Cancel')}
onClick={onClick}
/>
<ButtonCancel onClick={onClick} />
<Button.Or />
<TxButton
accountId={accountId}

7
packages/react-signer/src/Modal.tsx
View File

@ -17,7 +17,7 @@ import React from 'react';
import { SubmittableResult } from '@polkadot/api';
import { web3FromSource } from '@polkadot/extension-dapp';
import { createType } from '@polkadot/types';
import { Button, InputBalance, Modal, Toggle, ErrorBoundary } from '@polkadot/react-components';
import { Button, ButtonCancel, InputBalance, Modal, Toggle, ErrorBoundary } from '@polkadot/react-components';
import { registry } from '@polkadot/react-api';
import { withApi, withMulti, withObservable } from '@polkadot/react-api/hoc';
import keyring from '@polkadot/ui-keyring';
@ -185,16 +185,13 @@ class Signer extends React.PureComponent<Props, State> {
return (
<Modal.Actions>
<Button.Group>
<Button
isNegative
<ButtonCancel
onClick={
isQrVisible
? this.onCancelQr
: this.onCancel
}
tabIndex={3}
label={t('Cancel')}
icon='cancel'
/>
{!isRenderError && (!isQrVisible || !isQrScanning) && (
<>