aboutsummaryrefslogtreecommitdiff
path: root/cmd
diff options
context:
space:
mode:
Diffstat (limited to 'cmd')
-rw-r--r--cmd/web/Makefile2
-rw-r--r--cmd/web/js/account.jsx9
-rw-r--r--cmd/web/js/api.js17
-rw-r--r--cmd/web/js/balance.jsx99
-rw-r--r--cmd/web/js/poloniex.jsx112
-rw-r--r--cmd/web/package.json1
-rw-r--r--cmd/web/static/style.css38
-rw-r--r--cmd/web/yarn.lock4
8 files changed, 208 insertions, 74 deletions
diff --git a/cmd/web/Makefile b/cmd/web/Makefile
index 52e2289..7315d5e 100644
--- a/cmd/web/Makefile
+++ b/cmd/web/Makefile
@@ -4,7 +4,7 @@ export PATH := $(PATH):./node_modules/.bin
4 4
5SRC_DIR=js 5SRC_DIR=js
6BUILD_DIR=build/js 6BUILD_DIR=build/js
7JSX_SRC= header_footer.jsx main.jsx signup.jsx signin.jsx otp.jsx poloniex.jsx password_reset.jsx change_password.jsx account.jsx 7JSX_SRC= header_footer.jsx main.jsx signup.jsx signin.jsx otp.jsx poloniex.jsx password_reset.jsx change_password.jsx account.jsx balance.jsx
8JS_SRC= cookies.js app.js api.js 8JS_SRC= cookies.js app.js api.js
9STATIC_FILES= index.html style.css fontello.css 9STATIC_FILES= index.html style.css fontello.css
10STATIC_FILES+=$(addprefix fonts/, fontello.eot fontello.svg fontello.ttf fontello.woff fontello.woff2) 10STATIC_FILES+=$(addprefix fonts/, fontello.eot fontello.svg fontello.ttf fontello.woff fontello.woff2)
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 {
8 } 8 }
9 9
10 checkCredentials = () => { 10 checkCredentials = () => {
11 Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { 11 Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) {
12 if (err) { 12 if (err) {
13 console.error(err, data); 13 console.error(err, data);
14 if (err.code === 'invalid_market_credentials') { 14 if (err.code === 'invalid_market_credentials') {
@@ -28,13 +28,6 @@ class PoloniexConfiguration extends React.Component {
28 } 28 }
29 29
30 handleCredentialsSubmit = () => { 30 handleCredentialsSubmit = () => {
31
32 /*
33 *If (!this.state.apiKey || !this.state.apiSecret) {
34 * return;
35 *}
36 */
37
38 Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) { 31 Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) {
39 if (err) { 32 if (err) {
40 console.error(err, data); 33 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 = {
74 return '/market/' + params.name; 74 return '/market/' + params.name;
75 } 75 }
76 }, 76 },
77 'MARKET_BALANCE': { 77 'MARKET_TEST_CREDENTIALS': {
78 'type': 'GET', 78 'type': 'GET',
79 'auth': true, 79 'auth': true,
80 'parameters': [ 80 'parameters': [
81 {'name': 'name', 'mandatory': true, 'inquery': false}, 81 {'name': 'name', 'mandatory': true, 'inquery': false},
82 {'name': 'currency', 'mandatory': true, 'inquery': true}, 82 ],
83 'buildUrl': function(params) {
84 return '/market/' + params.name + '/test-credentials';
85 }
86 },
87 'MARKET_GET_PORTFOLIO': {
88 'type': 'GET',
89 'auth': true,
90 'parameters': [
91 {'name': 'name', 'mandatory': true, 'inquery': false},
83 ], 92 ],
84 'buildUrl': function(params) { 93 'buildUrl': function(params) {
85 return '/market/' + params.name + '/balance'; 94 return '/market/' + params.name + '/portfolio';
86 } 95 }
87 }, 96 },
88 'UPDATE_MARKET': { 97 '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 @@
1import React from 'react';
2import moment from 'moment';
3
4class CurrencyLogo extends React.Component {
5 render = () => {
6 return <div className="d-inline-block h-100">
7 <img className="currency-logo align-top"
8 src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
9 title={this.props.currency}
10 alt={this.props.currency} />
11 </div>;
12 }
13 }
14
15 var formatVariation = (variation) => {
16 var variationAbs = Math.abs(variation);
17 if (variation === 0.0) {
18 return <span>{variationAbs}%</span>;
19 } else if (variation > 0) {
20 return <span className="performance-up">+{variationAbs}%</span>;
21 }
22 return <span className="performance-down">-{variationAbs}%</span>;
23};
24
25
26class CurrencyRateHeader extends React.Component {
27 render = () => {
28 return <React.Fragment>
29 <div className="row text-center">
30 <div className="d-inline col-2">Asset</div>
31 <div className="d-inline col-2">Position</div>
32 <div className="d-inline col-2">Qty</div>
33 <div className="d-inline col-2">Value (BTC)</div>
34 <div className="d-inline col-2">Weight</div>
35 <div className="d-inline col-2">Perf %</div>
36 </div>
37 </React.Fragment>;
38 }
39}
40
41class CurrencyRate extends React.Component {
42 render = () => {
43 return <React.Fragment>
44 <div className="row text-center">
45 <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /><span>{this.props.currency}</span></div>
46 <div className="d-inline col-2">{this.props.positionType}</div>
47 <div className="d-inline col-2">{this.props.quantity}</div>
48 <div className="d-inline col-2">{this.props.BTCValue}</div>
49 <div className="d-inline col-2">{this.props.weight}%</div>
50 <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP)}</div>
51 </div>
52 </React.Fragment>;
53 }
54}
55
56class Assets extends React.Component {
57 render = () => {
58 var currencies = Object.keys(this.props.balances).map(function(currency) {
59 var balance = this.props.balances[currency];
60 balance.currency = currency;
61 return <div className="row" key={currency}>
62 <div className="col-12"><CurrencyRate {...balance} /></div>
63 </div>;
64 }.bind(this));
65
66 return <div className="assets">
67 <CurrencyRateHeader />
68 {currencies}
69 </div>;
70 }
71}
72
73class PFBalance extends React.Component {
74 render = () => {
75 var date = moment(this.props.periodStart).format('MMM Do, h:mma');
76 return <React.Fragment>
77 <div className="h-100 align-self-center balance">
78 <div className="row">
79 <div className="col-8">
80 Current balance
81 </div>
82 <div className="col-4 text-center h-100 btcValue">
83 <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span>
84 </div>
85 </div>
86 <div className="row">
87 <div className="col-8">
88 <em>since {date}</em>
89 </div>
90 <div className="col-4 variation text-center">
91 <strong>{formatVariation(this.props.variationP)}</strong>
92 </div>
93 </div>
94 </div>
95 </React.Fragment>;
96 }
97}
98
99export {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 @@
1import Api from './api.js'; 1import Api from './api.js';
2import React from 'react'; 2import React from 'react';
3import {PFBalance, Assets} from './balance.js';
3 4
4class PoloniexController extends React.Component { 5class PoloniexController extends React.Component {
5 constructor(props) { 6 constructor(props) {
6 super(props); 7 super(props);
7 this.state = {'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; 8 this.state = {'flag': 'loading', 'periodStart': null, 'variationP': null, 'balance': null, 'balances': null};
8 } 9 }
9 10
10 loadBalance = () => { 11 testCredentials = () => {
11 Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { 12 Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) {
12 if (err) { 13 if (err) {
13 console.error(err, data); 14 console.error(err, data);
14 if (err.code === 'invalid_market_credentials') { 15 if (err.code === 'invalid_market_credentials') {
15 this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); 16 this.setState({'flag': 'invalidCredentials', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null});
16 } else if (err.code === 'ip_restricted_api_key') { 17 } else if (err.code === 'ip_restricted_api_key') {
17 this.setState({'flag': 'ipRestricted', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); 18 this.setState({'flag': 'ipRestricted', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null});
18 } 19 }
19 return; 20 return;
20 } 21 }
21 22
22 this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); 23 this.loadPortfolio();
24 }.bind(this));
25 }
26
27 loadPortfolio = () => {
28 Api.Call('MARKET_GET_PORTFOLIO', {'name': 'poloniex'}, function(err, status, data) {
29 if (err) {
30 console.error(err, data);
31 if (err.code === 'not_found') {
32 this.setState({'flag': 'noReport', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null});
33 }
34 return;
35 }
36
37 this.setState({'flag': 'ok', 'variationP': data.performance.variationP, 'balance': data.value, 'balances': data.balances, 'periodStart': data.periodStart});
23 }.bind(this)); 38 }.bind(this));
24 } 39 }
25 40
26 componentDidMount = () => { 41 componentDidMount = () => {
27 this.loadBalance(); 42 this.testCredentials();
28 } 43 }
29 44
30 render = () => { 45 render = () => {
@@ -33,10 +48,13 @@ class PoloniexController extends React.Component {
33 case 'loading': 48 case 'loading':
34 displayText = 'Loading data from poloniex...'; 49 displayText = 'Loading data from poloniex...';
35 break; 50 break;
51 case 'noReport':
52 displayText = 'Your account is setup ! Reporting will start next Monday !';
53 break;
36 case 'invalidCredentials': 54 case 'invalidCredentials':
37 case 'ipRestricted': 55 case 'ipRestricted':
38 case 'emptyCredentials': 56 case 'emptyCredentials':
39 displayText = <div>Please provide poloniex credentials in <a href="/account">Account</a> page.</div>; 57 displayText = <div>Please provide poloniex credentials in <a href="/account"><u>Account</u></a> page.</div>;
40 break; 58 break;
41 default: 59 default:
42 displayText = null; 60 displayText = null;
@@ -44,59 +62,55 @@ class PoloniexController extends React.Component {
44 return ( 62 return (
45 <div> 63 <div>
46 <PoloniexBalance balanceCurrency={this.state.valueCurrency} 64 <PoloniexBalance balanceCurrency={this.state.valueCurrency}
47 balanceValue={this.state.balanceValue} 65 variationP={this.state.variationP}
66 periodStart={this.state.periodStart}
48 balance={this.state.balance} 67 balance={this.state.balance}
68 balances={this.state.balances}
49 displayText={displayText}/> 69 displayText={displayText}/>
50 </div> 70 </div>
51 ); 71 );
52 } 72 }
53} 73}
54 74
55class CurrencyLogo extends React.Component { 75class Panel extends React.Component {
56 render = () => { 76 render = () => {
57 return <img className="currency-logo" 77 if (this.props.component === null) {
58 src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' } 78 return <div></div>;
59 title={this.props.currency} 79 }
60 alt={this.props.currency} />; 80
81 return (
82 <div className="row">
83 <div className="box col-12">
84 <div className="row">
85 <div className="col-4">{this.props.title}</div>
86 </div>
87 <hr/>
88 {this.props.component}
89 </div>
90 </div>);
61 } 91 }
62} 92}
63 93
64class PoloniexBalance extends React.Component { 94class PoloniexBalance extends React.Component {
65 constructor(props) {
66 super(props);
67 this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
68 }
69
70 computeCurrencyRatio = (currency) => {
71 return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1);
72 }
73 95
74 render = () => { 96 render = () => {
75 var dashboard = null; 97 var balancePanel = null;
76 98 var assetsPanel = null;
77 if (this.props.balanceValue !== null) { 99 var messagePanel = null;
78 100
79 var balance = Object.keys(this.props.balance).map(function(currency) { 101 if (this.props.variationP !== null) {
80 return <div key={currency}> 102 balancePanel =
81 <div>
82 <CurrencyLogo currency={currency} /> {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%)
83 </div>
84 </div>;
85 }.bind(this));
86
87 dashboard =
88 <div className="row"> 103 <div className="row">
89 <div className="col-6 align-self-center h-100 balances"> 104 <div className="col-12 offset-md-1 col-md-10 align-self-center h-100 balances">
90 {balance} 105 <PFBalance variationP={this.props.variationP} balance={this.props.balance} periodStart={this.props.periodStart}/>
91 </div>
92 <div className="offset-1 col-5 h-100 align-self-center">
93 <div className="text-center">
94 Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} />
95 </div>
96 </div> 106 </div>
97 </div>; 107 </div>;
108
109 assetsPanel =
110 <Assets balances={this.props.balances} />;
111
98 } else { 112 } else {
99 dashboard = 113 messagePanel =
100 <div className="row"> 114 <div className="row">
101 <div className="col-12 text-center"> 115 <div className="col-12 text-center">
102 <span>{this.props.displayText}</span> 116 <span>{this.props.displayText}</span>
@@ -105,15 +119,11 @@ class PoloniexBalance extends React.Component {
105 } 119 }
106 120
107 return ( 121 return (
108 <div className="row"> 122 <React.Fragment>
109 <div className="box offset-2 col-8 portfolio"> 123 <Panel title="Balance" component={balancePanel}/>
110 <div className="row"> 124 <Panel title="Assets" component={assetsPanel}/>
111 <div className="col-4">Portfolio</div> 125 <Panel title="Balance" component={messagePanel}/>
112 </div> 126 </React.Fragment>
113 <hr/>
114 {dashboard}
115 </div>
116 </div>
117 ); 127 );
118 } 128 }
119} 129}
diff --git a/cmd/web/package.json b/cmd/web/package.json
index a867313..0bfb4e9 100644
--- a/cmd/web/package.json
+++ b/cmd/web/package.json
@@ -12,6 +12,7 @@
12 "classnames": "^2.2.5", 12 "classnames": "^2.2.5",
13 "debowerify": "^1.3.1", 13 "debowerify": "^1.3.1",
14 "localenvify": "^1.0.1", 14 "localenvify": "^1.0.1",
15 "moment": "^2.22.1",
15 "page": "^1.8.3", 16 "page": "^1.8.3",
16 "path-to-regexp": "^1.2.1", 17 "path-to-regexp": "^1.2.1",
17 "qs": "^6.5.1", 18 "qs": "^6.5.1",
diff --git a/cmd/web/static/style.css b/cmd/web/static/style.css
index 2212168..e4da176 100644
--- a/cmd/web/static/style.css
+++ b/cmd/web/static/style.css
@@ -54,6 +54,14 @@ h1 {
54 margin-top: 5px; 54 margin-top: 5px;
55} 55}
56 56
57.performance-up {
58 color: green;
59}
60
61.performance-down {
62 color: red;
63}
64
57.sign-in .form-control { 65.sign-in .form-control {
58 margin-bottom: 20px; 66 margin-bottom: 20px;
59 border-radius: 2px; 67 border-radius: 2px;
@@ -63,16 +71,12 @@ h1 {
63 71
64.config-status { 72.config-status {
65 margin-bottom: 10px; 73 margin-bottom: 10px;
66 font-size: 0.9em;
67} 74}
68 75
69.config-status .icon-cancel-circled { 76.config-status .icon-cancel-circled {}
70 color: red; 77
71} 78.config-status .icon-ok-circled {}
72 79
73.config-status .icon-ok-circled {
74 color: green;
75}
76.config-status i { 80.config-status i {
77 font-size: 1.2em; 81 font-size: 1.2em;
78} 82}
@@ -123,13 +127,27 @@ h1 {
123 display: inline-block; 127 display: inline-block;
124 margin-left: 5px; 128 margin-left: 5px;
125 margin-right: 5px; 129 margin-right: 5px;
126} 130
127
128.portfolio .currency-logo {
129 height: 24px; 131 height: 24px;
130 width: 24px; 132 width: 24px;
131} 133}
132 134
135.balance > .btcValue {
136 font-size: 1.2em;
137}
138
139.balance > .variation {
140 font-size: 1.2em;
141}
142
143.balance > .row {
144 margin-bottom: 10px;
145}
146
147.assets > .row {
148 margin-bottom: 10px;
149}
150
133.balances > div { 151.balances > div {
134 margin-bottom: 5px; 152 margin-bottom: 5px;
135} 153}
diff --git a/cmd/web/yarn.lock b/cmd/web/yarn.lock
index b4a18f4..366391a 100644
--- a/cmd/web/yarn.lock
+++ b/cmd/web/yarn.lock
@@ -3078,6 +3078,10 @@ module-deps@^5.0.1:
3078 through2 "^2.0.0" 3078 through2 "^2.0.0"
3079 xtend "^4.0.0" 3079 xtend "^4.0.0"
3080 3080
3081moment@^2.22.1:
3082 version "2.22.1"
3083 resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
3084
3081mout@~0.9.0: 3085mout@~0.9.0:
3082 version "0.9.1" 3086 version "0.9.1"
3083 resolved "https://registry.yarnpkg.com/mout/-/mout-0.9.1.tgz#84f0f3fd6acc7317f63de2affdcc0cee009b0477" 3087 resolved "https://registry.yarnpkg.com/mout/-/mout-0.9.1.tgz#84f0f3fd6acc7317f63de2affdcc0cee009b0477"