import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Identicon from '../../../../components/ui/identicon' import TextField from '../../../../components/ui/text-field' import { CONTACT_LIST_ROUTE } from '../../../../helpers/constants/routes' import { isValidAddress, isValidENSAddress } from '../../../../helpers/utils/util' import EnsInput from '../../../../pages/send/send-content/add-recipient/ens-input' import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' import debounce from 'lodash.debounce' export default class AddContact extends PureComponent { static contextTypes = { t: PropTypes.func, } static propTypes = { addToAddressBook: PropTypes.func, history: PropTypes.object, scanQrCode: PropTypes.func, qrCodeData: PropTypes.object, qrCodeDetected: PropTypes.func, } state = { nickname: '', ethAddress: '', ensAddress: '', error: '', ensError: '', } constructor (props) { super(props) this.dValidate = debounce(this.validate, 1000) } componentWillReceiveProps (nextProps) { if (nextProps.qrCodeData) { if (nextProps.qrCodeData.type === 'address') { const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase() const currentAddress = this.state.ensAddress || this.state.ethAddress if (currentAddress.toLowerCase() !== scannedAddress) { this.setState({ ethAddress: scannedAddress, ensAddress: '' }) // Clean up QR code data after handling this.props.qrCodeDetected(null) } } } } validate = address => { const valid = isValidAddress(address) const validEnsAddress = isValidENSAddress(address) if (valid || validEnsAddress || address === '') { this.setState({ error: '', ethAddress: address }) } else { this.setState({ error: 'Invalid Address' }) } } renderInput () { return ( { this.props.scanQrCode() }} onChange={this.dValidate} onPaste={text => this.setState({ ethAddress: text })} onReset={() => this.setState({ ethAddress: '', ensAddress: '' })} updateEnsResolution={address => { this.setState({ ensAddress: address, error: '', ensError: '' }) }} updateEnsResolutionError={message => this.setState({ ensError: message })} /> ) } render () { const { t } = this.context const { history, addToAddressBook } = this.props const errorToRender = this.state.ensError || this.state.error return (
{this.state.ensAddress &&
{ this.state.ensAddress }
}
{ t('userName') }
this.setState({ newName: e.target.value })} fullWidth margin="dense" />
{ t('ethereumPublicAddress') }
{ this.renderInput() } { errorToRender &&
{errorToRender}
}
{ addToAddressBook(this.state.ensAddress || this.state.ethAddress, this.state.newName) history.push(CONTACT_LIST_ROUTE) }} onCancel={() => { history.push(CONTACT_LIST_ROUTE) }} submitText={this.context.t('save')} submitButtonType="confirm" />
) } }