diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx index 9a10697654..47cf850ba6 100644 --- a/packages/page-accounts/src/modals/Create.tsx +++ b/packages/page-accounts/src/modals/Create.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components'; import { DEV_PHRASE } from '@polkadot/keyring/defaults'; import { getEnvironment } from '@polkadot/react-api/util'; -import { AddressRow, Button, Checkbox, CopyButton, Dropdown, Expander, Input, InputAddress, Modal, TextArea } from '@polkadot/react-components'; +import { AddressRow, Button, Checkbox, CopyButton, Dropdown, Expander, Input, InputAddress, MarkError, MarkWarning, Modal, TextArea } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { keyring } from '@polkadot/ui-keyring'; import { settings } from '@polkadot/ui-settings'; @@ -374,10 +374,10 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ value={derivePath} /> {deriveValidation?.error && ( -
{errorIndex[deriveValidation.error] || deriveValidation.error}
+ )} {deriveValidation?.warning && ( -
{errorIndex[deriveValidation.warning]}
+ )} diff --git a/packages/page-accounts/src/modals/Derive.tsx b/packages/page-accounts/src/modals/Derive.tsx index c7cce325fd..6821f6609b 100644 --- a/packages/page-accounts/src/modals/Derive.tsx +++ b/packages/page-accounts/src/modals/Derive.tsx @@ -7,7 +7,7 @@ import type { KeypairType } from '@polkadot/util-crypto/types'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components'; +import { AddressRow, Button, Input, InputAddress, MarkError, Modal, Password, StatusContext } from '@polkadot/react-components'; import { useApi, useDebounce, useToggle } from '@polkadot/react-hooks'; import { keyring } from '@polkadot/ui-keyring'; import { keyExtractPath } from '@polkadot/util-crypto'; @@ -228,7 +228,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement { placeholder={t('//hard/soft')} /> {deriveError && ( -
{deriveError}
+ )} -1; @@ -15,9 +17,7 @@ function ExternalWarning (): React.ReactElement | null { } return ( -
-

{t('Consider storing your account in a signer such as a browser extension, hardware device, QR-capable phone wallet (non-connected) or desktop application for optimal account security.')} {t('Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.')}

-
+ {t('Consider storing your account in a signer such as a browser extension, hardware device, QR-capable phone wallet (non-connected) or desktop application for optimal account security.')} {t('Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.')}} /> ); } diff --git a/packages/page-accounts/src/modals/Import.tsx b/packages/page-accounts/src/modals/Import.tsx index 3c3520b90f..f26a309a73 100644 --- a/packages/page-accounts/src/modals/Import.tsx +++ b/packages/page-accounts/src/modals/Import.tsx @@ -7,7 +7,7 @@ import type { ModalProps } from '../types'; import React, { useCallback, useMemo, useState } from 'react'; -import { AddressRow, Button, InputAddress, InputFile, Modal, Password } from '@polkadot/react-components'; +import { AddressRow, Button, InputAddress, InputFile, MarkWarning, Modal, Password } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { keyring } from '@polkadot/ui-keyring'; import { u8aToString } from '@polkadot/util'; @@ -121,6 +121,9 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac onChange={_onChangeFile} withLabel /> + {differentGenesis && ( + ('The network from which this account was originally generated is different than the network you are currently connected to. Once imported ensure you toggle the "allow on any network" option for the account to keep it visible on the current network.')} /> + )}

{t('Supply a backed-up JSON file, encrypted with your account-specific password.')}

@@ -143,11 +146,6 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac

