cmd/web/js/poloniex.jsx

   1 var Api        = require('./api.js').Api;
   2 var classNames = require('classnames');
   3
   4 module.exports.PoloniexController = React.createClass({
   5   getInitialState: function() {
   6     return {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
   7   },
   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     }
  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);
  18         return;
  19       }
  20
  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       }
  34
  35       this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
  36     }.bind(this));
  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});
 147     e.preventDefault();
 148   },
 149   handleApiKeyChange: function(event) {
 150     this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
 151   },
 152   handleApiSecretChange: function(event) {
 153     this.props.onCredentialsChange(this.props.apiKey, event.target.value);
 154   },
 155   onEditClick: function() {
 156     this.setState({'editMode': true});
 157   },
 158   render: function() {
 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
 164     return (
 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/>
 169             <form role='form' onSubmit={this.handleSubmit}>
 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>
 178             </form>
 179           </div>
 180         </div>
 181        );
 182   }
 183 });
 184
 185 module.exports.PoloniexCredentialsForm = PoloniexCredentialsForm;