1 import Api from './api.js';
2 import React from 'react';
4 class PoloniexController extends React.Component {
7 this.state = {'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
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({'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});
22 this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
26 componentDidMount = () => {
31 var displayText = null;
32 switch (this.state.flag) {
34 displayText = 'Loading data from poloniex...';
36 case 'invalidCredentials':
38 case 'emptyCredentials':
39 displayText = <div>Please provide poloniex credentials in <a href="/account">Account</a> page.</div>;
46 <PoloniexBalance balanceCurrency={this.state.valueCurrency}
47 balanceValue={this.state.balanceValue}
48 balance={this.state.balance}
49 displayText={displayText}/>
55 class CurrencyLogo extends React.Component {
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} />;
64 class PoloniexBalance extends React.Component {
67 this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
70 computeCurrencyRatio = (currency) => {
71 return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1);
77 if (this.props.balanceValue !== null) {
79 var balance = Object.keys(this.props.balance).map(function(currency) {
80 return <div key={currency}>
82 <CurrencyLogo currency={currency} /> {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%)
89 <div className="col-6 align-self-center h-100 balances">
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} />
100 <div className="row">
101 <div className="col-12 text-center">
102 <span>{this.props.displayText}</span>
108 <div className="row">
109 <div className="box offset-2 col-8 portfolio">
110 <div className="row">
111 <div className="col-4">Portfolio</div>
121 export default PoloniexController;