// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
// 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 .
import React, { Component, PropTypes } from 'react';
import { Card, CardHeader, CardText } from 'material-ui/Card';
import TextField from 'material-ui/TextField';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import CheckIcon from 'material-ui/svg-icons/navigation/check';
import { fromWei } from '../parity.js';
import styles from './names.css';
const useSignerText = (
Use the Signer to authenticate the following changes.
);
const renderNames = (names) => {
const values = Object.values(names);
return values
.map((name, index) => (
{ name }
{
index < values.length - 1
? (, )
: null
}
));
};
const renderQueue = (queue) => {
if (queue.length === 0) {
return null;
}
const grouped = queue.reduce((grouped, change) => {
const last = grouped[grouped.length - 1];
if (last && last.action === change.action) {
last.names.push(change.name);
} else {
grouped.push({ action: change.action, names: [change.name] });
}
return grouped;
}, []);
return (
{ grouped.map(({ action, names }) => (
-
{ renderNames(names) }
{ ' will be ' }
{ action === 'reserve' ? 'reserved' : 'dropped' }
)) }
);
};
export default class Names extends Component {
static propTypes = {
actions: PropTypes.object.isRequired,
fee: PropTypes.object.isRequired,
pending: PropTypes.bool.isRequired,
queue: PropTypes.array.isRequired
}
state = {
action: 'reserve',
name: ''
};
componentWillReceiveProps (nextProps) {
const nextQueue = nextProps.queue;
const prevQueue = this.props.queue;
if (nextQueue.length > prevQueue.length) {
const newQueued = nextQueue[nextQueue.length - 1];
const newName = newQueued.name;
if (newName !== this.state.name) {
return;
}
this.setState({ name: '' });
}
}
render () {
const { action, name } = this.state;
const { fee, pending, queue } = this.props;
return (
{ (action === 'reserve'
? (
The fee to reserve a name is { fromWei(fee).toFixed(3) }
ETH.
)
: (To drop a name, you have to be the owner.
)
)
}
}
onTouchTap={ this.onSubmitClick }
/>
{ queue.length > 0
? ({ useSignerText }{ renderQueue(queue) }
)
: null
}
);
}
onNameChange = (e) => {
this.setState({ name: e.target.value });
};
onActionChange = (e, i, action) => {
this.setState({ action });
};
onSubmitClick = () => {
const { action, name } = this.state;
if (action === 'reserve') {
this.props.actions.reserve(name);
} else if (action === 'drop') {
this.props.actions.drop(name);
}
};
}