tronair-gui
Version:
Web application/GUI for performing airdrops on the TRON blockchain
494 lines (448 loc) • 19 kB
JavaScript
import React, { Component } from 'react';
import CountUp from 'react-countup';
import TronWeb from 'tronweb';
import Swal from 'sweetalert2';
import './App.css';
import img_state0_elImage759562 from './images/SubmitScreen_state0_elImage282629_282629.jpg';
import Licenseagreement from './Licenseagreement';
import Cnbanner from './Cnbanner';
import Progressbar from './Progressbar';
import img_state1_elImage759562 from './images/SubmitScreen_state0_elImage282629_282629.jpg';
import Chooselogin from './Chooselogin';
import img_state2_elImage759562 from './images/SubmitScreen_state0_elImage282629_282629.jpg';
import img_state3_elImage759562 from './images/SubmitScreen_state0_elImage282629_282629.jpg';
import pkg_info from '../package.json';
export default class StartScreen extends Component {
constructor(props) {
super(props);
this.state = {
success_shown:false,
};
}
renderState0() {
// 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 style_state0_elBackground459952 = {
width: '100%',
height: '100%',
};
const style_state0_elBackground459952_outer = {
backgroundColor: '#f6f6f6',
};
const style_state0_elImage759562 = {
backgroundImage: 'url('+img_state0_elImage759562+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
};
// const style_state0_elLicense_Agreement_outer = {
// boxShadow: '0.0px 6.8px 48px rgba(0, 0, 0, 0.4500)',
// };
const license_stlye = {
boxShadow: '0.0px 6.8px 48px rgba(0, 0, 0, 0.4500)',
position: 'relative',
marginTop: '75px',
marginLeft: '25.0%',
width: '50%',
borderRadius: '5px',
};
const version_text_style = {
position: 'absolute',
color: 'black',
bottom: '5px',
left: '10px',
}
const v_text = 'v' + pkg_info.version;
const ds = this.props.appActions.dataSlots;
var num_transfers = (ds.ds_transfer_count === 1) ? ds.ds_total_transfers:0;
// console.log('Total airdrop count: ' + this.props.appActions.dataSlots.ds_transfer_count);
return (
<div className="AppScreen StartScreen" style={baseStyle}>
<div className="background">
<div className='appBg containerMinHeight state0_elBackground459952' style={style_state0_elBackground459952_outer}>
<div style={style_state0_elBackground459952} />
</div>
<div className='containerMinHeight state0_elImage759562' style={style_state0_elImage759562} />
</div>
<div className="layoutFlow" style={layoutFlowStyle}>
{/* <div className='hasNestedComps state0_elLicense_Agreement' style={style_state0_elLicense_Agreement_outer}> */}
<div className='hasNestedComps state0_elLicense_Agreement' style={license_stlye}>
<div>
<Licenseagreement {...this.props} ref={(el)=> this._state0_elLicense_Agreement = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
<div style={{
textAlign:'center',
fontSize:'30px',
fontWeight:'bold',
textShadow: '#5f5f5f 0px 0px 30px',
// color: 'white',
// textShadow: '0px -5px 30px black, 0px 5px 30px black, 5px 0px 30px black, -5px 0px 30px black',
marginTop:'25px',
}}>
<CountUp
start={0}
end={num_transfers}
duration={4.5}
delay={2}
separator=","
prefix="Airdrops Completed: "
/>
</div>
</div>
<div className="screenFgContainer">
<div className="foreground">
<div className='hasNestedComps state0_elNavBar709238'>
{/* <Cnbanner {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._state0_elNavBar709238 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} /> */}
<Cnbanner {...this.props} visualStateIndex={0} ref={(el)=> this._state0_elNavBar709238 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
<div className='hasNestedComps state0_elProgressbar98881'>
<Progressbar ref={(el)=> this._state0_elProgressbar98881 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
<div style={version_text_style}>
{v_text}
</div>
</div>
</div>
)
}
// --- Functions for component state index 1 (2 of 4) ---
renderState1() {
// 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 style_state1_elBackground459952 = {
width: '100%',
height: '100%',
};
const style_state1_elBackground459952_outer = {
backgroundColor: '#f6f6f6',
};
const style_state1_elImage759562 = {
backgroundImage: 'url('+img_state1_elImage759562+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
};
const style_state1_elChoose_Login_outer = {
boxShadow: '0.0px 6.8px 48px rgba(0, 0, 0, 0.4500)',
borderRadius: '5px',
};
return (
<div className="AppScreen StartScreen" style={baseStyle}>
<div className="background">
<div className='appBg containerMinHeight state1_elBackground459952' style={style_state1_elBackground459952_outer}>
<div style={style_state1_elBackground459952} />
</div>
<div className='containerMinHeight state1_elImage759562' style={style_state1_elImage759562} />
</div>
<div className="layoutFlow" style={layoutFlowStyle}>
<div className='hasNestedComps state1_elChoose_Login' style={style_state1_elChoose_Login_outer}>
<div>
<Chooselogin visualStateIndex={1} ref={(el)=> this._state1_elChoose_Login = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
</div>
<div className="screenFgContainer">
<div className="foreground">
<div className='hasNestedComps state1_elNavBar709238'>
<Cnbanner {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._state1_elNavBar709238 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
<div className='hasNestedComps state1_elProgressbar98881'>
<Progressbar ref={(el)=> this._state1_elProgressbar98881 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
</div>
</div>
)
}
// --- Functions for component state index 2 (3 of 4) ---
async connection_error() {
await Swal.fire({
title: 'Connection Error',
text: 'There was an error connecting to the Tron servers. Please try again later.',
confirmButtonText: 'OK',
type: 'error',
}).then(() => {
window.location.reload();
})
}
set_pk(pk) {
try {
// window.tronWeb = new TronWeb(
// process.env.REACT_APP_FULL_NODE,
// process.env.REACT_APP_SOLIDITY_NODE,
// process.env.REACT_APP_EVENT_SERVER,
// pk
// )
window.tronWeb = new TronWeb(
'https://api.trongrid.io',
'https://api.trongrid.io',
'https://api.trongrid.io',
pk,
);
this.props.appActions.updateDataSlot('ds_login_state', '3');
this.props.appActions.updateDataSlot('ds_isLoggedIn', '1');
this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
} catch {
this.connection_error();
}
}
// async check_valid_pk(pkey) {
// try {
// window.tronWeb = new TronWeb(
// process.env.REACT_APP_FULL_NODE,
// process.env.REACT_APP_SOLIDITY_NODE,
// process.env.REACT_APP_EVENT_SERVER,
// pkey
// )
// if (window.tronWeb.isAddress(window.tronWeb.defaultAddress.base58)) {
// this.props.appActions.updateDataSlot('ds_acc_pk',window.tronWeb.defaultPrivateKey);
// this.props.appActions.updateDataSlot('ds_acc_addr',window.tronWeb.defaultAddress.base58);
// this.props.appActions.updateDataSlot('ds_login_state', '3');
// this.props.appActions.updateDataSlot('ds_isLoggedIn', '1');
// this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
// } else {
// Swal.fire(
// 'Invalid Private Key',
// 'Please enter a valid private key.',
// 'error'
// )
// }
// } catch(err) {
// this.connection_error();
// }
// }
renderState2() {
// 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 style_state2_elBackground459952 = {
width: '100%',
height: '100%',
};
const style_state2_elBackground459952_outer = {
backgroundColor: '#f6f6f6',
};
const style_state2_elImage759562 = {
backgroundImage: 'url('+img_state2_elImage759562+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
};
// const valid_chars = /^[0-9a-zA-Z]+$/;
if (Swal.isVisible() === false && this.props.appActions.dataSlots['ds_login_state'] === '2') {
Swal.fire({
// input: 'textarea',
input: 'password',
inputPlaceholder: 'Enter your private key...',
showCancelButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
reverseButtons: true,
confirmButtonText: "Verify",
cancelButtonText: 'Cancel',
inputValidator: (value) => {
return new Promise((resolve) => {
if (value.length === 64) {
let temp_addr = window.tronWeb.address.fromPrivateKey(value);
if (window.tronWeb.isAddress(temp_addr)) {
this.props.appActions.updateDataSlot('ds_acc_pk',value);
this.props.appActions.updateDataSlot('ds_acc_addr',temp_addr);
resolve();
} else {
resolve('Invalid Private Key');
}
} else {
if (value.length < 64) {
resolve('The private key you entered is too short.')
} else {
resolve('The private key you entered is too long.')
}
}
})
}
}).then((result) => {
if (result.value) {
this.set_pk(result.value);
} else if (result.dismiss === Swal.DismissReason.cancel) {
this.on_click_dismiss();
}
});
}
return (
<div className="AppScreen StartScreen" style={baseStyle}>
<div className="background">
<div className='appBg containerMinHeight state2_elBackground459952' style={style_state2_elBackground459952_outer}>
<div style={style_state2_elBackground459952} />
</div>
<div className='containerMinHeight state2_elImage759562' style={style_state2_elImage759562} />
</div>
<div className="screenFgContainer">
<div className="foreground">
<div className='hasNestedComps state2_elNavBar709238'>
<Cnbanner {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._state2_elNavBar709238 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
<div className='hasNestedComps state2_elProgressbar98881'>
<Progressbar ref={(el)=> this._state2_elProgressbar98881 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
</div>
</div>
)
}
// --- Functions for component state index 3 (4 of 4) ---
go_to_settings() {
this.props.appActions.updateDataSlot('ds_login_state', '1');
this.props.appActions.goToScreen('settings', { transitionId: 'fadeIn' });
Swal.close();
}
onClick_state3_elGo2settings_btn() {
if (this.props.appActions.dataSlots.ds_login_method !== 'priv_key') {
var temp_str = "Due to <b style='color: #D35400;'>TronLink's</b> current method of operation, logging in this way will mean ";
temp_str += "that <b style='color: #D35400;'>you have to approve every TRX/token transfer</b> to every person on the list. ";
temp_str += "We apologize for the inconvenience and we are currently looking for a work-around. ";
temp_str += "You can either <b style='color: #D35400;'>proceed</b> or logout and <b style='color: #D35400;'>log back in with a private key</b>, which will ";
temp_str += "not require you to approve each transfer.";
Swal.fire({
// text: temp_str,
html: temp_str,
type: 'warning',
showCancelButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
reverseButtons: true,
confirmButtonText: "Proceed",
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.value) {
this.go_to_settings();
} else if (result.dismiss === Swal.DismissReason.cancel) {
this.on_cancel_login();
this.on_click_dismiss();
}
});
} else {
this.go_to_settings();
}
}
on_click_dismiss = (ev) => {
this.props.appActions.updateDataSlot('ds_login_state', '1');
this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
Swal.close();
}
on_cancel_login = (ev) => {
this.props.appActions.updateDataSlot('ds_acc_addr', "");
this.props.appActions.updateDataSlot('ds_acc_pk', "");
this.props.appActions.updateDataSlot('ds_isLoggedIn', "0");
}
renderState3() {
// 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 style_state3_elBackground459952 = {
width: '100%',
height: '100%',
};
const style_state3_elBackground459952_outer = {
backgroundColor: '#f6f6f6',
};
const style_state3_elImage759562 = {
backgroundImage: 'url('+img_state3_elImage759562+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
};
var user_addr = this.props.appActions.dataSlots['ds_acc_addr'];
var str_len = user_addr.length;
const user_str = 'Logged in as ' + user_addr.substring(0,3) + '...' + user_addr.substring(str_len - 3, str_len);
if (!Swal.isVisible() && this.props.appActions.dataSlots['ds_login_state'] === '3') {
Swal.fire({
title: 'Success!',
text: user_str,
type: 'success',
showCancelButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
reverseButtons: true,
confirmButtonText: "That's Me!",
cancelButtonText: 'Go Back'
}).then((result) => {
if (result.value) {
// this.onClick_state3_elGo2settings_btn();
this.go_to_settings();
} else if (result.dismiss === Swal.DismissReason.cancel) {
this.on_cancel_login();
this.on_click_dismiss();
}
});
}
return (
<div className="AppScreen StartScreen" style={baseStyle}>
<div className="background">
<div className='appBg containerMinHeight state3_elBackground459952' style={style_state3_elBackground459952_outer}>
<div style={style_state3_elBackground459952} />
</div>
<div className='containerMinHeight state3_elImage759562' style={style_state3_elImage759562} />
</div>
<div className="screenFgContainer">
<div className="foreground">
<div className='hasNestedComps state3_elNavBar709238'>
<Cnbanner {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._state3_elNavBar709238 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
<div className='hasNestedComps state3_elProgressbar98881'>
<Progressbar ref={(el)=> this._state3_elProgressbar98881 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
</div>
</div>
</div>
</div>
)
}
render() {
switch (parseInt((this.props.ds_login_state !== undefined) ? this.props.ds_login_state : 0, 10)) {
default:
case 0:
return this.renderState0();
case 1:
return this.renderState1();
case 2:
return this.renderState2();
case 3:
return this.renderState3();
}
}
}