diff --git a/js/src/dapps/registry/Application/application.css b/js/src/dapps/registry/Application/application.css index c5a54040e0e..ebdb23baaf2 100644 --- a/js/src/dapps/registry/Application/application.css +++ b/js/src/dapps/registry/Application/application.css @@ -37,3 +37,15 @@ font-size: 80%; background-color: #f0f0f0; } + +.actions { + margin: 1em; + + * { + font-size: 1.3rem !important; + } + + > * { + padding-bottom: 0 !important; + } +} diff --git a/js/src/dapps/registry/Application/application.js b/js/src/dapps/registry/Application/application.js index 4b9561e7dec..e763069a5d6 100644 --- a/js/src/dapps/registry/Application/application.js +++ b/js/src/dapps/registry/Application/application.js @@ -20,6 +20,7 @@ import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; const muiTheme = getMuiTheme(lightBaseTheme); import CircularProgress from 'material-ui/CircularProgress'; +import { Card, CardText } from 'material-ui/Card'; import styles from './application.css'; import Accounts from '../Accounts'; import Events from '../Events'; @@ -57,9 +58,7 @@ export default class Application extends Component { accounts, contacts, contract, fee, lookup, - events, - names, - records + events } = this.props; return ( @@ -71,8 +70,9 @@ export default class Application extends Component { { contract && fee ? (
- - + + { this.renderActions() } +

The Registry is provided by the contract at { contract.address }. @@ -85,4 +85,34 @@ export default class Application extends Component { ); } + renderActions () { + const { + actions, + accounts, + fee, + names, + records + } = this.props; + + const hasAccount = !!accounts.selected; + + if (!hasAccount) { + return ( + + + Please select a valid account in order + to execute actions. + + + ); + } + + return ( +

+ + +
+ ); + } + } diff --git a/js/src/dapps/registry/Names/names.js b/js/src/dapps/registry/Names/names.js index 57494554426..dd7e6f77296 100644 --- a/js/src/dapps/registry/Names/names.js +++ b/js/src/dapps/registry/Names/names.js @@ -77,7 +77,6 @@ export default class Names extends Component { static propTypes = { actions: PropTypes.object.isRequired, fee: PropTypes.object.isRequired, - hasAccount: PropTypes.bool.isRequired, pending: PropTypes.bool.isRequired, queue: PropTypes.array.isRequired } @@ -89,20 +88,18 @@ export default class Names extends Component { render () { const { action, name } = this.state; - const { fee, hasAccount, pending, queue } = this.props; + const { fee, pending, queue } = this.props; return ( - { !hasAccount - ? (

Please select an account first.

) - : (action === 'reserve' - ? (

- The fee to reserve a name is { fromWei(fee).toFixed(3) }ETH. -

) - : (

To drop a name, you have to be the owner.

) - ) + { (action === 'reserve' + ? (

+ The fee to reserve a name is { fromWei(fee).toFixed(3) }ETH. +

) + : (

To drop a name, you have to be the owner.

) + ) } @@ -118,7 +115,7 @@ export default class Names extends Component { . const initialState = { - hasAccount: false, pending: false, queue: [] }; export default (state = initialState, action) => { - if (action.type === 'accounts select') { - return { ...state, hasAccount: !!action.address }; - } - if (action.type === 'names reserve start') { return { ...state, pending: true }; } diff --git a/js/src/dapps/registry/Records/records.js b/js/src/dapps/registry/Records/records.js index 355522e6054..60640893cb5 100644 --- a/js/src/dapps/registry/Records/records.js +++ b/js/src/dapps/registry/Records/records.js @@ -11,7 +11,6 @@ export default class Records extends Component { static propTypes = { actions: PropTypes.object.isRequired, - hasAccount: PropTypes.bool.isRequired, pending: PropTypes.bool.isRequired, name: PropTypes.string.isRequired, type: PropTypes.string.isRequired, @@ -21,7 +20,7 @@ export default class Records extends Component { state = { name: '', type: 'A', value: '' }; render () { - const { hasAccount, pending } = this.props; + const { pending } = this.props; const name = this.state.name || this.props.name; const type = this.state.type || this.props.type; const value = this.state.value || this.props.value; @@ -30,10 +29,10 @@ export default class Records extends Component { - { !hasAccount - ? (

Please select an account first.

) - : (

You can only modify entries of names that you previously registered.

) - } +

+ You can only modify entries of names that you previously registered. +

+ { - if (action.type === 'accounts select') { - return { ...state, hasAccount: !!action.address }; - } - if (action.type === 'records update start') { return { ...state,