load token balances

TheSpecialNoob · Mar 24, 2018 · b20b57f · b20b57f
1 parent 9e53b48
commit b20b57f
Show file tree

Hide file tree

Showing 17 changed files with 185 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "react-radio-group": "^3.0.2",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
+    "react-select": "^1.2.1",
     "react-spinners": "^0.2.6",
     "react-validation": "^3.0.7",
     "splash-screen": "^4.0.1",

diff --git a/public/illustration.png b/public/illustration.png
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <meta property="og:title" content="Token MultiSender" />
+    <meta property="og:url" content="https://poanetwork.github.io/multisender" />
+    <meta property="og:image" content="%PUBLIC_URL%/illustration.png" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -19,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Token MultiSender</title>
   </head>
   <body>
     <noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Token MultiSender",
+  "name": "Save on tx fees with ERC20 MultiSender",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/assets/images/socials.png b/src/assets/images/socials.png
diff --git a/src/assets/images/[email protected] b/src/assets/images/[email protected]
diff --git a/src/assets/stylesheets/application.css b/src/assets/stylesheets/application.css
diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss
@@ -9,3 +9,4 @@
 @import './application/table';
 @import './application/send-info';
 @import './application/transactions';
+@import './application/socials';
diff --git a/src/assets/stylesheets/application/controls.scss b/src/assets/stylesheets/application/controls.scss
@@ -43,15 +43,15 @@
 
   &-inline {
     @extend %flex-between;
-    align-items: flex-end;
+    align-items: flex-start;
 
     &-i {
       &_token-address {
-        width: 65%;
+        width: 80%;
       }
 
       &_token-decimals {
-        width: 30%;
+        width: 15%;
       }
 
       &_balance {
@@ -163,3 +163,19 @@
     background-position: center center;
   }
 }
+// .Select-option,.Select-control, .Select.Select--single.has-value.is-focused.is-clearable > .Select-control, .Select--single > .Select-value  {
+//   background-color: #213443;
+//   color: #fff;
+//   border: 1px solid #95d5ff;
+//   // border: 1px solid #95d5ff;
+// }
+// .Select-placeholder, .Select--single > .Select-control .Select-value {
+//   color: #fff;
+// }
+// .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
+//   color: #fff;
+// }
+
+#token-address {
+  color: #fff;
+}
diff --git a/src/assets/stylesheets/application/socials.scss b/src/assets/stylesheets/application/socials.scss
@@ -0,0 +1,72 @@
+.socials {
+  font-size: 0;
+
+  &-i {
+    transition: 0.3s background-color;
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: fade-out(#fff, 0.8);
+
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
+
+    &:hover {
+      background-color: fade-out(#fff, 0.6);
+    }
+
+    &:before {
+      @include image-2x('../images/[email protected]', 16px, 69px);
+      transform: translate(-50%, -50%);
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      background-image: url(../images/socials.png);
+    }
+
+    &_github {
+      &:before {
+        width: 16px;
+        height: 16px;
+        background-position: 0 0;
+      }
+    }
+
+    &_oracles {
+      &:before {
+        width: 16px;
+        height: 14px;
+        background-position: 0 -16px;
+      }
+    }
+
+    &_reddit {
+      &:before {
+        width: 15px;
+        height: 13px;
+        background-position: 0 -30px;
+      }
+    }
+
+    &_telegram {
+      &:before {
+        width: 16px;
+        height: 14px;
+        background-position: 0 -43px;
+      }
+    }
+
+    &_twitter {
+      &:before {
+        width: 15px;
+        height: 12px;
+        background-position: 0 -57px;
+      }
+    }
+  }
+}
diff --git a/src/assets/stylesheets/react-select.min.css b/src/assets/stylesheets/react-select.min.css
diff --git a/src/components/1.js b/src/components/1.js
@@ -13,6 +13,9 @@ import ExampleCSV from './example.csv'
 import { PulseLoader} from 'react-spinners';
 import {RadioGroup, Radio} from 'react-radio-group';
 import csvtojson from 'csvtojson'
+import Select from 'react-select'
+import '../assets/stylesheets/react-select.min.css';
+
 
 const ownInput = ({ error, isChanged, isUsed, ...props }) => (
   <div>
@@ -57,15 +60,21 @@ export class FirstStep extends React.Component {
     this.state ={
       json: [],
       format: 'json',
-      placeholder: JSON.stringify(Example)
+      placeholder: JSON.stringify(Example),
+      tokenAddress: {label: '', value: null}
     }
     this.onSelectFormat = this.onSelectFormat.bind(this)
     this.onParse = this.onParse.bind(this)
   }
   async onTokenAddress(e){
-    const address = e.target.value;
+    if(!e){
+      this.setState({tokenAddress: {label: '', value: ''}})
+      return
+    }
+    const address = e.value;
     if (Web3Utils.isAddress(address)) {
         this.tokenStore.setTokenAddress(address);
+        this.setState({tokenAddress: {label: e.label, value: e.value}})
     }
   }
   onSelectFormat(newFormat){
@@ -159,17 +168,29 @@ export class FirstStep extends React.Component {
           </div>
           <h1 className="title"><strong>Welcome to Token</strong> MultiSender</h1>
           <p className="description">
-            Please provide Token Address, JSON file with addresses <br />
-            This Dapp supports Mainnet, POA-Core, POA-sokol, Ropsten, Rinkeby, Kovan
+            Please provide Token Address, JSON/CSV file with addresses <br />
+            This Dapp supports Mainnet, POA-Core, POA-sokol, Ropsten, Rinkeby, Kovan <br/>
+            Please wait while all your token balances are loaded
           </p>
           <Form className="form" onSubmit={this.onSubmit}>
             <div className="form-inline">
               <div className="form-inline-i form-inline-i_token-address">
                 <label htmlFor="token-address" className="label">Token Address</label>
-                <Input disabled={this.web3Store.loading} validations={[required, isAddress]} onChange={this.onTokenAddress} type="text" className="input" id="token-address"/>
+                <Select.Creatable
+
+              isLoading={this.web3Store.loading}
+              name="form-field-name"
+              id="token-address"
+              value={this.state.tokenAddress}
+              onChange={this.onTokenAddress}
+              loadingPlaceholder="Loading your token addresses..."
+              placeholder="Please select a token or input the address"
+              options={this.web3Store.userTokens.slice()}
+            />
+
               </div>
               <div className="form-inline-i form-inline-i_token-decimals">
-                <label htmlFor="token-decimals" className="label">Token Decimals</label>
+                <label htmlFor="token-decimals" className="label">Decimals</label>
                 <Input disabled={this.web3Store.loading} type="number" validations={[required]} onChange={this.onDecimalsChange} value={this.tokenStore.decimals} className="input" id="token-decimals"/>
               </div>
             </div>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -6,12 +6,16 @@ export const Header = () => (
     <div className="container">
       <a href="#" className="header-logo"></a>
       <form className="form form_header">
+
         <label htmlFor="network" className="label">MultiSender Address: {process.env.REACT_APP_PROXY_MULTISENDER}</label>
         {/* <select id="network" className="select">
           <option value="">YourTokens</option>
           <option value="">YourTokens 1</option>
           <option value="">YourTokens 2</option>
         </select> */}
+        <div className="socials">
+        <a href="https://github.com/poanetwork/multisender/issues" target="_blank" className="socials-i socials-i_github"></a>
+      </div>
       </form>
     </div>
   </header>

diff --git a/src/components/example.csv b/src/components/example.csv
@@ -0,0 +1,4 @@
+0xCBA5018De6b2b6F89d84A1F5A68953f07554765e,12
+0xa6Bf70bd230867c870eF13631D7EFf1AE8Ab85c9,1123.45645
+0x00b5F428905DEA1a67940093fFeaCeee58cA91Ae,1.049
+0x00fC79F38bAf0dE21E1fee5AC4648Bc885c1d774,14546
diff --git a/src/getWeb3.js b/src/getWeb3.js
@@ -11,31 +11,37 @@ let getWeb3 = () => {
         // Use Mist/MetaMask's provider.
         web3 = new window.Web3(web3.currentProvider)
         web3.version.getNetwork((err, netId) => {
-          let netIdName;
+          let netIdName, trustApiName;
           console.log('netId', netId);
           switch (netId) {
             case "1":
               netIdName = 'Foundation'
+              trustApiName = 'api'
               console.log('This is Foundation', netId)
               break;
             case "3":
               netIdName = 'Ropsten'
+              trustApiName = 'ropsten'
               console.log('This is Ropsten', netId)
               break;
             case "4":
               netIdName = 'Rinkeby'
+              trustApiName = 'rinkeby'
               console.log('This is Rinkeby', netId)
               break;
             case "42":
               netIdName = 'Kovan'
+              trustApiName = 'kovan'
               console.log('This is Kovan', netId)
               break;
             case "99":
               netIdName = 'POA Core'
+              trustApiName = 'poa'
               console.log('This is Core', netId)
               break;
             case "77":
               netIdName = 'POA Sokol'
+              trustApiName = 'https://trust-sokol.herokuapp.com'
               console.log('This is Sokol', netId)
               break;
             default:
@@ -52,7 +58,8 @@ let getWeb3 = () => {
             netIdName,
             netId,
             injectedWeb3: true,
-            defaultAccount
+            defaultAccount,
+            trustApiName
           }
           resolve(results)
         })