improvements

src/App.css

@@ -194,8 +194,6 @@ input[type=number]::-webkit-outer-spin-button {
   color: white;
   height: 48px;
   transition: height .3s ease;
-  background-color: #27AE60;
-  background-color: #2F80ED;
   cursor: pointer;
   font-family: "Inter UI", sans-serif;
 }
@@ -228,6 +226,14 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #ffffff;
 }
 
+.red-bg{
+  background-color: red;
+}
+
+.blue-bg{
+  background-color: #2F80ED;
+}
+
 .red{
   color: red;
 }

src/App.js

@@ -47,7 +47,6 @@ import {  setInputBalance,
           setInvestTokenBalance,
           setInvestEthBalance } from './actions/exchange-actions';
 import './App.css';
-import cookie from 'react-cookies'
 import scrollToComponent from 'react-scroll-to-component';
 
 var web3;
@@ -432,8 +431,10 @@ class App extends Component {
           symbolToExchangeAddress={this.symbolToExchangeAddress}
         />
         <SharePurchase
+          symbolToTokenContract={this.symbolToTokenContract}
           symbolToExchangeContract={this.symbolToExchangeContract}
           symbolToTokenAddress={this.symbolToTokenAddress}
+          symbolToExchangeAddress={this.symbolToExchangeAddress}
         />
         <About toggleAbout={this.toggleAbout} location={this}/>
         {//<Transactions transactions={this.state.transactions} interaction={this.props.web3Store.interaction} />

src/actions/exchange-actions.js

@@ -57,7 +57,7 @@ export const setEthPool2 = (ethPool2) => ({
 });
 
 export const setTokenPool1 = (tokenPool1) => ({
-  type: SET_TOKEN_POOL_2,
+  type: SET_TOKEN_POOL_1,
   tokenPool1
 });
 

src/actions/web3-actions.js

@@ -79,7 +79,6 @@ export const setBlockTimestamp = () => {
   return async (dispatch, getState) => {
     const { web3 } = getState().web3Store;
     await web3.eth.getBlock('latest', (error, blockInfo) => {
-      console.log(blockInfo.timestamp, 'BLOCKTIMESTAMP');
       dispatch({
         type: SET_BLOCK_TIMESTAMP,
         timestamp: blockInfo.timestamp

src/components/Invest.js

@@ -113,7 +113,6 @@ class Invest extends Component {
     })  //Transaction Submitted to blockchain
     .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)})  //Transaction Mined
     .on('error', console.error);
-
   }
 
   render () {
@@ -153,11 +152,6 @@ class Invest extends Component {
             <p>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(this.props.exchange.investEthBalance/10**18).toFixed(5)} ETH </p>
             <p> {(this.props.exchange.investTokenBalance/10**18).toFixed(5)} {this.props.exchange.investToken.value} </p>
           </div>
-          <div className="investValue border pa2 grey-bg connection">
-            <p> Allowance: </p>
-            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(this.props.exchange.investTokenAllowance/10**18).toFixed(5)} {this.props.exchange.investToken.value} </p>
-            <a className="f-a"  onClick={() => this.approveInvestAllowance()}>Approve ⭞</a>
-          </div>
         </section>
 
       )

src/components/Links.js

@@ -14,7 +14,6 @@ class Links extends Component {
           </a>
         </section>
         <Invest
-          toggled={this.props.web3Store.investToggle}
           token={this.props.exchange.investToken}
           symbolToTokenContract={this.props.symbolToTokenContract}
           symbolToExchangeContract={this.props.symbolToExchangeContract}

src/components/Purchase.js

@@ -107,7 +107,7 @@ class Purchase extends Component {
   render() {
     if (this.props.web3Store.interaction === 'input') {
         return (
-          <a className="swap border pa2" role="button" onClick={() => {this.purchaseTokens()}}>
+          <a className="swap border pa2 blue-bg" role="button" onClick={() => {this.purchaseTokens()}}>
             <b>{"I want to swap " + this.props.exchange.inputValue + " " + this.props.exchange.inputToken.value + " for " + (this.props.exchange.outputValue/10**18).toFixed(4) + " " + this.props.exchange.outputToken.value}</b>
           </a>
         )

src/components/SharePurchase.js

@@ -14,7 +14,6 @@ class Purchase extends Component {
     }
   }
 
-
   buyShares = () => {
     var exchange = this.props.symbolToExchangeContract(this.props.exchange.investToken.value);
     var minShares = 1;
@@ -61,31 +60,62 @@ class Purchase extends Component {
       .on('error', console.error);
   }
 
-  buyOrSell = (input) => {
-    if(input) {
-      return 'buy'
-    } else {
-      return 'sell'
-    }
+  approveInvestAllowance = () => {
+    var symbol = this.props.exchange.investToken.value;
+    var token = this.props.symbolToTokenContract(symbol);
+    var exchangeAddress = this.props.symbolToExchangeAddress(symbol);
+    var amount = this.props.web3Store.web3.utils.toWei('100000');
+    var gasCost = this.props.web3Store.web3.utils.toWei('25', 'gwei')
+    token.methods.approve(exchangeAddress, amount).send({from: this.props.web3Store.currentMaskAddress, gasPrice: gasCost})
+    .on('transactionHash', console.log('Transaction Hash created'))
+    .on('receipt', (receipt) => {
+      console.log(receipt)
+      this.props.setAllowanceApprovalState(true);
+    })  //Transaction Submitted to blockchain
+    .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)})  //Transaction Mined
+    .on('error', console.error);
   }
 
   render() {
-    if (this.props.exchange.investEthRequired > 0) {
-      // fix later
-      if (!this.props.exchange.investChecked && 1 === 0) {
+  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) {
+        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>
+          </div>
+        )
+      } else if(this.props.exchange.investChecked) {
+          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>
+              </div>
+            )
+          } else {
             return (
-          <p className="swap border pa2">
-            <b>Not enough shares!</b>
-          </p>
+              <a className="swap border pa2 blue-bg" role="button" onClick={() => {this.buyOrSellShares()}}>
+                <b>I want 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</b>
+              </a>
             )
+          }
       } else {
+          if(this.props.exchange.investSharesInput > this.props.exchange.userShares) {
             return (
-            <a className="swap border pa2" role="button" onClick={() => {this.buyOrSellShares()}}>
-              <b>I want to {this.buyOrSell(this.props.exchange.investChecked)} {this.props.exchange.investSharesInput} shares for {(this.props.exchange.investEthRequired/10**18).toFixed(4)} ETH and {(this.props.exchange.investTokensRequired/10**18).toFixed(4)} {this.props.exchange.investToken.value}</b>
+              <a className="swap border pa2 red-bg">
+                <b>You do not have {this.props.exchange.investSharesInput} shares.</b>
+              </a>
+            )
+          } else {
+            return (
+              <a className="swap border pa2 blue-bg" role="button" onClick={() => {this.buyOrSellShares()}}>
+                <b>{this.props.exchange.investSharesInput > this.props.exchange.userShares} I want to divest {(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</b>
               </a>
             )
           }
 
+        }
       } else {
       return (<a className="swap grey-bg hidden border pa2"></a>)
     }

src/reducers/exchange-reducer.js

@@ -32,8 +32,6 @@ export default (state = {}, action) => {
     outputBalance,
     inputToken,
     outputToken,
-    invariant1,
-    invariant2,
     ethPool1,
     ethPool2,
     tokenPool1,
@@ -44,7 +42,6 @@ export default (state = {}, action) => {
     rate,
     fee,
     investToken,
-    investInvariant,
     investEthPool,
     investTokenPool,
     investShares,

src/reducers/exchangeContract-reducer.js

@@ -3,7 +3,7 @@ import {
 } from '../constants'
 
 export default (state = {}, action) => {
-  const { contract, payload } = action;
+  const { payload } = action;
   switch(action.type) {
     case EXCHANGE_CONTRACT_READY:
       return Object.assign({}, state,  payload )

src/reducers/tokenContract-reducer.js

@@ -3,7 +3,7 @@ import {
 } from '../constants';
 
 export default (state = {}, action) => {
-  const { contract, payload } = action;
+  const { payload } = action;
   switch(action.type) {
     case TOKEN_CONTRACT_READY:
       return Object.assign({}, state,  payload )