Skip to content

I
interface
Commit 1a73cdfa authored by Hayden Adams's avatar Hayden Adams
Browse files
Options

first deployment w/ visualization and investment

parent 994933f9
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 45 deletions
src/App.css
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -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
\ No newline at end of file
// we will deal with that when we get there
src/constants.js
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -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
View file @ 1a73cdfa
......@@ -54,6 +54,7 @@ export default {
investEthPool: 0,
investTokenPool: 0,
investShares: 0,
userShares: 0,
investTokenBalance: 0,
investEthBalance: 0,
investSharesInput: 0,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment