add error handling

hadibigdely · Feb 28, 2018 · ee0df0a · ee0df0a
1 parent ab8e9e6
commit ee0df0a
Show file tree

Hide file tree

Showing 15 changed files with 303 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.env
+.env
+build
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
-Contracts deployed:
-Mainnet, Rinkeby, Kovan, Ropsten, Sokol, CORE-POA:
-ProxyStorage: 0xa5025faba6e70b84f74e9b1113e5f7f4e7f4859f
-Implementation: 0x97f76edb9d631590558b5c23f27a2a4711c0c964
+![Demo](demo.gif)  
+Contracts deployed:  
+Mainnet, Rinkeby, Kovan, Ropsten, Sokol, CORE-POA:  
+ProxyStorage: 0xa5025faba6e70b84f74e9b1113e5f7f4e7f4859f  
+Implementation: 0x97f76edb9d631590558b5c23f27a2a4711c0c964  
 
 Example JSON:
 ```json
@@ -12,6 +13,9 @@ Example JSON:
   {"0x00b5F428905DEA1a67940093fFeaCeee58cA91Ae":"1.049"},
   {"0x00fC79F38bAf0dE21E1fee5AC4648Bc885c1d774":"14546"}
 ]
+Proof of work:
+https://etherscan.io/tx/0x2fd09c03609f3f34a326983f1c685ea1bcb87dfcaabc12932dbe38d2c453f2c8
+https://kovan.etherscan.io/tx/0x755b84a8a61fd82c1410f6bbbb452c94ddf12fac5b1daaa1496671bcd6e21882
 
 ```
 # How to use

diff --git a/demo.gif b/demo.gif
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react-json-view": "^1.16.1",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
+    "react-spinners": "^0.2.6",
     "react-validation": "^3.0.7",
     "splash-screen": "^4.0.1",
     "store2": "^2.7.0",

diff --git a/src/assets/stylesheets/application.css b/src/assets/stylesheets/application.css
diff --git a/src/assets/stylesheets/application/table.scss b/src/assets/stylesheets/application/table.scss
@@ -56,6 +56,11 @@
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAMAAACpgK3LAAAAIVBMVEUevocevocevocevocevocevocevocevocevocevocevofSHwXKAAAACnRSTlMAPT5BUVLd6er1QK/QCAAAAFBJREFUeNq10jkOwDAIRFFvwZj7HzjlVzSYLlQMT4iGdqtu/txsnohdWFhhZxQ2f7Pl1q97TivWjKD3BlGMgdhXMVUsUSxRTBTLFNNarm/xApvEBXS2sERVAAAAAElFTkSuQmCC);
         background-size: 14px 10px;
       }
+
+      &_error {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZxT1WAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lOUFNUWWJjbHV2iYqLo6SpqqusrcLDxMXKy8zP29zj5+jr8vP4+fr8rwaczAAAASBJREFUKM9l0tlWwkAQRdFLABUZJEGNMqmACA5MBg3GhvP/X+VDE2I6963W7pXqrpR0TCkYLWJj4sU4KCkfbxBxSjTw/ltzRS6rZmbXO5zsgtRuDIB56Teq535/Zqtba+0fgM9Werb1BpC0Jals++17WZunA7AqSxoc2+QUYCiVImC9d3QORCV1AHPZdbRmgI5GwFRy9RkY6QPoqaBd4F0xUFdB60AsA5ypoFXAyAAXKqjFGLhSQe1n0ws5ai80tk9x1T7FDsHRu9ov0LHjmymv3zMg8qQhwKOjx8GrvAYOD5nefwGwKUuSnwC8Zj97DpD4tgrtYky7jUql0Z3aKkzPhom7YEmYtfE3edv4+aXeZrTNL7UkL5gsY2Pi5SQ40R9LbmAB1Sn/1gAAAABJRU5ErkJggg==);
+        background-size: 14px 14px;
+      }
     }
   }
 

diff --git a/src/components/1.js b/src/components/1.js
@@ -9,6 +9,8 @@ import { inject, observer } from "mobx-react";
 import swal from 'sweetalert';
 import generateElement from '../generateElement'
 import Example from './example'
+import { PulseLoader} from 'react-spinners';
+
 const ownInput = ({ error, isChanged, isUsed, ...props }) => (
   <div>
     {isChanged && isUsed && error}
@@ -44,19 +46,23 @@ export class FirstStep extends React.Component {
   constructor(props){
     super(props);
     this.tokenStore = props.UiStore.tokenStore;
+    this.web3Store = props.UiStore.web3Store;
     this.onTokenAddress = this.onTokenAddress.bind(this);
     this.onDecimalsChange = this.onDecimalsChange.bind(this);
     this.onJsonChange = this.onJsonChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.state ={
       json: []
     }
+  }
+  componentDidMount() {
+
   }
   async onTokenAddress(e){
     const address = e.target.value;
     if (Web3Utils.isAddress(address)) {
-      this.tokenStore.setTokenAddress(address);
-      const decimals = await this.tokenStore.getDecimals(address);
+        this.tokenStore.setTokenAddress(address);
+      // const decimals = await this.tokenStore.getDecimals(address);
     }
   }
   onDecimalsChange(e) {
@@ -82,9 +88,22 @@ export class FirstStep extends React.Component {
     this.props.history.push('/3')
   }
   render () {
+    if(this.tokenStore.errors.length > 0){
+      swal("Error!", this.tokenStore.errors.toString(), 'error')
+    }
+    if(this.web3Store.errors.length > 0){
+      swal("Error!", this.web3Store.errors.toString(), 'error')
+    }
     return (
       <div className="container container_bg">
+
         <div className="content">
+          <div className='sweet-loading'>
+          <PulseLoader
+            color={'#123abc'} 
+            loading={this.web3Store.loading} 
+            />
+          </div>
           <h1 className="title"><strong>Welcome to Token</strong> MultiSender</h1>
           <p className="description">
             Please provide Token Address, JSON file with addresses <br />
@@ -94,15 +113,16 @@ export class FirstStep extends React.Component {
             <div className="form-inline">
               <div className="form-inline-i form-inline-i_token-address">
                 <label htmlFor="token-address" className="label">Token Address</label>
-                <Input validations={[required, isAddress]} onChange={this.onTokenAddress} type="text" className="input" id="token-address"/>
+                <Input disabled={this.web3Store.loading} validations={[required, isAddress]} onChange={this.onTokenAddress} type="text" className="input" id="token-address"/>
               </div>
               <div className="form-inline-i form-inline-i_token-decimals">
                 <label htmlFor="token-decimals" className="label">Token Decimals</label>
-                <Input type="number" validations={[required]} onChange={this.onDecimalsChange} value={this.tokenStore.decimals} className="input" id="token-decimals"/>
+                <Input disabled={this.web3Store.loading} type="number" validations={[required]} onChange={this.onDecimalsChange} value={this.tokenStore.decimals} className="input" id="token-decimals"/>
               </div>
             </div>
             <label htmlFor="addresses-with-balances" className="label">Addresses with Balances</label>
             <Textarea 
+              disabled={this.web3Store.loading}
               data-gram 
               validations={[required, isJson]}
               placeholder={`Example: ${JSON.stringify(Example)}`}

diff --git a/src/components/3.js b/src/components/3.js
@@ -90,7 +90,7 @@ export class ThirdStep extends React.Component {
                 <div className="send-info-i">
                   <p>Instant Gas Price</p>
                   <p className="send-info-amount">
-                  {this.gasPriceStore.gasPrices.instant} gwei
+                  {this.gasPriceStore.gasPrices.fast} gwei
                   </p>
                 </div>
               </div>