tronair-gui/src/Chooselogin.js

Web application/GUI for performing airdrops on the TRON blockchain

import React, { Component } from 'react';
import Swal from 'sweetalert2';
import { Button } from 'antd';
import './App.css';

// UI framework component imports
// import Button2 from 'muicss/lib/react/button';


export default class Chooselogin extends Component {
  constructor(props) {
    super(props);

    this.state = {
      tl_color: '#ff9b2b',
    };
  }

  onClick_elTl_login_btn = (ev) => {
    // const addr_list = this.props.appActions.dataSlots.ds_approved_addr_list;
    if (window.tronWeb && window.tronWeb.ready) {
      this.props.appActions.updateDataSlot('ds_acc_addr', window.tronWeb.defaultAddress.base58);
      this.props.appActions.updateDataSlot('ds_login_method','tronlink');
      this.props.appActions.updateDataSlot('ds_login_state', '3');
      this.props.appActions.updateDataSlot('ds_isLoggedIn', '1');
    } else {
      Swal.fire(
        'Not Logged In',
        'TronLink is installed in your browser, but you are not logged in. Please log in and try again.',
        'error'
      )
    }
  }
  
  on_click_dismiss = () => {
    this.props.appActions.updateDataSlot('ds_login_state', '1');
    this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
    Swal.close();
  }
  
  onClick_elTl_login_btnCopy = (ev) => {
    let newVal = "2";
    this.props.appActions.updateDataSlot('ds_login_state', newVal);
    this.props.appActions.updateDataSlot('ds_login_method','priv_key');
  }
  
  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_elTl_login_btn = {
        display: 'block',
        color: 'white',
        textAlign: 'center',
        backgroundColor: this.state.tl_color,
        fontWeight: 'bold',
     };
     
    const enabledValue_tl_login_btn = this.props.appActions.dataSlots.ds_has_tronlink;
    
    const style_elTl_login_btn_outer = {
        cursor: 'pointer',
        pointerEvents: 'auto',
     };
    const style_elTl_login_btnCopy = {
        display: 'block',
        color: 'white',
        textAlign: 'center',
        fontWeight: 'bold',
     };
    const style_elTl_login_btnCopy_outer = {
        cursor: 'pointer',
        pointerEvents: 'auto',
     };
    
    return (
      <div className="Chooselogin" 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 elTl_login_btn' style={style_elTl_login_btn_outer}>
            <Button 
              style={style_elTl_login_btn}
              onMouseEnter={() => {this.setState({tl_color:'#ffb666'}) }}
              onMouseLeave={() => {this.setState({tl_color:'#ff9b2b'}) }}
              disabled={enabledValue_tl_login_btn !== 'true'}
              size='large'
              onClick={this.onClick_elTl_login_btn}>
              Login with TronLink
            </Button>
          
          </div>
          
          <div className='headlineFont elTl_login_btnCopy' style={style_elTl_login_btnCopy_outer}>
            <Button 
              style={style_elTl_login_btnCopy}
              type="primary"
              size='large'
              onClick={this.onClick_elTl_login_btnCopy}>
              Login with Private Key
            </Button>
          
          </div>
          
        </div>
      </div>
    )
  }
  

}