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