import React, { Component } from 'react';
import swal from 'sweetalert';
import './stylesheets/application.css';
import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete';
import moment from 'moment';
import Loading from './Loading';
class App extends Component {
constructor(props){
super(props);
this.checkValidation = this.checkValidation.bind(this)
this.onClick = this.onClick.bind(this);
this.onChangeFormField = this.onChangeFormField.bind(this);
this.getKeysManager = this.getKeysManager.bind(this);
this.getMetadataContract = this.getMetadataContract.bind(this);
this.getVotingKey = this.getVotingKey.bind(this);
this.onChangeAutoComplete = ((address) => {
const form = this.state.form;
form.fullAddress = address;
this.setState({form})
})
this.onSelect = this.onSelectAutocomplete.bind(this)
this.state = {
web3Config: {},
form: {
fullAddress: '',
expirationDate: '',
postal_code: '',
us_state: '',
firstName: '',
lastName: '',
licenseId: ''
},
hasData: false
}
this.defaultValues = null;
this.setMetadata.call(this);
}
async setMetadata(){
const currentData = await this.getMetadataContract().getValidatorData({votingKey: this.getVotingKey()});
const hasData = Number(currentData.postal_code) > 0 ? true : false
this.defaultValues = currentData;
const pendingChange = await this.getMetadataContract().getPendingChange({votingKey: this.getVotingKey()});
if(Number(pendingChange.minThreshold) > 0 ) {
var content = document.createElement("div");
content.innerHTML = `
First Name: ${pendingChange.firstName}
Last Name: ${pendingChange.lastName}
Full Address: ${pendingChange.fullAddress}
Expiration Date: ${pendingChange.expirationDate}
License ID: ${pendingChange.licenseId}
US state: ${pendingChange.us_state}
Zip Code: ${pendingChange.postal_code}
`;
swal({
icon: 'warning',
title: 'You have pending changes!',
content: content
});
}
this.setState({
form: {
fullAddress: currentData.fullAddress,
expirationDate: currentData.expirationDate,
postal_code: currentData.postal_code,
us_state: currentData.us_state,
firstName: currentData.firstName,
lastName: currentData.lastName,
licenseId: currentData.licenseId,
},
hasData
});
}
getKeysManager(){
return this.props.web3Config.keysManager;
}
getMetadataContract(){
return this.props.web3Config.metadataContract;
}
getVotingKey(){
return this.props.web3Config.votingKey;
}
checkValidation() {
const isAfter = moment(this.state.form.expirationDate).isAfter(moment());
let keys = Object.keys(this.state.form);
keys.forEach((key) => {
if(!this.state.form[key]){
this.setState({loading: false})
swal("Warning!", `${key} cannot be empty`, "warning");
return false;
}
})
if(isAfter){
} else {
this.setState({loading: false})
swal("Warning!", "Expiration date should be valid", "warning");
return false;
}
return true;
}
async onSelectAutocomplete(data) {
let place = await geocodeByAddress(data)
let address_components = {};
for (var i = 0; i < place[0].address_components.length; i++) {
var addressType = place[0].address_components[i].types[0];
switch(addressType) {
case "postal_code":
address_components.postal_code = Number(place[0].address_components[i].short_name);
break;
case "street_number":
address_components.street_number = place[0].address_components[i].short_name;
break;
case "route":
address_components.route = place[0].address_components[i].short_name;
break;
case "locality":
address_components.locality = place[0].address_components[i].short_name;
break;
case "administrative_area_level_1":
address_components.administrative_area_level_1 = place[0].address_components[i].short_name;
break;
default:
break;
}
let form = this.state.form;
form.fullAddress= `${address_components.street_number} ${address_components.route} ${address_components.locality}`;
form.us_state= address_components.administrative_area_level_1;
form.postal_code= address_components.postal_code;
this.setState({
form
});
}
}
async onClick() {
this.setState({loading:true});
const isFormValid = this.checkValidation();
if(isFormValid){
const votingKey = this.getVotingKey();
console.log('voting', votingKey)
const isValid = await this.getKeysManager().isVotingActive(votingKey);
console.log(isValid);
if(isValid){
// // add loading screen
await this.sendTxToContract()
} else {
this.setState({loading:false});
swal("Warning!", "The key is not valid voting Key! Please make sure you have loaded correct voting key in Metamask", "warning");
return;
}
}
}
async sendTxToContract(){
this.getMetadataContract().createMetadata({
firstName: this.state.form.firstName,
lastName: this.state.form.lastName,
licenseId: this.state.form.licenseId,
fullAddress: this.state.form.fullAddress,
state: this.state.form.us_state,
zipcode: this.state.form.postal_code,
expirationDate: moment(this.state.form.expirationDate).unix(),
votingKey: this.getVotingKey(),
hasData: this.state.hasData
}).then((receipt) => {
console.log(receipt);
this.setState({loading: false})
swal("Congratulations!", "Your metadata was sent!", "success");
}).catch((error) => {
console.error(error.message);
this.setState({loading: false})
var content = document.createElement("div");
content.innerHTML = `
Something went wrong!
${error.message}
`;
swal({
icon: 'error',
title: 'Error',
content: content
});
})
}
onChangeFormField(event) {
const field = event.target.id;
const value = event.target.value;
let form = this.state.form;
form[field] = value;
this.setState({form});
}
render() {
const BtnAction = this.state.hasData ? "Update" : "Set";
const AutocompleteItem = ({ formattedSuggestion }) => (
{ formattedSuggestion.mainText }{' '}
{ formattedSuggestion.secondaryText }
)
const inputProps = {
value: this.state.form.fullAddress,
onChange: this.onChangeAutoComplete,
id: 'address'
}
let loader = this.state.loading ? : '';
let createKeyBtn = (
)
let content = createKeyBtn;
return (
{loader}
{content}
);
}
}
export default App;