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