diff options
author | jloup <jeanloup.jamet@gmail.com> | 2018-05-07 17:39:58 +0200 |
---|---|---|
committer | jloup <jeanloup.jamet@gmail.com> | 2018-05-07 17:41:18 +0200 |
commit | 16e43cc77935a979c48e75f1ec8ed792952a4ae8 (patch) | |
tree | 3aae8d5ba819a791ef28e00d6536d38af5bbdf05 /cmd/web/js/poloniex.jsx | |
parent | bf5deb87cef2b6f1370c808821dfb631d00590f6 (diff) | |
download | Front-16e43cc77935a979c48e75f1ec8ed792952a4ae8.tar.gz Front-16e43cc77935a979c48e75f1ec8ed792952a4ae8.tar.zst Front-16e43cc77935a979c48e75f1ec8ed792952a4ae8.zip |
Account page.
Diffstat (limited to 'cmd/web/js/poloniex.jsx')
-rw-r--r-- | cmd/web/js/poloniex.jsx | 110 |
1 files changed, 8 insertions, 102 deletions
diff --git a/cmd/web/js/poloniex.jsx b/cmd/web/js/poloniex.jsx index db6b1c4..76b68d8 100644 --- a/cmd/web/js/poloniex.jsx +++ b/cmd/web/js/poloniex.jsx | |||
@@ -4,26 +4,7 @@ import React from 'react'; | |||
4 | class PoloniexController extends React.Component { | 4 | class PoloniexController extends React.Component { |
5 | constructor(props) { | 5 | constructor(props) { |
6 | super(props); | 6 | super(props); |
7 | this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; | 7 | this.state = {'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 | } | 8 | } |
28 | 9 | ||
29 | loadBalance = () => { | 10 | loadBalance = () => { |
@@ -31,34 +12,19 @@ class PoloniexController extends React.Component { | |||
31 | if (err) { | 12 | if (err) { |
32 | console.error(err, data); | 13 | console.error(err, data); |
33 | if (err.code === 'invalid_market_credentials') { | 14 | if (err.code === 'invalid_market_credentials') { |
34 | this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); | 15 | this.setState({'flag': 'invalidCredentials', 'apiRequested': true, 'valueCurrency': null, 'balanceValue': null, 'balance': null}); |
35 | } else if (err.code === 'ip_restricted_api_key') { | 16 | } else if (err.code === 'ip_restricted_api_key') { |
36 | this.setState({'flag': 'ipRestricted', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); | 17 | this.setState({'flag': 'ipRestricted', 'apiRequested': true, 'valueCurrency': null, 'balanceValue': null, 'balance': null}); |
37 | } | 18 | } |
38 | return; | 19 | return; |
39 | } | 20 | } |
40 | 21 | ||
41 | this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); | 22 | this.setState({'flag': 'ok', 'apiRequested': true, 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); |
42 | }.bind(this)); | 23 | }.bind(this)); |
43 | } | 24 | } |
44 | 25 | ||
45 | componentDidMount = () => { | 26 | componentDidMount = () => { |
46 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { | 27 | this.loadBalance(); |
47 | this.setState({'apiRequested': true}); | ||
48 | if (err) { | ||
49 | console.error(err, data); | ||
50 | return; | ||
51 | } | ||
52 | |||
53 | var flag = this.state.flag; | ||
54 | if (!data.key || !data.secret) { | ||
55 | flag = 'emptyCredentials'; | ||
56 | } else { | ||
57 | this.loadBalance(); | ||
58 | } | ||
59 | |||
60 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag}); | ||
61 | }.bind(this)); | ||
62 | } | 28 | } |
63 | 29 | ||
64 | render = () => { | 30 | render = () => { |
@@ -68,13 +34,9 @@ class PoloniexController extends React.Component { | |||
68 | displayText = 'Loading data from poloniex...'; | 34 | displayText = 'Loading data from poloniex...'; |
69 | break; | 35 | break; |
70 | case 'invalidCredentials': | 36 | case 'invalidCredentials': |
71 | displayText = 'Invalid poloniex credentials'; | ||
72 | break; | ||
73 | case 'ipRestricted': | 37 | case 'ipRestricted': |
74 | displayText = 'Your API key is IP restricted. Please whitelist us.'; | ||
75 | break; | ||
76 | case 'emptyCredentials': | 38 | case 'emptyCredentials': |
77 | displayText = 'Please provide poloniex credentials'; | 39 | displayText = <div>Please provide poloniex credentials in <a href="/account">Account</a> page.</div>; |
78 | break; | 40 | break; |
79 | default: | 41 | default: |
80 | displayText = null; | 42 | displayText = null; |
@@ -88,11 +50,6 @@ class PoloniexController extends React.Component { | |||
88 | balanceValue={this.state.balanceValue} | 50 | balanceValue={this.state.balanceValue} |
89 | balance={this.state.balance} | 51 | balance={this.state.balance} |
90 | displayText={displayText}/> | 52 | displayText={displayText}/> |
91 | <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials} | ||
92 | onCredentialsSubmit={this.handleCredentialsSubmit} | ||
93 | onCredentialsChange={this.handleCredentialsChange} | ||
94 | apiSecret={this.state.apiSecret} | ||
95 | apiKey={this.state.apiKey}/> | ||
96 | </div> | 53 | </div> |
97 | ); | 54 | ); |
98 | } | 55 | } |
@@ -141,14 +98,14 @@ class PoloniexBalance extends React.Component { | |||
141 | </div> | 98 | </div> |
142 | </div> | 99 | </div> |
143 | </div>; | 100 | </div>; |
144 | } else { | 101 | } else { |
145 | dashboard = | 102 | dashboard = |
146 | <div className="row"> | 103 | <div className="row"> |
147 | <div className="col-12 text-center"> | 104 | <div className="col-12 text-center"> |
148 | <span>{this.props.displayText}</span> | 105 | <span>{this.props.displayText}</span> |
149 | </div> | 106 | </div> |
150 | </div>; | 107 | </div>; |
151 | } | 108 | } |
152 | 109 | ||
153 | return ( | 110 | return ( |
154 | <div className="row"> | 111 | <div className="row"> |
@@ -164,55 +121,4 @@ class PoloniexBalance extends React.Component { | |||
164 | } | 121 | } |
165 | } | 122 | } |
166 | 123 | ||
167 | class PoloniexCredentialsForm extends React.Component { | ||
168 | constructor(props) { | ||
169 | super(props); | ||
170 | this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false}; | ||
171 | } | ||
172 | |||
173 | handleSubmit = (e) => { | ||
174 | this.props.onCredentialsSubmit(); | ||
175 | this.setState({'editMode': false}); | ||
176 | e.preventDefault(); | ||
177 | } | ||
178 | |||
179 | handleApiKeyChange = (event) => { | ||
180 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); | ||
181 | } | ||
182 | |||
183 | handleApiSecretChange = (event) => { | ||
184 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); | ||
185 | } | ||
186 | |||
187 | onEditClick = () => { | ||
188 | this.setState({'editMode': true}); | ||
189 | } | ||
190 | |||
191 | render = () => { | ||
192 | var submitType = this.state.editMode === true ? 'submit' : 'hidden'; | ||
193 | var buttonDisplay = this.state.editMode === true ? 'none' : 'inline'; | ||
194 | var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX'; | ||
195 | var keyDisplayed = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX'; | ||
196 | |||
197 | return ( | ||
198 | <div className="row api-credentials-form"> | ||
199 | <div className="offset-2 col-8 box"> | ||
200 | <span className="text-center">Poloniex credentials</span> | ||
201 | <hr/> | ||
202 | <form role="form" onSubmit={this.handleSubmit}> | ||
203 | <label className="w-100">Key: | ||
204 | <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/> | ||
205 | </label> | ||
206 | <label className="w-100">Secret: | ||
207 | <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/> | ||
208 | </label> | ||
209 | <input className="form-control submit" type={submitType} value="Save" /> | ||
210 | <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button> | ||
211 | </form> | ||
212 | </div> | ||
213 | </div> | ||
214 | ); | ||
215 | } | ||
216 | } | ||
217 | |||
218 | export default PoloniexController; | 124 | export default PoloniexController; |