tronair-gui
Version:
Web application/GUI for performing airdrops on the TRON blockchain
272 lines (255 loc) • 7.93 kB
JavaScript
import React, { Component } from 'react';
import { Button, Drawer, Icon, InputNumber, Row, Col } from 'antd';
import Select from "react-select";
import makeAnimated from 'react-select/lib/animated';
import Swal from 'sweetalert2';
import "antd/dist/antd.css";
import './App.css';
import styled, { keyframes } from "styled-components";
const BounceAnimation = keyframes`
0% { right: 60px }
60% { right: -30px }
90% { right: 10px }
100% { right: 5px }
`;
const ButtonWrapper = styled.div`
/* Animation */
animation: ${BounceAnimation} 1.5s ease;
animation-delay: ${props => props.delay};
`;
export default class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {
pos_right: '-40px',
btn_opac: '0.8',
acc_t_choice: null,
visible: false,
amount: 1,
choice_data: {
label: '',
id: '',
owner_address: '',
precision: 0,
value: 0,
},
};
}
numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
donate_drop_change = (choice: string) => {
var clab = '';
var cid = '';
var cown = '';
var cp = 0;
var cv = 0;
if (choice) {
clab = choice.label;
cid = choice.id;
cown = choice.owner_address;
cp = choice.precision;
cv = choice.value;
}
this.setState({
acc_t_choice: choice,
amount: 1,
choice_data: {
label: clab,
id: cid,
owner_address: cown,
precision: cp,
value: cv,
},
});
}
onChange = (value) => {
if (!isNaN(value)) {
if (this.state.choice_data.label !== 'TRX') {
value = Math.floor(value);
}
this.setState({
amount: value,
});
}
};
async send_donation(amount) {
const donate_addr = "TA4vGA6hEpA44AVWPztoFPVJRDuQYd3g4f";
const t_prec = this.state.choice_data.precision;
const token_id = this.state.choice_data.id;
const amt_sun = Math.floor(amount*Math.pow(10,t_prec));
var raw_txn;
if (this.state.choice_data.label === 'TRX') {
raw_txn = await window.tronWeb.transactionBuilder.sendTrx(donate_addr,amt_sun);
} else {
raw_txn = await window.tronWeb.transactionBuilder.sendToken(donate_addr,amt_sun,token_id);
}
const signed_txn = await window.tronWeb.trx.sign(raw_txn);
const result = await window.tronWeb.trx.sendRawTransaction(signed_txn);
return result;
};
onClick_donateBtn = () => {
var temp_str;
var temp_title;
var temp_type;
const donation_val = this.state.amount;
const t_name = this.state.choice_data.label;
const t_max = this.state.choice_data.value;
if (donation_val <= t_max) {
this.send_donation(donation_val)
.then((reciept) => {
// console.log(reciept.result);
if (reciept.result) {
temp_title = 'Thank you!';
temp_str = 'Your donation of ' + this.numberWithCommas(donation_val) + ' ' + t_name + ' was successfully sent!';
temp_type = null;
} else {
temp_title = 'Error';
temp_str = 'The transaction was not successful.';
temp_type = 'error';
}
Swal.fire({
title: temp_title,
text: temp_str,
type: temp_type,
confirmButtonText: 'OK',
});
})
.catch((err) => {
console.log(err);
Swal.fire({
title: 'Error',
type: 'error',
text: err,
confirmButtonText: 'OK',
});
});
} else {
temp_str = 'You tried to transfer ' + this.numberWithCommas(donation_val) + ' ' + t_name + ', but you only have ' + this.numberWithCommas(t_max) + ' in your account..'
Swal.fire({
title: 'Insufficient Balance',
type: 'error',
text: temp_str,
confirmButtonText: 'OK',
});
}
this.setState({visible: false});
};
render() {
const win_width = window.innerWidth*0.3;
var info_str = "We here at Community Node are unpaid volunteers and while we do not expect anything but gratitude, ";
info_str += "any donations for our efforts are greatly appreciated!";
const donate_style = {
position: 'absolute',
right: '5px',
top: '15%',
height: '20%',
width: '75px',
}
const acc_tokens = this.props.appActions.dataSlots.ds_acc_tokens;
var choice_label = this.state.choice_data.label;
var choice_value = this.state.choice_data.value;
if (choice_label === 'TRX') {
choice_value = Math.round(choice_value*100)/100;
} else {
choice_value = Math.round(choice_value);
}
var max_text = '';
if (this.state.acc_t_choice) {
max_text = 'Available Amount: ' + this.numberWithCommas(choice_value) + ' ' + choice_label;
}
return (
<div>
{/* <div style={donate_style}> */}
<ButtonWrapper style={donate_style} delay="0s">
<Button
style={{
cursor: 'pointer',
pointerEvents: 'auto',
right:this.state.pos_right,
opacity:this.state.btn_opac,
height:'100%',
padding:'5px',
paddingRight: '45px',
background:'darkgray',
}}
onMouseEnter={() => {this.setState({pos_right:'-10px',btn_opac:'1'}) }}
onMouseLeave={() => {this.setState({pos_right:'-40px',btn_opac:'0.8'}) }}
onClick={() => {this.setState({visible:true}) }}>
<Row>
<Col span={12}>
<Icon type="gift" style={{fontSize:'20px',color:'black',paddingTop:'10px'}}/>
</Col>
<Col span={12}>
<p style={{
transform: 'rotate(90deg)',
textAlign: 'center',
fontSize: '16px',
fontWeight: 'bold',
}}>Donate</p>
</Col>
</Row>
</Button>
</ButtonWrapper>
{/* </div> */}
<Drawer
style={{fontWeight:'bold',textAlign:'center'}}
title="Donate to the Volunteers of Community Node"
width={win_width}
onClose={() => {this.setState({visible:false}) }}
visible={this.state.visible}>
<div style={{marginTop:'20%'}}>
<h4 style={{fontWeight:'normal',textAlign:'center'}}>
{info_str}
</h4>
</div>
<div style={{pointerEvents:'auto',marginTop:'20px'}}>
<Select
isClearable={true}
components={makeAnimated()}
value={this.state.acc_t_choice}
options={acc_tokens}
onChange={this.donate_drop_change}
/>
</div>
<div
style={{
marginTop:'30px',
textAlign:'center'
}}>
Donation Amount
<InputNumber
style={{width:'100%',textAlign:'center'}}
min={1}
max={this.state.choice_data.value}
step={10}
value={this.state.amount}
onChange={this.onChange}
/>
{max_text}
</div>
<div
style={{
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}}>
<Button
onClick={() => {this.setState({visible:false}) }}
style={{ marginRight: 8 }}>
Cancel
</Button>
<Button onClick={this.onClick_donateBtn} type="primary">
Donate
</Button>
</div>
</Drawer>
</div>
)
}
}