From 0b6c29578942903bf14be13dbcdad2d568a03526 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 1 Sep 2020 14:22:18 +0200 Subject: [PATCH] Align confirmation dialog with the UI (#3585) * Align confirmation dialog with the UI * Padding for all parts * Align confirmation on derive * Combine modals * linting --- packages/page-accounts/src/modals/Create.tsx | 296 ++++++++++-------- .../src/modals/CreateConfirmation.tsx | 64 ++-- packages/page-accounts/src/modals/Derive.tsx | 175 ++++++----- .../{Accounts => modals}/PasswordInput.tsx | 50 ++- packages/page-accounts/src/modals/Qr.tsx | 4 +- 5 files changed, 320 insertions(+), 269 deletions(-) rename packages/page-accounts/src/{Accounts => modals}/PasswordInput.tsx (64%) diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx index eeb01f703c..aaf2fdc1f0 100644 --- a/packages/page-accounts/src/modals/Create.tsx +++ b/packages/page-accounts/src/modals/Create.tsx @@ -20,8 +20,8 @@ import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from import { getEnvironment } from '@polkadot/react-api/util'; import { useTranslation } from '../translate'; -import PasswordInput from '../Accounts/PasswordInput'; import CreateConfirmation from './CreateConfirmation'; +import PasswordInput from './PasswordInput'; interface Props extends ModalProps { className?: string; @@ -178,6 +178,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' }); const [{ isPasswordValid, password }, setPassword] = useState({ isPasswordValid: false, password: '' }); const isValid = !!address && !deriveError && isNameValid && isPasswordValid && isSeedValid; + const seedOpt = useMemo(() => ( isDevelopment ? [{ text: t('Development'), value: 'dev' }] @@ -232,13 +233,12 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toString(), name: name.trim() }; const status = createAccount(`${seed}${derivePath}`, pairType, options, password, t('created account')); - toggleConfirmation(); onStatusChange(status); setIsBusy(false); onClose(); }, 0); }, - [api, derivePath, isDevelopment, isValid, name, onClose, onStatusChange, pairType, password, seed, t, toggleConfirmation] + [api, derivePath, isDevelopment, isValid, name, onClose, onStatusChange, pairType, password, seed, t] ); return ( @@ -247,144 +247,166 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ header={t('Add an account via seed')} size='large' > - {address && isConfirmationOpen && ( - - )} - - - - - - - - - ('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')} - isError={!isNameValid} - label={t('name')} - onChange={_onChangeName} + {address && isConfirmationOpen + ? ( + + ) + : ( + + + + + + + + + ('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')} + isError={!isNameValid} + label={t('name')} + onChange={_onChangeName} + onEnter={_onCommit} + placeholder={t('new account')} + value={name} + /> + + +

{t('The name for this account and how it will appear under your addresses. With an on-chain identity, it can be made available to others.')}

+ + + + + ('The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the "--key" parameter of your node.')} + isAction + isError={!isSeedValid} + isReadOnly={seedType === 'dev'} + label={ + seedType === 'bip' + ? t('mnemonic seed') + : seedType === 'dev' + ? t('development seed') + : t('seed (hex or string)') + } + onChange={_onChangeSeed} + onEnter={_onCommit} + value={seed} + > + + + + + +

{t('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}

+ + + ('new account')} - value={name} /> - - -

{t('The name for this account and how it will appear under your addresses. With an on-chain identity, it can be made available to others.')}

- - - - - ('The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the "--key" parameter of your node.')} - isAction - isError={!isSeedValid} - isReadOnly={seedType === 'dev'} - label={ - seedType === 'bip' - ? t('mnemonic seed') - : seedType === 'dev' - ? t('development seed') - : t('seed (hex or string)') - } - onChange={_onChangeSeed} - onEnter={_onCommit} - value={seed} + {!isElectron && ( +
+

{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.')}

+
+ )} + ('Advanced creation options')} > - - - - - -

{t('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}

- - - - {!isElectron && ( -
-

{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.')}

-
- )} - ('Advanced creation options')} - > - - - ('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')} - label={t('keypair crypto type')} - onChange={_onChangePairType} - options={uiSettings.availableCryptos} - tabIndex={-1} - /> - - -

{t('If you are moving accounts between applications, ensure that you use the correct type.')}

- - - - - ('You can set a custom derivation path for this account using the following syntax "///". The "/" and "//" may be repeated and mixed`. An optional "///" can be used with a mnemonic seed, and may only be specified once.')} - isError={!!deriveError} - label={t('secret derivation path')} - onChange={_onChangeDerive} - onEnter={_onCommit} - placeholder={ - seedType === 'raw' - ? pairType === 'sr25519' - ? t('//hard/soft') - : t('//hard') - : pairType === 'sr25519' - ? t('//hard/soft///password') - : t('//hard///password') - } - tabIndex={-1} - value={derivePath} - /> - {deriveError && ( -
{deriveError}
- )} - - -

{t('The derivation path allows you to create different accounts from the same base mnemonic.')}

- - - - + + + ('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')} + label={t('keypair crypto type')} + onChange={_onChangePairType} + options={uiSettings.availableCryptos} + tabIndex={-1} + /> + + +

{t('If you are moving accounts between applications, ensure that you use the correct type.')}

+ + + + + ('You can set a custom derivation path for this account using the following syntax "///". The "/" and "//" may be repeated and mixed`. An optional "///" can be used with a mnemonic seed, and may only be specified once.')} + isError={!!deriveError} + label={t('secret derivation path')} + onChange={_onChangeDerive} + onEnter={_onCommit} + placeholder={ + seedType === 'raw' + ? pairType === 'sr25519' + ? t('//hard/soft') + : t('//hard') + : pairType === 'sr25519' + ? t('//hard/soft///password') + : t('//hard///password') + } + tabIndex={-1} + value={derivePath} + /> + {deriveError && ( +
{deriveError}
+ )} + + +

{t('The derivation path allows you to create different accounts from the same base mnemonic.')}

+ + + + + ) + } -