]>
Commit | Line | Data |
---|---|---|
1 | import Api from './api.js'; | |
2 | import React from 'react'; | |
3 | ||
4 | class PoloniexController extends React.Component { | |
5 | constructor(props) { | |
6 | super(props); | |
7 | this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; | |
8 | } | |
9 | ||
10 | handleCredentialsChange = (key, secret) => { | |
11 | this.setState({'apiKey': key, 'apiSecret': secret}); | |
12 | } | |
13 | ||
14 | handleCredentialsSubmit = () => { | |
15 | if (!this.state.apiKey || !this.state.apiSecret) { | |
16 | return; | |
17 | } | |
18 | Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) { | |
19 | if (err) { | |
20 | console.error(err, data); | |
21 | return; | |
22 | } | |
23 | ||
24 | this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); | |
25 | this.loadBalance(); | |
26 | }.bind(this)); | |
27 | } | |
28 | ||
29 | loadBalance = () => { | |
30 | Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { | |
31 | if (err) { | |
32 | console.error(err, data); | |
33 | if (err.code === 'invalid_market_credentials') { | |
34 | this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); | |
35 | } | |
36 | return; | |
37 | } | |
38 | ||
39 | this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); | |
40 | }.bind(this)); | |
41 | } | |
42 | ||
43 | componentDidMount = () => { | |
44 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { | |
45 | this.setState({'apiRequested': true}); | |
46 | if (err) { | |
47 | console.error(err, data); | |
48 | return; | |
49 | } | |
50 | ||
51 | var flag = this.state.flag; | |
52 | if (!data.key || !data.secret) { | |
53 | flag = 'emptyCredentials'; | |
54 | } else { | |
55 | this.loadBalance(); | |
56 | } | |
57 | ||
58 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag}); | |
59 | }.bind(this)); | |
60 | } | |
61 | ||
62 | render = () => { | |
63 | var displayText = null; | |
64 | switch (this.state.flag) { | |
65 | case 'loading': | |
66 | displayText = 'Loading data from poloniex...'; | |
67 | break; | |
68 | case 'invalidCredentials': | |
69 | displayText = 'Invalid poloniex credentials'; | |
70 | break; | |
71 | case 'emptyCredentials': | |
72 | displayText = 'Please provide poloniex credentials'; | |
73 | break; | |
74 | default: | |
75 | displayText = null; | |
76 | } | |
77 | if (this.state.apiRequested === false) { | |
78 | return <div></div>; | |
79 | } | |
80 | return ( | |
81 | <div> | |
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}/> | |
91 | </div> | |
92 | ); | |
93 | } | |
94 | } | |
95 | ||
96 | class CurrencyLogo extends React.Component { | |
97 | render = () => { | |
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} />; | |
102 | } | |
103 | } | |
104 | ||
105 | class PoloniexBalance extends React.Component { | |
106 | constructor(props) { | |
107 | super(props); | |
108 | this.state = {'hideMsg': true, 'msg': '', 'msgOk': false}; | |
109 | } | |
110 | ||
111 | render = () => { | |
112 | var dashboard = null; | |
113 | ||
114 | if (this.props.balanceValue !== null) { | |
115 | ||
116 | var balance = Object.keys(this.props.balance).map(function(currency) { | |
117 | return <div key={currency}> | |
118 | <CurrencyLogo currency={currency} /> {this.props.balance[currency]} | |
119 | </div>; | |
120 | }.bind(this)); | |
121 | ||
122 | dashboard = | |
123 | <div className="row"> | |
124 | <div className="col-4 align-self-center h-100 balances"> | |
125 | {balance} | |
126 | </div> | |
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} /> | |
130 | </div> | |
131 | </div> | |
132 | </div>; | |
133 | } else { | |
134 | dashboard = | |
135 | <div className="row"> | |
136 | <div className="col-12 text-center"> | |
137 | <span>{this.props.displayText}</span> | |
138 | </div> | |
139 | </div>; | |
140 | } | |
141 | ||
142 | return ( | |
143 | <div className="row"> | |
144 | <div className="box offset-2 col-8 portfolio"> | |
145 | <div className="row"> | |
146 | <div className="col-4">Portfolio</div> | |
147 | </div> | |
148 | <hr/> | |
149 | {dashboard} | |
150 | </div> | |
151 | </div> | |
152 | ); | |
153 | } | |
154 | } | |
155 | ||
156 | class PoloniexCredentialsForm extends React.Component { | |
157 | constructor(props) { | |
158 | super(props); | |
159 | this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false}; | |
160 | } | |
161 | ||
162 | handleSubmit = (e) => { | |
163 | this.props.onCredentialsSubmit(); | |
164 | this.setState({'editMode': false}); | |
165 | e.preventDefault(); | |
166 | } | |
167 | ||
168 | handleApiKeyChange = (event) => { | |
169 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); | |
170 | } | |
171 | ||
172 | handleApiSecretChange = (event) => { | |
173 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); | |
174 | } | |
175 | ||
176 | onEditClick = () => { | |
177 | this.setState({'editMode': true}); | |
178 | } | |
179 | ||
180 | render = () => { | |
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'; | |
185 | ||
186 | return ( | |
187 | <div className="row api-credentials-form"> | |
188 | <div className="offset-2 col-8 box"> | |
189 | <span className="text-center">Poloniex credentials</span> | |
190 | <hr/> | |
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}/> | |
194 | </label> | |
195 | <label className="w-100">Secret: | |
196 | <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/> | |
197 | </label> | |
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> | |
200 | </form> | |
201 | </div> | |
202 | </div> | |
203 | ); | |
204 | } | |
205 | } | |
206 | ||
207 | export default PoloniexController; |