random fixes and temporarily remove price graph

README.md

-# Uniswap - a trustless, decentralized exchange for Ether and ERC20 tokens
+# Uniswap - a decentralized exchange for ERC20 tokens
 
-Uniswap exchange uses a "Market Maker" mechanism, where liquidity providers store a reserve of ETH and ERC20 tokens within an Ethereum smart contract. An exchange rate is set between the tokens and ETH based on the relative availibility of each token. Arbitrage ensures that the rate will be the same as on other exchanges. Buyers who send Token 1 to the smart contract will receive back Token 2 at the current rate. A small fee is paid from the buyer to the liquidity providers to incentive participation.
+Read the Whitepaper: https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig
 
-A full writeup with math and whatnot will be written soon. Until then, here is some more info on Market Makers:
+Visit the website: https://uniswap.io/
 
-https://www.reddit.com/r/ethereum/comments/55m04x/lets_run_onchain_decentralized_exchanges_the_way/
-http://vitalik.ca/general/2017/06/22/marketmakers.html
+Read the smart contracts: https://github.com/uniswap
 
-Please reach out if you would like to get involved or support the project.
-
-Demo: https://uniswap.io/
-Email: hayden@uniswap.io
-ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078
+Send me an email: hayden@uniswap.io
+<!-- ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078 -->

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "d3": "^4.13.0",
+    "npm": "^6.0.0",
     "react": "^16.2.0",
     "react-cookies": "^0.1.0",
     "react-dom": "^16.2.0",

src/App.css

