// @flow import React from 'react'; import { Identicon } from 'components/ui'; import { getEnsAddress } from 'selectors/ens'; import { connect } from 'react-redux'; import type { State } from 'reducers'; import { isValidENSorEtherAddress, isValidENSAddress } from 'libs/validators'; import { resolveEnsName } from 'actions/ens'; import translate from 'translations'; type PublicProps = { placeholder: string, value: string, onChange?: (value: string) => void }; export class AddressField extends React.Component { props: PublicProps & { ensAddress: ?string, resolveEnsName: typeof resolveEnsName }; render() { const { placeholder, value, ensAddress } = this.props; const isReadonly = !this.props.onChange; return (
{!!ensAddress &&

{ensAddress}

}
); } onChange = (e: SyntheticInputEvent) => { const newValue = e.target.value; const { onChange } = this.props; if (!onChange) { return; } // FIXME debounce? if (isValidENSAddress(newValue)) { this.props.resolveEnsName(newValue); } onChange(newValue); }; } function mapStateToProps(state: State, props: PublicProps) { return { ensAddress: getEnsAddress(state, props.value) }; } export default connect(mapStateToProps, { resolveEnsName })(AddressField);