cmd/web/js/account.jsx

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