(sync) stage <- master

package.json

@@ -25,7 +25,6 @@
   },
   "dependencies": {
     "clipboard": "^1.7.1",
-    "immutability-helper": "^2.5.0",
     "install": "^0.10.1",
     "jquery": "^3.2.1",
     "jszip": "^3.1.4",
@@ -34,6 +33,7 @@
     "npm": "^5.3.0",
     "oracles-combine-solidity": "file:submodules/oracles-combine-solidity",
     "path": "^0.12.7",
+    "qrcode.react": "^0.7.2",
     "react": "^15.6.1",
     "react-alert": "^2.4.0",
     "react-copy-to-clipboard": "^5.0.1",

src/components/Common/CrowdsaleBlock.js

@@ -2,7 +2,7 @@ import React from 'react'
 import '../../assets/stylesheets/application.css';
 import { WhitelistInputBlock } from './WhitelistInputBlock'
 import { defaultCompanyEndDate } from '../../utils/utils'
-import InputField from './InputField'
+import { InputField } from './InputField'
 import { RadioInputField } from './RadioInputField'
 import { VALIDATION_MESSAGES, VALIDATION_TYPES, TEXT_FIELDS } from '../../utils/constants'
 const { EMPTY, VALID, INVALID } = VALIDATION_TYPES

src/components/Common/InputField.js

@@ -1,39 +1,49 @@
-import React from 'react';
+import React from 'react'
 import '../../assets/stylesheets/application.css';
-import {VALIDATION_TYPES} from '../../utils/constants';
+import { VALIDATION_TYPES } from '../../utils/constants'
+const { INVALID } = VALIDATION_TYPES
 
-const {INVALID} = VALIDATION_TYPES;
+export class InputField extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
 
-const InputField = props => {
-  const errorStyle = {
-    color: 'red',
-    fontWeight: 'bold',
-    fontSize: '12px',
-    width: '100%',
-    height: '10px',
-  };
+	clearVal = () => {
+		let state = {...this.state}
+		state.val = ""
+		this.setState(state)
+	}
 
-  const error = props.valid === INVALID ? props.errorMessage : '';
+	onChange = (e) => {
+		let state = {...this.state}
+		state.val = e.target.value;
+		this.setState(state);
+		this.props.onChange(e);
+	}
 
-  const errorMessageElement = (error && !props.pristine) ?
-    <p style={errorStyle}>{error}</p> :
-    null
+	componentDidMount() {
+		let state = {...this.state}
+		state.val = this.props.value;
+		this.setState(state);
+	}
 
-  return (
-    <div className={props.side}>
-      <label className="label">{props.title}</label>
-      <input
-        disabled={props.disabled}
-        type={props.type}
-        className="input"
-        onBlur={props.onBlur}
-        value={props.value || ''}
-        onChange={e => props.onChange(e)}
-      />
-      <p className="description">{props.description}</p>
-      { errorMessageElement }
-    </div>
-  );
-};
-
-export default InputField;
+	render() {
+		const errorStyle={
+			color: 'red',
+			fontWeight: 'bold',
+			fontSize: '12px',
+			width: '100%',
+			height: '10px'
+		}
+		const error = this.props.valid === INVALID ? this.props.errorMessage : ''
+		return (<div className={this.props.side}>
+			<label className="label">{this.props.title}</label>
+			<input ref={this.props.ref} disabled={this.props.disabled} type={this.props.type} className="input" onBlur={this.props.onBlur} value={this.state.val} defaultValue={this.props.defaultValue} onChange={this.onChange}/>
+			<p className="description">
+				{this.props.description}
+			</p>
+			<p style={errorStyle}>{error}</p>
+		</div>)
+	}
+}

src/components/Common/ReservedTokensInputBlock.js

@@ -1,58 +1,26 @@
 import React from 'react'
-import Web3 from 'web3'
 import '../../assets/stylesheets/application.css';
-import InputField from './InputField'
+import { InputField } from './InputField'
 import { RadioInputField } from './RadioInputField'
-import { TEXT_FIELDS, defaultState, VALIDATION_TYPES } from '../../utils/constants'
-import ReservedTokensItem from './ReservedTokensItem'
+import { TEXT_FIELDS, defaultState } from '../../utils/constants'
+import { ReservedTokensItem } from './ReservedTokensItem'
 import { getOldState } from '../../utils/utils'
-import update from 'immutability-helper'
-
 const { ADDRESS, DIMENSION, VALUE } = TEXT_FIELDS
