minor fixes

src/App.css

@@ -227,7 +227,8 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .red-bg{
-  background-color: red;
+  /* background-color: red; */
+  background-color: #d73a49;
 }
 
 .blue-bg{
@@ -235,7 +236,8 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .red{
-  color: red;
+  /* color: red; */
+  color: #d73a49;
 }
 
 .green{

src/App.js

@@ -15,7 +15,7 @@ import About from './components/About';
 import Links from './components/Links';
 import SharePurchase from './components/SharePurchase';
 // import Transactions from './components/Transactions';
-// import Visualization from './components/Visualization';
+import Visualization from './components/Visualization';
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux';
 import { subscribe } from 'redux-subscriber';
@@ -59,13 +59,8 @@ class App extends Component {
     } else {
       web3 = 'undefined'
     }
-
-    this.state = {
-      transactions: []
-    }
   }
   // TODO: get rid of redundant web3 === 'undefined' checks in componentWill/DidMount
-  // STATUS: kind of done
   componentWillMount() {
     //console.log('props', this.props);
     if(web3 === 'undefined') {
@@ -228,37 +223,39 @@ class App extends Component {
 
   getInvestInfo = () => {
     var symbol = this.props.exchange.investToken.value;
-    var exchange = this.symbolToExchangeContract(symbol);
-    var token = this.symbolToTokenContract(symbol);
-    var exchangeAddress = this.symbolToExchangeAddress(symbol);
+    if (symbol != "ETH") {
+      var exchange = this.symbolToExchangeContract(symbol);
+      var token = this.symbolToTokenContract(symbol);
+      var exchangeAddress = this.symbolToExchangeAddress(symbol);
 
-    exchange.methods.ethPool().call().then((result, error) => {
-      this.props.setInvestEthPool(result);
-    });
+      exchange.methods.ethPool().call().then((result, error) => {
+        this.props.setInvestEthPool(result);
+      });
 
-    exchange.methods.tokenPool().call().then((result, error) => {
-      this.props.setInvestTokenPool(result);
-    });
+      exchange.methods.tokenPool().call().then((result, error) => {
+        this.props.setInvestTokenPool(result);
+      });
 
-    exchange.methods.totalShares().call().then((result, error) => {
-      this.props.setInvestShares(result);
-    });
+      exchange.methods.totalShares().call().then((result, error) => {
+        this.props.setInvestShares(result);
+      });
 
-    exchange.methods.getShares(this.props.web3Store.currentMaskAddress).call().then((result, error) => {
-      this.props.setUserShares(result);
-    });
+      exchange.methods.getShares(this.props.web3Store.currentMaskAddress).call().then((result, error) => {
+        this.props.setUserShares(result);
+      });
 
-    token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
-      this.props.setInvestTokenBalance(balance);
-    });
+      token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, result) => {
+        this.props.setInvestTokenBalance(result);
+      });
 
-    token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call((error, balance) => {
-      this.props.setInvestTokenAllowance(balance);
-    });
+      token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call((error, result) => {
+        this.props.setInvestTokenAllowance(result);
+      });
 
-    this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
-      this.props.setInvestEthBalance(balance);
-    });
+      this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, result) => {
+        this.props.setInvestEthBalance(result);
+      });
+    }
   }
 
   getExchangeState = (type) => {
@@ -268,12 +265,10 @@ class App extends Component {
 
       exchange.methods.ethPool().call().then((result, error) => {
         this.props.setEthPool1(result);
-        // console.log('Input Market ETH: ' + result);
       });
 
       exchange.methods.tokenPool().call().then((result, error) => {
         this.props.setTokenPool1(result);
-        // console.log('Input Market Tokens: ' + result);
       });
 
     } else if (type === 'output') {
@@ -281,26 +276,22 @@ class App extends Component {
 
         exchange.methods.ethPool().call().then((result, error) => {
           this.props.setEthPool2(result);
-          // console.log('Output Market ETH: ' + result);
         });
 
         exchange.methods.tokenPool().call().then((result, error) => {
           this.props.setTokenPool2(result);
-          // console.log('Output Market Tokens: ' + result);
         });
     }
   }
 
   getEthBalance = (type) => {
     if (type === 'input') {
-      this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
-        this.props.setInputBalance(balance);
-        // console.log('ETH Balance: ' + balance);
+      this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, result) => {
+        this.props.setInputBalance(result);
       });
     } else if (type === 'output') {
-        this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
-          this.props.setOutputBalance(balance);
-          // console.log('ETH Balance: ' + balance);
+        this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, result) => {
+          this.props.setOutputBalance(result);
         });
     }
   }
