Added loading indicator
This commit is contained in:
parent
f382c77644
commit
46d65f1f57
|
@ -3,6 +3,7 @@ import React, { Fragment, Component } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
||||||
import { Form, FormGroup, FormControl, InputGroup, Button, Grid, Row, Col, ControlLabel} from 'react-bootstrap';
|
import { Form, FormGroup, FormControl, InputGroup, Button, Grid, Row, Col, ControlLabel} from 'react-bootstrap';
|
||||||
|
import Spinner from 'react-spinkit';
|
||||||
|
|
||||||
const emptyState = {
|
const emptyState = {
|
||||||
fileToUpload: '',
|
fileToUpload: '',
|
||||||
|
@ -20,6 +21,7 @@ class AddToken extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
|
isSubmitting: false,
|
||||||
fileToUpload: [],
|
fileToUpload: [],
|
||||||
energy: '',
|
energy: '',
|
||||||
lasers: '',
|
lasers: '',
|
||||||
|
@ -38,6 +40,8 @@ class AddToken extends Component {
|
||||||
|
|
||||||
const { mint } = SpaceshipToken.methods;
|
const { mint } = SpaceshipToken.methods;
|
||||||
|
|
||||||
|
this.setState({isSubmitting: true});
|
||||||
|
|
||||||
// TODO:
|
// TODO:
|
||||||
let attributes = {
|
let attributes = {
|
||||||
}
|
}
|
||||||
|
@ -79,11 +83,17 @@ class AddToken extends Component {
|
||||||
// TODO: show error blockchain
|
// TODO: show error blockchain
|
||||||
|
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.setState({isSubmitting: false});
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
// TODO: show error uploading file
|
// TODO: show error uploading file
|
||||||
console.error(err);
|
console.error(err);
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.setState({isSubmitting: false});
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
|
@ -130,8 +140,11 @@ class AddToken extends Component {
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm={2} md={2}>
|
<Col sm={1} md={1}>
|
||||||
<Button onClick={(e) => this.handleClick(e)}>Crear</Button>
|
<Button disabled={this.state.isSubmitting} onClick={(e) => this.handleClick(e)}>Crear</Button>
|
||||||
|
</Col>
|
||||||
|
<Col sm={1} md={1}>
|
||||||
|
{ this.state.isSubmitting ? <Spinner name="wave" color="coral"/> : '' }
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
|
@ -4,13 +4,14 @@ import EmbarkJS from 'Embark/EmbarkJS';
|
||||||
import web3 from "Embark/web3"
|
import web3 from "Embark/web3"
|
||||||
import { Button } from 'react-bootstrap';
|
import { Button } from 'react-bootstrap';
|
||||||
import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
||||||
window.SpaceshipToken = SpaceshipToken;
|
import Spinner from 'react-spinkit';
|
||||||
class Ship extends Component {
|
class Ship extends Component {
|
||||||
|
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
image: ''
|
image: '',
|
||||||
|
isSubmitting: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,6 +33,9 @@ class Ship extends Component {
|
||||||
handleClick = () => {
|
handleClick = () => {
|
||||||
const { buySpaceship } = SpaceshipToken.methods;
|
const { buySpaceship } = SpaceshipToken.methods;
|
||||||
const toSend = buySpaceship(this.props.id)
|
const toSend = buySpaceship(this.props.id)
|
||||||
|
|
||||||
|
this.setState({isSubmitting: true});
|
||||||
|
|
||||||
toSend.estimateGas({value: this.props.price })
|
toSend.estimateGas({value: this.props.price })
|
||||||
.then(estimatedGas => {
|
.then(estimatedGas => {
|
||||||
return toSend.send({from: web3.eth.defaultAccount,
|
return toSend.send({from: web3.eth.defaultAccount,
|
||||||
|
@ -52,12 +56,15 @@ class Ship extends Component {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
// TODO: show error blockchain
|
// TODO: show error blockchain
|
||||||
|
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.setState({isSubmitting: false});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
const { energy, lasers, shield, price, wallet } = this.props;
|
const { energy, lasers, shield, price, wallet } = this.props;
|
||||||
const { image } = this.state;
|
const { image, isSubmitting } = this.state;
|
||||||
|
|
||||||
const formattedPrice = !wallet ? web3.utils.fromWei(price, "ether") : '';
|
const formattedPrice = !wallet ? web3.utils.fromWei(price, "ether") : '';
|
||||||
|
|
||||||
|
@ -74,6 +81,7 @@ class Ship extends Component {
|
||||||
? <Button bsStyle="success" onClick={this.handleClick}>Comprar</Button>
|
? <Button bsStyle="success" onClick={this.handleClick}>Comprar</Button>
|
||||||
: <Button bsStyle="success" onClick={this.handleClick}>Vender</Button>
|
: <Button bsStyle="success" onClick={this.handleClick}>Vender</Button>
|
||||||
}
|
}
|
||||||
|
{ isSubmitting ? <Spinner name="ball-pulse-sync" color="green"/> : '' }
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,8 +13,9 @@
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"babel-preset-stage-2": "^6.24.1",
|
"babel-preset-stage-2": "^6.24.1",
|
||||||
"react": "^16.4.1",
|
"react": "^16.4.1",
|
||||||
"react-dom": "^16.4.1",
|
|
||||||
"react-bootstrap": "^0.32.1",
|
"react-bootstrap": "^0.32.1",
|
||||||
|
"react-dom": "^16.4.1",
|
||||||
|
"react-spinkit": "^3.0.0",
|
||||||
"zeppelin-solidity": "^1.10.0"
|
"zeppelin-solidity": "^1.10.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue