add liquidity investment

src/App.css

@@ -42,13 +42,13 @@ a:hover{
 .title{
   display: flex;
   flex-direction: row;
+  width: 100%;
 }
+
 .border{
   border: 1px solid #f7f7f7;
 }
-.title {
-  width: 100%;
-}
+
 .logo{
   /* width: 10vw; */
   display: flex;
@@ -61,6 +61,7 @@ a:hover{
   align-items: center;
   /* color: #27AE60; */
   flex: 1;
+  font-family: "Inter UI", sans-serif;
 }
 
 .connection a{
@@ -72,6 +73,7 @@ a:hover{
   width: 100%;
   display: flex;
   flex-direction: row;
+  font-family: "Inter UI", sans-serif;
   /* justify-content: space-between; */
 }
 .arrow{
@@ -87,15 +89,24 @@ a:hover{
   justify-content: space-between;
   align-items: center;
 }
+
 .value input, select{
   width: 100%;
   height: 100%;
   border: none;
 }
+
 .value input:focus{
     outline: none;
 }
 
+.investValue{
+  width: 80vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .dropdown{
   transform: rotate(-90deg);
   opacity: .4;
@@ -120,18 +131,21 @@ input[type=number]::-webkit-outer-spin-button {
 .rate p{
   margin: 0px;
   padding: .25rem;
+  font-family: "Inter UI", sans-serif;
 }
 
 .info{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  font-family: "Inter UI", sans-serif;
 }
 
 .links{
   display: flex;
   flex-direction: row;
   justify-content: center;
+  font-family: "Inter UI", sans-serif;
 }
 
 .link{
@@ -154,6 +168,7 @@ input[type=number]::-webkit-outer-spin-button {
   flex: 1;
   text-decoration: none;
   color: black;
+  font-family: "Inter UI", sans-serif;
 }
 
 .about:hover .underline{
@@ -171,6 +186,7 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #27AE60;
   background-color: #2F80ED;
   cursor: pointer;
+  font-family: "Inter UI", sans-serif;
 }
 
 .expand{
@@ -180,10 +196,12 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #f2f2f2;
   height: auto;
   transition: height .3s ease;
+  font-family: "Inter UI", sans-serif;
 }
 
 .transaction p{
   margin: 0px;
+  font-family: "Inter UI", sans-serif;
 }
 
 .transaction ol{
@@ -195,6 +213,10 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #f7f7f7;
 }
 
+.white-bg{
+  background-color: #ffffff;
+}
+
 .red{
   color: red;
 }
@@ -247,3 +269,40 @@ input[type=number]::-webkit-outer-spin-button {
   margin-start: 0px;
   margin-end: 0px; */
 }
+
+.invest {
+  font-family: "Inter UI", sans-serif;
+}
+
+.investValue {
+  width: 90vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.investValue input {
+  width: 15vw;
+  height: 100%;
+  border: none;
+  outline: none;
+}
+
+.investValueInput {
+  background-color: #ffffff;
+}
+
+.investSelectToken {
+  /* background-color: #ffffff; */
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.investDropdown {
+  transform: rotate(-90deg);
+  opacity: .4;
+  position: relative;
+  left: -5px;
+}

src/App.js

@@ -13,6 +13,7 @@ import RateAndFee from './components/RateAndFee';
 import Purchase from './components/Purchase';
 import About from './components/About';
 import Links from './components/Links';
+import SharePurchase from './components/SharePurchase';
 import Transactions from './components/Transactions';
 // import SelectToken from './components/SelectToken'
 // enter redux
@@ -23,8 +24,23 @@ import { subscribe } from 'redux-subscriber';
 // import { initializeGlobalWeb3 } from './actions/global-actions';
 import { uniExchangeContractReady, swtExchangeContractReady, exchangeContractReady } from './actions/exchangeContract-actions';
 import { uniTokenContractReady, swtTokenContractReady, tokenContractReady } from './actions/tokenContract-actions';
-import { initializeGlobalWeb3, setWeb3ConnectionStatus, setCurrentMaskAddress, metamaskLocked, metamaskUnlocked, setInteractionState, factoryContractReady, toggleAbout } from './actions/web3-actions';
-import { setInputBalance, setOutputBalance, setInvariant1, setInvariant2, setMarketEth1, setMarketEth2, setMarketTokens1, setMarketTokens2, setAllowanceApprovalState } from './actions/exchange-actions';
+import { initializeGlobalWeb3, setWeb3ConnectionStatus, setCurrentMaskAddress, metamaskLocked, metamaskUnlocked, setInteractionState, factoryContractReady, toggleAbout, toggleInvest } from './actions/web3-actions';
+import {  setInputBalance,
+          setOutputBalance,
+          setInvariant1,
+          setInvariant2,
+          setMarketEth1,
+          setMarketEth2,
+          setMarketTokens1,
+          setMarketTokens2,
+          setAllowanceApprovalState,
+          setInvestToken,
+          setInvestInvariant,
+          setInvestEthPool,
+          setInvestTokenPool,
+          setInvestShares,
+          setInvestTokenBalance,
+          setInvestEthBalance } from './actions/exchange-actions';
 // enter d3 & misc. tools
 import './App.css';
 import cookie from 'react-cookies'
@@ -225,6 +241,35 @@ class App extends Component {
     // console.log("Getting account info");
   }
 
+  getInvestInfo = () => {
+    var exchange = this.symbolToExchangeContract(this.props.exchange.investToken.value);
+    var token = this.symbolToTokenContract(this.props.exchange.investToken.value);
+
+    exchange.methods.invariant().call().then((result, error) => {
+      this.props.setInvestInvariant(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.totalShares().call().then((result, error) => {
+      this.props.setInvestShares(result);
+    });
+
+    token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
+      this.props.setInvestTokenBalance(balance);
+    });
+
+    this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
+      this.props.setInvestEthBalance(balance);
+    });
+  }
+
   getExchangeState = (type) => {
     var exchange;
     if (type === 'input') {
@@ -372,6 +417,17 @@ class App extends Component {
     scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500})
   }
 
+  toggleInvest = () => {
+    this.getInvestInfo();
+    let current = this.props.web3Store.investToggle;
+    this.props.toggleInvest(!current);
+    setTimeout(this.scrollToInvest, 300);
+  }
+
+  scrollToInvest = () => {
+    scrollToComponent(this.Links, { offset: 0, align: 'top', duration: 500})
+  }
+
 
   render() {
     return (
@@ -403,8 +459,17 @@ class App extends Component {
           symbolToExchangeContract={this.symbolToExchangeContract}
           symbolToTokenAddress={this.symbolToTokenAddress}
         />
+        <Links
+          toggleInvest={this.toggleInvest}
+          location={this}
+          symbolToTokenContract={this.symbolToTokenContract}
+          symbolToExchangeContract={this.symbolToExchangeContract}
+        />
+        <SharePurchase
+          symbolToExchangeContract={this.symbolToExchangeContract}
+          symbolToTokenAddress={this.symbolToTokenAddress}
+        />
         <About toggleAbout={this.toggleAbout} location={this}/>
-        <Links />
         <Transactions transactions={this.state.transactions} interaction={this.props.web3Store.interaction} />
       </div>
     )
@@ -441,8 +506,16 @@ const mapDispatchToProps = (dispatch) => {
     setAllowanceApprovalState,
     initializeGlobalWeb3,
     toggleAbout,
+    toggleInvest,
     exchangeContractReady,
-    tokenContractReady
+    tokenContractReady,
+    setInvestToken,
+    setInvestEthPool,
+    setInvestTokenPool,
+    setInvestInvariant,
+    setInvestShares,
+    setInvestTokenBalance,
+    setInvestEthBalance
   }, dispatch)
 }
 

src/actions/exchange-actions.js

-import { 
+import {
   SET_INPUT_BALANCE,
   SET_OUTPUT_BALANCE,
   SET_INPUT_TOKEN,
@@ -8,12 +8,22 @@ import {
   SET_MARKET_ETH_1,
   SET_MARKET_ETH_2,
   SET_MARKET_TOKENS_1,
-  SET_MARKET_TOKENS_2, 
+  SET_MARKET_TOKENS_2,
   SET_ALLOWANCE_APPROVAL_STATE,
   SET_EXCHANGE_INPUT_VALUE,
   SET_EXCHANGE_OUTPUT_VALUE,
   SET_EXCHANGE_RATE,
-  SET_EXCHANGE_FEE
+  SET_EXCHANGE_FEE,
+  SET_INVEST_TOKEN,
+  SET_INVEST_INVARIANT,
+  SET_INVEST_ETH_POOL,
+  SET_INVEST_TOKEN_POOL,
+  SET_INVEST_SHARES,
+  SET_INVEST_TOKEN_BALANCE,
+  SET_INVEST_ETH_BALANCE,
+  SET_INVEST_SHARES_INPUT,
+  SET_INVEST_ETH_REQUIRED,
+  SET_INVEST_TOKENS_REQUIRED
 } from '../constants';
 
 export const setInputBalance = (inputBalance) => ({
@@ -43,7 +53,7 @@ export const setInvariant1 = (invariant1) => ({
 
 export const setInvariant2 = (invariant2) => ({
   type: SET_INVARIANT_2,
-  invariant2 
+  invariant2
 });
 
 export const setMarketEth1 = (marketEth1) => ({
@@ -77,7 +87,7 @@ export const setExchangeInputValue = (inputValue) => ({
 });
 
 export const setExchangeOutputValue = (outputValue) => ({
-  type: SET_EXCHANGE_OUTPUT_VALUE, 
+  type: SET_EXCHANGE_OUTPUT_VALUE,
   outputValue
 });
 
@@ -88,5 +98,56 @@ export const setExchangeRate = (rate) => ({
 
 export const setExchangeFee = (fee) => ({
   type: SET_EXCHANGE_FEE,
-  fee 
-});
\ No newline at end of file
+  fee
+});
+
+export const setInvestToken = (investToken) => ({
+  type: SET_INVEST_TOKEN,
+  investToken
+});
+
+export const setInvestInvariant = (investInvariant) => ({
+  type: SET_INVEST_INVARIANT,
+  investInvariant
+});
+
+export const setInvestEthPool = (investEthPool) => ({
+  type: SET_INVEST_ETH_POOL,
+  investEthPool
+});
+
+export const setInvestTokenPool = (investTokenPool) => ({
+  type: SET_INVEST_TOKEN_POOL,
+  investTokenPool
+});
+
+export const setInvestShares = (investShares) => ({
+  type: SET_INVEST_SHARES,
+  investShares
+});
+
+
+export const setInvestTokenBalance = (investTokenBalance) => ({
+  type: SET_INVEST_TOKEN_BALANCE,
+  investTokenBalance
+});
+
+export const setInvestEthBalance = (investEthBalance) => ({
+  type: SET_INVEST_ETH_BALANCE,
+  investEthBalance
+});
+
+export const setInvestSharesInput = (investSharesInput) => ({
+  type: SET_INVEST_SHARES_INPUT,
+  investSharesInput
+});
+
+export const setInvestEthRequired = (investEthRequired) => ({
+  type: SET_INVEST_ETH_REQUIRED,
+  investEthRequired
+});
+
+export const setInvestTokensRequired = (investTokensRequired) => ({
+  type: SET_INVEST_TOKENS_REQUIRED,
+  investTokensRequired
+});

src/actions/web3-actions.js

@@ -9,7 +9,8 @@ import {
   SET_NETWORK_MESSAGE,
   SET_BLOCK_TIMESTAMP,
   SET_EXCHANGE_TYPE,
-  TOGGLE_ABOUT
+  TOGGLE_ABOUT,
+  TOGGLE_INVEST
 } from '../constants';
 
 // this actions folder is actually full of action creators
@@ -97,8 +98,12 @@ export const toggleAbout = (toggle) => ({
   aboutToggle: toggle
 });
 
+export const toggleInvest = (toggle) => ({
+  type: TOGGLE_INVEST,
+  investToggle: toggle
+});
+
 export const initializeGlobalWeb3 = (web3) => ({
   type: INITIALIZE_GLOBAL_WEB3,
   web3
 });
-  
\ No newline at end of file

src/components/About.js

@@ -6,16 +6,16 @@ import AboutMessage from './AboutMessage';
 class About extends Component {
   render () {
     return(
-      <div>  
-        <section className="About" ref={(section) => { this.props.location.About = section; }}>
+      <div>
+        <section className="about" ref={(section) => { this.props.location.About = section; }}>
             <a onClick={() => {this.props.toggleAbout()}} className="link border pa2 f-a">
-            <p className="underline">About Uniswap.</p>
-            <p>↘</p>
+              <p className="underline">About Uniswap.</p>
+              <p>↘</p>
             </a>
         </section>
         <AboutMessage toggled={this.props.web3Store.aboutToggle} />
       </div>
-    ) 
+    )
   }
 }
 
@@ -23,4 +23,4 @@ const mapStateToProps = state => ({
   web3Store: state.web3Store
 });
 
-export default connect (mapStateToProps)(About)
\ No newline at end of file
+export default connect (mapStateToProps)(About)

src/components/Exchange.js

@@ -173,20 +173,20 @@ const mapStateToProps = state => ({
     exchange: state.exchange
 })
 
-  const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators({
-      setExchangeInputValue,
-      setExchangeOutputValue,
-      setExchangeRate,
-      setExchangeFee,
-      setInteractionState,
-      setInputToken,
-      setOutputToken,
-      setExchangeType,
-      setInputBalance,
-      setOutputBalance,
-      setAllowanceApprovalState
-    }, dispatch);
-  }
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    setExchangeInputValue,
+    setExchangeOutputValue,
+    setExchangeRate,
+    setExchangeFee,
+    setInteractionState,
+    setInputToken,
+    setOutputToken,
+    setExchangeType,
+    setInputBalance,
+    setOutputBalance,
+    setAllowanceApprovalState
+  }, dispatch);
+}
 
-  export default connect(mapStateToProps, mapDispatchToProps)(Exchange);
+export default connect(mapStateToProps, mapDispatchToProps)(Exchange);

src/components/Invest.js

+import React, { Component } from 'react'
+import SelectToken from './SelectToken';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { setInvestToken, setInvestInvariant, setInvestEthPool, setInvestTokenPool, setInvestShares, setInvestTokenBalance, setInvestEthBalance, setInvestSharesInput, setInvestEthRequired, setInvestTokensRequired} from '../actions/exchange-actions';
+
+class Invest extends Component {
+
+  onSelectToken = async (selected, type) => {
+    if(selected.value !== 'ETH') {
+      await this.props.setInvestToken(selected);
+      this.getInvestExchangeState();
+    } else {
+      this.props.setInvestInvariant(0);
+      this.props.setInvestTokenPool(0);
+      this.props.setInvestEthPool(0);
+      this.props.setInvestTokenBalance(0);
+      this.props.setInvestEthBalance(0);
+      this.props.setInvestShares(0);
+    }
+  }
+
+  onInputChange = async (event) => {
+    var inputValue = event.target.value;
+    await this.props.setInvestSharesInput(inputValue);
+    this.getInvestOutput();
+  }
+
+  getInvestExchangeState = () => {
+    var exchange = this.props.symbolToExchangeContract(this.props.exchange.investToken.value);
+
+    exchange.methods.invariant().call().then((result, error) => {
+      this.props.setInvestInvariant(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.totalShares().call().then((result, error) => {
+      this.props.setInvestShares(result);
+    });
+  }
+
+  getInvestBalance = () => {
+    var token = this.props.symbolToTokenContract(this.props.exchange.investToken.value);
+
+    this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
+      this.props.setInvestEthBalance(balance);
+    });
+
+    token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
+      this.props.setInvestTokenBalance(balance);
+    });
+  }
+
+  getInvestOutput = () => {
+    var inputValue = this.props.exchange.investSharesInput;
+    if(inputValue && inputValue !== 0 && inputValue !== '0'){
+      var ethRequired = ((this.props.exchange.investEthPool)/this.props.exchange.investShares)*inputValue;
+      var tokensRequired = ((this.props.exchange.investTokenPool)/this.props.exchange.investShares)*inputValue;
+      this.props.setInvestEthRequired(ethRequired);
+      this.props.setInvestTokensRequired(tokensRequired);
+      console.log("requires ", ethRequired, " ETH ", tokensRequired, this.props.exchange.investToken.value);
+    } else {
+      this.props.setInvestEthRequired(0);
+      this.props.setInvestTokensRequired(0);
+    }
+  }
+
+  render () {
+    if (this.props.web3Store.investToggle === true) {
+      return (
+        <section className="grey-bg border pa2">
+          <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>
+            </div>
+            <input type="number" className="investValueInput" value={this.props.exchange.inputShares} placeholder="0" onChange={this.onInputChange} />
+          </div>
+          <div className="investValue border pa2">
+            <p> Total Shares: {this.props.exchange.investShares} </p>
+            <p> You own: 0 shares </p>
+            <p> You get 0% of fees </p>
+          </div>
+          <div className="investValue border pa2">
+            <p> Total Liquidity </p>
+            <p> {(this.props.exchange.investEthPool/10**18).toFixed(2)} ETH </p>
+            <p> {(this.props.exchange.investTokenPool/10**18).toFixed(2)} {this.props.exchange.investToken.value} </p>
+          </div>
+          <div className="investValue border pa2">
+            <p> Each share is worth: </p>
+            <p> {((this.props.exchange.investEthPool/10**18)/this.props.exchange.investShares).toFixed(5)} ETH </p>
+            <p> {((this.props.exchange.investTokenPool/10**18)/this.props.exchange.investShares).toFixed(5)} {this.props.exchange.investToken.value} </p>
+          </div>
+          <div className="investValue border pa2">
+            <p> Account Balance: </p>
+            <p>  {(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>
+        </section>
+      )
+    } else {
+      return (<section className="expand grey-bg border pa2 hidden"></section>)
+    }
+  }
+}
+
+const mapStateToProps = state => ({
+  web3Store: state.web3Store,
+  exchange: state.exchange
+});
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    setInvestToken,
+    setInvestInvariant,
+    setInvestEthPool,
+    setInvestTokenPool,
+    setInvestShares,
+    setInvestTokenBalance,
+    setInvestEthBalance,
+    setInvestSharesInput,
+    setInvestEthRequired,
+    setInvestTokensRequired
+  }, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Invest);

src/components/Links.js

-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
-function Links () {
-  return (
-    <section className="links">
-      <a href="" className="link border pa2 liq">
-        <p className="underline">Provide liquidity to collect fees</p>
-        <p>+</p>
-      </a>
-      <a href="" className="link border pa2 ex">
-        <p className="underline">Launch a new exchange</p>
-        <p>+</p>
-      </a>
-    </section>
-  )
+import Invest from './Invest';
+
+class Links extends Component {
+  render () {
+    return(
+      <div>
+        <section className="links"  ref={(section) => { this.props.location.Links = section; }} >
+          <a onClick={() => {this.props.toggleInvest()}} className="link border pa2 f-a">
+            <p className="underline">Invest liquidity to collect fees</p>
+          </a>
+        </section>
+        <Invest
+          toggled={this.props.web3Store.investToggle}
+          token={this.props.exchange.investToken}
+          symbolToTokenContract={this.symbolToTokenContract}
+          symbolToExchangeContract={this.props.symbolToExchangeContract}
+        />
+      </div>
+    )
+  }
 }
 
-export default Links;
\ No newline at end of file
+const mapStateToProps = state => ({
+  web3Store: state.web3Store,
+  exchange: state.exchange
+});
+
+export default connect (mapStateToProps) (Links);

src/components/SharePurchase.js

+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux';
+import { setBlockTimestamp, setInteractionState } from '../actions/web3-actions';
+import { setExchangeInputValue, setExchangeOutputValue } from '../actions/exchange-actions';
+
+class Purchase extends Component {
+  purchaseShares = async () => {
+    await this.props.setBlockTimestamp(this.props.web3Store.web3);
+    this.sharesPurchase();
+  }
+
+
+  sharesPurchase = () => {
+    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();
+    // var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
+
+    exchange.methods.investLiquidity(minShares).send({from: this.props.web3Store.currentMaskAddress, value: ethRequiredInt})
+      .on('transactionHash', (result) => {
+        // console.log('Transaction Hash created')
+        // let transactions = this.state.transactions
+        // transactions.push(result)
+        // this.setState({ transactions: transactions });
+        // this.props.setExchangeInputValue(0);
+        // 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
+      .on('error', console.error);
+  }
+
+  render() {
+    if (this.props.exchange.investEthRequired > 0) {
+        return (
+          <a className="swap border pa2" role="button" onClick={() => {this.purchaseShares()}}>
+            <b>{"I want to buy " + 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 {
+        return (<a className="swap grey-bg hidden border pa2"></a>)
+      }
+  }
+}
+
+const mapStateToProps = state => ({
+  global: state.global,
+  web3Store: state.web3Store,
+  exchange: state.exchange
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    setBlockTimestamp,
+    setExchangeInputValue,
+    setExchangeOutputValue,
+    setInteractionState
+  }, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Purchase);

src/constants.js

@@ -14,9 +14,12 @@ export const SET_NETWORK_MESSAGE = 'SET_NETWORK_MESSAGE';
 export const SET_BLOCK_TIMESTAMP = 'SET_BLOCK_TIMESTAMP';
 export const SET_EXCHANGE_TYPE = 'SET_EXCHANGE_TYPE';
 
-// action to toggle the 'about' div 
+// action to toggle the 'about' div
 export const TOGGLE_ABOUT = 'TOGGLE_ABOUT';
 
+// action to toggle the 'invest' div
+export const TOGGLE_INVEST = 'TOGGLE_INVEST';
+
 // factory contract action, also set
 export const FACTORY_CONTRACT_READY = 'FACTORY_CONTRACT_READY';
 
@@ -46,6 +49,16 @@ export const SET_EXCHANGE_INPUT_VALUE = 'SET_EXCHANGE_INPUT_VALUE';
 export const SET_EXCHANGE_OUTPUT_VALUE = 'SET_EXCHANGE_OUTPUT_VALUE';
 export const SET_EXCHANGE_RATE = 'SET_EXCHANGE_RATE';
 export const SET_EXCHANGE_FEE = 'SET_EXCHANGE_FEE';
+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_SHARES = 'SET_INVEST_SHARES';
+export const SET_INVEST_TOKEN_BALANCE = 'SET_INVEST_TOKEN_BALANCE';
+export const SET_INVEST_ETH_BALANCE = 'SET_INVEST_ETH_BALANCE';
+export const SET_INVEST_SHARES_INPUT = 'SET_INVEST_SHARES_INPUT';
+export const SET_INVEST_ETH_REQUIRED = 'SET_INVEST_ETH_REQUIRED';
+export const SET_INVEST_TOKENS_REQUIRED = 'SET_INVEST_TOKENS_REQUIRED';
 
 // test setInteractionState
 export const INITIALIZE_GLOBAL_WEB3 = 'INITIALIZE_GLOBAL_WEB3';

src/reducers/exchange-reducer.js

-import { 
+import {
   SET_INPUT_BALANCE,
   SET_OUTPUT_BALANCE,
   SET_INPUT_TOKEN,
@@ -13,60 +13,99 @@ import {
   SET_EXCHANGE_INPUT_VALUE,
   SET_EXCHANGE_OUTPUT_VALUE,
   SET_EXCHANGE_RATE,
-  SET_EXCHANGE_FEE
-  
+  SET_EXCHANGE_FEE,
+  SET_INVEST_TOKEN,
+  SET_INVEST_INVARIANT,
+  SET_INVEST_ETH_POOL,
+  SET_INVEST_TOKEN_POOL,
+  SET_INVEST_SHARES,
+  SET_INVEST_ETH_BALANCE,
+  SET_INVEST_TOKEN_BALANCE,
+  SET_INVEST_SHARES_INPUT,
+  SET_INVEST_ETH_REQUIRED,
+  SET_INVEST_TOKENS_REQUIRED
 } from '../constants';
 
 export default (state = {}, action) => {
-  const { 
-    inputBalance, 
-    outputBalance, 
-    inputToken, 
-    outputToken, 
-    invariant1, 
-    invariant2, 
-    marketEth1, 
-    marketEth2, 
-    marketTokens1, 
-    marketTokens2, 
-    allowanceApproved, 
-    inputValue, 
-    outputValue, 
-    rate, 
-    fee
+  const {
+    inputBalance,
+    outputBalance,
+    inputToken,
+    outputToken,
+    invariant1,
+    invariant2,
+    marketEth1,
+    marketEth2,
+    marketTokens1,
+    marketTokens2,
+    allowanceApproved,
+    inputValue,
+    outputValue,
+    rate,
+    fee,
+    investToken,
+    investInvariant,
+    investEthPool,
+    investTokenPool,
+    investShares,
+    investEthBalance,
+    investTokenBalance,
+    investSharesInput,
+    investEthRequired,
+    investTokensRequired
    } = action;
 
   switch(action.type) {
-    case SET_INPUT_BALANCE: 
+    case SET_INPUT_BALANCE:
       return Object.assign({}, state, { inputBalance: inputBalance });
     case SET_OUTPUT_BALANCE:
       return Object.assign({}, state, { outputBalance: outputBalance });
-    case SET_INPUT_TOKEN: 
+    case SET_INPUT_TOKEN:
       return Object.assign({}, state, { inputToken: inputToken });
     case SET_OUTPUT_TOKEN:
       return Object.assign({}, state, { outputToken: outputToken });
-    case SET_INVARIANT_1: 
+    case SET_INVARIANT_1:
       return Object.assign({}, state, { invariant1: invariant1 });
     case SET_INVARIANT_2:
       return Object.assign({}, state, { invariant2: invariant2 });
-    case SET_MARKET_ETH_1: 
+    case SET_MARKET_ETH_1:
       return Object.assign({}, state, { marketEth1: marketEth1 });
     case SET_MARKET_ETH_2:
       return Object.assign({}, state, { marketEth2: marketEth2 });
-    case SET_MARKET_TOKENS_1: 
+    case SET_MARKET_TOKENS_1:
       return Object.assign({}, state, { marketTokens1: marketTokens1 });
-    case SET_MARKET_TOKENS_2: 
+    case SET_MARKET_TOKENS_2:
       return Object.assign({}, state, { marketTokens2: marketTokens2 });
-    case SET_ALLOWANCE_APPROVAL_STATE: 
+    case SET_ALLOWANCE_APPROVAL_STATE:
       return Object.assign({}, state, { allowanceApproved: allowanceApproved });
-    case SET_EXCHANGE_INPUT_VALUE: 
+    case SET_EXCHANGE_INPUT_VALUE:
       return Object.assign({}, state, { inputValue: inputValue });
-    case SET_EXCHANGE_OUTPUT_VALUE: 
+    case SET_EXCHANGE_OUTPUT_VALUE:
       return Object.assign({}, state, { outputValue: outputValue });
     case SET_EXCHANGE_RATE:
       return Object.assign({}, state, { rate: rate });
     case SET_EXCHANGE_FEE:
       return Object.assign({}, state, { fee: fee });
-    default: return state; 
+    case SET_INVEST_TOKEN:
+      return Object.assign({}, state, { investToken: investToken });
+    case SET_INVEST_INVARIANT:
+      return Object.assign({}, state, { investInvariant: investInvariant });
+    case SET_INVEST_ETH_POOL:
+      return Object.assign({}, state, { investEthPool: investEthPool });
+    case SET_INVEST_TOKEN_POOL:
+      return Object.assign({}, state, { investTokenPool: investTokenPool });
+    case SET_INVEST_SHARES:
+      return Object.assign({}, state, { investShares: investShares });
+    case SET_INVEST_ETH_BALANCE:
+      return Object.assign({}, state, { investEthBalance: investEthBalance });
+    case SET_INVEST_TOKEN_BALANCE:
+      return Object.assign({}, state, { investTokenBalance: investTokenBalance });
+    case SET_INVEST_SHARES_INPUT:
+      return Object.assign({}, state, { investSharesInput: investSharesInput });
+    case SET_INVEST_ETH_REQUIRED:
+      return Object.assign({}, state, { investEthRequired: investEthRequired });
+    case SET_INVEST_TOKENS_REQUIRED:
+      return Object.assign({}, state, { investTokensRequired: investTokensRequired });
+    default: return state;
   }
-}
\ No newline at end of file
+}

src/reducers/web3-reducer.js

@@ -10,11 +10,12 @@ import {
   SET_BLOCK_TIMESTAMP,
   SET_EXCHANGE_TYPE,
   INITIALIZE_GLOBAL_WEB3,
-  TOGGLE_ABOUT
+  TOGGLE_ABOUT,
+  TOGGLE_INVEST
 } from '../constants';
 
 export default (state = {}, action) => {
-  const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType, web3, aboutToggle } = action
+  const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType, web3, aboutToggle, investToggle } = action
   switch (action.type) {
     case INITIALIZE_GLOBAL_WEB3:
       return Object.assign({}, state, { web3: web3 });
@@ -34,10 +35,12 @@ export default (state = {}, action) => {
       return Object.assign({}, state, { networkMessage: networkMessage });
     case SET_BLOCK_TIMESTAMP:
       return Object.assign({}, state, { blockTimestamp: timestamp });
-    case SET_EXCHANGE_TYPE: 
+    case SET_EXCHANGE_TYPE:
       return Object.assign({}, state, { exchangeType: exchangeType });
-    case TOGGLE_ABOUT: 
+    case TOGGLE_ABOUT:
       return Object.assign({}, state, { aboutToggle: aboutToggle })
+    case TOGGLE_INVEST:
+      return Object.assign({}, state, { investToggle: investToggle })
     default: return state;
   }
 }

src/store/initial-state.js

@@ -3,6 +3,7 @@ export default {
     web3: {},
     connected: false,
     aboutToggle: false,
+    investToggle: false,
     currentMaskAddress: undefined,
     metamaskLocked: true,
     interaction: '',
@@ -37,6 +38,7 @@ export default {
     outputBalance: 0,
     inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
     outputToken: { value: 'MKR', label: 'MKR', clearableValue: false },
+    investToken: { value: 'BAT', label: 'BAT', clearableValue: false },
     invariant1: 0,
     invariant2: 0,
     marketEth1: 0,
@@ -48,5 +50,14 @@ export default {
     outputValue: 0,
     rate: 0,
     fee: 0,
+    investInvariant: 0,
+    investEthPool: 0,
+    investTokenPool: 0,
+    investShares: 0,
+    investTokenBalance: 0,
+    investEthBalance: 0,
+    investSharesInput: 0,
+    investEthRequired: 0,
+    investTokensRequired: 0
   }
 }