cmd/web/js/poloniex.jsx

   1 import Api from './api.js';
   2 import React from 'react';
   3
   4 class PoloniexController extends React.Component {
   5   constructor(props) {
   6     super(props);
   7     this.state = {'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
   8   }
   9
  10   loadBalance = () => {
  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({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
  16         } else if (err.code === 'ip_restricted_api_key') {
  17           this.setState({'flag': 'ipRestricted', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
  18         }
  19         return;
  20       }
  21
  22       this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
  23     }.bind(this));
  24   }
  25
  26   componentDidMount = () => {
  27     this.loadBalance();
  28   }
  29
  30   render = () => {
  31     var displayText = null;
  32     switch (this.state.flag) {
  33       case 'loading':
  34         displayText = 'Loading data from poloniex...';
  35         break;
  36       case 'invalidCredentials':
  37       case 'ipRestricted':
  38       case 'emptyCredentials':
  39         displayText = <div>Please provide poloniex credentials in <a href="/account">Account</a> page.</div>;
  40         break;
  41       default:
  42         displayText = null;
  43     }
  44     return (
  45       <div>
  46         <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
  47                           balanceValue={this.state.balanceValue}
  48                           balance={this.state.balance}
  49                           displayText={displayText}/>
  50       </div>
  51     );
  52   }
  53 }
  54
  55 class CurrencyLogo extends React.Component {
  56   render = () => {
  57     return <img className="currency-logo"
  58                 src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
  59                 title={this.props.currency}
  60                 alt={this.props.currency} />;
  61   }
  62 }
  63
  64 class PoloniexBalance extends React.Component {
  65   constructor(props) {
  66     super(props);
  67     this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
  68   }
  69
  70   computeCurrencyRatio = (currency) => {
  71     return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1);
  72   }
  73
  74   render = () => {
  75     var dashboard = null;
  76
  77     if (this.props.balanceValue !== null) {
  78
  79       var balance = Object.keys(this.props.balance).map(function(currency) {
  80         return <div key={currency}>
  81                  <div>
  82                  <CurrencyLogo currency={currency} /> {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%)
  83                  </div>
  84                </div>;
  85       }.bind(this));
  86
  87       dashboard =
  88         <div className="row">
  89           <div className="col-6 align-self-center h-100 balances">
  90               {balance}
  91           </div>
  92           <div className="offset-1 col-5 h-100 align-self-center">
  93             <div className="text-center">
  94               Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} />
  95             </div>
  96           </div>
  97         </div>;
  98     } else {
  99       dashboard =
 100         <div className="row">
 101           <div className="col-12 text-center">
 102            <span>{this.props.displayText}</span>
 103           </div>
 104         </div>;
 105     }
 106
 107     return (
 108       <div className="row">
 109         <div className="box offset-2 col-8 portfolio">
 110           <div className="row">
 111             <div className="col-4">Portfolio</div>
 112           </div>
 113           <hr/>
 114           {dashboard}
 115         </div>
 116       </div>
 117     );
 118   }
 119 }
 120
 121 export default PoloniexController;