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