From b4aa122e446ae77ca45a0f54779706d761ebaef5 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Sun, 1 Jul 2018 22:29:59 -0400 Subject: [PATCH] Added toggle to grant approvals to sell tokens --- app/css/app.css | 158 ++++++++++++++++++++++++++++++- app/js/components/addToken.js | 11 +-- app/js/components/enableSales.js | 20 ++++ app/js/components/marketplace.js | 33 +++++++ app/js/components/shipList.js | 64 +++++++++++-- app/js/index.js | 3 +- package.json | 1 + 7 files changed, 272 insertions(+), 18 deletions(-) create mode 100644 app/js/components/enableSales.js create mode 100644 app/js/components/marketplace.js diff --git a/app/css/app.css b/app/css/app.css index b750bce..20148ed 100644 --- a/app/css/app.css +++ b/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; + } \ No newline at end of file diff --git a/app/js/components/addToken.js b/app/js/components/addToken.js index 936db65..5dc68e5 100644 --- a/app/js/components/addToken.js +++ b/app/js/components/addToken.js @@ -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 diff --git a/app/js/components/enableSales.js b/app/js/components/enableSales.js new file mode 100644 index 0000000..8695b32 --- /dev/null +++ b/app/js/components/enableSales.js @@ -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 +} + + +export default EnableSales; + \ No newline at end of file diff --git a/app/js/components/marketplace.js b/app/js/components/marketplace.js new file mode 100644 index 0000000..30dc48b --- /dev/null +++ b/app/js/components/marketplace.js @@ -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
+

Mercado

+ +
; + } + } + + export default MarketPlace; + \ No newline at end of file diff --git a/app/js/components/shipList.js b/app/js/components/shipList.js index 4c8dfbb..3347276 100644 --- a/app/js/components/shipList.js +++ b/app/js/components/shipList.js @@ -1,14 +1,66 @@ 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'; -const ShipList = (props) => { - const { list, title, id, wallet, onAction } = props; - return
-

{title}

- { list.map((ship, i) => ) } -
; +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
+

{title}

{ wallet ? : ''} + { list.map((ship, i) => ) } +
; + } + +} + export default ShipList; \ No newline at end of file diff --git a/app/js/index.js b/app/js/index.js index 51ad31a..ba9dc3a 100644 --- a/app/js/index.js +++ b/app/js/index.js @@ -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 { : '' } this._loadEverything()} wallet={true} /> + this._loadEverything()} /> ); } diff --git a/package.json b/package.json index 0fdfae6..5080673 100644 --- a/package.json +++ b/package.json @@ -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" } }