Added toggle to grant approvals to sell tokens
This commit is contained in:
parent
cbafb3656d
commit
b4aa122e44
158
app/css/app.css
158
app/css/app.css
|
@ -18,7 +18,8 @@ h1.title {
|
|||
}
|
||||
|
||||
#myShips h3,
|
||||
#shipyard h3 {
|
||||
#shipyard h3,
|
||||
#marketplace h3 {
|
||||
font-family: 'VT323', monospace;
|
||||
}
|
||||
|
||||
|
@ -121,3 +122,158 @@ h1.title {
|
|||
#management div.row {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#marketplace {
|
||||
width: 100%;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#enableSales span {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
margin-left: 10px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
touch-action: pan-x;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #4D4D4D;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: #19AB27;
|
||||
}
|
||||
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #128D15;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 8px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #4D4D4D;
|
||||
border-radius: 50%;
|
||||
background-color: #FAFAFA;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
border-color: #19AB27;
|
||||
}
|
||||
|
||||
.react-toggle--focus .react-toggle-thumb {
|
||||
-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
|
||||
-moz-box-shadow: 0px 0px 3px 2px #0099E0;
|
||||
box-shadow: 0px 0px 2px 3px #0099E0;
|
||||
}
|
||||
|
||||
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
|
||||
-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
|
||||
-moz-box-shadow: 0px 0px 5px 5px #0099E0;
|
||||
box-shadow: 0px 0px 5px 5px #0099E0;
|
||||
}
|
|
@ -5,15 +5,6 @@ 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: '',
|
||||
attack: '',
|
||||
defense: '',
|
||||
speed: '',
|
||||
cooldown: '',
|
||||
price: ''
|
||||
}
|
||||
|
||||
class AddToken extends Component {
|
||||
|
||||
|
@ -85,7 +76,7 @@ class AddToken extends Component {
|
|||
})
|
||||
.finally(() => {
|
||||
this.setState({isSubmitting: false});
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
// TODO: show error uploading file
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React from 'react';
|
||||
import Toggle from 'react-toggle'
|
||||
|
||||
const EnableSales = (props) => {
|
||||
const {salesEnabled, handleChange, isSubmitting } = props;
|
||||
|
||||
return <label id="enableSales">
|
||||
<Toggle
|
||||
checked={salesEnabled === true ? true : false }
|
||||
onChange={handleChange}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<span>Habilitar ventas</span>
|
||||
</label>
|
||||
}
|
||||
|
||||
|
||||
export default EnableSales;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React, { Fragment, Component } from 'react';
|
||||
import Toggle from 'react-toggle'
|
||||
import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
||||
import SpaceshipMarketplace from 'Embark/contracts/SpaceshipMarketplace';
|
||||
|
||||
|
||||
class MarketPlace extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isSubmitting: true
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render(){
|
||||
return <div id="marketplace">
|
||||
<h3>Mercado</h3>
|
||||
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default MarketPlace;
|
||||
|
|
@ -1,13 +1,65 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import Ship from './ship';
|
||||
import EnableSales from './enableSales';
|
||||
import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
||||
import SpaceshipMarketplace from 'Embark/contracts/SpaceshipMarketplace';
|
||||
|
||||
class ShipList extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
isSubmitting: false
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
EmbarkJS.onReady((err) => {
|
||||
const { isApprovedForAll } = SpaceshipToken.methods;
|
||||
isApprovedForAll(web3.eth.defaultAccount, SpaceshipMarketplace.options.address)
|
||||
.call()
|
||||
.then(isApproved => {
|
||||
this.setState({salesEnabled: isApproved});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
enableMarketplace = () => {
|
||||
const { setApprovalForAll } = SpaceshipToken.methods;
|
||||
|
||||
this.setState({isSubmitting: true});
|
||||
|
||||
const toSend = setApprovalForAll(SpaceshipMarketplace.options.address, !this.state.salesEnabled);
|
||||
|
||||
toSend.estimateGas()
|
||||
.then(estimatedGas => {
|
||||
return toSend.send({from: web3.eth.defaultAccount,
|
||||
gas: estimatedGas + 1000});
|
||||
})
|
||||
.then(receipt => {
|
||||
this.setState({salesEnabled: !this.state.salesEnabled});
|
||||
console.log(receipt);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
// TODO: show error blockchain
|
||||
|
||||
})
|
||||
.finally(() => {
|
||||
this.setState({isSubmitting: false});
|
||||
});
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const { list, title, id, wallet, onAction } = this.props;
|
||||
return <div id={id}>
|
||||
<h3>{title}</h3> { wallet ? <EnableSales isSubmitting={this.state.isSubmitting} handleChange={this.enableMarketplace} salesEnabled={this.state.salesEnabled} /> : ''}
|
||||
{ list.map((ship, i) => <Ship onAction={onAction} wallet={wallet} key={i} {...ship} />) }
|
||||
</div>;
|
||||
}
|
||||
|
||||
const ShipList = (props) => {
|
||||
const { list, title, id, wallet, onAction } = props;
|
||||
return <div id={id}>
|
||||
<h3>{title}</h3>
|
||||
{ list.map((ship, i) => <Ship onAction={onAction} wallet={wallet} key={i} {...ship} />) }
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
|
|||
import ShipList from './components/shipList.js';
|
||||
import WithdrawBalance from './components/withdrawBalance.js';
|
||||
import AddToken from './components/addToken.js';
|
||||
|
||||
import MarketPlace from './components/marketplace.js';
|
||||
|
||||
class App extends Component {
|
||||
|
||||
|
@ -95,6 +95,7 @@ class App extends Component {
|
|||
</div> : ''
|
||||
}
|
||||
<ShipList title="Mis Naves" id="myShips" list={myShips} onAction={(e) => this._loadEverything()} wallet={true} />
|
||||
<MarketPlace />
|
||||
<ShipList title="Tienda" id="shipyard" list={shipsForSale} onAction={(e) => this._loadEverything()} />
|
||||
</Fragment>);
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
"react-bootstrap": "^0.32.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-spinkit": "^3.0.0",
|
||||
"react-toggle": "^4.0.2",
|
||||
"zeppelin-solidity": "^1.10.0"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue