tronair-gui/src/Summary.js

Web application/GUI for performing airdrops on the TRON blockchain

import React, { Component } from 'react';
import { Checkbox, Row, Col } from 'antd';
import "antd/dist/antd.css";
import './App.css';

export default class Summary extends Component {
  constructor(props) {
    super(props);
    this.props.appActions.updateDataSlot('ds_summary_confirm', false);
    this.state = {
      all_true: false,
    };
  }

  onChange(checkedValues) {
    if (checkedValues.length === 8) {
      const ds = this.props.appActions.dataSlots;
      var drop_list = ds.ds_airdrop_array;

      var bw = drop_list.length*250;
      if (ds.ds_login_method === 'tronlink') {bw = bw*2};

      var trx_cost = 0;
      var bw_diff = bw - ds.ds_bw_total;
      if (bw_diff > 0) {trx_cost = Math.round(1000000*bw_diff*0.001)/100};

      var d_amt = 0;
      drop_list.forEach(wallet => {
        if (ds.ds_airdrop.trx) {trx_cost += wallet.amount};
        if (!ds.ds_airdrop.trx) {d_amt += wallet.amount};
      });

      // console.log([trx_cost,d_amt]);

      this.props.appActions.updateDataSlot('ds_airdrop_trx', trx_cost);
      this.props.appActions.updateDataSlot('ds_airdrop_token', d_amt);
      this.props.appActions.updateDataSlot('ds_summary_confirm', true);
    } else {
      this.props.appActions.updateDataSlot('ds_summary_confirm', false);
    }
  }

  numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  render() {
    // eslint-disable-next-line no-unused-vars
    let baseStyle = {};
    // eslint-disable-next-line no-unused-vars
    let layoutFlowStyle = {};
    
    const style_elBackground = {
        width: '100%',
        height: '100%',
     };
    const style_elBackground_outer = {
        backgroundColor: '#f6f6f6',
     };
    const style_elText = {
        color: 'rgba(0, 0, 0, 0.8500)',
        textAlign: 'center',
     };

    // const init_acc_t = this.props.appActions.getDataSheet('acc_tokens');
    // const acc_data = init_acc_t.items[0];
    // const bw_total = acc_data.bandwidth['freeNetRemaining'] + acc_data.bandwidth['netRemaining'];

    const check_row_style = {
      paddingTop: '25px',
    }

    const ds = this.props.appActions.dataSlots;
    var d_addr = ds.ds_acc_addr;
    var drop_list = ds.ds_airdrop_array;
    var addr_len = d_addr.length;
    var d_addr_short = d_addr.substring(0,3) + '...' + d_addr.substring(addr_len - 3, addr_len);
    var d_tkn = ds.ds_drop_token;
    var d_amt = 0;
    var num_r = drop_list.length;
    drop_list.forEach(wallet => {d_amt += wallet.amount});
    var help_cost = num_r;
    var bw = num_r*250;
    if (ds.ds_login_method === 'tronlink') {bw = bw*2};
    var bw_avail = ds.ds_bw_total;
    var bw_diff = bw - bw_avail;
    var trx_cost = Math.round(bw_diff*0.001)/100;
    if (bw_diff < 0) { trx_cost = 0 };
    const tpr = ds.ds_airdrop.token_precision;
    if (tpr > 0) {
      d_amt = Math.round((d_amt/Math.pow(10,tpr))*100)/100;
    }

    const addr_str = "Address performing airdrop: " + d_addr_short;
    const tkn_str = "Token being airdropped: " + d_tkn;
    const amt_str = "Amount being airdropped: " + this.numberWithCommas(d_amt);
    const rec_str = "Number of recipients: " + this.numberWithCommas(num_r);
    const cost_str = "Cost of airdrop (in HELP): " + this.numberWithCommas(help_cost);
    const bw_str = "Cost in bandwidth (estimated): " + this.numberWithCommas(bw);
    const bwa_str = "Bandwidth available: " + this.numberWithCommas(bw_avail);
    const fee_str = "Projected fees from insufficient bandwidth: " + trx_cost + " TRX";
    
    return (
      <div className="Summary" style={baseStyle}>
        <div className="background">
          <div className='appBg containerMinHeight elBackground' style={style_elBackground_outer}>
            <div style={style_elBackground} />
          
          </div>
          
        </div>
        <div className="layoutFlow">
          <div className='headlineFont elText'>
            <div style={style_elText}>
              <div>{this.props.locStrings.summary_text_90192}</div>
            </div>
          
          </div>

          <Checkbox.Group 
            style={{ 
              width: '90%', 
              marginLeft: '5%', 
              marginTop: '30px', 
              pointerEvents: 'auto',
            }} 
            onChange={this.onChange.bind(this)}
          >
            <Row style={check_row_style}>
              <Col span={11}><Checkbox value="1">{addr_str}</Checkbox></Col>
              <Col span={13}><Checkbox value="2">{tkn_str}</Checkbox></Col>
            </Row>
            <Row style={check_row_style}>
              <Col span={11}><Checkbox value="3">{amt_str}</Checkbox></Col>
              <Col span={13}><Checkbox value="4">{cost_str}</Checkbox></Col>
            </Row>
            <Row style={check_row_style}>
              <Col span={11}><Checkbox value="5">{rec_str}</Checkbox></Col>
              <Col span={13}><Checkbox value="6">{bw_str}</Checkbox></Col>
            </Row>
            <Row style={check_row_style}>
              <Col span={11}><Checkbox value="7">{bwa_str}</Checkbox></Col>
              <Col span={13}><Checkbox value="8">{fee_str}</Checkbox></Col>
            </Row>
          </Checkbox.Group>

        </div>
      </div>
    )
  }
  

}