Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Commit

Permalink
Merge pull request #2250 from ethcore/ng-tokenreg-ui-fixes
Browse files Browse the repository at this point in the history
Fixes to the Token Registration dApp
  • Loading branch information
jacogr authored Sep 23, 2016
2 parents 4ee734d + c5c5cde commit cfbb0e7
Show file tree
Hide file tree
Showing 30 changed files with 1,219 additions and 510 deletions.
1 change: 1 addition & 0 deletions js/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
"rlp": "^2.0.0",
"store": "^1.3.20",
"utf8": "^2.1.1",
"validator": "^5.7.0",
"web3": "^0.17.0-alpha"
}
}
7 changes: 7 additions & 0 deletions js/src/dapps/tokenreg/Accounts/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ export const setAccounts = (accounts) => ({
accounts
});

export const SET_ACCOUNTS_INFO = 'SET_ACCOUNTS_INFO';
export const setAccountsInfo = (accountsInfo) => ({
type: SET_ACCOUNTS_INFO,
accountsInfo
});

export const SET_SELECTED_ACCOUNT = 'SET_SELECTED_ACCOUNT';
export const setSelectedAccount = (address) => ({
type: SET_SELECTED_ACCOUNT,
Expand All @@ -30,6 +36,7 @@ export const loadAccounts = () => (dispatch) => {
console.log('accounts', accountsList);

dispatch(setAccounts(accountsList));
dispatch(setAccountsInfo(accountsInfo));
dispatch(setSelectedAccount(accountsList[0].address));
})
.catch(e => {
Expand Down
10 changes: 9 additions & 1 deletion js/src/dapps/tokenreg/Accounts/reducer.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import {
SET_ACCOUNTS,
SET_SELECTED_ACCOUNT
SET_SELECTED_ACCOUNT,
SET_ACCOUNTS_INFO
} from './actions';

const initialState = {
list: [],
accountsInfo: {},
selected: null
};

Expand All @@ -16,6 +18,12 @@ export default (state = initialState, action) => {
list: [].concat(action.accounts)
};

case SET_ACCOUNTS_INFO:
return {
...state,
accountsInfo: { ...action.accountsInfo }
};

case SET_SELECTED_ACCOUNT: {
let address = action.address;
let account = state.list.find(a => a.address === address);
Expand Down
146 changes: 68 additions & 78 deletions js/src/dapps/tokenreg/Actions/Register/register.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,42 @@
import React, { Component, PropTypes } from 'react';

import { Dialog, FlatButton, TextField } from 'material-ui';
import { Dialog, FlatButton } from 'material-ui';

import AccountSelector from '../../Accounts/AccountSelector';
import InputText from '../../Inputs/Text';

import { ADDRESS_TYPE, TLA_TYPE, UINT_TYPE, STRING_TYPE, validate } from '../validation';
import { TOKEN_ADDRESS_TYPE, TLA_TYPE, UINT_TYPE, STRING_TYPE } from '../../Inputs/validation';

import styles from '../actions.css';

const defaultField = { error: null, value: '', valid: false };
const defaultField = { value: '', valid: false };
const initState = {
isFormValid: false,
fields: {
address: { ...defaultField, type: ADDRESS_TYPE },
tla: { ...defaultField, type: TLA_TYPE },
base: { ...defaultField, type: UINT_TYPE },
name: { ...defaultField, type: STRING_TYPE }
address: {
...defaultField,
type: TOKEN_ADDRESS_TYPE,
floatingLabelText: 'Token address',
hintText: 'The token address'
},
tla: {
...defaultField,
type: TLA_TYPE,
floatingLabelText: 'Token TLA',
hintText: 'The token short name (3 characters)'
},
base: {
...defaultField,
type: UINT_TYPE,
floatingLabelText: 'Token Base',
hintText: 'The token precision'
},
name: {
...defaultField,
type: STRING_TYPE,
floatingLabelText: 'Token name',
hintText: 'The token name'
}
}
};

Expand Down Expand Up @@ -75,7 +97,7 @@ export default class ActionTransfer extends Component {
);
}

const isValid = this.isValid();
const isValid = this.state.isFormValid;

return ([
<FlatButton
Expand Down Expand Up @@ -113,64 +135,56 @@ export default class ActionTransfer extends Component {
}

renderForm () {
const { fields } = this.state;

let onChangeAddress = this.onChange.bind(this, 'address');
let onChangeTLA = this.onChange.bind(this, 'tla');
let onChangeBase = this.onChange.bind(this, 'base');
let onChangeName = this.onChange.bind(this, 'name');

return (
<div>
<AccountSelector />

<TextField
autoComplete='off'
floatingLabelFixed
floatingLabelText='Token address'
fullWidth
hintText='The token address'
errorText={ fields.address.error }
onChange={ onChangeAddress } />

<TextField
autoComplete='off'
floatingLabelFixed
floatingLabelText='Token TLA'
fullWidth
hintText='The token short name (3 characters)'
errorText={ fields.tla.error }
onChange={ onChangeTLA } />

<TextField
autoComplete='off'
floatingLabelFixed
floatingLabelText='Token Base'
fullWidth
hintText='The token precision'
errorText={ fields.base.error }
onChange={ onChangeBase } />

<TextField
autoComplete='off'
floatingLabelFixed
floatingLabelText='Token name'
fullWidth
hintText='The token name'
errorText={ fields.name.error }
onChange={ onChangeName } />
{ this.renderInputs() }
</div>
);
}

isValid () {
renderInputs () {
let { fields } = this.state;

return Object.keys(fields).map((fieldKey, index) => {
let onChange = this.onChange.bind(this, fieldKey);
let field = fields[fieldKey];

return (
<InputText
key={ index }

floatingLabelText={ field.floatingLabelText }
hintText={ field.hintText }

validationType={ field.type }
onChange={ onChange } />
);
});
}

onChange (fieldKey, valid, value) {
const { fields } = this.state;
let field = fields[fieldKey];

return Object.keys(fields)
.map(key => fields[key].valid)
let newFields = {
...fields,
[ fieldKey ]: {
...field,
valid, value
}
};

let isFormValid = Object.keys(newFields)
.map(key => newFields[key].valid)
.reduce((current, fieldValid) => {
return current && fieldValid;
}, true);

this.setState({
fields: newFields,
isFormValid
});
}

onRegister () {
Expand All @@ -190,28 +204,4 @@ export default class ActionTransfer extends Component {
this.props.onClose();
}

onChange (fieldKey, event) {
const value = event.target.value;

let fields = this.state.fields;
let fieldState = fields[fieldKey];
let validation = validate(value, fieldState.type);

let newFieldState = {
...fieldState,
...validation
};

newFieldState.value = (validation.value !== undefined)
? validation.value
: value;

this.setState({
fields: {
...fields,
[fieldKey]: newFieldState
}
});
}

}
2 changes: 1 addition & 1 deletion js/src/dapps/tokenreg/Actions/actions.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.button button {
background-color: rgba(50, 100, 150, 1) !important;
background-color: #27ae60 !important;
height: 56px !important;
padding: 0 10px !important;
}
Expand Down
2 changes: 1 addition & 1 deletion js/src/dapps/tokenreg/Actions/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const registerToken = (tokenData) => (dispatch, getState) => {
})
.then(() => {
return contractInstance
.fromAddress.call({}, [ tla ])
.fromAddress.call({}, [ address ])
.then((result) => {
throw new Error(`A Token has already been registered with the Address ${address}`);
}, () => {});
Expand Down
106 changes: 0 additions & 106 deletions js/src/dapps/tokenreg/Actions/validation.js

This file was deleted.

Loading

0 comments on commit cfbb0e7

Please sign in to comment.