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

@@ -15,7 +15,7 @@ import About from './components/About';
 import Links from './components/Links';
 import SharePurchase from './components/SharePurchase';
 import Transactions from './components/Transactions';
-// d3 
+// d3
 import Visualization from './components/Visualization';
 // enter redux
 import { bindActionCreators } from 'redux'
@@ -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

@@ -10,12 +10,12 @@ class Visualization extends Component {
     super(props);
     this.state = {
       data: null
-    }   
-  } 
-  // TODO: find a way to get this thing to listen for changes in the output token 
+    }
+  }
+  // TODO: find a way to get this thing to listen for changes in the output token
   componentDidMount() {
     this.d3Graph = d3.select(ReactDOM.findDOMNode(this.refs.graph));
-   
+
     let inputToken = this.props.exchange.inputToken.value;
     let outputToken = this.props.exchange.outputToken.value;
     console.log(outputToken, 'output token');
@@ -28,12 +28,12 @@ class Visualization extends Component {
     }`;
 
     console.log(query, 'query')
-    
+
     axios.get('http://ec2-18-233-168-186.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));
-    
+
     this.outputTokenSubscriber();
   }
 
@@ -41,7 +41,7 @@ class Visualization extends Component {
     const outputTokenSubscriber = subscribe('exchange.outputToken', state => {
       let outputToken = state.exchange.outputToken.value;
       console.log('outputToken change deteced', outputToken)
-      
+
       let query = `{
         Event(input:"${outputToken}"){
           ethValueOfToken
@@ -60,7 +60,7 @@ class Visualization extends Component {
 
   createLineGraph() {
     // TODO: as you change whether you want to see days or years, change the extent
-    // scales are wicked important 
+    // scales are wicked important
     let width = 1039;
     let height = 200;
     let margin = {top: 20, bottom:20, left:20, right:20}
@@ -68,47 +68,47 @@ class Visualization extends Component {
     // first we want to see the min and max of our token prices
     let ethValueOfTokenExtent = d3.extent(this.state.data, element => element.ethValueOfToken);
     console.log('initial data visualized', this.state.data)
-    // create a y scale, for the eth value of the token 
+    // create a y scale, for the eth value of the token
     let yScale = d3.scaleLinear()
       .domain(ethValueOfTokenExtent)
       .range([margin.bottom, height - margin.top]);
-    
-    // now that we have the scale, we create the actual axis 
+
+    // now that we have the scale, we create the actual axis
     let yAxis = d3.axisLeft()
-      .scale(yScale); 
-    // time to put this y axis on the page 
+      .scale(yScale);
+    // time to put this y axis on the page
     svg.append('g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(50)')
      .call(yAxis);
-    
-    // sanitize the data for the x-axis 
+
+    // sanitize the data for the x-axis
     this.state.data.map(e => e.createdAt = new Date(e.createdAt));
-    // similarly, check the min and max of our times 
+    // similarly, check the min and max of our times
     let timeExtent = d3.extent(this.state.data, element => element.createdAt)
     console.log('previous time extent', timeExtent)
     // with this extent, create a scale for the x axis
-    // BIG NOTE: for timeScales, you need to create new Date objects from the date string 
-    // also, domain needs to take in an array 
+    // BIG NOTE: for timeScales, you need to create new Date objects from the date string
+    // also, domain needs to take in an array
     let xScale = d3.scaleTime()
       .domain(timeExtent)
       .range([margin.left, width - margin.right]);
     // we have a scale, lets create the axis
     let xAxis = d3.axisBottom()
       .scale(xScale);
-    // append the axis to the DOM, make sure it's positioned correctly 
+    // append the axis to the DOM, make sure it's positioned correctly
     svg.append('g')
       .attr('class', 'x axis')
       .attr('transform', 'translate(30, 180)')
       .call(xAxis);
-    
+
     let line = d3.line()
       .x(element => xScale(element.createdAt))
       .y(element => yScale(element.ethValueOfToken))
-    
+
     svg.append('path')
       .datum(this.state.data)
-      .attr('d', line) 
+      .attr('d', line)
       .attr('class', 'line')
       .attr("fill", "none")
       .attr("stroke", "steelblue")
@@ -116,7 +116,7 @@ class Visualization extends Component {
       .attr("stroke-linecap", "round")
       .attr("stroke-width", 1.5)
       .attr('transform', 'translate(30)')
-  } 
+  }
 
   createNewLineGraph(){
     let width = 1039;
@@ -124,7 +124,7 @@ class Visualization extends Component {
     let margin = {top: 20, bottom:20, left:20, right:20}
     this.state.data.map(e => e.createdAt = new Date(e.createdAt));
     console.log('data is being set correctly', this.state.data)
-    // we set the range of the data again 
+    // we set the range of the data again
     let yExtent = d3.extent(this.state.data, e => e.ethValueOfToken);
     let xExtent = d3.extent(this.state.data, e => e.createdAt);
     console.log('new yExtent', yExtent)
@@ -135,18 +135,18 @@ class Visualization extends Component {
       .range([margin.bottom, height - margin.top]);
     let xScale = d3.scaleTime()
       .domain(xExtent)
-      .range([margin.left, width - margin.right]);    
-    // redefine the axes 
+      .range([margin.left, width - margin.right]);
+    // redefine the axes
     let xAxis = d3.axisBottom()
       .scale(xScale)
     let yAxis = d3.axisLeft()
       .scale(yScale)
-        
+
     let svg = this.d3Graph.transition()
     let line = d3.line()
       .x(element => xScale(element.createdAt))
       .y(element => yScale(element.ethValueOfToken))
-        
+
     svg.select('.line')
       .duration(750)
       .attr('d', line(this.state.data))
@@ -159,12 +159,14 @@ class Visualization extends Component {
   }
 
   render () {
-    const width = 1039;
+    const width = 1000;
     const height = 200;
     return (
-      <svg width={width} height={height}>
-        <g ref="graph"/>
-      </svg>
+      <div className="visualization" align="center">
+        <svg width={width} height={height}>
+          <g ref="graph"/>
+        </svg>
+      </div>
     )
   }
 }
@@ -176,6 +178,6 @@ const mapStateToProps = state => ({
 export default connect (mapStateToProps)(Visualization);
 
 // input and output tokens will have to be considered for this to work correctly
-// we'll start by pulling the output token 
+// we'll start by pulling the output token
 // potential problem that these data points are not being written at the exact same time
-// we will deal with that when we get there 
+// we will deal with that when we get there
\ No newline at end of file

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,