minor refactor

src/App.js

@@ -14,7 +14,7 @@ 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 Transactions from './components/Transactions';
 // d3
 import Visualization from './components/Visualization';
 // enter redux

src/components/AboutMessage.js

@@ -4,7 +4,7 @@ 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 any other token with liquidity, at an exchange rate based on their relative availibility. When a token trade is executed, a small fee is payed to the liquidity providers for both tokens, proportional to their investment.</p>
+        <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>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>

src/components/ConnectionHelper.js

@@ -5,14 +5,14 @@ function ConnectionHelper(props) {
   if (!props.metamask) {
     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 />
+        <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 />
         <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 exhange platform for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a" >How it works ↘</a><br /><br />
+        <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>
       </div>
     )
@@ -32,7 +32,7 @@ function ConnectionHelper(props) {
   } else if (props.web3Store.interaction === "submitted") {
     return (
       <div className="grey-bg connection border pa2">
-        <p>{"Transaction submitted! Click on the transaction hash below to check its status?"}</p>
+        <p>{"Transaction submitted!"}</p>
       </div>
     )
   } else if (props.exchange.inputValue > props.exchange.inputBalance/10**18 && props.exchange.inputToken.value === 'ETH') {
@@ -44,7 +44,7 @@ function ConnectionHelper(props) {
   } 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>
+        <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>
         <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
       </div>
     )
@@ -82,7 +82,7 @@ function ConnectionHelper(props) {
   } else {
     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 />
+        <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 />
         You're connected. Enter a value below to get started.</p>
         <p>↓</p>
       </div>

src/components/Invest.js

@@ -115,22 +115,22 @@ class Invest extends Component {
           <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> 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(this.props.exchange.investEthPool/10**18).toFixed(4)} ETH </p>
-            <p> {(this.props.exchange.investTokenPool/10**18).toFixed(4)} {this.props.exchange.investToken.value} </p>
+            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(this.props.exchange.investEthPool/10**18).toFixed(5)} ETH </p>
+            <p> {(this.props.exchange.investTokenPool/10**18).toFixed(5)} {this.props.exchange.investToken.value} </p>
           </div>
           <div className="investValue border pa2">
             <p> &nbsp;Each share is worth: </p>
-            <p> {((this.props.exchange.investEthPool/10**18)/this.props.exchange.investShares).toFixed(4)} ETH &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
-            <p> {((this.props.exchange.investTokenPool/10**18)/this.props.exchange.investShares).toFixed(4)} {this.props.exchange.investToken.value} </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>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(this.props.exchange.investEthBalance/10**18).toFixed(4)} ETH </p>
-            <p> {(this.props.exchange.investTokenBalance/10**18).toFixed(4)} {this.props.exchange.investToken.value} </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>
       )

src/components/Visualization.js

@@ -16,9 +16,9 @@ class Visualization extends Component {
   componentDidMount() {
     this.d3Graph = d3.select(ReactDOM.findDOMNode(this.refs.graph));
 
-    let inputToken = this.props.exchange.inputToken.value;
+    //let inputToken = this.props.exchange.inputToken.value;
     let outputToken = this.props.exchange.outputToken.value;
-    console.log(outputToken, 'output token');
+    //console.log(outputToken, 'output token');
 
     let query = `{
       Event(input:"${outputToken}"){
@@ -27,9 +27,9 @@ class Visualization extends Component {
       }
     }`;
 
-    console.log(query, 'query')
+    //console.log(query, 'query')
 
-    axios.get('http://ec2-34-193-175-237.compute-1.amazonaws.com:3000/graphql', { params: {query: query } })
+    axios.get('http://ec2-34-205-17-195.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-193-175-237.compute-1.amazonaws.com:3000/graphql', { params: { query: query }})
+      axios.get('http://ec2-34-205-17-195.compute-1.amazonaws.com:3000/graphql', { params: { query: query }})
       .then(data => this.setState({data: data.data.data.Event}))
       .then(() => {
         this.createNewLineGraph()
@@ -67,7 +67,7 @@ class Visualization extends Component {
     let svg = this.d3Graph
     // 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, 'extent of data', ethValueOfTokenExtent)
+    // console.log('initial data visualized', this.state.data, 'extent of data', ethValueOfTokenExtent)
     // create a y scale, for the eth value of the token
     let yScale = d3.scaleLinear()
       .domain([ethValueOfTokenExtent[1], ethValueOfTokenExtent[0]])
@@ -77,7 +77,7 @@ class Visualization extends Component {
     let yAxis = d3.axisLeft()
       .scale(yScale)
       .ticks(8)
- 
+
     // time to put this y axis on the page
     svg.append('g')
      .attr('class', 'y axis')
@@ -88,7 +88,7 @@ class Visualization extends Component {
     this.state.data.map(e => e.createdAt = new Date(e.createdAt));
     // 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)
+    // 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
@@ -103,7 +103,7 @@ class Visualization extends Component {
       .attr('class', 'x axis')
       .attr('transform', 'translate(80, 265)')
       .call(xAxis);
-    // this right here is the x-axis label 
+    // this right here is the x-axis label
     svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 20 )
@@ -112,7 +112,7 @@ class Visualization extends Component {
      .attr('font-size', '15px')
      .style("text-anchor", "middle")
      .text("Price (ETH)");
-    
+
     let line = d3.line()
       .x(element => xScale(element.createdAt))
       .y(element => yScale(element.ethValueOfToken))