diff --git a/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx b/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx index e80a5517c..552317e08 100644 --- a/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx +++ b/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx @@ -97,8 +97,7 @@ export default class ViewLayout extends Component { return ( renderInstructions && (
- {' '} - {renderInstructions()}{' '} + {renderInstructions()}
) ) diff --git a/app/components/Settings/EncryptForm/EncryptForm.jsx b/app/components/Settings/EncryptForm/EncryptForm.jsx index 6fba86d9c..3d9ba73d3 100644 --- a/app/components/Settings/EncryptForm/EncryptForm.jsx +++ b/app/components/Settings/EncryptForm/EncryptForm.jsx @@ -1,7 +1,8 @@ // @flow -import React from 'react' -import { noop } from 'lodash-es' -import { FormattedMessage, intlShape } from 'react-intl' +import React, { useState, useEffect } from 'react' +import { useIntl } from 'react-intl' +import { wallet } from '@cityofzion/neon-js' +import { wallet as n3Wallet } from '@cityofzion/neon-js-next' import Button from '../../Button' import TextInput from '../../Inputs/TextInput' @@ -11,197 +12,145 @@ import styles from './EncryptForm.scss' import { MIN_PASSPHRASE_LEN } from '../../../core/wallet' type Props = { - submitLabel: string, - formPrivateKey: string, - formPassphrase: string, - formConfirmPassphrase: string, - validatePassphraseLength: Function, - isWIF: Function, - onSubmit: Function, - intl: intlShape, + validatePassphraseLength(text: string): void, + setEncryptedWIF(encryptedWif: string): void, + chain: string, } -type State = { - privateKeyError: string, - passphraseError: string, - confirmPassphraseError: string, - isDisabled: boolean, - privateKey: string, - passphrase: string, - confirmPassphrase: string, -} +const EncryptForm = ({ + chain, + validatePassphraseLength, + setEncryptedWIF, +}: Props) => { + const intl = useIntl() -export default class EncryptForm extends React.Component { - constructor(props: Props) { - super(props) - - this.state = { - privateKeyError: '', - passphraseError: '', - confirmPassphraseError: '', - isDisabled: false, - privateKey: '', - passphrase: '', - confirmPassphrase: '', - } - } + const [privateKey, setPrivateKey] = useState('') + const [passphrase, setPassphrase] = useState('') + const [confirmPassphrase, setConfirmPassphrase] = useState('') + const [privateKeyError, setPrivateKeyError] = useState('') + const [passphraseError, setPassphraseError] = useState('') + const [confirmPassphraseError, setConfirmPassphraseError] = useState('') + const [isDisabled, setIsDisabled] = useState(true) - static defaultProps = { - submitLabel: 'Generate Encrypted key', - onSubmit: noop, - isWIF: noop, - validatePassphraseLength: noop, - } + const validatePrivateKey = () => { + const isWIF = chain === 'neo3' ? n3Wallet.isWIF : wallet.isWIF - render() { - const { - submitLabel, - formPrivateKey, - formPassphrase, - formConfirmPassphrase, - intl, - } = this.props - const { - privateKeyError, - passphraseError, - confirmPassphraseError, - isDisabled, - } = this.state - - return ( -
-
- } - placeholder={intl.formatMessage({ id: 'encryptStep1Placeholder' })} - value={formPrivateKey} - onChange={this.handleChangePrivateKey} - error={privateKeyError} - /> - } - placeholder={intl.formatMessage({ id: 'encryptStep2Placeholder' })} - value={formPassphrase} - onChange={this.handleChangePassphrase} - error={passphraseError} - /> - } - placeholder={intl.formatMessage({ id: 'encryptStep3Placeholder' })} - value={formConfirmPassphrase} - onChange={this.handleChangeConfirmPassphrase} - error={confirmPassphraseError} - /> - - -
- ) - } - - validatePrivateKey = (privateKey: string) => { - const { isWIF, intl } = this.props if (privateKey && !isWIF(privateKey)) { - this.setState({ - privateKeyError: intl.formatMessage({ id: 'errors.encrypt.valid' }), - }) + setPrivateKeyError(intl.formatMessage({ id: 'errors.encrypt.valid' })) + return false } + return true } - validatePassphrase = (passphrase: string, confirmPassphrase: string) => { - const { validatePassphraseLength, intl } = this.props - if (passphrase !== confirmPassphrase) { - this.setState({ - passphraseError: intl.formatMessage({ id: 'errors.password.match' }), - }) - return false - } - + const validatePassphrase = () => { if (!validatePassphraseLength(passphrase)) { - this.setState({ - passphraseError: intl.formatMessage( + setPassphraseError( + intl.formatMessage( { id: 'errors.password.length' }, { MIN_PASSPHRASE_LEN }, ), - }) + ) return false } - return true - } - validate = ( - privateKey: string, - passphrase: string, - confirmPassphrase: string, - ) => { - const validPrivateKey = this.validatePrivateKey(privateKey) - const validatePassphrase = this.validatePassphrase( - passphrase, - confirmPassphrase, - ) - - return validPrivateKey && validatePassphrase + return true } - clearErrors = (name: string) => { - if (name === 'passphrase' || name === 'confirmPassphrase') { - this.setState({ passphraseError: '' }) - this.setState({ confirmPassphraseError: '' }) - } else if (name === 'privateKey') { - this.setState({ privateKeyError: '' }) + const validateConfirmPassphrase = () => { + if (passphrase !== confirmPassphrase) { + setConfirmPassphraseError( + intl.formatMessage({ id: 'errors.password.match' }), + ) + return false } - } - setButtonIsDisabled = () => { - const { privateKey, passphrase, confirmPassphrase } = this.state - this.setState({ - isDisabled: !privateKey || !passphrase || !confirmPassphrase, - }) + return true } - handleChangePrivateKey = (event: Object) => { - this.setState({ privateKey: event.target.value }) - this.clearErrors(event.target.name) - this.setButtonIsDisabled() - } + const handleSubmit = async event => { + event.preventDefault() - handleChangePassphrase = (event: Object) => { - this.setState({ passphrase: event.target.value }) - this.clearErrors(event.target.name) - this.setButtonIsDisabled() - } + const privateKeyIsValid = validatePrivateKey() + const passphraseisValid = validatePassphrase() + const confirmPassphraseIsValid = validateConfirmPassphrase() - handleChangeConfirmPassphrase = (event: Object) => { - this.setState({ confirmPassphrase: event.target.value }) - this.clearErrors(event.target.name) - this.setButtonIsDisabled() - } + if (!privateKeyIsValid || !passphraseisValid || !confirmPassphraseIsValid) + return - handleSubmit = (event: Object) => { - event.preventDefault() - const { onSubmit } = this.props - const { privateKey, passphrase, confirmPassphrase } = this.state - - const validInput = this.validate(privateKey, passphrase, confirmPassphrase) - if (validInput) { - this.setState({ isDisabled: true }) - onSubmit(privateKey, passphrase, confirmPassphrase) - this.setState({ isDisabled: false }) - } + const encryptedWIF = + chain === 'neo3' + ? await n3Wallet.encrypt(privateKey, passphrase) + : wallet.encrypt(privateKey, passphrase) + + setEncryptedWIF(encryptedWIF) } + + useEffect( + () => { + setIsDisabled(!privateKey || !passphrase || !confirmPassphrase) + }, + [privateKey, passphrase, confirmPassphrase], + ) + + useEffect( + () => { + setPassphraseError('') + setConfirmPassphraseError('') + }, + [passphrase, confirmPassphrase], + ) + + useEffect( + () => { + setPrivateKeyError('') + }, + [privateKey], + ) + + return ( +
+
+ setPrivateKey(event.target.value)} + error={privateKeyError} + /> + setPassphrase(event.target.value)} + error={passphraseError} + /> + setConfirmPassphrase(event.target.value)} + error={confirmPassphraseError} + /> + + +
+ ) } + +export default EncryptForm diff --git a/app/components/Settings/EncryptForm/index.js b/app/components/Settings/EncryptForm/index.js index 64087281c..b717dcddf 100644 --- a/app/components/Settings/EncryptForm/index.js +++ b/app/components/Settings/EncryptForm/index.js @@ -1,4 +1,25 @@ -import { injectIntl } from 'react-intl' +import { compose, withProps } from 'recompose' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import withChainData from '../../../hocs/withChainData' import EncryptForm from './EncryptForm' +import { setEncryptedWIF } from '../../../modules/generateEncryptedWIF' +import { validatePassphraseLength } from '../../../core/wallet' -export default injectIntl(EncryptForm) +const actionCreators = { + setEncryptedWIF, +} + +const mapDispatchToProps = dispatch => + bindActionCreators(actionCreators, dispatch) + +export default compose( + connect( + null, + mapDispatchToProps, + ), + withChainData(), + withProps({ + validatePassphraseLength, + }), +)(EncryptForm) diff --git a/app/components/Settings/EncryptPanel/EncryptPanel.jsx b/app/components/Settings/EncryptPanel/EncryptPanel.jsx deleted file mode 100644 index f47f37657..000000000 --- a/app/components/Settings/EncryptPanel/EncryptPanel.jsx +++ /dev/null @@ -1,109 +0,0 @@ -// @flow -import React from 'react' -import classNames from 'classnames' -import { FormattedMessage } from 'react-intl' - -import { ROUTES } from '../../../core/constants' -import FullHeightPanel from '../../Panel/FullHeightPanel' -import EncryptForm from '../EncryptForm' -import EncryptSuccess from '../EncryptSuccess' -import LockIcon from '../../../assets/icons/lock.svg' -import CloseButton from '../../CloseButton' -import styles from './EncryptPanel.scss' - -type Props = { - handleSubmit: Function, - handleN3Submit: Function, - validatePassphraseLength: Function, - isWIF: Function, - className: string, - title: string, - resetEncryptedWIF: Function, - encryptedWIF: string, - chain: string, - n3Key: string, -} - -export default class EncryptPanel extends React.Component { - componentWillUnmount() { - const { resetEncryptedWIF } = this.props - resetEncryptedWIF() - } - - render() { - const { className, resetEncryptedWIF, encryptedWIF, n3Key } = this.props - - return ( - - {t => ( - } - renderHeaderIcon={this.renderIcon} - renderInstructions={this.renderInstructions} - > - {this.renderPanelContent(encryptedWIF || n3Key, resetEncryptedWIF)} - - )} - - ) - } - - renderHeader = () => {this.props.title} - - renderInstructions = (encryptedWIF: string) => { - if (!encryptedWIF) { - return ( -
- -
- ) - } - return null - } - - renderPanelContent = (encryptedWIF: string, resetEncryptedWIF: Function) => { - if (!encryptedWIF) { - return ( - - {t => ( - - )} - - ) - } - return ( - - ) - } - - renderIcon = () => ( -
- -
- ) - - onSubmit = ( - privateKey: string, - passphrase: string, - confirmPassphrase: string, - ) => { - const { handleSubmit, chain, handleN3Submit } = this.props - if (chain === 'neo3') { - handleN3Submit(privateKey, passphrase, confirmPassphrase) - } else { - handleSubmit(privateKey, passphrase, confirmPassphrase) - } - } -} diff --git a/app/components/Settings/EncryptPanel/EncryptPanel.scss b/app/components/Settings/EncryptPanel/EncryptPanel.scss deleted file mode 100644 index 9fc2b3088..000000000 --- a/app/components/Settings/EncryptPanel/EncryptPanel.scss +++ /dev/null @@ -1,9 +0,0 @@ -.encryptPanel { - display: flex; - justify-content: center; - - .privateKeyInstruction { - text-align: center; - color: #5c677f; - } -} diff --git a/app/components/Settings/EncryptPanel/index.js b/app/components/Settings/EncryptPanel/index.js deleted file mode 100644 index c7047d2f5..000000000 --- a/app/components/Settings/EncryptPanel/index.js +++ /dev/null @@ -1,29 +0,0 @@ -// @flow -import { connect } from 'react-redux' -import { compose } from 'recompose' -import { bindActionCreators } from 'redux' -import withChainData from '../../../hocs/withChainData' -import { - getEncryptedWIF, - resetEncryptedWIF, -} from '../../../modules/generateEncryptedWIF' -import EncryptPanel from './EncryptPanel' - -const mapStateToProps = (state: Object) => ({ - encryptedWIF: getEncryptedWIF(state), -}) - -const actionCreators = { - resetEncryptedWIF, -} - -const mapDispatchToProps = dispatch => - bindActionCreators(actionCreators, dispatch) - -export default compose( - connect( - mapStateToProps, - mapDispatchToProps, - ), - withChainData(), -)(EncryptPanel) diff --git a/app/components/Settings/EncryptQR/index.js b/app/components/Settings/EncryptQR/index.js index 94f420549..477af8c0a 100644 --- a/app/components/Settings/EncryptQR/index.js +++ b/app/components/Settings/EncryptQR/index.js @@ -8,7 +8,7 @@ import { } from '../../../modules/generateEncryptedWIF' import EncryptQR from './EncryptQR' -const mapStateToProps = (state: Object) => ({ +const mapStateToProps = state => ({ encryptedWIF: getEncryptedWIF(state), }) diff --git a/app/components/Settings/EncryptSuccess/EncryptSuccess.jsx b/app/components/Settings/EncryptSuccess/EncryptSuccess.jsx index 22fac06cf..1d724a25d 100644 --- a/app/components/Settings/EncryptSuccess/EncryptSuccess.jsx +++ b/app/components/Settings/EncryptSuccess/EncryptSuccess.jsx @@ -13,16 +13,12 @@ import styles from './EncryptSuccess.scss' type Props = { encryptedKey: string, - handleReset: Function, + resetEncryptedWIF: Function, } export default class EncryptSuccess extends React.Component { - static defaultProps = { - handleReset: noop, - } - render() { - const { encryptedKey, handleReset } = this.props + const { encryptedKey, resetEncryptedWIF } = this.props return (
@@ -51,7 +47,7 @@ export default class EncryptSuccess extends React.Component { exact to={ROUTES.DISPLAY_ENCRYPTED_WIF_QR} > - @@ -59,7 +55,7 @@ export default class EncryptSuccess extends React.Component {