]>
Commit | Line | Data |
---|---|---|
16e43cc7 | 1 | import Api from './api.js'; |
2 | import React from 'react'; | |
3 | ||
4 | class PoloniexConfiguration extends React.Component { | |
5 | constructor(props) { | |
6 | super(props); | |
c6aa553f | 7 | this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'status': 'loading', 'editMode': false}; |
16e43cc7 | 8 | } |
9 | ||
10 | checkCredentials = () => { | |
24e47979 | 11 | Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) { |
c6aa553f | 12 | this.setState({'apiRequested': true}); |
16e43cc7 | 13 | if (err) { |
14 | console.error(err, data); | |
15 | if (err.code === 'invalid_market_credentials') { | |
16 | this.setState({'status': 'invalidCredentials'}); | |
17 | } else if (err.code === 'ip_restricted_api_key') { | |
18 | this.setState({'status': 'ipRestricted'}); | |
c6aa553f | 19 | } else if (err.code === 'market_credentials_not_configured') { |
20 | this.setState({'status': 'emptyCredentials'}); | |
16e43cc7 | 21 | } |
22 | return; | |
23 | } | |
24 | ||
25 | this.setState({'status': 'ok'}); | |
26 | }.bind(this)); | |
27 | } | |
28 | ||
29 | handleCredentialsChange = (key, secret) => { | |
30 | this.setState({'apiKey': key, 'apiSecret': secret}); | |
31 | } | |
32 | ||
33 | handleCredentialsSubmit = () => { | |
c6aa553f | 34 | this.setState({'status': 'loading', 'editMode': false}); |
16e43cc7 | 35 | Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) { |
36 | if (err) { | |
37 | console.error(err, data); | |
299b6b6d | 38 | if (err.code === 'invalid_market_credentials') { |
39 | this.setState({'status': 'invalidCredentials'}); | |
40 | } else if (err.code === 'ip_restricted_api_key') { | |
41 | this.setState({'status': 'ipRestricted'}); | |
42 | } | |
16e43cc7 | 43 | return; |
44 | } | |
45 | ||
16e43cc7 | 46 | this.checkCredentials(); |
47 | }.bind(this)); | |
48 | } | |
49 | ||
50 | componentDidMount = () => { | |
c6aa553f | 51 | this.checkCredentials(); |
52 | } | |
53 | ||
54 | onEditClick = () => { | |
55 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { | |
56 | this.setState({'apiRequested': true, 'editMode': true}); | |
16e43cc7 | 57 | if (err) { |
58 | console.error(err, data); | |
59 | return; | |
60 | } | |
61 | ||
62 | var newStatus = this.state.status; | |
63 | if (!data.key || !data.secret) { | |
64 | newStatus = 'emptyCredentials'; | |
16e43cc7 | 65 | } |
66 | ||
67 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'status': newStatus}); | |
68 | }.bind(this)); | |
69 | } | |
70 | ||
71 | render = () => { | |
72 | var displayText = null; | |
73 | switch (this.state.status) { | |
74 | case 'loading': | |
75 | displayText = 'Checking Poloniex credentials...'; | |
76 | break; | |
77 | case 'invalidCredentials': | |
78 | displayText = 'Invalid poloniex credentials'; | |
79 | break; | |
80 | case 'ipRestricted': | |
81 | displayText = 'Your API key is IP restricted.'; | |
82 | break; | |
83 | case 'emptyCredentials': | |
84 | displayText = 'Please provide poloniex credentials'; | |
85 | break; | |
86 | case 'ok': | |
87 | displayText = 'You are all set !'; | |
88 | break; | |
89 | default: | |
90 | console.error('unknown status', this.state.status); | |
91 | displayText = null; | |
92 | } | |
93 | if (this.state.apiRequested === false) { | |
94 | return <div></div>; | |
95 | } | |
96 | return ( | |
97 | <div> | |
98 | <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials} | |
99 | onCredentialsSubmit={this.handleCredentialsSubmit} | |
100 | onCredentialsChange={this.handleCredentialsChange} | |
101 | apiSecret={this.state.apiSecret} | |
102 | apiKey={this.state.apiKey} | |
103 | status={this.state.status} | |
c6aa553f | 104 | statusMessage={displayText} |
105 | editMode={this.state.editMode} | |
106 | onEditClick={this.onEditClick}/> | |
16e43cc7 | 107 | </div> |
108 | ); | |
109 | } | |
110 | } | |
111 | ||
112 | class PoloniexCredentialsForm extends React.Component { | |
16e43cc7 | 113 | handleSubmit = (e) => { |
114 | this.props.onCredentialsSubmit(); | |
16e43cc7 | 115 | e.preventDefault(); |
116 | } | |
117 | ||
118 | handleApiKeyChange = (event) => { | |
119 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); | |
120 | } | |
121 | ||
122 | handleApiSecretChange = (event) => { | |
123 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); | |
124 | } | |
125 | ||
16e43cc7 | 126 | render = () => { |
c6aa553f | 127 | var submitType = this.props.editMode === true ? 'submit' : 'hidden'; |
128 | var buttonDisplay = this.props.editMode === true ? 'none' : 'inline'; | |
129 | var secretDisplayed = this.props.editMode === true ? this.props.apiSecret : 'XXXXXXX'; | |
130 | var keyDisplayed = this.props.editMode === true ? this.props.apiKey : 'XXXXXXX'; | |
16e43cc7 | 131 | |
132 | var iconName = 'icon-cancel-circled'; | |
133 | switch (this.props.status) { | |
134 | case 'loading': | |
135 | iconName = 'icon-hourglass-2'; | |
136 | break; | |
137 | case 'ok': | |
138 | iconName = 'icon-ok-circled'; | |
139 | break; | |
140 | } | |
141 | ||
142 | return ( | |
143 | <div className="row api-credentials-form"> | |
144 | <div className="offset-2 col-8 box"> | |
145 | <span className="text-center">Poloniex credentials</span> | |
146 | <hr/> | |
147 | <div className="row config-status"> | |
148 | <div className="col-12"> | |
149 | <span><i className={iconName}></i>{this.props.statusMessage}</span> | |
150 | </div> | |
151 | </div> | |
152 | <div className="row"> | |
153 | <div className="col-12"> | |
154 | <form role="form" onSubmit={this.handleSubmit}> | |
155 | <label className="w-100">Key: | |
c6aa553f | 156 | <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.props.editMode}/> |
16e43cc7 | 157 | </label> |
158 | <label className="w-100">Secret: | |
c6aa553f | 159 | <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.props.editMode}/> |
16e43cc7 | 160 | </label> |
161 | <input className="form-control submit" type={submitType} value="Save" /> | |
c6aa553f | 162 | <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.props.onEditClick} type="button">Show/Edit</button> |
16e43cc7 | 163 | </form> |
164 | </div> | |
165 | </div> | |
166 | </div> | |
167 | </div> | |
168 | ); | |
169 | } | |
170 | } | |
171 | ||
172 | export default PoloniexConfiguration; |