From 24e4797900b3d2edf642fdb547bc22357a5b39ad Mon Sep 17 00:00:00 2001 From: jloup Date: Wed, 9 May 2018 19:44:17 +0200 Subject: Refactor Portfolio balance. --- cmd/web/js/account.jsx | 9 +--- cmd/web/js/api.js | 17 ++++++-- cmd/web/js/balance.jsx | 99 ++++++++++++++++++++++++++++++++++++++++++ cmd/web/js/poloniex.jsx | 112 ++++++++++++++++++++++++++---------------------- 4 files changed, 174 insertions(+), 63 deletions(-) create mode 100644 cmd/web/js/balance.jsx (limited to 'cmd/web/js') diff --git a/cmd/web/js/account.jsx b/cmd/web/js/account.jsx index 43e7083..d30abe7 100644 --- a/cmd/web/js/account.jsx +++ b/cmd/web/js/account.jsx @@ -8,7 +8,7 @@ class PoloniexConfiguration extends React.Component { } checkCredentials = () => { - Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { + Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) { if (err) { console.error(err, data); if (err.code === 'invalid_market_credentials') { @@ -28,13 +28,6 @@ class PoloniexConfiguration extends React.Component { } handleCredentialsSubmit = () => { - - /* - *If (!this.state.apiKey || !this.state.apiSecret) { - * return; - *} - */ - Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) { if (err) { console.error(err, data); diff --git a/cmd/web/js/api.js b/cmd/web/js/api.js index c9b4ef5..f892a6b 100644 --- a/cmd/web/js/api.js +++ b/cmd/web/js/api.js @@ -74,15 +74,24 @@ var ApiEndpoints = { return '/market/' + params.name; } }, - 'MARKET_BALANCE': { + 'MARKET_TEST_CREDENTIALS': { 'type': 'GET', 'auth': true, 'parameters': [ - {'name': 'name', 'mandatory': true, 'inquery': false}, - {'name': 'currency', 'mandatory': true, 'inquery': true}, + {'name': 'name', 'mandatory': true, 'inquery': false}, + ], + 'buildUrl': function(params) { + return '/market/' + params.name + '/test-credentials'; + } + }, + 'MARKET_GET_PORTFOLIO': { + 'type': 'GET', + 'auth': true, + 'parameters': [ + {'name': 'name', 'mandatory': true, 'inquery': false}, ], 'buildUrl': function(params) { - return '/market/' + params.name + '/balance'; + return '/market/' + params.name + '/portfolio'; } }, 'UPDATE_MARKET': { diff --git a/cmd/web/js/balance.jsx b/cmd/web/js/balance.jsx new file mode 100644 index 0000000..d141aa8 --- /dev/null +++ b/cmd/web/js/balance.jsx @@ -0,0 +1,99 @@ +import React from 'react'; +import moment from 'moment'; + +class CurrencyLogo extends React.Component { + render = () => { + return
+ {this.props.currency} +
; + } + } + + var formatVariation = (variation) => { + var variationAbs = Math.abs(variation); + if (variation === 0.0) { + return {variationAbs}%; + } else if (variation > 0) { + return +{variationAbs}%; + } + return -{variationAbs}%; +}; + + +class CurrencyRateHeader extends React.Component { + render = () => { + return +
+
Asset
+
Position
+
Qty
+
Value (BTC)
+
Weight
+
Perf %
+
+ ; + } +} + +class CurrencyRate extends React.Component { + render = () => { + return +
+
{this.props.currency}
+
{this.props.positionType}
+
{this.props.quantity}
+
{this.props.BTCValue}
+
{this.props.weight}%
+
{formatVariation(this.props.positionPerformanceP)}
+
+ ; + } +} + +class Assets extends React.Component { + render = () => { + var currencies = Object.keys(this.props.balances).map(function(currency) { + var balance = this.props.balances[currency]; + balance.currency = currency; + return
+
+
; + }.bind(this)); + + return
+ + {currencies} +
; + } +} + +class PFBalance extends React.Component { + render = () => { + var date = moment(this.props.periodStart).format('MMM Do, h:mma'); + return +
+
+
+ Current balance +
+
+ {this.props.balance} +
+
+
+
+ since {date} +
+
+ {formatVariation(this.props.variationP)} +
+
+
+ ; + } +} + +export {PFBalance, Assets}; diff --git a/cmd/web/js/poloniex.jsx b/cmd/web/js/poloniex.jsx index edac368..6019ef8 100644 --- a/cmd/web/js/poloniex.jsx +++ b/cmd/web/js/poloniex.jsx @@ -1,30 +1,45 @@ import Api from './api.js'; import React from 'react'; +import {PFBalance, Assets} from './balance.js'; class PoloniexController extends React.Component { constructor(props) { super(props); - this.state = {'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; + this.state = {'flag': 'loading', 'periodStart': null, 'variationP': null, 'balance': null, 'balances': null}; } - loadBalance = () => { - Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { + testCredentials = () => { + Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) { if (err) { console.error(err, data); if (err.code === 'invalid_market_credentials') { - this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); + this.setState({'flag': 'invalidCredentials', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null}); } else if (err.code === 'ip_restricted_api_key') { - this.setState({'flag': 'ipRestricted', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); + this.setState({'flag': 'ipRestricted', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null}); } return; } - this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); + this.loadPortfolio(); + }.bind(this)); + } + + loadPortfolio = () => { + Api.Call('MARKET_GET_PORTFOLIO', {'name': 'poloniex'}, function(err, status, data) { + if (err) { + console.error(err, data); + if (err.code === 'not_found') { + this.setState({'flag': 'noReport', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null}); + } + return; + } + + this.setState({'flag': 'ok', 'variationP': data.performance.variationP, 'balance': data.value, 'balances': data.balances, 'periodStart': data.periodStart}); }.bind(this)); } componentDidMount = () => { - this.loadBalance(); + this.testCredentials(); } render = () => { @@ -33,10 +48,13 @@ class PoloniexController extends React.Component { case 'loading': displayText = 'Loading data from poloniex...'; break; + case 'noReport': + displayText = 'Your account is setup ! Reporting will start next Monday !'; + break; case 'invalidCredentials': case 'ipRestricted': case 'emptyCredentials': - displayText =
Please provide poloniex credentials in Account page.
; + displayText =
Please provide poloniex credentials in Account page.
; break; default: displayText = null; @@ -44,59 +62,55 @@ class PoloniexController extends React.Component { return (
); } } -class CurrencyLogo extends React.Component { +class Panel extends React.Component { render = () => { - return {this.props.currency}; + if (this.props.component === null) { + return
; + } + + return ( +
+
+
+
{this.props.title}
+
+
+ {this.props.component} +
+
); } } class PoloniexBalance extends React.Component { - constructor(props) { - super(props); - this.state = {'hideMsg': true, 'msg': '', 'msgOk': false}; - } - - computeCurrencyRatio = (currency) => { - return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1); - } render = () => { - var dashboard = null; - - if (this.props.balanceValue !== null) { + var balancePanel = null; + var assetsPanel = null; + var messagePanel = null; - var balance = Object.keys(this.props.balance).map(function(currency) { - return
-
- {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%) -
-
; - }.bind(this)); - - dashboard = + if (this.props.variationP !== null) { + balancePanel =
-
- {balance} -
-
-
- Balance ({this.props.balanceCurrency}): {this.props.balanceValue} -
+
+
; + + assetsPanel = + ; + } else { - dashboard = + messagePanel =
{this.props.displayText} @@ -105,15 +119,11 @@ class PoloniexBalance extends React.Component { } return ( -
-
-
-
Portfolio
-
-
- {dashboard} -
-
+ + + + + ); } } -- cgit v1.2.3