add stuff

src/App.js

@@ -1,14 +1,16 @@
 import React, { Component } from 'react';
-import { Header, FirstStep, SecondStep, ThirdStep, FourthStep, FifthStep, Retry } from './components';
+import { Header, FirstStep, SecondStep, ThirdStep, FourthStep, FifthStep, Retry, Welcome } from './components';
 import { Route } from 'react-router-dom';
 import './assets/stylesheets/application.css';
 
+console.log('agregator of txs')
 export class App extends React.Component {
   render(){
     return (
       <div>
         <Header/>
         <Route exact path="/" component={FirstStep}/>
+        <Route exact path="/1" component={FirstStep}/>
         <Route exact path="/2" component={SecondStep}/>
         <Route exact path="/3" component={ThirdStep}/>
         <Route exact path="/4" component={FourthStep}/>

src/components/1.js

@@ -9,7 +9,6 @@ import { inject, observer } from "mobx-react";
 import swal from 'sweetalert';
 import generateElement from '../generateElement'
 import Example from './example.json'
-import ExampleCSV from './example.csv'
 import { PulseLoader} from 'react-spinners';
 import {RadioGroup, Radio} from 'react-radio-group';
 import csvtojson from 'csvtojson'
@@ -58,13 +57,14 @@ export class FirstStep extends React.Component {
     this.onJsonChange = this.onJsonChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.state ={
-      json: [],
-      format: 'json',
+      format: '',
       placeholder: JSON.stringify(Example),
       tokenAddress: {label: '', value: null}
     }
     this.onSelectFormat = this.onSelectFormat.bind(this)
     this.onParse = this.onParse.bind(this)
+    this.parseCompleted = false;
+    this.list = [];
   }
   async onTokenAddress(e){
     if(!e){
@@ -85,18 +85,43 @@ export class FirstStep extends React.Component {
 0x00b5F428905DEA1a67940093fFeaCeee58cA91Ae,1.049
 0x00fC79F38bAf0dE21E1fee5AC4648Bc885c1d774,14546
   `})
+    swal("Information", `Please provide CSV file in comma separated address,balance format one line per address.
+    \nExample:\n 
+0xCBA5018De6b2b6F89d84A1F5A68953f07554765e,12
+0xa6Bf70bd230867c870eF13631D7EFf1AE8Ab85c9,113.45
+0x00b5F428905DEA1a67940093fFeaCeee58cA91Ae,1.049
+0x00fC79F38bAf0dE21E1fee5AC4648Bc885c1d774,14546
+    `, 'info')
     } else {
       this.setState({format: newFormat, placeholder: JSON.stringify(Example)})
+      swal({
+        content: generateElement(`<div style="color:black;">
+        Please provide JSON-array file in the following format.
+        \nExample:\n 
+        <div style="font-size: 12px;color:purple;">
+        [<br/>
+          {"0xCBA5018De6b2b6F89d84A1F5A68953f07554765e":"12"},
+          {"0xa6Bf70bd230867c870eF13631D7EFf1AE8Ab85c9":"1123.45645"},
+          {"0x00b5F428905DEA1a67940093fFeaCeee58cA91Ae":"1.049"},
+          {"0x00fC79F38bAf0dE21E1fee5AC4648Bc885c1d774":"14546"}
+          <br/>]
+        </div>
+        </div>
+        `),
+        icon: 'info'
+      })
+
     }
   }
   onDecimalsChange(e) {
     this.tokenStore.setDecimals(e.target.value)
   }
-  onJsonChange(e) {
+
+  onJsonChange(value) {
     try {
-      let addresses = JSON.parse(e.target.value);
-      console.log(addresses)
+      let addresses = JSON.parse(value);
       this.tokenStore.setJsonAddresses(addresses)
+      this.parseCompleted = true;
     } catch(e) {
       const error = e.message.replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t');
       console.error(error)
@@ -107,45 +132,66 @@ export class FirstStep extends React.Component {
     }
   }
 
-  onCsvChange(e){
-    let addresses = [];
-    console.log(e.target.value)
-    csvtojson({noheader:true})
-    .fromString(e.target.value)
-      .on('csv',(csv)=>{
-        let el = {};
-        if(csv.length === 2){
-          Object.defineProperty(el, csv[0], {
-            value: csv[1],
-            writable: true,
-            configurable: true,
-            enumerable: true,
-          });
-          addresses.push(el)
-        } 
-      })
-      .on('end', () => {
-        try {
-          this.tokenStore.setJsonAddresses(addresses)
-        } catch(e) {
-          console.error(e)
-          swal({
-            content: "Your CSV is invalid",
-            icon: "error",
-          })
-        }
-      })
+  async onCsvChange(value){
+    return new Promise((res, rej) => {
+      let addresses = [];
+      console.log(value)
+      csvtojson({noheader:true})
+      .fromString(value)
+        .on('csv',(csv)=>{
+          let el = {};
+          if(csv.length === 2){
+            Object.defineProperty(el, csv[0], {
+              value: csv[1],
+              writable: true,
+              configurable: true,
+              enumerable: true,
+            });
+            addresses.push(el)
+          } 
+        })
+        .on('end', () => {
+          try {
+            console.log('csv is done')
+            this.parseCompleted = true;
+            this.tokenStore.setJsonAddresses(addresses)
+            res(addresses);
+          } catch(e) {
+            console.error(e)
+            rej(e);
+            swal({
+              content: "Your CSV is invalid",
+              icon: "error",
+            })
+          }
+        })
+    })
   }
 
   onParse(e){
+    this.list = e.target.value;
     if(this.state.format === 'json') {
-      this.onJsonChange(e)
-    } else {
-      this.onCsvChange(e)
+      this.onJsonChange(e.target.value)
+    }
+    if(this.state.format === 'csv'){
+      this.onCsvChange(e.target.value)
     }
+    return
   }
-  onSubmit(e){
+  async onSubmit(e){
     e.preventDefault()
+    if(this.state.format === ''){
+      swal("Error!", "Please select format CSV or JSON", 'error')
+      return
+    }
+    console.log('onSubmit', this.parseCompleted, this.state.format)
+    if(!this.parseCompleted){
+      if(this.state.format === 'json') {
+        this.onJsonChange(this.list)
+      } else {
+        await this.onCsvChange(this.list)
+      }
+    }
     this.tokenStore.parseAddresses()
     this.props.history.push('/3')
   }

src/components/3.js

@@ -11,15 +11,36 @@ export class ThirdStep extends React.Component {
     super(props);
     this.tokenStore = props.UiStore.tokenStore;
     this.gasPriceStore = props.UiStore.gasPriceStore;
+    this.onNext = this.onNext.bind(this)
   }
   componentDidMount() {
+    if(this.tokenStore.invalid_addresses.length > 0){
+
+      swal({
+        title: "There are invalid eth addresses",
+        text: this.tokenStore.invalid_addresses.toString(),
+        icon: "error",
+      })
+    }
+    if(this.tokenStore.dublicates.length > 0){
+
+      swal({
+        title: `There were duplicated eth addresses in your list.`,
+        text: `${JSON.stringify(this.tokenStore.dublicates.slice(), null, '\n')}.\n Multisender already combined the balances for those addreses. Please make sure it did the calculation correctly.`,
+        icon: "warning",
+      })
+    }
+  }
+  onNext(e) {
+    e.preventDefault();
     if (new BN(this.tokenStore.totalBalance).gt(new BN(this.tokenStore.defAccTokenBalance))){
       console.error('Your balance is more than total to send')
       swal({
         title: "Insufficient token balance",
         text: `You don't have enough tokens to send to all addresses.\nAmount needed: ${this.tokenStore.totalBalance} ${this.tokenStore.tokenSymbol}`,
         icon: "error",
       })
+      return
     }
     if( new BN(this.tokenStore.totalCostInEth).gt(new BN(this.tokenStore.ethBalance))){
       console.error('please fund you account in ')
@@ -28,15 +49,9 @@ export class ThirdStep extends React.Component {
         text: `You don't have enough ETH to send to all addresses. Amount needed: ${this.tokenStore.totalCostInEth} ETH`,
         icon: "error",
       })
+      return
     }
-    if(this.tokenStore.invalid_addresses.length > 0){
-
-      swal({
-        title: "There are invalid eth addresses",
-        text: this.tokenStore.invalid_addresses.toString(),
-        icon: "error",
-      })
-    }
+    this.props.history.push('/4')
   }
   render() {
     return (
@@ -48,7 +63,13 @@ export class ThirdStep extends React.Component {
           This Dapp supports Mainnet, POA-Core, POA-sokol, Ropsten, Rinkeby, Kovan
           </p>
           <form className="form">
-            <ReactJson displayDataTypes={false} style={{backgroundColor: 'none'}} indentWidth="2" iconStyle="square" name={false} theme="solarized" src={this.tokenStore.jsonAddresses.slice()} />
+            <ReactJson displayDataTypes={false}
+              style={{backgroundColor: 'none'}}
+              indentWidth="2"
+              iconStyle="square"
+              name={false}
+              theme="solarized"
+              src={this.tokenStore.jsonAddresses.slice()} />
             <div className="send-info">
               <div className="send-info-side">
                 <div className="send-info-i">
@@ -95,7 +116,7 @@ export class ThirdStep extends React.Component {
                 </div>
               </div>
             </div>
-            <Link className="button button_next" to='/4'>Next</Link>
+            <Link onClick={this.onNext} className="button button_next" to='/4'>Next</Link>
           </form>
         </div>
       </div>

src/components/4.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { inject, observer } from "mobx-react";
-import swal from 'sweetalert';
 
 
 const Transaction = (tx) => {
   const {name, hash, status} = tx.tx;
-  console.log(tx)
   let classname;
   switch(status){
     case 'mined':
@@ -25,7 +22,7 @@ const Transaction = (tx) => {
   return (
     <div className="table-tr">
       <div className={`table-td table-td_check-hash ${classname}`}>
-        TxHash: {hash} <br/> {name} <br/> Status: {status}
+        TxHash: <a target="_blank" href={`${tx.explorerUrl}/tx/${hash}`}>{hash}</a> <br/> {name} <br/> Status: {status}
       </div>
     </div>
   )
@@ -38,6 +35,7 @@ export class FourthStep extends React.Component {
     this.txStore = props.UiStore.txStore;
     this.tokenStore = props.UiStore.tokenStore;
     this.totalNumberTx = props.UiStore.tokenStore.totalNumberTx;
+    this.explorerUrl = props.UiStore.web3Store.explorerUrl;
     this.state = {
       txCount: Number(this.totalNumberTx)
     }
@@ -46,15 +44,21 @@ export class FourthStep extends React.Component {
     this.txStore.doSend()
   }
   render () {
+    let totalNumberOftx;
+    if(this.tokenStore.totalBalance > this.tokenStore.allowance){
+      totalNumberOftx = Number(this.totalNumberTx) + 1;
+    } else {
+      totalNumberOftx = Number(this.totalNumberTx)
+    }
+
     const txHashes = this.txStore.txs.map((tx, index) => {
-      console.log(tx)
-      return <Transaction key={index} tx={{...tx}}/>
+      return <Transaction key={index} tx={{...tx}} explorerUrl={this.explorerUrl}/>
     })
     let status;
-    if(this.txStore.txs.length === Number(this.totalNumberTx) + 1){
+    if(this.txStore.txs.length === totalNumberOftx){
       status =  "Transactions were sent out. Now wait until all transactions are mined."
     } else {
-      const txCount = Number(this.totalNumberTx) - this.txStore.txs.length + 1
+      const txCount = totalNumberOftx - this.txStore.txs.length
       status = `Please wait...until you sign ${txCount} transactions in Metamask`
     }
     return (

src/components/Welcome.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export class Welcome extends React.Component {
+  render () {
+    return (
+      <div className="container container_bg">
+        <div className="content">
+          <h1 className="title"><strong>Welcome to Token</strong> MultiSender</h1>
+          <p className="description">
+            Desc youtube video how to use multisender
+          </p>
+          <p>
+            Already have JSON or CSV prepared?
+          </p>
+          <Link className="button button_next" to='/1'>Proceed for JSON/CSV</Link>
+
+          <p>
+            Transaction Wizard. Build a list of addresses and balances using UI.
+          </p>
+          <Link className="button button_next" to='/1'>Proceed for Transaction Wizard</Link>
+        </div>
+      </div>
+    );
+  }
+}

src/components/index.js

@@ -5,3 +5,4 @@ export { ThirdStep } from './3';
 export { FourthStep } from './4';
 export { FifthStep } from './5';
 export { Retry } from './Retry';
+export { Welcome } from './Welcome';