1 import Api from './api.js';
2 import React from 'react';
4 class PoloniexController extends React.Component {
7 this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
10 handleCredentialsChange = (key, secret) => {
11 this.setState({'apiKey': key, 'apiSecret': secret});
14 handleCredentialsSubmit = () => {
15 if (!this.state.apiKey || !this.state.apiSecret) {
18 Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) {
20 console.error(err, data);
24 this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
30 Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) {
32 console.error(err, data);
33 if (err.code === 'invalid_market_credentials') {
34 this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
39 this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
43 componentDidMount = () => {
44 Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
45 this.setState({'apiRequested': true});
47 console.error(err, data);
51 var flag = this.state.flag;
52 if (!data.key || !data.secret) {
53 flag = 'emptyCredentials';
58 this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag});
63 var displayText = null;
64 switch (this.state.flag) {
66 displayText = 'Loading data from poloniex...';
68 case 'invalidCredentials':
69 displayText = 'Invalid poloniex credentials';
71 case 'emptyCredentials':
72 displayText = 'Please provide poloniex credentials';
77 if (this.state.apiRequested === false) {
82 <PoloniexBalance balanceCurrency={this.state.valueCurrency}
83 balanceValue={this.state.balanceValue}
84 balance={this.state.balance}
85 displayText={displayText}/>
86 <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials}
87 onCredentialsSubmit={this.handleCredentialsSubmit}
88 onCredentialsChange={this.handleCredentialsChange}
89 apiSecret={this.state.apiSecret}
90 apiKey={this.state.apiKey}/>
96 class CurrencyLogo extends React.Component {
98 return <img className="currency-logo"
99 src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
100 title={this.props.currency}
101 alt={this.props.currency} />;
105 class PoloniexBalance extends React.Component {
108 this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
112 var dashboard = null;
114 if (this.props.balanceValue !== null) {
116 var balance = Object.keys(this.props.balance).map(function(currency) {
117 return <div key={currency}>
118 <CurrencyLogo currency={currency} /> {this.props.balance[currency]}
123 <div className="row">
124 <div className="col-4 align-self-center h-100 balances">
127 <div className="offset-1 col-7 h-100 align-self-center">
128 <div className="text-center">
129 Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} />
135 <div className="row">
136 <div className="col-12 text-center">
137 <span>{this.props.displayText}</span>
143 <div className="row">
144 <div className="box offset-2 col-8 portfolio">
145 <div className="row">
146 <div className="col-4">Portfolio</div>
156 class PoloniexCredentialsForm extends React.Component {
159 this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false};
162 handleSubmit = (e) => {
163 this.props.onCredentialsSubmit();
164 this.setState({'editMode': false});
168 handleApiKeyChange = (event) => {
169 this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
172 handleApiSecretChange = (event) => {
173 this.props.onCredentialsChange(this.props.apiKey, event.target.value);
176 onEditClick = () => {
177 this.setState({'editMode': true});
181 var submitType = this.state.editMode === true ? 'submit' : 'hidden';
182 var buttonDisplay = this.state.editMode === true ? 'none' : 'inline';
183 var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX';
184 var keyDisplayed = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX';
187 <div className="row api-credentials-form">
188 <div className="offset-2 col-8 box">
189 <span className="text-center">Poloniex credentials</span>
191 <form role="form" onSubmit={this.handleSubmit}>
192 <label className="w-100">Key:
193 <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/>
195 <label className="w-100">Secret:
196 <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
198 <input className="form-control submit" type={submitType} value="Save" />
199 <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button>
207 export default PoloniexController;