{t('The password previously used to encrypt this account.')}

 - { differentGenesis && -
-

{t('The network from which this account was originally generated is different than the network you are currently connected to. Once imported ensure you toggle the "allow on any network" option for the account to keep it visible on the current network.')}

-
- } diff --git a/packages/page-accounts/src/modals/InputValidateAmount.tsx b/packages/page-accounts/src/modals/InputValidateAmount.tsx index eb9f8dfe2a..73619f85f1 100644 --- a/packages/page-accounts/src/modals/InputValidateAmount.tsx +++ b/packages/page-accounts/src/modals/InputValidateAmount.tsx @@ -7,6 +7,7 @@ import type { AmountValidateState } from '../Accounts/types'; import BN from 'bn.js'; import React, { useEffect, useState } from 'react'; +import { MarkError, MarkWarning } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { BN_ZERO } from '@polkadot/util'; @@ -43,12 +44,10 @@ function ValidateAmount ({ amount, delegatingAccount, onError }: Props): React.R } }, [api, onError, amount, t, delegatingAccountBalance]); - if (error || warning) { - return ( -
-
{error || warning}
-
- ); + if (error) { + return ; + } else if (warning) { + return ; } return null; diff --git a/packages/page-accounts/src/modals/Ledger.tsx b/packages/page-accounts/src/modals/Ledger.tsx index e1c209c205..bf6948e581 100644 --- a/packages/page-accounts/src/modals/Ledger.tsx +++ b/packages/page-accounts/src/modals/Ledger.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useRef, useState } from 'react'; import { getLedger } from '@polkadot/react-api'; -import { Button, Dropdown, Modal } from '@polkadot/react-components'; +import { Button, Dropdown, MarkError, Modal } from '@polkadot/react-components'; import { keyring } from '@polkadot/ui-keyring'; import { useTranslation } from '../translate'; @@ -98,7 +98,7 @@ function Ledger ({ className, onClose }: Props): React.ReactElement { value={addIndex} /> {error && ( -
{error.message}
+ )} diff --git a/packages/page-accounts/src/modals/ProxyOverview.tsx b/packages/page-accounts/src/modals/ProxyOverview.tsx index ba0c31f481..ee3d78b58e 100644 --- a/packages/page-accounts/src/modals/ProxyOverview.tsx +++ b/packages/page-accounts/src/modals/ProxyOverview.tsx @@ -9,7 +9,7 @@ import BN from 'bn.js'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; -import { BatchWarning, Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components'; +import { BatchWarning, Button, Dropdown, InputAddress, MarkError, Modal, TxButton } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { BN_ZERO, isFunction } from '@polkadot/util'; @@ -136,9 +136,7 @@ function NewProxy ({ index, onChangeAccount, onChangeType, onRemove, proxiedAcco value={accountId} /> {accountId.eq(proxiedAccount) && ( -
- {t('You should not setup proxies to act as a self-proxy.')} -
+ ('You should not setup proxies to act as a self-proxy.')} /> )} )} {!isProtected && accountInfo && accountInfo.refcount && !accountInfo.refcount.isZero() && ( -
{t('There is an existing reference count on the sender account. As such the account cannot be reaped from the state.')}
+ ('There is an existing reference count on the sender account. As such the account cannot be reaped from the state.')} /> )} diff --git a/packages/page-bounties/src/BountyCreate.tsx b/packages/page-bounties/src/BountyCreate.tsx index 33741af5d3..d2b0b710a2 100644 --- a/packages/page-bounties/src/BountyCreate.tsx +++ b/packages/page-bounties/src/BountyCreate.tsx @@ -7,7 +7,7 @@ import BN from 'bn.js'; import React, { useCallback, useEffect, useState } from 'react'; import { DeriveBalancesAll } from '@polkadot/api-derive/types'; -import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components'; +import { Button, Input, InputAddress, InputBalance, MarkError, Modal, TxButton } from '@polkadot/react-components'; import { useApi, useCall, useToggle } from '@polkadot/react-hooks'; import { BN_ZERO } from '@polkadot/util'; @@ -86,9 +86,7 @@ function BountyCreate () { value={title} /> {!isTitleValid && (title !== TITLE_DEFAULT_VALUE) && ( -
- {t('Title too long')} -
+ ('Title too long')} /> )} @@ -106,9 +104,7 @@ function BountyCreate () { value={value} /> {!isValueValid && !value?.eq(BOUNTY_DEFAULT_VALUE) && ( -
- {t('Allocation value is smaller than the minimum bounty value.')} -
+ ('Allocation value is smaller than the minimum bounty value.')} /> )} @@ -139,9 +135,7 @@ function BountyCreate () { withLabel /> {!hasFunds && ( -
- {t('Account does not have enough funds.')} -
+ ('Account does not have enough funds.')} /> )} diff --git a/packages/page-council/src/Motions/Voting.tsx b/packages/page-council/src/Motions/Voting.tsx index f4d41f7e83..5bf8d18819 100644 --- a/packages/page-council/src/Motions/Voting.tsx +++ b/packages/page-council/src/Motions/Voting.tsx @@ -5,7 +5,7 @@ import type { AccountId, Hash, Proposal, ProposalIndex } from '@polkadot/types/i import React, { useState } from 'react'; -import { Button, Modal, ProposedAction, TxButton, VoteAccount } from '@polkadot/react-components'; +import { Button, MarkWarning, Modal, ProposedAction, TxButton, VoteAccount } from '@polkadot/react-components'; import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -57,16 +57,14 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props filter={members} onChange={setAccountId} /> + {isPrime && ( + ('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')} /> + )}

