tronair-gui/src/Demoscreen.js

Web application/GUI for performing airdrops on the TRON blockchain

import React, { Component } from 'react';
import { Table, Button } from 'antd';
import "antd/dist/antd.css";
import './App.css';


export default class Demoscreen extends Component {

  // constructor(props) {
  //   super(props);
  // }

  // onClick_elButton = (ev) => {
  //   this.props.appActions.updateDataSlot('ds_commence_drop', "0");
  //   this.props.appActions.goToScreen('submit', { transitionId: 'fadeIn' });
  // }

  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: 'rgba(0, 0, 0, 0.6493)',
     };

    const columns = [
      {
        title: 'Address',
        dataIndex: 'address',
        width: '40%',
        align: 'left',
      },
      {
        title: 'Drop Amount',
        dataIndex: 'amount',
        width: '30%',
        align: 'center',
      },
      {
        title: 'Balance',
        dataIndex: 'balance',
        width: '30%',
        align: 'right',
      }
    ];
    
    // const demo_text = JSON.stringify(this.props.appActions.dataSlots['ds_airdrop_array']);
    const is_trx = this.props.appActions.dataSlots.ds_airdrop.trx;
    var drop_data = this.props.appActions.dataSlots['ds_airdrop_array'];
    for (var i=0; i<drop_data.length; i++) {
      if (is_trx) {
        drop_data[i].amount = Math.round(drop_data[i].amount*100)/100;
      } else {
        drop_data[i].amount = Math.floor(drop_data[i].amount);
      }
    }

    return (
      <div className="Demoscreen" style={baseStyle}>
        <div className="background">
          <div className='containerMinHeight elBackground' style={style_elBackground_outer}>
            <div style={style_elBackground} />
          </div>
        </div>

        <div 
          style={{
            width:'80%',
            marginTop: '5%',
            marginLeft:'10%',
          }}>
          <Table 
            style={{pointerEvents:'auto'}}
            pagination={false}
            dataSource={drop_data} 
            columns={columns} 
            scroll={{y:300}}
            rowKey='index'
          />
        </div>

        <div
          style={{
            textAlign:'right',
            marginTop: '10px',
          }}>
          <Button 
            style={{pointerEvents:'auto',marginRight:'10%'}}
            onClick={() => { 
              this.props.appActions.updateDataSlot('ds_commence_drop', "0")
              this.props.appActions.goToScreen('submit', { transitionId: 'fadeIn' }) 
            }}
            size='large'
            type="primary">
            Finished
          </Button>
        </div>
      </div>
    )
  }
  

}