tronair-gui
Version:
Web application/GUI for performing airdrops on the TRON blockchain
208 lines (174 loc) • 7.12 kB
JavaScript
import React, { Component } from 'react';
import './App.css';
import img_state0_elImage357362 from './images/Cnbanner_state0_elImage357362_357362.png';
import img_state0_elImageCopy from './images/Cnbanner_state0_elImageCopy_103360.png';
import img_state1_elImage357362 from './images/Cnbanner_state0_elImage357362_357362.png';
import img_state1_elImageCopy2 from './images/Cnbanner_state1_elImageCopy2_108011.png';
export default class Cnbanner extends Component {
onClick_state0_elImage357362 = (ev) => {
window.open('https://www.communitynode.org/', '_blank');
}
onClickLogin = (ev) => {
var has_accepted = (this.props.appActions.dataSlots.ds_login_state !== '0') ? true:false;
if (has_accepted) {
this.props.appActions.updateDataSlot('ds_login_state', '1');
this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
}
}
renderState0() {
// eslint-disable-next-line no-unused-vars
let baseStyle = {};
// eslint-disable-next-line no-unused-vars
let layoutFlowStyle = {};
var has_accepted = (this.props.appActions.dataSlots.ds_login_state !== '0') ? true:false;
var login_op = '0.5';
if (has_accepted) {
login_op = '1.0';
}
const style_state0_elImage357362 = {
backgroundImage: 'url('+img_state0_elImage357362+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
cursor: 'pointer',
pointerEvents: 'auto',
};
const style_state0_elText2125288 = {
color: 'rgba(0, 0, 0, 0.8500)',
textAlign: 'left',
cursor: 'pointer',
pointerEvents: 'auto',
};
const style_state0_elImageCopy = {
height: 'auto',
cursor: 'pointer',
pointerEvents: 'auto',
opacity: login_op,
};
const style_state0_elText = {
fontSize: 15.0,
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif',
fontWeight: 'bold',
// color: 'rgba(0, 0, 0, 0.8500)',
opacity: login_op,
textAlign: 'right',
cursor: 'pointer',
pointerEvents: 'auto',
};
return (
<div className="Cnbanner" style={baseStyle}>
<div className="background">
<div className='containerMinHeight state0_elBackground' />
</div>
<div className="foreground">
<div className='state0_elImage357362' style={style_state0_elImage357362} onClick={this.onClick_state0_elImage357362} />
<div
className='headlineFont state0_elText2125288'
style={style_state0_elText2125288}
onClick={this.onClick_state0_elImage357362}>
<div>{this.props.locStrings.banner_text2_125288}</div>
</div>
<img
className='state0_elImageCopy'
style={style_state0_elImageCopy}
src={img_state0_elImageCopy}
alt=""
onClick={this.onClickLogin}
/>
<div
className='state0_elText'
style={style_state0_elText}
onClick={this.onClickLogin}>
<div>{this.props.locStrings.banner_text_968250}</div>
</div>
</div>
</div>
)
}
// --- Functions for component state index 1 (2 of 2) ---
onClick_state1_elImage357362 = (ev) => {
window.open('https://www.communitynode.org/', '_blank');
}
onClick_state1_elTextCopy = (ev) => {
let newVal = "1";
this.props.appActions.resetPropState();
this.props.appActions.updateDataSlot('ds_login_state', newVal);
this.props.appActions.updateDataSlot('ds_acc_addr', "");
this.props.appActions.updateDataSlot('ds_acc_pk', "");
newVal = "0";
this.props.appActions.updateDataSlot('ds_isLoggedIn', newVal);
// Go to screen 'Start'
this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
}
onClick_state1_elImageCopy2 = (ev) => {
let newVal = "1";
this.props.appActions.updateDataSlot('ds_login_state', newVal);
this.props.appActions.updateDataSlot('ds_acc_addr', "");
this.props.appActions.updateDataSlot('ds_acc_pk', "");
newVal = "0";
this.props.appActions.updateDataSlot('ds_isLoggedIn', newVal);
// Go to screen 'Start'
this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
}
renderState1() {
// eslint-disable-next-line no-unused-vars
let baseStyle = {};
// eslint-disable-next-line no-unused-vars
let layoutFlowStyle = {};
const style_state1_elImage357362 = {
backgroundImage: 'url('+img_state1_elImage357362+')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
backgroundSize: 'cover',
cursor: 'pointer',
pointerEvents: 'auto',
};
const style_state1_elText2125288 = {
color: 'rgba(0, 0, 0, 0.8500)',
textAlign: 'left',
cursor: 'pointer',
pointerEvents: 'auto',
};
let transformPropValue_textCopy = (input) => {
return 'Logout ' + input.substring(0,3) + '...';
}
const style_state1_elTextCopy = {
fontSize: 15.0,
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif',
fontWeight: 'bold',
color: 'rgba(0, 0, 0, 0.8500)',
textAlign: 'right',
cursor: 'pointer',
pointerEvents: 'auto',
};
const value_textCopy = transformPropValue_textCopy((this.props.appActions.dataSlots ? this.props.appActions.dataSlots['ds_acc_addr'] : ''));
const style_state1_elImageCopy2 = {
height: 'auto',
cursor: 'pointer',
pointerEvents: 'auto',
};
return (
<div className="Cnbanner" style={baseStyle}>
<div className="foreground">
<div className='state1_elImage357362' style={style_state1_elImage357362} onClick={this.onClick_state1_elImage357362} />
<div className='headlineFont state1_elText2125288' style={style_state1_elText2125288} onClick={this.onClick_state0_elImage357362}>
<div>{this.props.locStrings.banner_text2_125288}</div>
</div>
<div className='state1_elTextCopy' style={style_state1_elTextCopy} onClick={() => {this.props.appActions.logoutCallback()}} >
<div>{value_textCopy !== undefined ? value_textCopy : (<span className="propValueMissing">{this.props.locStrings.banner_textcopy_698703}</span>)}</div>
</div>
<img className='state1_elImageCopy2' style={style_state1_elImageCopy2} src={img_state1_elImageCopy2} alt="" onClick={() => {this.props.appActions.logoutCallback()}} />
</div>
</div>
)
}
render() {
switch (parseInt((this.state && this.state.visualStateIndexOverride !== undefined) ? this.state.visualStateIndexOverride : this.props.visualStateIndex, 10)) {
default:
case 0:
return this.renderState0();
case 1:
return this.renderState1();
}
}
}