@@ -8,6 +8,7 @@ body{
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 .dim input{
@@ -61,12 +62,22 @@ a:hover{
   align-items: center;
   /* color: #27AE60; */
   flex: 1;
+  z-index: 2;
   font-family: "Inter UI", sans-serif;
 }
 
 .connection a{
   /* text-decoration: none; */
   /* color: #27AE60; */
+  padding-right: 2em;
+}
+
+.userBalance{
+  overflow-y: hidden;
+  overflow-x: scroll;
+  white-space: nowrap;
+  z-index: 10;
+  padding-right: 2em;
 }
 
 .order {

src/App.js

@@ -16,15 +16,15 @@ import Links from './components/Links';
 import SharePurchase from './components/SharePurchase';
 //import Transactions from './components/Transactions';
 // d3
-import Visualization from './components/Visualization';
+// import Visualization from './components/Visualization';
 // enter redux
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux';
 import { subscribe } from 'redux-subscriber';
 // redux actions
 // import { initializeGlobalWeb3 } from './actions/global-actions';
-import { uniExchangeContractReady, swtExchangeContractReady, exchangeContractReady } from './actions/exchangeContract-actions';
-import { uniTokenContractReady, swtTokenContractReady, tokenContractReady } from './actions/tokenContract-actions';
+import { exchangeContractReady } from './actions/exchangeContract-actions';
+import { tokenContractReady } from './actions/tokenContract-actions';
 import { initializeGlobalWeb3, setWeb3ConnectionStatus, setCurrentMaskAddress, metamaskLocked, metamaskUnlocked, setInteractionState, factoryContractReady, toggleAbout, toggleInvest } from './actions/web3-actions';
 import {  setInputBalance,
           setOutputBalance,
@@ -39,6 +39,7 @@ import {  setInputBalance,
           setInvestInvariant,
           setInvestEthPool,
           setInvestTokenPool,
+          setInvestTokenAllowance,
           setInvestShares,
           setUserShares,
           setInvestTokenBalance,
@@ -245,6 +246,7 @@ class App extends Component {
   getInvestInfo = () => {
     var exchange = this.symbolToExchangeContract(this.props.exchange.investToken.value);
     var token = this.symbolToTokenContract(this.props.exchange.investToken.value);
+    var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.investToken.value)
 
     exchange.methods.invariant().call().then((result, error) => {
       this.props.setInvestInvariant(result);
@@ -270,6 +272,10 @@ class App extends Component {
       this.props.setInvestTokenBalance(balance);
     });
 
+    token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call((error, balance) => {
+      this.props.setInvestTokenAllowance(balance);
+    });
+
     this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
       this.props.setInvestEthBalance(balance);
     });
@@ -463,12 +469,13 @@ class App extends Component {
           symbolToExchangeContract={this.symbolToExchangeContract}
           symbolToTokenAddress={this.symbolToTokenAddress}
         />
-        <Visualization />
+        {/* <Visualization /> */}
         <Links
           toggleInvest={this.toggleInvest}
           location={this}
           symbolToTokenContract={this.symbolToTokenContract}
           symbolToExchangeContract={this.symbolToExchangeContract}
+          symbolToExchangeAddress={this.symbolToExchangeAddress}
         />
         <SharePurchase
           symbolToExchangeContract={this.symbolToExchangeContract}
@@ -497,10 +504,6 @@ const mapDispatchToProps = (dispatch) => {
     metamaskUnlocked,
     setInteractionState,
     factoryContractReady,
-    uniExchangeContractReady,
-    swtExchangeContractReady,
-    uniTokenContractReady,
-    swtTokenContractReady,
     setInputBalance,
     setOutputBalance,
     setInvariant1,
@@ -518,6 +521,7 @@ const mapDispatchToProps = (dispatch) => {
     setInvestToken,
     setInvestEthPool,
     setInvestTokenPool,
+    setInvestTokenAllowance,
     setInvestInvariant,
     setInvestShares,
     setUserShares,

src/actions/exchange-actions.js

@@ -22,6 +22,7 @@ import {
   SET_USER_SHARES,
   SET_INVEST_TOKEN_BALANCE,
   SET_INVEST_ETH_BALANCE,
+  SET_INVEST_TOKEN_ALLOWANCE,
   SET_INVEST_SHARES_INPUT,
   SET_INVEST_ETH_REQUIRED,
   SET_INVEST_TOKENS_REQUIRED,
@@ -143,6 +144,11 @@ export const setInvestEthBalance = (investEthBalance) => ({
   investEthBalance
 });
 
+export const setInvestTokenAllowance = (investTokenAllowance) => ({
+  type: SET_INVEST_TOKEN_ALLOWANCE,
+  investTokenAllowance
+});
+
 export const setInvestSharesInput = (investSharesInput) => ({
   type: SET_INVEST_SHARES_INPUT,
   investSharesInput

src/actions/exchangeContract-actions.js

-import { 
-  UNI_EXCHANGE_CONTRACT_READY,
-  SWT_EXCHANGE_CONTRACT_READY,
+import {
   EXCHANGE_CONTRACT_READY
 } from '../constants';
 
-export const uniExchangeContractReady = (contract) => ({
-  type: UNI_EXCHANGE_CONTRACT_READY,
-  contract
-});
-
-export const swtExchangeContractReady = (contract) => ({
-  type: SWT_EXCHANGE_CONTRACT_READY,
-  contract
-});
-// definitely needs to be redux thunk 
+// definitely needs to be redux thunk
 export const exchangeContractReady = (symbol, exchangeContract) => ({
   type: EXCHANGE_CONTRACT_READY,
-  payload: { [symbol]: exchangeContract } 
+  payload: { [symbol]: exchangeContract }
 });
-
-

src/actions/tokenContract-actions.js

 import {
-  UNI_TOKEN_CONTRACT_READY,
-  SWT_TOKEN_CONTRACT_READY,
   TOKEN_CONTRACT_READY
 } from '../constants';
 
-export const uniTokenContractReady = (contract) => ({
-  type: UNI_TOKEN_CONTRACT_READY,
-  contract
-});
-
-export const swtTokenContractReady = (contract) => ({
-  type: SWT_TOKEN_CONTRACT_READY,
-  contract
-});
-// again, needs to be redux thunk 
+// again, needs to be redux thunk
 export const tokenContractReady = (symbol, tokenContract) => ({
   type: TOKEN_CONTRACT_READY,
   payload: { [symbol]: tokenContract }
-});
+});
\ No newline at end of file

src/components/AboutMessage.js

@@ -4,8 +4,8 @@ function AboutMessage ({ toggled }) {
   if (toggled === true) {
     return (
       <section className="expand grey-bg border pa2">
-        <p>Uniswap is an automated market maker exchange capable of both ETH-to-ERC20 and ERC20-to-ERC20 trades. Anyone can become a liquidity provider, and invest in the liquidity pool of an ERC20 token. This allows other users to trade that token for other tokens at an exchange rate based on their relative availibility. When a token trade is executed, a small fee is payed to the liquidity providers that enabled the transaction, proportional to their investment.</p>
-        <p>A full writeup can be found here: <a href="https://hackmd.io/Tlf08KuPTbqsHLKk5hzAvA">Uniswap Project Overview</a></p>
+        <p>Read the: <a href="https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig#Uniswap-Whitepaper-%F0%9F%A6%84">Uniswap Whitepaper</a></p>
+        <p>Uniswap is an automated market maker for exchanging ERC20 tokens. Anyone can become a liquidity provider, and invest in the liquidity pool of an ERC20 token. This allows other users to trade that token for other tokens at an exchange rate based on their relative availibility. When a token trade is executed, a small fee is payed to the liquidity providers that enabled the transaction.</p>
         <p>Please reach out if you would like to get involved or support the project.</p>
         <p><span role="img" aria-label="GitHub">⟪⟫</span> <a href="https://github.com/uniswap">github.com/uniswap</a></p>
         <p><span role="img" aria-label="Email">📧 </span><a href="mailto:hayden@uniswap.io">hayden@uniswap.io</a></p>

src/components/ConnectionHelper.js

@@ -5,22 +5,24 @@ function ConnectionHelper(props) {
   if (!props.metamask) {
     return (
       <div className="grey-bg connection border pa2">
-        <p>Welcome! Uniswap is a decentralized exhange for ETH and ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a">How it works ↘</a><br /><br />
+        <p>Welcome! Uniswap is a decentralized exhange for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a">How it works ↘</a><br /><br />
         <b>To get started, please install <a href="https://metamask.io/">Metamask</a>.</b></p>
       </div>
     )
   } else if (props.web3Store.connected && props.web3Store.interaction === 'disconnected') {
     return (
       <div className="grey-bg connection border pa2">
-        <p>Welcome! Uniswap is a decentralized exchange for ETH and ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a" >How it works ↘</a><br /><br />
-        Looks like you aren't connected. <b>Please switch to the correct network.</b></p>
+        <p>
+          Welcome! Uniswap is a decentralized exchange for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a" >How it works ↘</a><br /><br />
+          It looks like you aren't connected. <b>Please switch to the Rinkeby testnet.</b>
+        </p>
       </div>
     )
   } else if (props.web3Store.metamaskLocked) {
     return (
       <div className="grey-bg connection border pa2">
         <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a" >How it works ↘</a><br /><br />
-        Looks like you aren't connected. <b>Please unlock Metamask to continue.</b></p>
+        It looks like you aren't connected. <b>Please unlock Metamask to continue.</b></p>
       </div>
     )
   } else if (props.web3Store.interaction === "error1") {
@@ -38,51 +40,35 @@ function ConnectionHelper(props) {
   } else if (props.exchange.inputValue > props.exchange.inputBalance/10**18 && props.exchange.inputToken.value === 'ETH') {
     return (
       <div className="grey-bg red connection border pa2">
-        <p>This account doesn't have enough balance to make this transaction! Get more {props.exchange.inputToken.value} with the <a target="_blank" rel="noopener noreferrer" href="https://faucet.rinkeby.io/">Rinkeby Faucet.</a></p>
+        <p>You don't have enough ETH to make this transaction! Get more at the <a target="_blank" rel="noopener noreferrer" href="https://faucet.rinkeby.io/">Rinkeby Faucet.</a></p>
       </div>
     )
   } else if (!props.exchange.allowanceApproved &&  props.web3Store.exchangeType === "Token to Token") {
     return (
-      <div className="grey-bg connection border pa2">
-        <p>Our smart contract has to be approved by your address to be able to swap this token for other tokens.<br /> We set a high transfer limit for the demo (<a onClick={() => {props.toggleAbout()}} className="f-a">Why?</a>).</p>
+      <div className="grey-bg red connection border pa2">
+        <p>Uniswap has to be approved by your address to trade {props.exchange.inputToken.value}.</p>
+        <p>→</p>
         <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
       </div>
     )
   } else if (!props.exchange.allowanceApproved && props.web3Store.exchangeType === "Token to ETH") {
     return (
-      <div className="grey-bg connection border pa2">
-        <p>Our smart contract has to be approved by your address to be able to swap this token for ETH.<br /> We set a high transfer limit for the demo (<a onClick={() => {props.toggleAbout()}} className="f-a">Why?</a>).</p>
+      <div className="grey-bg red connection border pa2">
+        <p>Uniswap has to be approved by your address to trade {props.exchange.inputToken.value}.</p>
+        <p>→</p>
         <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
       </div>
     )
-  } else if (!props.uniAdded && props.exchange.outputToken.value === "UNI") {
-    return (
-      <div className="grey-bg connection border pa2">
-        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a  onClick={() => {props.toggleAbout()}} className="f-a" >How it works ↘</a><br /><br />
-        You’ll need to add the UNI tokens to Metamask. <a target="_blank" rel="noopener noreferrer" href="http://metamask.consensyssupport.happyfox.com/kb/article/4-managing-tokens">Here’s a step by step guide.</a><br />
-        Add UNI with <a href="">0x350E5DD084ecF271e8d3531D4324443952F47756</a>.</p>
-        <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
-      </div>
-    )
-  } else if (!props.swapAdded && props.exchange.outputToken.value === "SWAP") {
-    return (
-      <div className="grey-bg connection border pa2">
-        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a  onClick={() => {props.toggleAbout()}} className="f-a" >How it works</a>.<br /><br />
-        You’ll need to add the SWAP tokens to Metamask. <a target="_blank" rel="noopener noreferrer" href="http://metamask.consensyssupport.happyfox.com/kb/article/4-managing-tokens">Here’s a step by step guide.</a><br />
-        Add UNI with <a href="">0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA</a>.</p>
-        <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
-      </div>
-    )
   } else if (props.exchange.inputValue > props.exchange.inputBalance/10**18) {
     return (
       <div className="grey-bg red connection border pa2">
-        <p>{"This account doesn't have enough balance to make this transaction! You'll need to swap some ETH for " + props.exchange.inputToken.value + "."}</p>
+        <p>{"You don't have enough " + props.exchange.inputToken.value + " to make this transaction. 😢 "}</p>
       </div>
     )
   } else {
     return (
       <div className="grey-bg connection border pa2">
-        <p>Welcome! Uniswap is a decentralized exhange for ETH and ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a">How it works ↘</a><br /><br />
+        <p>Welcome! Uniswap is a decentralized exhange for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a">How it works ↘</a><br /><br />
         You're connected. Enter a value below to get started.</p>
         <p>↓</p>
       </div>

src/components/Invest.js

@@ -10,6 +10,7 @@ import { setInvestToken,
          setInvestShares,
          setInvestTokenBalance,
          setInvestEthBalance,
+         setInvestTokenAllowance,
          setInvestSharesInput,
          setUserShares,
          setInvestEthRequired,
@@ -29,6 +30,7 @@ class Invest extends Component {
       this.props.setInvestEthPool(0);
       this.props.setInvestTokenBalance(0);
       this.props.setInvestEthBalance(0);
+      this.props.setInvestTokenAllowance(0);
       this.props.setInvestShares(0);
       this.props.setUserShares(0);
     }
@@ -65,20 +67,27 @@ class Invest extends Component {
   }
 
   getInvestBalance = () => {
-    var token = this.props.symbolToTokenContract(this.props.exchange.investToken.value);
-    var exchange = this.props.symbolToExchangeContract(this.props.exchange.investToken.value);
+    var symbol = this.props.exchange.investToken.value;
+    var investor = this.props.web3Store.currentMaskAddress;
+    var token = this.props.symbolToTokenContract(symbol);
+    var exchange = this.props.symbolToExchangeContract(symbol);
+    var exchangeAddr = this.props.symbolToExchangeAddress(symbol);
 
-    this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
+    this.props.web3Store.web3.eth.getBalance(investor, (error, balance) => {
       this.props.setInvestEthBalance(balance);
     });
 
-    token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
+    token.methods.balanceOf(investor).call((error, balance) => {
       this.props.setInvestTokenBalance(balance);
     });
 
-    exchange.methods.getShares(this.props.web3Store.currentMaskAddress).call().then((result, error) => {
+    token.methods.allowance(investor, exchangeAddr).call((error, balance) => {
+      this.props.setInvestTokenAllowance(balance);
+      console.log('invest allowance: ', balance)
+    });
+
+    exchange.methods.getShares(investor).call().then((result, error) => {
       this.props.setUserShares(result);
-      console.log(result);
     });
   }
 
@@ -96,6 +105,23 @@ class Invest extends Component {
     }
   }
 
+  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.web3Store.investToggle === true) {
       return (
@@ -106,6 +132,7 @@ class Invest extends Component {
           </div>
           <div className="invest investValue border pa2">
             <p> Select token and input number of shares: &nbsp;&nbsp;&nbsp;</p>
+
             <div className="investSelectToken">
               <SelectToken token={this.props.exchange.investToken} onSelectToken={this.onSelectToken} />
               <p className="investDropdown">{'<'}</p>
@@ -114,8 +141,8 @@ class Invest extends Component {
           </div>
           <div className="investValue border pa2">
             <p> Total Shares: {this.props.exchange.investShares} </p>
-            <p> You own: {this.props.exchange.userShares} shares </p>
-            <p> You get {((this.props.exchange.userShares*100)/this.props.exchange.investShares).toFixed(2)}% of fees </p>
+            <p> Your shares: {this.props.exchange.userShares} </p>
+            <p> Your fees {((this.props.exchange.userShares*100)/this.props.exchange.investShares).toFixed(2)}% </p>
           </div>
           <div className="investValue border pa2">
             <p> Total Liquidity </p>
@@ -132,7 +159,13 @@ 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>
+
       )
     } else {
       return (<section className="expand grey-bg border pa2 hidden"></section>)
@@ -154,6 +187,7 @@ const mapDispatchToProps = (dispatch) => {
     setInvestShares,
     setInvestTokenBalance,
     setInvestEthBalance,
+    setInvestTokenAllowance,
     setInvestSharesInput,
     setInvestEthRequired,
     setInvestTokensRequired,

src/components/Links.js

@@ -18,6 +18,7 @@ class Links extends Component {
           token={this.props.exchange.investToken}
           symbolToTokenContract={this.props.symbolToTokenContract}
           symbolToExchangeContract={this.props.symbolToExchangeContract}
+          symbolToExchangeAddress={this.props.symbolToExchangeAddress}
         />
       </div>
     )

src/components/NetworkStatus.js

@@ -30,9 +30,9 @@ class NetworkStatus extends Component {
     if (this.props.web3Store.connected && this.props.web3Store.interaction !== 'disconnected'){
       return (
         <div className="connection border pa2 green">
+            <p className="userBalance">{this.props.exchange.inputToken.value + ": " + (this.props.exchange.inputBalance/10**18).toFixed(2)}</p>
+            <p className="userBalance">{this.props.exchange.outputToken.value + ": " + (this.props.exchange.outputBalance/10**18).toFixed(2)}</p>
           <a target="_blank" rel="noopener noreferrer" href={'https://rinkeby.etherscan.io/search?q=' + this.props.web3Store.currentMaskAddress}>{this.props.web3Store.currentMaskAddress}</a>
-          <p>{this.props.exchange.inputToken.value + ": " + (this.props.exchange.inputBalance/10**18).toFixed(2)}</p>
-          <p>{this.props.exchange.outputToken.value + ": " + (this.props.exchange.outputBalance/10**18).toFixed(2)}</p>
           <p>●</p>
         </div>
       )
@@ -53,7 +53,7 @@ class NetworkStatus extends Component {
     } else {
       return (
         <div className="connection yellow border pa2">
-          <p>{'MetaMask connected to ' + this.props.web3Store.networkMessage + ' Switch to Rinkeby and refresh!'}</p>
+          <p>{'MetaMask connected to ' + this.props.web3Store.networkMessage + '. Please switch to Rinkeby!'}</p>
           <p>●</p>
         </div>
       )

src/components/SharePurchase.js

@@ -16,7 +16,6 @@ class Purchase extends Component {
 
 
   buyShares = () => {
-    console.log(this.props.exchange.inputToken.value, 'ahh')
     var exchange = this.props.symbolToExchangeContract(this.props.exchange.investToken.value);
     var minShares = 1;
     var ethRequiredInt = parseInt(this.props.exchange.investEthRequired, 10).toString();
@@ -56,7 +55,6 @@ class Purchase extends Component {
         // this.props.setExchangeOutputValue(0);
         // this.props.setInteractionState('submitted');
         console.log(result);
-        // cookie.save('transactions', transactions, { path: '/' })
       })
       .on('receipt', (receipt) => {console.log(receipt)})  //Transaction Submitted to blockchain
       .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)})  //Transaction Mined
@@ -81,11 +79,11 @@ class Purchase extends Component {
           </p>
         )
       } else {
-        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>
-        )
+          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>
+          )
       }
 
     } else {

src/components/Visualization.js

@@ -29,7 +29,7 @@ class Visualization extends Component {
 
     //console.log(query, 'query')
 
-    axios.get('http://ec2-34-205-17-195.compute-1.amazonaws.com:3000/graphql', { params: {query: query } })
+    axios.get('http://ec2-34-197-169-170.compute-1.amazonaws.com:3000/graphql', { params: {query: query } })
     .then(data => this.setState({data: data.data.data.Event }))
     .then(() => this.createLineGraph())
     .catch(err => console.error(err));
@@ -49,7 +49,7 @@ class Visualization extends Component {
         }
       }`;
 
-      axios.get('http://ec2-34-205-17-195.compute-1.amazonaws.com:3000/graphql', { params: { query: query }})
+      axios.get('http://ec2-34-197-169-170.compute-1.amazonaws.com:3000/graphql', { params: { query: query }})
       .then(data => this.setState({data: data.data.data.Event}))
       .then(() => {
         this.createNewLineGraph()

src/constants.js

@@ -53,6 +53,7 @@ export const SET_INVEST_TOKEN = 'SET_INVEST_TOKEN';
 export const SET_INVEST_INVARIANT = 'SET_INVEST_INVARIANT';
 export const SET_INVEST_ETH_POOL = 'SET_INVEST_ETH';
 export const SET_INVEST_TOKEN_POOL = 'SET_INVEST_TOKENS';
+export const SET_INVEST_TOKEN_ALLOWANCE = 'SET_INVEST_TOKEN_ALLOWANCE';
 export const SET_INVEST_SHARES = 'SET_INVEST_SHARES';
 export const SET_USER_SHARES = 'SET_USER_SHARES';
 export const SET_INVEST_TOKEN_BALANCE = 'SET_INVEST_TOKEN_BALANCE';
@@ -62,5 +63,6 @@ export const SET_INVEST_ETH_REQUIRED = 'SET_INVEST_ETH_REQUIRED';
 export const SET_INVEST_TOKENS_REQUIRED = 'SET_INVEST_TOKENS_REQUIRED';
 export const SET_INVEST_CHECKED = 'SET_INVEST_CHECKED';
 
+
 // test setInteractionState
 export const INITIALIZE_GLOBAL_WEB3 = 'INITIALIZE_GLOBAL_WEB3';

src/reducers/exchange-reducer.js

@@ -18,6 +18,7 @@ import {
   SET_INVEST_INVARIANT,
   SET_INVEST_ETH_POOL,
   SET_INVEST_TOKEN_POOL,
+  SET_INVEST_TOKEN_ALLOWANCE,
   SET_INVEST_SHARES,
   SET_USER_SHARES,
   SET_INVEST_ETH_BALANCE,
@@ -53,6 +54,7 @@ export default (state = {}, action) => {
     userShares,
     investEthBalance,
     investTokenBalance,
+    investTokenAllowance,
     investSharesInput,
     investEthRequired,
     investTokensRequired,
@@ -106,6 +108,8 @@ export default (state = {}, action) => {
       return Object.assign({}, state, { investEthBalance: investEthBalance });
     case SET_INVEST_TOKEN_BALANCE:
       return Object.assign({}, state, { investTokenBalance: investTokenBalance });
+    case SET_INVEST_TOKEN_ALLOWANCE:
+      return Object.assign({}, state, { investTokenAllowance: investTokenAllowance });
     case SET_INVEST_SHARES_INPUT:
       return Object.assign({}, state, { investSharesInput: investSharesInput });
     case SET_INVEST_ETH_REQUIRED:

src/reducers/global-reducer.js

-// import { INITIALIZE_GLOBAL_WEB3 } from '../constants';
-
-// export default (state = {}, action) => {
-//   const { globalWeb3 } = action;
-//   switch(action.type) {
-//     case INITIALIZE_GLOBAL_WEB3:
-//       return Object.assign({}, state, { web3: globalWeb3 });
-//     default: return state
-//   }
-// }
\ No newline at end of file

src/store/initial-state.js

@@ -57,6 +57,7 @@ export default {
     userShares: 0,
     investTokenBalance: 0,
     investEthBalance: 0,
+    investTokenAllowance: 0,
     investSharesInput: 0,
     investEthRequired: 0,
     investTokensRequired: 0,