]>
Commit | Line | Data |
---|---|---|
989fb5c7 | 1 | import Api from './api.js'; |
989fb5c7 | 2 | import React from 'react'; |
3 | ||
4 | class PoloniexController extends React.Component { | |
5 | constructor(props) { | |
6 | super(props); | |
adf936f6 | 7 | this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}; |
989fb5c7 | 8 | } |
9 | ||
10 | handleCredentialsChange = (key, secret) => { | |
2f91f20a | 11 | this.setState({'apiKey': key, 'apiSecret': secret}); |
989fb5c7 | 12 | } |
13 | ||
14 | handleCredentialsSubmit = () => { | |
2f91f20a | 15 | if (!this.state.apiKey || !this.state.apiSecret) { |
16 | return; | |
17 | } | |
7a9e5112 | 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); | |
7a9e5112 | 21 | return; |
22 | } | |
23 | ||
2f91f20a | 24 | this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); |
25 | this.loadBalance(); | |
26 | }.bind(this)); | |
989fb5c7 | 27 | } |
28 | ||
29 | loadBalance = () => { | |
2f91f20a | 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}); | |
908ee2dd | 35 | } else if (err.code === 'ip_restricted_api_key') { |
36 | this.setState({'flag': 'ipRestricted', 'valueCurrency': null, 'balanceValue': null, 'balance': null}); | |
2f91f20a | 37 | } |
38 | return; | |
39 | } | |
7a9e5112 | 40 | |
2f91f20a | 41 | this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance}); |
7a9e5112 | 42 | }.bind(this)); |
989fb5c7 | 43 | } |
44 | ||
45 | componentDidMount = () => { | |
2f91f20a | 46 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { |
adf936f6 | 47 | this.setState({'apiRequested': true}); |
2f91f20a | 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)); | |
989fb5c7 | 62 | } |
63 | ||
64 | render = () => { | |
2f91f20a | 65 | var displayText = null; |
66 | switch (this.state.flag) { | |
67 | case 'loading': | |
68 | displayText = 'Loading data from poloniex...'; | |
69 | break; | |
70 | case 'invalidCredentials': | |
71 | displayText = 'Invalid poloniex credentials'; | |
72 | break; | |
908ee2dd | 73 | case 'ipRestricted': |
74 | displayText = 'Your API key is IP restricted. Please whitelist us.'; | |
75 | break; | |
2f91f20a | 76 | case 'emptyCredentials': |
77 | displayText = 'Please provide poloniex credentials'; | |
78 | break; | |
79 | default: | |
80 | displayText = null; | |
81 | } | |
adf936f6 | 82 | if (this.state.apiRequested === false) { |
83 | return <div></div>; | |
84 | } | |
2f91f20a | 85 | return ( |
86 | <div> | |
87 | <PoloniexBalance balanceCurrency={this.state.valueCurrency} | |
88 | balanceValue={this.state.balanceValue} | |
89 | balance={this.state.balance} | |
90 | 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> | |
97 | ); | |
98 | } | |
989fb5c7 | 99 | } |
100 | ||
6b3f0ad0 | 101 | class CurrencyLogo extends React.Component { |
102 | render = () => { | |
103 | return <img className="currency-logo" | |
104 | src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' } | |
105 | title={this.props.currency} | |
106 | alt={this.props.currency} />; | |
107 | } | |
108 | } | |
109 | ||
989fb5c7 | 110 | class PoloniexBalance extends React.Component { |
111 | constructor(props) { | |
112 | super(props); | |
113 | this.state = {'hideMsg': true, 'msg': '', 'msgOk': false}; | |
114 | } | |
2f91f20a | 115 | |
50c6eea6 | 116 | computeCurrencyRatio = (currency) => { |
117 | return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1); | |
118 | } | |
119 | ||
989fb5c7 | 120 | render = () => { |
2f91f20a | 121 | var dashboard = null; |
122 | ||
123 | if (this.props.balanceValue !== null) { | |
124 | ||
125 | var balance = Object.keys(this.props.balance).map(function(currency) { | |
6b3f0ad0 | 126 | return <div key={currency}> |
50c6eea6 | 127 | <div> |
128 | <CurrencyLogo currency={currency} /> {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%) | |
129 | </div> | |
6b3f0ad0 | 130 | </div>; |
2f91f20a | 131 | }.bind(this)); |
132 | ||
989fb5c7 | 133 | dashboard = |
134 | <div className="row"> | |
50c6eea6 | 135 | <div className="col-6 align-self-center h-100 balances"> |
2f91f20a | 136 | {balance} |
2f91f20a | 137 | </div> |
50c6eea6 | 138 | <div className="offset-1 col-5 h-100 align-self-center"> |
989fb5c7 | 139 | <div className="text-center"> |
6b3f0ad0 | 140 | Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} /> |
2f91f20a | 141 | </div> |
142 | </div> | |
989fb5c7 | 143 | </div>; |
144 | } else { | |
145 | dashboard = | |
146 | <div className="row"> | |
147 | <div className="col-12 text-center"> | |
2f91f20a | 148 | <span>{this.props.displayText}</span> |
149 | </div> | |
989fb5c7 | 150 | </div>; |
151 | } | |
2f91f20a | 152 | |
153 | return ( | |
989fb5c7 | 154 | <div className="row"> |
6b3f0ad0 | 155 | <div className="box offset-2 col-8 portfolio"> |
989fb5c7 | 156 | <div className="row"> |
157 | <div className="col-4">Portfolio</div> | |
2f91f20a | 158 | </div> |
159 | <hr/> | |
160 | {dashboard} | |
161 | </div> | |
162 | </div> | |
163 | ); | |
164 | } | |
989fb5c7 | 165 | } |
2f91f20a | 166 | |
989fb5c7 | 167 | class PoloniexCredentialsForm extends React.Component { |
168 | constructor(props) { | |
169 | super(props); | |
170 | this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false}; | |
171 | } | |
2f91f20a | 172 | |
989fb5c7 | 173 | handleSubmit = (e) => { |
2f91f20a | 174 | this.props.onCredentialsSubmit(); |
175 | this.setState({'editMode': false}); | |
7a9e5112 | 176 | e.preventDefault(); |
989fb5c7 | 177 | } |
178 | ||
179 | handleApiKeyChange = (event) => { | |
2f91f20a | 180 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); |
989fb5c7 | 181 | } |
182 | ||
183 | handleApiSecretChange = (event) => { | |
2f91f20a | 184 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); |
989fb5c7 | 185 | } |
186 | ||
187 | onEditClick = () => { | |
2f91f20a | 188 | this.setState({'editMode': true}); |
989fb5c7 | 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'; | |
2f91f20a | 196 | |
7a9e5112 | 197 | return ( |
989fb5c7 | 198 | <div className="row api-credentials-form"> |
a2ab2260 | 199 | <div className="offset-2 col-8 box"> |
989fb5c7 | 200 | <span className="text-center">Poloniex credentials</span> |
2f91f20a | 201 | <hr/> |
989fb5c7 | 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}/> | |
2f91f20a | 205 | </label> |
989fb5c7 | 206 | <label className="w-100">Secret: |
207 | <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/> | |
2f91f20a | 208 | </label> |
989fb5c7 | 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> | |
7a9e5112 | 211 | </form> |
212 | </div> | |
213 | </div> | |
214 | ); | |
215 | } | |
989fb5c7 | 216 | } |
2f91f20a | 217 | |
989fb5c7 | 218 | export default PoloniexController; |