{t('The council account for this vote. The selection is filtered by the current members.')}

 - {isPrime && ( -
-
{t('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}
-
- )} {error && ( -
{error}
+ )} | null { onChange={setSuri} value={suri} /> -
-
{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.')}
-
+ ('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.')} />

{t('The seed and derivation path will be submitted to the validator node. this is an advanced operation, only to be performed when you are sure of the security and connection risks.')}

diff --git a/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx b/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx index 39820d5947..a3948a96b0 100644 --- a/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx +++ b/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx @@ -7,6 +7,7 @@ import type { AmountValidateState } from '../types'; import BN from 'bn.js'; import React, { useEffect, useState } from 'react'; +import { MarkError, MarkWarning } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { BN_TEN, BN_THOUSAND, BN_ZERO, formatBalance } from '@polkadot/util'; @@ -69,12 +70,10 @@ function ValidateAmount ({ currentAmount, onError, stashId, value }: Props): Rea } }, [api, currentAmount, onError, stashBalance, t, value]); - if (error || warning) { - return ( -
-
{error || warning}
-
- ); + if (error) { + return ; + } else if (warning) { + return ; } return null; diff --git a/packages/page-staking/src/Actions/Account/InputValidationController.tsx b/packages/page-staking/src/Actions/Account/InputValidationController.tsx index cd49c6cba5..4e52ead42d 100644 --- a/packages/page-staking/src/Actions/Account/InputValidationController.tsx +++ b/packages/page-staking/src/Actions/Account/InputValidationController.tsx @@ -7,6 +7,7 @@ import type { AccountId, StakingLedger } from '@polkadot/types/interfaces'; import React, { useEffect, useState } from 'react'; +import { MarkError, MarkWarning } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../../translate'; @@ -75,9 +76,9 @@ function ValidateController ({ accountId, controllerId, defaultController, onErr } return ( -
-
{error}
-
+ isFatal + ? + : ); } diff --git a/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx b/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx index 247ffe58be..676226c738 100644 --- a/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx +++ b/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx @@ -5,6 +5,8 @@ import type { I18nProps } from '@polkadot/react-components/types'; import React, { useEffect, useState } from 'react'; +import { MarkWarning } from '@polkadot/react-components'; + import { useTranslation } from '../../translate'; interface Props extends I18nProps { @@ -34,9 +36,7 @@ function ValidateSessionEd25519 ({ onError, sessionId, stashId }: Props): React. } return ( -
-
{error}
-
+ ); } diff --git a/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx index c8d1ec721b..34f4fa5a23 100644 --- a/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx +++ b/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx @@ -4,6 +4,8 @@ import BN from 'bn.js'; import React, { useEffect, useState } from 'react'; +import { MarkWarning } from '@polkadot/react-components'; + import { useTranslation } from '../../translate'; interface Props { @@ -35,9 +37,7 @@ function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): } return ( -
-
{error}
-
+ ); } diff --git a/packages/page-staking/src/Actions/partials/Nominate.tsx b/packages/page-staking/src/Actions/partials/Nominate.tsx index 50de5cc254..a07820d0e0 100644 --- a/packages/page-staking/src/Actions/partials/Nominate.tsx +++ b/packages/page-staking/src/Actions/partials/Nominate.tsx @@ -7,7 +7,7 @@ import type { NominateInfo } from './types'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { InputAddress, InputAddressMulti, Modal } from '@polkadot/react-components'; +import { InputAddress, InputAddressMulti, MarkWarning, Modal } from '@polkadot/react-components'; import { useApi, useFavorites } from '@polkadot/react-hooks'; import { MAX_NOMINATIONS, STORE_FAVS_BASE } from '../../constants'; @@ -80,7 +80,7 @@ function Nominate ({ className = '', controllerId, nominating, onChange, stashId onChange={setSelected} valueLabel={t('nominated accounts')} /> -
{t('You should trust your nominations to act competently and honest; basing your decision purely on their current profitability could lead to reduced profits or even loss of funds.')}
+ ('You should trust your nominations to act competently and honest; basing your decision purely on their current profitability could lead to reduced profits or even loss of funds.')} />

{t('Nominators can be selected manually from the list of all currently available validators.')}

diff --git a/packages/page-tech-comm/src/Proposals/Voting.tsx b/packages/page-tech-comm/src/Proposals/Voting.tsx index 8e3a70bdae..d2e64b914e 100644 --- a/packages/page-tech-comm/src/Proposals/Voting.tsx +++ b/packages/page-tech-comm/src/Proposals/Voting.tsx @@ -6,7 +6,7 @@ import type { AccountId, Hash } from '@polkadot/types/interfaces'; import BN from 'bn.js'; import React, { useState } from 'react'; -import { Button, Modal, TxButton, VoteAccount } from '@polkadot/react-components'; +import { Button, MarkWarning, Modal, TxButton, VoteAccount } from '@polkadot/react-components'; import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -42,9 +42,7 @@ function Voting ({ hash, members, prime, proposalId }: Props): React.ReactElemen onChange={setAccountId} /> {(accountId === prime?.toString()) && ( -
-
{t('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}
-
+ ('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')} /> )} diff --git a/packages/page-treasury/src/Overview/ProposalCreate.tsx b/packages/page-treasury/src/Overview/ProposalCreate.tsx index 7d5e841ab9..6f12b7d708 100644 --- a/packages/page-treasury/src/Overview/ProposalCreate.tsx +++ b/packages/page-treasury/src/Overview/ProposalCreate.tsx @@ -4,7 +4,7 @@ import BN from 'bn.js'; import React, { useMemo, useState } from 'react'; -import { Button, InputAddress, InputBalance, Modal, Static, TxButton } from '@polkadot/react-components'; +import { Button, InputAddress, InputBalance, MarkWarning, Modal, Static, TxButton } from '@polkadot/react-components'; import { useApi, useToggle } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -83,15 +83,13 @@ function Propose ({ className }: Props): React.ReactElement | null { isDisabled label={t('minimum bond')} /> + ('Be aware that once submitted the proposal will be put to a council vote. If the proposal is rejected due to a lack of info, invalid requirements or non-benefit to the network as a whole, the full bond posted (as describe above) will be lost.')} />

{t('The value is the amount that is being asked for and that will be allocated to the beneficiary if the proposal is approved.')}

{t('Of the beneficiary amount, at least {{bondPercentage}} would need to be put up as collateral. The maximum of this and the minimum bond will be used to secure the proposal, refundable if it passes.', { replace: { bondPercentage } })}

 -
-

{t('Be aware that once submitted the proposal will be put to a council vote. If the proposal is rejected due to a lack of info, invalid requirements or non-benefit to the network as a whole, the full bond posted (as describe above) will be lost.')}

-
-

{t('This chain does not yet support atomic batch operations. This means that if the transaction gets executed and one of the operations do fail (due to invalid data or lack of available funds) some of the changes made may not be applied.')}

- + ('This chain does not yet support atomic batch operations. This means that if the transaction gets executed and one of the operations do fail (due to invalid data or lack of available funds) some of the changes made may not be applied.')} /> ); } diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx index 9c221d7df3..f5ef386731 100644 --- a/packages/react-components/src/Card.tsx +++ b/packages/react-components/src/Card.tsx @@ -14,7 +14,7 @@ interface Props { function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement { return ( -
+
{children}
); diff --git a/packages/react-components/src/MarkError.tsx b/packages/react-components/src/MarkError.tsx new file mode 100644 index 0000000000..137eb40d35 --- /dev/null +++ b/packages/react-components/src/MarkError.tsx @@ -0,0 +1,28 @@ +// Copyright 2017-2021 @polkadot/react-components authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import styled from 'styled-components'; + +import Icon from './Icon'; + +interface Props { + children?: React.ReactNode; + className?: string; + content?: React.ReactNode; +} + +function MarkError ({ children, className = '', content }: Props): React.ReactElement { + return ( +
+ {content}{children} +
+ ); +} + +export default React.memo(styled(MarkError)` + .ui--Icon { + color: rgba(255, 12, 12, 1); + margin-right: 0.5rem; + } +`); diff --git a/packages/react-components/src/MarkWarning.tsx b/packages/react-components/src/MarkWarning.tsx new file mode 100644 index 0000000000..50cffea3d6 --- /dev/null +++ b/packages/react-components/src/MarkWarning.tsx @@ -0,0 +1,28 @@ +// Copyright 2017-2021 @polkadot/react-components authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import styled from 'styled-components'; + +import Icon from './Icon'; + +interface Props { + children?: React.ReactNode; + className?: string; + content?: React.ReactNode; +} + +function MarkWarning ({ children, className = '', content }: Props): React.ReactElement { + return ( +
+ {content}{children} +
+ ); +} + +export default React.memo(styled(MarkWarning)` + .ui--Icon { + color: rgba(255, 196, 12, 1); + margin-right: 0.5rem; + } +`); diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index a9423d1e82..d94a4ce662 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -64,6 +64,8 @@ export { default as LabelHelp } from './LabelHelp'; export { default as Labelled } from './Labelled'; export { default as LinkExternal } from './LinkExternal'; export { default as LockedVote } from './LockedVote'; +export { default as MarkError } from './MarkError'; +export { default as MarkWarning } from './MarkWarning'; export { default as Menu } from './Menu'; export { default as Modal } from './Modal'; export { default as Nonce } from './Nonce'; diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index 35b7dbffd2..4dd63770de 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -259,6 +259,11 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr } } + &.mark { + margin: 0.5rem 0 0.5rem 2.25rem; + padding: 0.5rem 1rem; + } + &.extraMargin { margin: 2rem auto; }