import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Redirect } from 'react-router-dom'; import Identicon from '../../../../components/ui/identicon'; import Button from '../../../../components/ui/button/button.component'; import TextField from '../../../../components/ui/text-field'; import { isValidAddress } from '../../../../helpers/utils/util'; import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'; export default class EditContact extends PureComponent { static contextTypes = { t: PropTypes.func, }; static propTypes = { addToAddressBook: PropTypes.func, removeFromAddressBook: PropTypes.func, history: PropTypes.object, name: PropTypes.string, address: PropTypes.string, chainId: PropTypes.string, memo: PropTypes.string, viewRoute: PropTypes.string, listRoute: PropTypes.string, setAccountLabel: PropTypes.func, showingMyAccounts: PropTypes.bool.isRequired, }; static defaultProps = { name: '', memo: '', }; state = { newName: this.props.name, newAddress: this.props.address, newMemo: this.props.memo, error: '', }; render() { const { t } = this.context; const { address, addToAddressBook, chainId, history, listRoute, memo, name, removeFromAddressBook, setAccountLabel, showingMyAccounts, viewRoute, } = this.props; if (!address) { return <Redirect to={{ pathname: listRoute }} />; } return ( <div className="settings-page__content-row address-book__edit-contact"> <div className="settings-page__header address-book__header--edit"> <Identicon address={address} diameter={60} /> {showingMyAccounts ? null : ( <Button type="link" className="settings-page__address-book-button" onClick={async () => { await removeFromAddressBook(chainId, address); }} > {t('deleteAccount')} </Button> )} </div> <div className="address-book__edit-contact__content"> <div className="address-book__view-contact__group"> <div className="address-book__view-contact__group__label"> {t('userName')} </div> <TextField type="text" id="nickname" placeholder={this.context.t('addAlias')} value={this.state.newName} onChange={(e) => this.setState({ newName: e.target.value })} fullWidth margin="dense" /> </div> <div className="address-book__view-contact__group"> <div className="address-book__view-contact__group__label"> {t('ethereumPublicAddress')} </div> <TextField type="text" id="address" value={this.state.newAddress} error={this.state.error} onChange={(e) => this.setState({ newAddress: e.target.value })} fullWidth margin="dense" /> </div> <div className="address-book__view-contact__group"> <div className="address-book__view-contact__group__label--capitalized"> {t('memo')} </div> <TextField type="text" id="memo" placeholder={memo} value={this.state.newMemo} onChange={(e) => this.setState({ newMemo: e.target.value })} fullWidth margin="dense" multiline rows={3} classes={{ inputMultiline: 'address-book__view-contact__text-area', inputRoot: 'address-book__view-contact__text-area-wrapper', }} /> </div> </div> <PageContainerFooter cancelText={this.context.t('cancel')} onSubmit={async () => { if ( this.state.newAddress !== '' && this.state.newAddress !== address ) { // if the user makes a valid change to the address field, remove the original address if (isValidAddress(this.state.newAddress)) { await removeFromAddressBook(chainId, address); await addToAddressBook( this.state.newAddress, this.state.newName || name, this.state.newMemo || memo, ); if (showingMyAccounts) { setAccountLabel( this.state.newAddress, this.state.newName || name, ); } history.push(listRoute); } else { this.setState({ error: this.context.t('invalidAddress') }); } } else { // update name await addToAddressBook( address, this.state.newName || name, this.state.newMemo || memo, ); if (showingMyAccounts) { setAccountLabel(address, this.state.newName || name); } history.push(listRoute); } }} onCancel={() => { history.push(`${viewRoute}/${address}`); }} submitText={this.context.t('save')} submitButtonType="confirm" /> </div> ); } }