@@ -309,15 +300,13 @@ class App extends Component {
     var token;
     if (type === 'input') {
       token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
-      token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
-        this.props.setInputBalance(balance);
-        // console.log(this.props.exchange.inputToken.value + ' Balance: ' + balance);
+      token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, result) => {
+        this.props.setInputBalance(result);
       });
     } else if (type === 'output') {
         token = this.symbolToTokenContract(this.props.exchange.outputToken.value);
-        token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
-          this.props.setOutputBalance(balance);
-          // console.log(this.props.exchange.outputToken.value + ' Balance: ' + balance);
+        token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, result) => {
+          this.props.setOutputBalance(result);
         });
     }
   }

src/components/Invest.js

@@ -24,6 +24,7 @@ class Invest extends Component {
       this.getInvestExchangeState();
       this.getInvestBalance();
     } else {
+      await this.props.setInvestToken(selected);
       this.props.setInvestTokenPool(0);
       this.props.setInvestEthPool(0);
       this.props.setInvestTokenBalance(0);
@@ -35,9 +36,11 @@ class Invest extends Component {
   }
 
   onInputChange = async (event) => {
-    var inputValue = event.target.value;
-    await this.props.setInvestSharesInput(inputValue);
-    this.getInvestOutput();
+    if (this.props.exchange.investToken.value != "ETH") {
+      await this.props.setInvestSharesInput(event.target.value);
+      this.getInvestOutput();
+      console.log('investToken', this.props.exchange.investToken.value)
+    } 
   }
 
   toggleCheck = () => {

src/components/SharePurchase.js

@@ -77,10 +77,13 @@ class Purchase extends Component {
   }
 
   render() {
-  if (this.props.exchange.investToken.value == "ETH") {
-    return (<a className="swap grey-bg hidden border pa2"></a>)
-  } else if(this.props.web3Store.investToggle == true && this.props.exchange.investSharesInput > 0) {
-      if(this.props.exchange.investTokenAllowance == 0) {
+    if(this.props.web3Store.investToggle == true && this.props.exchange.investSharesInput > 0) {
+      // Doesn't work
+      if (this.props.exchange.investToken.value == "ETH") {
+        <div className="swap border pa2 red-bg">
+          <b><p>Please select a token other than ETH.</p></b>
+        </div>
+      } else if(this.props.exchange.investTokenAllowance == 0) {
         return (
           <div className="swap border pa2 blue-bg" role="button" onClick={() => {this.approveInvestAllowance()}}>
             <b><p>Click to approve {this.props.exchange.investToken.value} spending</p></b>
@@ -90,7 +93,7 @@ class Purchase extends Component {
           if(this.props.exchange.investEthRequired > this.props.exchange.investEthBalance) {
             return (
               <div className="swap border pa2 red-bg">
-                <b><p>You can't afford to invest {(this.props.exchange.investEthRequired/10**18).toFixed(4)} ETH and {(this.props.exchange.investTokensRequired/10**18).toFixed(4)} {this.props.exchange.investToken.value} for {this.props.exchange.investSharesInput} shares</p></b>
+                <b><p>😭 You can't afford to invest {(this.props.exchange.investEthRequired/10**18).toFixed(4)} ETH and {(this.props.exchange.investTokensRequired/10**18).toFixed(4)} {this.props.exchange.investToken.value} for {this.props.exchange.investSharesInput} shares 😭</p></b>
               </div>
             )
           } else {