first deployment w/ visualization and investment

src/App.css

@@ -306,3 +306,7 @@ input[type=number]::-webkit-outer-spin-button {
   position: relative;
   left: -5px;
 }
+
+.visualization {
+  font-family: "Inter UI", sans-serif;
+}

src/App.js

@@ -40,6 +40,7 @@ import {  setInputBalance,
           setInvestEthPool,
           setInvestTokenPool,
           setInvestShares,
+          setUserShares,
           setInvestTokenBalance,
           setInvestEthBalance } from './actions/exchange-actions';
 // enter d3 & misc. tools
@@ -261,6 +262,10 @@ class App extends Component {
       this.props.setInvestShares(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);
     });
@@ -455,11 +460,11 @@ class App extends Component {
           inputTokenValue={this.props.exchange.inputToken.value}
           exchangeFee={this.props.exchange.fee}
         />
-        <Visualization />
         <Purchase
           symbolToExchangeContract={this.symbolToExchangeContract}
           symbolToTokenAddress={this.symbolToTokenAddress}
         />
+        <Visualization />
         <Links
           toggleInvest={this.toggleInvest}
           location={this}
@@ -515,6 +520,7 @@ const mapDispatchToProps = (dispatch) => {
     setInvestTokenPool,
     setInvestInvariant,
     setInvestShares,
+    setUserShares,
     setInvestTokenBalance,
     setInvestEthBalance
   }, dispatch)

src/actions/exchange-actions.js

@@ -19,6 +19,7 @@ import {
   SET_INVEST_ETH_POOL,
   SET_INVEST_TOKEN_POOL,
   SET_INVEST_SHARES,
+  SET_USER_SHARES,
   SET_INVEST_TOKEN_BALANCE,
   SET_INVEST_ETH_BALANCE,
   SET_INVEST_SHARES_INPUT,
@@ -126,6 +127,10 @@ export const setInvestShares = (investShares) => ({
   investShares
 });
 
+export const setUserShares = (userShares) => ({
+  type: SET_USER_SHARES,
+  userShares
+});
 
 export const setInvestTokenBalance = (investTokenBalance) => ({
   type: SET_INVEST_TOKEN_BALANCE,

src/components/Invest.js

@@ -3,7 +3,7 @@ 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';
+import { setInvestToken, setInvestInvariant, setInvestEthPool, setInvestTokenPool, setInvestShares, setInvestTokenBalance, setInvestEthBalance, setInvestSharesInput, setUserShares, setInvestEthRequired, setInvestTokensRequired} from '../actions/exchange-actions';
 
 class Invest extends Component {
 
@@ -11,6 +11,7 @@ class Invest extends Component {
     if(selected.value !== 'ETH') {
       await this.props.setInvestToken(selected);
       this.getInvestExchangeState();
+      this.getInvestBalance();
     } else {
       this.props.setInvestInvariant(0);
       this.props.setInvestTokenPool(0);
@@ -18,6 +19,7 @@ class Invest extends Component {
       this.props.setInvestTokenBalance(0);
       this.props.setInvestEthBalance(0);
       this.props.setInvestShares(0);
+      this.props.setUserShares(0);
     }
   }
 
@@ -48,7 +50,9 @@ class Invest extends Component {
   }
 
   getInvestBalance = () => {
+    console.log('yo');
     var token = this.props.symbolToTokenContract(this.props.exchange.investToken.value);
+    var exchange = this.props.symbolToExchangeContract(this.props.exchange.investToken.value);
 
     this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
       this.props.setInvestEthBalance(balance);
@@ -57,6 +61,11 @@ class Invest extends Component {
     token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
       this.props.setInvestTokenBalance(balance);
     });
+
+    exchange.methods.getShares(this.props.web3Store.currentMaskAddress).call().then((result, error) => {
+      this.props.setUserShares(result);
+      console.log(result);
+    });
   }
 
   getInvestOutput = () => {
@@ -87,22 +96,22 @@ class Invest extends Component {
           </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>
+            <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>
           </div>
           <div className="investValue border pa2">
             <p> Total Liquidity </p>
-            <p> {(this.props.exchange.investEthPool/10**18).toFixed(2)} ETH </p>
+            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(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> &nbsp;Each share is worth: </p>
+            <p> {((this.props.exchange.investEthPool/10**18)/this.props.exchange.investShares).toFixed(5)} ETH &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>  &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>
         </section>
@@ -129,7 +138,8 @@ const mapDispatchToProps = (dispatch) => {
     setInvestEthBalance,
     setInvestSharesInput,
     setInvestEthRequired,
-    setInvestTokensRequired
+    setInvestTokensRequired,
+    setUserShares
   }, dispatch);
 }
 

src/components/Links.js

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

src/components/Visualization.js

@@ -159,12 +159,14 @@ class Visualization extends Component {
   }
 
   render () {
-    const width = 1039;
+    const width = 1000;
     const height = 200;
     return (
+      <div className="visualization" align="center">
         <svg width={width} height={height}>
           <g ref="graph"/>
         </svg>
+      </div>
     )
   }
 }

src/constants.js

@@ -54,6 +54,7 @@ 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_USER_SHARES = 'SET_USER_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';

src/reducers/exchange-reducer.js

@@ -19,6 +19,7 @@ import {
   SET_INVEST_ETH_POOL,
   SET_INVEST_TOKEN_POOL,
   SET_INVEST_SHARES,
+  SET_USER_SHARES,
   SET_INVEST_ETH_BALANCE,
   SET_INVEST_TOKEN_BALANCE,
   SET_INVEST_SHARES_INPUT,
@@ -48,6 +49,7 @@ export default (state = {}, action) => {
     investEthPool,
     investTokenPool,
     investShares,
+    userShares,
     investEthBalance,
     investTokenBalance,
     investSharesInput,
@@ -96,6 +98,8 @@ export default (state = {}, action) => {
       return Object.assign({}, state, { investTokenPool: investTokenPool });
     case SET_INVEST_SHARES:
       return Object.assign({}, state, { investShares: investShares });
+    case SET_USER_SHARES:
+      return Object.assign({}, state, { userShares: userShares });
     case SET_INVEST_ETH_BALANCE:
       return Object.assign({}, state, { investEthBalance: investEthBalance });
     case SET_INVEST_TOKEN_BALANCE:

src/store/initial-state.js

@@ -54,6 +54,7 @@ export default {
     investEthPool: 0,
     investTokenPool: 0,
     investShares: 0,
+    userShares: 0,
     investTokenBalance: 0,
     investEthBalance: 0,
     investSharesInput: 0,