Merge pull request #787 from poanetwork/bulk-reserve-tokens-#777

(Feature) Add bulk import for reserved tokens

src/components/Common/ReservedTokensInputBlock.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import Web3 from 'web3'
+import Dropzone from 'react-dropzone';
+import Papa from 'papaparse'
 import '../../assets/stylesheets/application.css'
 import { InputField } from './InputField'
 import { RadioInputField } from './RadioInputField'
@@ -8,6 +10,8 @@ import update from 'immutability-helper'
 import ReservedTokensItem from './ReservedTokensItem'
 import { observer } from 'mobx-react';
 import { NumericInput } from './NumericInput'
+import { reservedTokensImported } from '../../utils/alerts'
+import processReservedTokens from '../../utils/processReservedTokens'
 
 const { VALID, INVALID } = VALIDATION_TYPES
 const { ADDRESS, DIMENSION, VALUE } = TEXT_FIELDS
@@ -130,6 +134,21 @@ export class ReservedTokensInputBlock extends Component {
     this.setState(newState)
   }
 
+  onDrop = (acceptedFiles, rejectedFiles) => {
+    acceptedFiles.forEach(file => {
+      Papa.parse(file, {
+        skipEmptyLines: true,
+        complete: results => {
+          const { called } = processReservedTokens(results.data, item => {
+            this.props.addReservedTokensItem(item)
+          })
+
+          reservedTokensImported(called)
+        }
+      })
+    })
+  }
+
   render () {
     const reservedTokensElements = this.props.tokens.map((token, index) => {
       return (
@@ -165,8 +184,19 @@ export class ReservedTokensInputBlock extends Component {
       console.error(`unrecognized dimension '${this.state.dim}'`)
     }
 
+    const actionsStyle = {
+      textAlign: 'right'
+    }
+
     const clearAllStyle = {
-      textAlign: 'right',
+      display: 'inline-block',
+      cursor: 'pointer'
+    }
+
+    const dropzoneStyle = {
+      display: 'inline-block',
+      marginLeft: '1em',
+      position: 'relative',
       cursor: 'pointer'
     }
 
@@ -210,13 +240,26 @@ export class ReservedTokensInputBlock extends Component {
           </div>
         </div>
         {reservedTokensElements}
-        {
-          tokensListEmpty ? null : (
-            <div className="clear-all-tokens" style={clearAllStyle} onClick={this.props.clearAll}>
-              <i className="fa fa-trash"></i>&nbsp;Clear All
-            </div>
-          )
-        }
+
+        {/* Actions */}
+        <div style={actionsStyle}>
+          {
+            tokensListEmpty ? null : (
+              <div className="clear-all-tokens" style={clearAllStyle} onClick={this.props.clearAll}>
+                <i className="fa fa-trash"></i>&nbsp;Clear All
+              </div>
+            )
+          }
+
+          <Dropzone
+            onDrop={this.onDrop}
+            accept=".csv"
+            style={dropzoneStyle}
+          >
+            <i className="fa fa-upload" title="Upload CSV"></i>&nbsp;
+            Upload CSV
+          </Dropzone>
+        </div>
       </div>
     )
   }

src/components/Common/ReservedTokensInputBlock.spec.js

@@ -8,6 +8,7 @@ import { configure, mount } from 'enzyme'
 const { VALID, INVALID } = VALIDATION_TYPES
 
 configure({ adapter: new Adapter() })
+jest.mock('react-dropzone', () => () =><span>Dropzone</span>);
 
 describe('ReservedTokensInputBlock', () => {
   let tokenList

src/components/Common/__snapshots__/ReservedTokensInputBlock.spec.js.snap

@@ -269,19 +269,30 @@ exports[`percentage 1`] = `
     </div>
   </div>
   <div
-    className="clear-all-tokens"
-    onClick={undefined}
     style={
       Object {
-        "cursor": "pointer",
         "textAlign": "right",
       }
     }
   >
-    <i
-      className="fa fa-trash"
-    />
-     Clear All
+    <div
+      className="clear-all-tokens"
+      onClick={undefined}
+      style={
+        Object {
+          "cursor": "pointer",
+          "display": "inline-block",
+        }
+      }
+    >
+      <i
+        className="fa fa-trash"
+      />
+       Clear All
+    </div>
+    <span>
+      Dropzone
+    </span>
   </div>
 </div>
 `;
@@ -555,19 +566,30 @@ exports[`tokens 1`] = `
     </div>
   </div>
   <div
-    className="clear-all-tokens"
-    onClick={undefined}
     style={
       Object {
-        "cursor": "pointer",
         "textAlign": "right",
       }
     }
   >
-    <i
-      className="fa fa-trash"
-    />
-     Clear All
+    <div
+      className="clear-all-tokens"
+      onClick={undefined}
+      style={
+        Object {
+          "cursor": "pointer",
+          "display": "inline-block",
+        }
+      }
+    >
+      <i
+        className="fa fa-trash"
+      />
+       Clear All
+    </div>
+    <span>
+      Dropzone
+    </span>
   </div>
 </div>
 `;

src/components/stepTwo/StepTwoForm.spec.js

@@ -1,30 +1,13 @@
 import React from 'react'
 import { Form } from 'react-final-form'
 import { StepTwoForm } from './StepTwoForm'
-import renderer from 'react-test-renderer'
 import Adapter from 'enzyme-adapter-react-15'
 import { configure, mount } from 'enzyme'
 
 configure({ adapter: new Adapter() })
+jest.mock('react-dropzone', () => () =><span>Dropzone</span>);
 
 describe('StepTwoForm', () => {
-  it('Should render the component', () => {
-    const component = renderer.create(
-      <Form
-        onSubmit={jest.fn()}
-        initialValues={{}}
-        component={StepTwoForm}
-        disableDecimals={false}
-        updateTokenStore={jest.fn()}
-        id="tokenData"
-        tokens={[]}
-      />
-    )
-
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
   it('Should call onSubmit if all values are valid', () => {
     const onSubmit = jest.fn()
     const wrapper = mount(