-const {INVALID, VALID} = VALIDATION_TYPES;
 
 export class ReservedTokensInputBlock extends React.Component {
 
     constructor(props) {
         super(props);
 
         let oldState = getOldState(props, defaultState)
-        this.state = Object.assign({}, oldState, {
-            validation: {
-                address: {
-                    valid: INVALID,
-                    pristine: true
-                }
-            }
-        })
+        this.state = Object.assign({}, oldState)
     }
 
     addReservedTokensItem = (addr, dim, val) => {
-        if (this.state.validation.address.valid === INVALID) {
-            this.setState(update(this.state, {
-                validation: {
-                    address: {
-                        pristine: { $set: false }
-                    }
-                }
-            }))
-            return;
-        }
+        console.log(addr, dim, val);
+        if (!addr || !dim || !val) return;
 
-        if (!dim || !val) {
-            return
-        }
-
-        let state = update(this.state, {
-            token: {
-                reservedTokensInput: {
-                    $merge: {
-                        addr: '',
-                        val: ''
-                    }
-                }
-            }
-        })
+        this.clearReservedTokenInputs()
 
         let isAdded = false;
         for (let i = 0; i < this.state.token.reservedTokens.length; i++) {
@@ -65,116 +33,50 @@ export class ReservedTokensInputBlock extends React.Component {
 
         if (isAdded) return;
 
-        state = update(state, {
-            token: {
-                reservedTokens: {
-                    $push: [{
-                        addr,
-                        dim,
-                        val
-                    }]
-                }
-            }
-        })
-
-        this.props.onTokensChange(state.token.reservedTokens)
-        this.setState(state);
+        let state = this.state
+        let num = state.token.reservedTokensElements.length;
+        state.token.reservedTokens.push({
+            addr,
+            dim,
+            val
+        });
+        this.setState(state, function() {
+            state.token.reservedTokensElements.push(
+                <ReservedTokensItem
+                    key={num.toString()}
+                    num={num}
+                    addr={addr}
+                    dim={dim}
+                    val={val}>
+                </ReservedTokensItem>
+            );
+            this.setState(state);
+        });
     }
 
-    handleReservedTokensInputAddrChange = (e) => {
-        this.props.onChange(e, 'token', 0, 'reservedtokens_addr')
-
-        const address = e.target.value
-        const validAddress = Web3.utils.isAddress(address) ?  VALID : INVALID
-
-        this.setState(update(this.state, {
-            validation: {
-                address: {
-                    $set: {
-                        valid: validAddress,
-                        pristine: false
-                    }
-                }
-            },
-            token: {
-                reservedTokensInput: {
-                    addr: {
-                        $set: address
-                    }
-                }
-            }
-        }))
-    }
-
-    handleReservedTokensInputDimChange = (e) => {
-        this.props.onChange(e, 'token', 0, 'reservedtokens_dim')
-        this.setState(update(this.state, {
-            token: {
-                reservedTokensInput: {
-                    dim: {
-                        $set: e.target.value
-                    }
-                }
-            }
-        }))
-    }
-
-    handleReservedTokensInputValChange = (e) => {
-        this.props.onChange(e, 'token', 0, 'reservedtokens_val')
-        this.setState(update(this.state, {
-            token: {
-                reservedTokensInput: {
-                    val: {
-                        $set: e.target.value
-                    }
-                }
-            }
-        }))
-    }
-
-    removeToken(index) {
-        const newState = update(this.state, {
-            token: {
-                reservedTokens: {
-                    $splice: [[index, 1]]
-                }
-            }
-        })
-
-        this.props.onTokensChange(newState.token.reservedTokens)
-        this.setState(newState)
+    clearReservedTokenInputs = () => {
+        let state = this.state
+        state.token.reservedTokensInput.addr = ""
+        state.token.reservedTokensInput.val = ""
+        this.setState(state)
+        this.reservedTokensInputAddr.clearVal()
+        this.reservedTokensInputVal.clearVal()
     }
 
     render() {
         let { token } = this.state
-
-        const reservedTokensElements = this.state.token.reservedTokens
-            .map((token, index) => {
-                return (
-                    <ReservedTokensItem
-                        key={index.toString()}
-                        num={index}
-                        addr={token.addr}
-                        dim={token.dim}
-                        val={token.val}
-                        onRemove={(index) => this.removeToken(index)}>
-                    </ReservedTokensItem>
-                )
-            })
-
+        let { onChange } = this.props
         return (
             <div className="reserved-tokens-container">
                 <div className="reserved-tokens-input-container">
                     <div className="reserved-tokens-input-container-inner">
                       <InputField
+                        ref={reservedTokensInputAddr => this.reservedTokensInputAddr = reservedTokensInputAddr}
                         side='reserved-tokens-input-property reserved-tokens-input-property-left'
                         type='text'
                         title={ADDRESS}
                         value={token.reservedTokensInput.addr}
-                        pristine={this.state.validation.address.pristine}
-                        valid={this.state.validation.address.valid}
-                        errorMessage="The inserted address is invalid"
-                        onChange={this.handleReservedTokensInputAddrChange}
+                        onChange={(e) => onChange(e, 'token', 0, 'reservedtokens_addr')}
                         description={`Address where to send reserved tokens.`}
                       />
                       <RadioInputField
@@ -184,15 +86,16 @@ export class ReservedTokensInputBlock extends React.Component {
                         vals={["tokens", "percentage"]}
                         defaultValue={token.reservedTokensInput.dim}
                         name={'reserved-tokens-dim'}
-                        onChange={this.handleReservedTokensInputDimChange}
+                        onChange={(e) => onChange(e, 'token', 0, 'reservedtokens_dim')}
                         description={`Fixed amount or % of crowdsaled tokens. Will be deposited to the account after fintalization of the crowdsale. `}
                       />
                       <InputField
+                        ref={reservedTokensInputVal => this.reservedTokensInputVal = reservedTokensInputVal}
                         side='reserved-tokens-input-property reserved-tokens-input-property-right'
                         type='number'
                         title={VALUE}
                         value={token.reservedTokensInput.val}
-                        onChange={this.handleReservedTokensInputValChange}
+                        onChange={(e) => onChange(e, 'token', 0, 'reservedtokens_val')}
                         description={`Value in tokens or percents. Don't forget to press + button for each reserved token.`}
                       />
                     </div>
@@ -201,8 +104,7 @@ export class ReservedTokensInputBlock extends React.Component {
                         </div>
                     </div>
                 </div>
-                {reservedTokensElements}
-            </div>
-        )
+                {token.reservedTokensElements}
+            </div>)
     }
 }