cmd/web/js/balance.jsx

   1 import React from 'react';
   2 import moment from 'moment';
   3
   4 class CurrencyLogo extends React.Component {
   5     render = () => {
   6       return <div className="d-inline-block h-100">
   7                <img className="currency-logo align-top"
   8                   src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
   9                   title={this.props.currency}
  10                   alt={this.props.currency} />
  11              </div>;
  12     }
  13  }
  14
  15  var formatVariation = (variation) => {
  16   var variationAbs = Math.abs(variation);
  17   if (variation === 0.0) {
  18     return <span>{variationAbs}%</span>;
  19   } else if (variation > 0) {
  20     return <span className="performance-up">+{variationAbs}%</span>;
  21   }
  22   return <span className="performance-down">-{variationAbs}%</span>;
  23 };
  24
  25
  26 class CurrencyRateHeader extends React.Component {
  27     render = () => {
  28         return <React.Fragment>
  29               <div className="row text-center">
  30                 <div className="d-inline col-2">Asset</div>
  31                 <div className="d-inline col-2">Position</div>
  32                 <div className="d-inline col-2">Qty</div>
  33                 <div className="d-inline col-2">Value (BTC)</div>
  34                 <div className="d-inline col-2">Weight</div>
  35                 <div className="d-inline col-2">Perf %</div>
  36               </div>
  37             </React.Fragment>;
  38     }
  39 }
  40
  41 class CurrencyRate extends React.Component {
  42     render = () => {
  43         return <React.Fragment>
  44               <div className="row text-center">
  45                 <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /><span>{this.props.currency}</span></div>
  46                 <div className="d-inline col-2">{this.props.positionType}</div>
  47                 <div className="d-inline col-2">{this.props.quantity}</div>
  48                 <div className="d-inline col-2">{this.props.BTCValue}</div>
  49                 <div className="d-inline col-2">{this.props.weight}%</div>
  50                 <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP)}</div>
  51               </div>
  52             </React.Fragment>;
  53     }
  54 }
  55
  56 class Assets extends React.Component {
  57     render = () => {
  58         var currencies = Object.keys(this.props.balances).map(function(currency) {
  59             var balance = this.props.balances[currency];
  60             balance.currency = currency;
  61             return <div className="row" key={currency}>
  62                     <div className="col-12"><CurrencyRate {...balance} /></div>
  63                   </div>;
  64         }.bind(this));
  65
  66         return <div className="assets">
  67           <CurrencyRateHeader />
  68           {currencies}
  69         </div>;
  70     }
  71 }
  72
  73 class PFBalance extends React.Component {
  74     render = () => {
  75         var date = moment(this.props.periodStart).format('MMM Do, h:mma');
  76         return <React.Fragment>
  77             <div className="h-100 align-self-center balance">
  78               <div className="row">
  79                 <div className="col-8">
  80                    Current balance
  81                 </div>
  82                 <div className="col-4 text-center h-100 btcValue">
  83                   <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span>
  84                 </div>
  85               </div>
  86               <div className="row">
  87                 <div className="col-8">
  88                   <em>since {date}</em>
  89                 </div>
  90                 <div className="col-4 variation text-center">
  91                    <strong>{formatVariation(this.props.variationP)}</strong>
  92                 </div>
  93               </div>
  94             </div>
  95         </React.Fragment>;
  96     }
  97 }
  98
  99 export {PFBalance, Assets};