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 = {'apiRequested': false, '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', 'apiRequested': true, 'valueCurrency': null, 'balanceValue': null, 'balance': null});
  16         } else if (err.code === 'ip_restricted_api_key') {
  17           this.setState({'flag': 'ipRestricted', 'apiRequested': true, 'valueCurrency': null, 'balanceValue': null, 'balance': null});
  18         }
  19         return;
  20       }
  21
  22       this.setState({'flag': 'ok', 'apiRequested': true, '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     if (this.state.apiRequested === false) {
  45       return <div></div>;
  46     }
  47     return (
  48       <div>
  49         <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
  50                           balanceValue={this.state.balanceValue}
  51                           balance={this.state.balance}
  52                           displayText={displayText}/>
  53       </div>
  54     );
  55   }
  56 }
  57
  58 class CurrencyLogo extends React.Component {
  59   render = () => {
  60     return <img className="currency-logo"
  61                 src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
  62                 title={this.props.currency}
  63                 alt={this.props.currency} />;
  64   }
  65 }
  66
  67 class PoloniexBalance extends React.Component {
  68   constructor(props) {
  69     super(props);
  70     this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
  71   }
  72
  73   computeCurrencyRatio = (currency) => {
  74     return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1);
  75   }
  76
  77   render = () => {
  78     var dashboard = null;
  79
  80     if (this.props.balanceValue !== null) {
  81
  82       var balance = Object.keys(this.props.balance).map(function(currency) {
  83         return <div key={currency}>
  84                  <div>
  85                  <CurrencyLogo currency={currency} /> {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%)
  86                  </div>
  87                </div>;
  88       }.bind(this));
  89
  90       dashboard =
  91         <div className="row">
  92           <div className="col-6 align-self-center h-100 balances">
  93               {balance}
  94           </div>
  95           <div className="offset-1 col-5 h-100 align-self-center">
  96             <div className="text-center">
  97               Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} />
  98             </div>
  99           </div>
 100         </div>;
 101     } else {
 102       dashboard =
 103         <div className="row">
 104           <div className="col-12 text-center">
 105            <span>{this.props.displayText}</span>
 106           </div>
 107         </div>;
 108     }
 109
 110     return (
 111       <div className="row">
 112         <div className="box offset-2 col-8 portfolio">
 113           <div className="row">
 114             <div className="col-4">Portfolio</div>
 115           </div>
 116           <hr/>
 117           {dashboard}
 118         </div>
 119       </div>
 120     );
 121   }
 122 }
 123
 124 export default PoloniexController;