2017-01-25 18:51:41 +01:00
|
|
|
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
2016-12-27 11:01:16 +01:00
|
|
|
// This file is part of Parity.
|
|
|
|
|
|
|
|
// Parity is free software: you can redistribute it and/or modify
|
|
|
|
// it under the terms of the GNU General Public License as published by
|
|
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
|
|
// (at your option) any later version.
|
|
|
|
|
|
|
|
// Parity is distributed in the hope that it will be useful,
|
|
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
// GNU General Public License for more details.
|
|
|
|
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
|
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
|
|
|
import React, { Component, PropTypes } from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { bindActionCreators } from 'redux';
|
|
|
|
import {
|
2016-12-27 12:40:16 +01:00
|
|
|
Card, CardHeader, CardText, TextField, DropDownMenu, MenuItem, RaisedButton
|
2016-12-27 11:01:16 +01:00
|
|
|
} from 'material-ui';
|
|
|
|
|
2017-01-04 15:14:37 +01:00
|
|
|
import { nullableProptype } from '~/util/proptypes';
|
2016-12-27 12:40:16 +01:00
|
|
|
import { AddIcon, CheckIcon } from '~/ui/Icons';
|
2017-01-04 15:14:37 +01:00
|
|
|
import { clearError, confirm, propose } from './actions';
|
2016-12-27 11:01:16 +01:00
|
|
|
import styles from './reverse.css';
|
|
|
|
|
|
|
|
class Reverse extends Component {
|
|
|
|
static propTypes = {
|
2017-01-04 15:14:37 +01:00
|
|
|
error: nullableProptype(PropTypes.object.isRequired),
|
2016-12-27 11:01:16 +01:00
|
|
|
pending: PropTypes.bool.isRequired,
|
|
|
|
queue: PropTypes.array.isRequired,
|
|
|
|
|
2017-01-04 15:14:37 +01:00
|
|
|
clearError: PropTypes.func.isRequired,
|
|
|
|
confirm: PropTypes.func.isRequired,
|
|
|
|
propose: PropTypes.func.isRequired
|
2016-12-27 11:01:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
state = {
|
|
|
|
action: 'propose',
|
|
|
|
name: '',
|
|
|
|
address: ''
|
|
|
|
};
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { pending } = this.props;
|
|
|
|
const { action, address, name } = this.state;
|
|
|
|
|
|
|
|
const explanation = action === 'propose'
|
|
|
|
? (
|
|
|
|
<p className={ styles.noSpacing }>
|
|
|
|
To propose a reverse entry for <code>foo</code>, you have to be the owner of it.
|
|
|
|
</p>
|
|
|
|
) : (
|
|
|
|
<p className={ styles.noSpacing }>
|
|
|
|
To confirm a proposal, send the transaction from the account that the name has been proposed for.
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
|
|
|
|
let addressInput = null;
|
2017-01-23 13:39:52 +01:00
|
|
|
|
2016-12-27 11:01:16 +01:00
|
|
|
if (action === 'propose') {
|
|
|
|
addressInput = (
|
|
|
|
<TextField
|
|
|
|
className={ styles.spacing }
|
|
|
|
hintText='address'
|
|
|
|
value={ address }
|
|
|
|
onChange={ this.onAddressChange }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Card className={ styles.reverse }>
|
|
|
|
<CardHeader title={ 'Manage Reverse Names' } />
|
|
|
|
<CardText>
|
|
|
|
<p className={ styles.noSpacing }>
|
|
|
|
<strong>
|
|
|
|
To make others to find the name of an address using the registry, you can propose & confirm reverse entries.
|
|
|
|
</strong>
|
|
|
|
</p>
|
|
|
|
{ explanation }
|
2017-01-04 15:14:37 +01:00
|
|
|
{ this.renderError() }
|
2016-12-27 11:01:16 +01:00
|
|
|
<div className={ styles.box }>
|
|
|
|
<DropDownMenu
|
|
|
|
disabled={ pending }
|
|
|
|
value={ action }
|
|
|
|
onChange={ this.onActionChange }
|
|
|
|
>
|
|
|
|
<MenuItem value='propose' primaryText='propose a reverse entry' />
|
|
|
|
<MenuItem value='confirm' primaryText='confirm a reverse entry' />
|
|
|
|
</DropDownMenu>
|
|
|
|
{ addressInput }
|
|
|
|
<TextField
|
|
|
|
className={ styles.spacing }
|
|
|
|
hintText='name'
|
|
|
|
value={ name }
|
|
|
|
onChange={ this.onNameChange }
|
|
|
|
/>
|
|
|
|
<div className={ styles.button }>
|
|
|
|
<RaisedButton
|
|
|
|
disabled={ pending }
|
|
|
|
label={ action === 'propose' ? 'Propose' : 'Confirm' }
|
|
|
|
primary
|
|
|
|
icon={ action === 'propose' ? <AddIcon /> : <CheckIcon /> }
|
|
|
|
onTouchTap={ this.onSubmitClick }
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</CardText>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-01-04 15:14:37 +01:00
|
|
|
renderError () {
|
|
|
|
const { error } = this.props;
|
|
|
|
|
|
|
|
if (!error) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={ styles.error }>
|
|
|
|
<code>{ error.message }</code>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-12-27 11:01:16 +01:00
|
|
|
onNameChange = (e) => {
|
|
|
|
this.setState({ name: e.target.value });
|
|
|
|
};
|
|
|
|
|
|
|
|
onAddressChange = (e) => {
|
|
|
|
this.setState({ address: e.target.value });
|
|
|
|
};
|
|
|
|
|
|
|
|
onActionChange = (e, i, action) => {
|
|
|
|
this.setState({ action });
|
|
|
|
};
|
|
|
|
|
|
|
|
onSubmitClick = () => {
|
|
|
|
const { action, name, address } = this.state;
|
|
|
|
|
|
|
|
if (action === 'propose') {
|
|
|
|
this.props.propose(name, address);
|
|
|
|
} else if (action === 'confirm') {
|
|
|
|
this.props.confirm(name);
|
|
|
|
}
|
|
|
|
};
|
2017-01-04 15:14:37 +01:00
|
|
|
|
|
|
|
clearError = () => {
|
|
|
|
if (this.props.error) {
|
|
|
|
this.props.clearError();
|
|
|
|
}
|
|
|
|
};
|
2016-12-27 11:01:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => state.reverse;
|
2017-01-04 15:14:37 +01:00
|
|
|
const mapDispatchToProps = (dispatch) => bindActionCreators({ clearError, confirm, propose }, dispatch);
|
2016-12-27 11:01:16 +01:00
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Reverse);
|