tronair-gui
Version:
Web application/GUI for performing airdrops on the TRON blockchain
494 lines (437 loc) • 15.9 kB
JavaScript
import React, { Component } from 'react';
import './App.css';
import img_elImage from './images/SubmitScreen_state0_elImage282629_282629.jpg';
import Options from './Options';
import Cnbanner from './Cnbanner';
import Sidebar from './Sidebar';
import Progressbar from './Progressbar';
import { Progress, Row, Button, Icon } from 'antd';
import "antd/dist/antd.css";
export default class SettingsScreen extends Component {
numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
shortNumWithCommas(x) {
if (x > 1000000000) {
x = Math.round(x/100000000)/10;
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'B';
} else if (x > 1000000) {
x = Math.round(x/100000)/10;
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'M';
} else if (x > 1000) {
x = Math.round(x/100)/10;
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'K';
}
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 = {};
if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
}
if ( !this.props.atTopOfScreenStack) {
layoutFlowStyle.height = '100vh';
layoutFlowStyle.overflow = 'hidden';
}
const pct_width = 13;
const pct_diff = (20-pct_width)/2;
const width15 = this.props.appActions.dataSlots.ds_win_width*(pct_width/100);
const width20 = this.props.appActions.dataSlots.ds_win_width*(0.2);
const style_elBackground = {
width: '100%',
height: '100%',
};
const style_elBackground_outer = {
backgroundColor: '#f6f6f6',
};
const style_elImage = {
backgroundImage: 'url('+img_elImage+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
};
const style_elComponent_outer = {
marginLeft: '20%',
marginRight: '20%',
boxShadow: '0.0px 6.8px 48px rgba(0, 0, 0, 0.4500)',
borderRadius: '5px',
};
const enabledValue_go2review_btn = this.props.ds_can_review;
// const style_elGo2review_btn_outer = {
// cursor: 'pointer',
// pointerEvents: 'auto',
// };
const marg_top = 100;
const marg_btm = 350;
const bw_style = {
position: 'absolute',
left: pct_diff + '%',
top: marg_top + 'px',
width: pct_width + '%',
aspectRatio: 1,
}
const bw_text_box = {
textAlign: 'center',
position: 'absolute',
left: pct_diff + '%',
top: marg_top + 'px',
width: width15 + 'px',
height: width15 + 'px',
}
const help_text_box = {
textAlign: 'center',
position: 'absolute',
left: pct_diff + '%',
top: marg_btm + 'px',
width: width15 + 'px',
height: width15 + 'px',
}
const help_style = {
position: 'absolute',
left: pct_diff + '%',
top: marg_btm + 'px',
width: pct_width + '%',
aspectRatio: 1,
}
const dnum_style = {
position: 'absolute',
right: pct_diff + '%',
top: marg_top + 'px',
width: pct_width + '%',
aspectRatio: 1,
}
const dnum_text_box = {
textAlign: 'center',
position: 'absolute',
right: pct_diff + '%',
top: marg_top + 'px',
width: width15 + 'px',
height: width15 + 'px',
}
const tnum_style = {
position: 'absolute',
right: pct_diff + '%',
top: marg_btm + 'px',
width: pct_width + '%',
aspectRatio: 1,
}
const tnum_text_box = {
textAlign: 'center',
position: 'absolute',
right: pct_diff + '%',
top: marg_btm + 'px',
width: width15 + 'px',
height: width15 + 'px',
}
const fnt_sz = width15/9 + 'px';
const bw_pct = Math.round(this.props.appActions.dataSlots.ds_bw_pct*10)/10;
const help_pct = Math.round(this.props.appActions.dataSlots.ds_help_pct*10)/10;
const help_total = this.props.appActions.dataSlots.ds_help_total;
const drop_num = this.props.appActions.dataSlots.ds_drop_num;
const max_rec = help_total;
var drop_pct = Math.round((drop_num/max_rec)*1000)/10;
if (max_rec === 0) {drop_pct=100};
if (drop_pct > 100) {drop_pct=100};
const gradient = ['#48d65e','#7ed753','#a4d847','#c5d938','#e3d826','#ffd700','#ffc222','#ffac31','#ff963a','#ff7e41','#ff6347'];
// const drop_text = 'Recipients: ' + drop_num + ' (' + help_total + ' max)';
const drop_color = gradient[Math.floor(drop_pct/10)];
// const drop_tag = {fontSize: fnt_sz,color: drop_color};
const drop_tag = {
fontSize: fnt_sz,
color: drop_color,
position: 'relative',
top: '25%',
};
const bw_color = gradient[10 - Math.floor(bw_pct/10)];
const bw_tag = {
fontSize: fnt_sz,
color: bw_color,
position: 'relative',
top: '25%',
};
const help_color = gradient[10 - Math.floor(help_pct/10)];
const help_tag = {
fontSize: fnt_sz,
color: help_color,
position: 'relative',
top: '25%',
};
const ds = this.props.appActions.dataSlots;
const num_rec = ds.ds_drop_num;
const bw_used = Math.round(num_rec*250);
const bw_total = Math.round(ds.ds_bw_total);
var trx_amt = ds.ds_trx_total;
if (ds.ds_drop_token === 'TRX') {
var trx_used = (ds.ds_drop_amount) ? ds.ds_drop_amount:0;
trx_amt = trx_amt - trx_used;
}
var bw_trx = Math.round(trx_amt*100000);
var bw_temp_str,bw_temp_str2;
if (bw_used > bw_total) {
bw_temp_str = this.shortNumWithCommas(bw_total) + '/' + this.shortNumWithCommas(bw_total) + ' (available)';
bw_temp_str2 = this.shortNumWithCommas(bw_used - bw_total) + '/' + this.shortNumWithCommas(bw_trx) + ' (from TRX)';
} else {
bw_temp_str = this.shortNumWithCommas(bw_used) + '/' + this.shortNumWithCommas(bw_total) + ' (available)';
bw_temp_str2 = '0.0/' + this.shortNumWithCommas(bw_trx) + ' (from TRX)';
}
const bw_str_style = {
textAlign: 'center',
fontWeight: 'bold',
color: 'gray',
position: 'absolute',
left: '5px',
top: (marg_top + width15 - 10) + 'px',
width: (width20 - 10) + 'px',
}
const bw_tooltip =
<div style={bw_str_style}>
<div>Estimated Usage:</div>
<div>{bw_temp_str}</div>
<div>{bw_temp_str2}</div>
</div>;
const help_temp_str = this.numberWithCommas(Math.round(num_rec)) + '/' + this.numberWithCommas(help_total);
const help_str_style = {
textAlign: 'center',
fontWeight: 'bold',
color: 'gray',
position: 'absolute',
left: '5px',
top: (marg_btm + width15 - 10) + 'px',
width: (width20 - 10) + 'px',
}
const help_tooltip =
<div style={help_str_style}>
<div>Token Usage:</div>
<div>{help_temp_str}</div>
</div>;
const drop_str_style = {
textAlign: 'center',
fontWeight: 'bold',
color: 'gray',
position: 'absolute',
right: '5px',
top: (marg_top + width15 - 10) + 'px',
width: (width20 - 10) + 'px',
}
var drop_max = help_total;
var drop_calc = Math.floor((bw_trx + bw_total)/250);
if (drop_calc < drop_max) {
drop_max = drop_calc;
}
const drop_text = this.numberWithCommas(drop_num) + ' (' + this.numberWithCommas(drop_max) + ' max)';
const drop_tooltip =
<div style={drop_str_style}>
<div>Recipients:</div>
<div>{drop_text}</div>
</div>;
const tnum_str_style = {
textAlign: 'center',
fontWeight: 'bold',
color: 'gray',
position: 'absolute',
right: '5px',
top: (marg_btm + width15 - 10) + 'px',
width: (width20 - 10) + 'px',
}
var max_lim = (ds.ds_drop_lim) ? ds.ds_drop_lim:0;
// var amt_max = (ds.ds_max_amount) ? ds.ds_max_amount:0;
// var curr_lim = (ds.ds_drop_amount) ? ds.ds_drop_amount:0;
// if (ds.ds_drop_type.type === 'each') {curr_lim = curr_lim*num_rec};
// if (ds.ds_drop_type.type === 'ratio') {curr_lim = curr_lim*amt_max};
var curr_lim = 0;
ds.ds_airdrop_array.forEach(wallet => {curr_lim += wallet.amount});
curr_lim = curr_lim/Math.pow(10,ds.ds_airdrop.token_precision);
// if (ds.ds_airdrop.trx) {curr_lim = curr_lim/1000000};
var tnum_name = ds.ds_drop_token;
tnum_name = (tnum_name) ? tnum_name:'Token';
var lim_pct = (max_lim > 0) ? (curr_lim/max_lim):0;
lim_pct = Math.round(lim_pct*1000)/10;
if (lim_pct > 100) {lim_pct=100;};
const tnum_color = gradient[Math.floor(lim_pct/10)];
const tnum_text1 = tnum_name + ' Usage:'
// if (tnum_name === 'TRX') {
if (ds.ds_airdrop.token_precision > 0) {
curr_lim = Math.round(curr_lim*100)/100;
max_lim = Math.round(max_lim*100)/100;
} else {
curr_lim = Math.floor(curr_lim);
max_lim = Math.floor(max_lim);
}
const tnum_text2 = this.numberWithCommas(curr_lim) + '/' + this.numberWithCommas(max_lim);
const tnum_tag = {
fontSize: fnt_sz,
color: tnum_color,
position: 'relative',
top: '25%',
};
var tnum_tooltip = '';
if (tnum_name !== 'Token') {
tnum_tooltip =
<div style={tnum_str_style}>
<div>{tnum_text1}</div>
<div>{tnum_text2}</div>
</div>;
} else {
tnum_tooltip =
<div style={tnum_str_style}>
<div>Choose a Token</div>
</div>;
}
return (
<div className="AppScreen SettingsScreen" style={baseStyle}>
<div className="background">
<div className='appBg containerMinHeight elBackground' style={style_elBackground_outer}>
<div style={style_elBackground} />
</div>
<div className='containerMinHeight elImage' style={style_elImage} />
</div>
<div className="layoutFlow" style={layoutFlowStyle}>
<div className='hasNestedComps elComponent' style={style_elComponent_outer}>
<div>
<Options ref={(el)=> this._elComponent = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
<div>
<Row
style={{
height: '50px',
marginTop: '5px',
marginBottom: '5px',
marginLeft: '20%',
marginRight: '20%',
}}>
<Button
style={{
cursor: 'pointer',
pointerEvents: 'auto',
width: '20%',
height: '45px',
}}
size='large'
onClick={() => { this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' }) }}>
<Icon type="caret-left" />
Go Back
</Button>
<Button
style={{
cursor: 'pointer',
pointerEvents: 'auto',
width: '20%',
height: '45px',
marginLeft: '60%',
}}
size='large'
type="primary"
disabled={enabledValue_go2review_btn !== 'true'}
onClick={() => {
this.props.appActions.updateDataSlot('ds_step2', "false")
this.props.appActions.goToScreen('review', { transitionId: 'fadeIn' })
}}>
Review
<Icon type="caret-right" />
</Button>
</Row>
</div>
</div>
<div className="screenFgContainer">
<div className="foreground">
<div>
<Progress
style={bw_style}
// type="circle"
type="dashboard"
status="active"
percent={bw_pct}
strokeColor={bw_color}
width={width15}
strokeWidth={4+2*(bw_pct/100)}
// strokeWidth={6}
format={percent => ``}
/>
<div style={bw_text_box}>
<div style={bw_tag}>
<div><strong>Bandwidth</strong></div>
<div><strong>After Drop</strong></div>
<div><strong>{bw_pct}%</strong></div>
</div>
</div>
{bw_tooltip}
<Progress
style={help_style}
// type="circle"
type="dashboard"
status="active"
percent={help_pct}
strokeColor={help_color}
width={width15}
// strokeWidth={6}
strokeWidth={4+2*(help_pct/100)}
format={percent => ``}
/>
<div style={help_text_box}>
<div style={help_tag}>
<div><strong>HELP</strong></div>
<div><strong>After Drop</strong></div>
<div><strong>{help_pct}%</strong></div>
</div>
</div>
{help_tooltip}
<Progress
style={dnum_style}
// type="circle"
type="dashboard"
status="active"
percent={drop_pct}
strokeColor={drop_color}
width={width15}
// strokeWidth={6}
strokeWidth={4+2*(drop_pct/100)}
format={percent => ``}
/>
<div style={dnum_text_box}>
<div style={drop_tag}>
<div><strong>Recipient</strong></div>
<div><strong>Limit</strong></div>
<div><strong>{drop_pct}%</strong></div>
</div>
</div>
{drop_tooltip}
<Progress
style={tnum_style}
// type="circle"
type="dashboard"
status="active"
percent={lim_pct}
strokeColor={tnum_color}
width={width15}
// strokeWidth={6}
strokeWidth={4+2*(lim_pct/100)}
format={percent => ``}
/>
<div style={tnum_text_box}>
<div style={tnum_tag}>
<div><strong>Token</strong></div>
<div><strong>Limit</strong></div>
<div><strong>{lim_pct}%</strong></div>
</div>
</div>
{tnum_tooltip}
</div>
<div className='hasNestedComps elNavBar2'>
<Cnbanner {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._elNavBar2 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
<div className='hasNestedComps elProgressbar'>
<Progressbar visualStateIndex={1} ref={(el)=> this._elProgressbar = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
<div>
<Sidebar {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._elNavBar2 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
</div>
</div>
)
}
}