1 import Api from './api.js';
2 import React from 'react';
4 class PoloniexConfiguration extends React.Component {
7 this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'status': 'loading'};
10 checkCredentials = () => {
11 Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) {
13 console.error(err, data);
14 if (err.code === 'invalid_market_credentials') {
15 this.setState({'status': 'invalidCredentials'});
16 } else if (err.code === 'ip_restricted_api_key') {
17 this.setState({'status': 'ipRestricted'});
22 this.setState({'status': 'ok'});
26 handleCredentialsChange = (key, secret) => {
27 this.setState({'apiKey': key, 'apiSecret': secret});
30 handleCredentialsSubmit = () => {
33 *If (!this.state.apiKey || !this.state.apiSecret) {
38 Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) {
40 console.error(err, data);
44 this.setState({'status': 'loading'});
45 this.checkCredentials();
49 componentDidMount = () => {
50 Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
51 this.setState({'apiRequested': true});
53 console.error(err, data);
57 var newStatus = this.state.status;
58 if (!data.key || !data.secret) {
59 newStatus = 'emptyCredentials';
61 this.checkCredentials();
64 this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'status': newStatus});
69 var displayText = null;
70 switch (this.state.status) {
72 displayText = 'Checking Poloniex credentials...';
74 case 'invalidCredentials':
75 displayText = 'Invalid poloniex credentials';
78 displayText = 'Your API key is IP restricted.';
80 case 'emptyCredentials':
81 displayText = 'Please provide poloniex credentials';
84 displayText = 'You are all set !';
87 console.error('unknown status', this.state.status);
90 if (this.state.apiRequested === false) {
95 <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials}
96 onCredentialsSubmit={this.handleCredentialsSubmit}
97 onCredentialsChange={this.handleCredentialsChange}
98 apiSecret={this.state.apiSecret}
99 apiKey={this.state.apiKey}
100 status={this.state.status}
101 statusMessage={displayText}/>
107 class PoloniexCredentialsForm extends React.Component {
110 this.state = {'editMode': false};
113 handleSubmit = (e) => {
114 this.props.onCredentialsSubmit();
115 this.setState({'editMode': false});
119 handleApiKeyChange = (event) => {
120 this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
123 handleApiSecretChange = (event) => {
124 this.props.onCredentialsChange(this.props.apiKey, event.target.value);
127 onEditClick = () => {
128 this.setState({'editMode': true});
132 var submitType = this.state.editMode === true ? 'submit' : 'hidden';
133 var buttonDisplay = this.state.editMode === true ? 'none' : 'inline';
134 var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX';
135 var keyDisplayed = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX';
137 var iconName = 'icon-cancel-circled';
138 switch (this.props.status) {
140 iconName = 'icon-hourglass-2';
143 iconName = 'icon-ok-circled';
148 <div className="row api-credentials-form">
149 <div className="offset-2 col-8 box">
150 <span className="text-center">Poloniex credentials</span>
152 <div className="row config-status">
153 <div className="col-12">
154 <span><i className={iconName}></i>{this.props.statusMessage}</span>
157 <div className="row">
158 <div className="col-12">
159 <form role="form" onSubmit={this.handleSubmit}>
160 <label className="w-100">Key:
161 <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/>
163 <label className="w-100">Secret:
164 <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
166 <input className="form-control submit" type={submitType} value="Save" />
167 <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button>
177 export default PoloniexConfiguration;