Translations and more documentation

This commit is contained in:
Richard Ramos 2018-07-11 10:20:06 -04:00
parent 72d00b5ceb
commit a47fe86f24
7 changed files with 57 additions and 24 deletions

View File

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<h1 class="title">CryptoNaves</h1> <h1 class="title">CryptoSpaceShips</h1>
<div id="app"></div> <div id="app"></div>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="https://use.fontawesome.com/4271dff08f.js"></script> <script src="https://use.fontawesome.com/4271dff08f.js"></script>

View File

@ -1,4 +1,3 @@
import EmbarkJS from 'Embark/EmbarkJS';
import React from 'react'; import React from 'react';
import Toggle from 'react-toggle' import Toggle from 'react-toggle'
@ -11,7 +10,7 @@ const EnableSales = (props) => {
onChange={handleChange} onChange={handleChange}
disabled={isSubmitting} disabled={isSubmitting}
/> />
<span>Habilitar ventas</span> <span>Enable sales</span>
</label> </label>
} }

View File

@ -1,4 +1,3 @@
import EmbarkJS from 'Embark/EmbarkJS';
import React, { Fragment, Component } from 'react'; import React, { Fragment, Component } from 'react';
import Toggle from 'react-toggle' import Toggle from 'react-toggle'
import ShipList from './shipList.js' import ShipList from './shipList.js'
@ -12,7 +11,7 @@ class MarketPlace extends Component {
render(){ render(){
const {list, onAction} = this.props; const {list, onAction} = this.props;
return <div id="marketplace"> return <div id="marketplace">
<ShipList title="Mercado" id="marketlist" list={list} onAction={onAction} wallet={false} marketplace={true} /> <ShipList title="Marketplace" id="marketlist" list={list} onAction={onAction} wallet={false} marketplace={true} />
</div>; </div>;
} }
} }

View File

@ -75,7 +75,11 @@ class Ship extends Component {
const { energy, lasers, shield, price, wallet, salesEnabled, marketplace } = this.props; const { energy, lasers, shield, price, wallet, salesEnabled, marketplace } = this.props;
const { image, isSubmitting, showSellForm } = this.state; const { image, isSubmitting, showSellForm } = this.state;
const formattedPrice = !wallet ? web3.utils.fromWei(price, "ether") : ''; // ============== BEGIN: Format price here ================ //
const formattedPrice = !wallet ? price : '';
// ============== END: Format price here ================ //
return <div className="ship"> return <div className="ship">
{ !wallet ? <span className="price">{formattedPrice} Ξ</span> : ''} { !wallet ? <span className="price">{formattedPrice} Ξ</span> : ''}

View File

@ -19,23 +19,28 @@ class App extends Component {
} }
componentDidMount(){ componentDidMount(){
// TODO: Debemos determinar si la cuenta que estamos usando es la del dueno del token // ============== BEGIN: Function implementation here ================ //
// y cargar tambien las naves
// Determine if we are the owners of the contract
this._isOwner(); this._isOwner();
// Load spaceships in different sections
this._loadEverything(); this._loadEverything();
// ============== END: Function implementation here ================ //
} }
_loadEverything(){ _loadEverything(){
// Cargamos todas las naves que estan a la venta, que estan en mi wallet y en el mercado this._loadShipsForSale(); // New tokens sales
this._loadShipsForSale(); this._loadMyShips(); // My Wallet
this._loadMyShips(); this._loadMarketPlace(); // Token marketplace
this._loadMarketPlace();
} }
_isOwner(){ _isOwner(){
// TODO: Nos interesa saber si somos el dueno del contrato para mostrar el formulario de tokens // ============== BEGIN: Function implementation here ================ //
// Debemos actualizar el estado isOwner con la informacion del contrato // TODO: determine if we are the owners of the contract
this.setState({isOwner: true}); this.setState({isOwner: true});
// ============== BEGIN: Function implementation here ================ //
// ============== END: Function implementation here ================ //
} }
_loadMyShips = async () => { _loadMyShips = async () => {
@ -104,26 +109,26 @@ class App extends Component {
return ( return (
web3 == undefined web3 == undefined
? <Fragment> ? <Fragment>
<h3>No se detectó ningun proveedor de web3</h3> <h3>No web3 provider was detected</h3>
<p>La forma mas simple de interactuar con esta DApp es a traves de Status:</p> <p>The easiest way to interact with this DApp is using Status:</p>
<ul> <ul>
<li>IOS: Registrate <a href="https://status.im/success.html">aqui</a></li> <li>IOS: Sign up <a href="https://status.im/success.html">here</a></li>
<li>Android: Descargalo desde el <a href="https://hs-3954379.t.hubspotemail.net/e1t/c/*W41DrrR576YXwW1g0twY4l6xHW0/*W4W80L47W9sgzW29n3jf3B0spz0/5/f18dQhb0S4007rmtHfV12fxx5VRhLcN56MR7dhW2vYW6FzPhr8bLg8BW7wfwHD77xh4BVC-SLw8K_1QSW5GxQvR1sQJ5jVD9fTd4nXXdvMNQbcPgVDM_N33FZt2S-Y7DW91QKkb4RkrPPW493NBn8KgjlJN88JFdQ4DH0cW9cs3zS6VKqGRW7G0nyJ3z8s2PW3pb3q040w1lQW4p0nGT2FfY9KMrYVt8rT2YCW3GL73b2Fj2j4N56RMzHfcp_hW7fW6gW4dBzfRW3tZgJb6wB1JfVd0zbv35wh4RN8zbXKpnyfj6W6yM6K41NZprfN1PZNlPgv7zFW71lRcW8yGypBMnGzt-xFbw9N8TJbMTVfCwcW1YQHxz1GQtXKW657lCJ5fhKvjW1_8CNL4BTT7wW69P8Y64hksdCW80wSFy4CkbFPW1pPcF65bpn_JW7WZ7l285LvsQVWNwb38cgFp2W2DF0P046C5dqN7L0FQ2SrfSCW3yggzM7T60VNW6-9ws44Nq68yW5ghc8S3jzRf5W7NDz4_49hbllW1CCcl63gd1KmW2n5V8p5slbFjW7PgZ_T5vd89hMxFPvDlGMxDW3VqJG78dKTzXN46s6SqMbrmyW5L36lt6n-7WNW141ZBT444dDhW5t6Y8f8Z1MLWV4pX33282QyrW1j06VK7zr2Q6W7bcdfr591ZtSW43_Xkw4lPzBFW4h7jHc97dFs7W88ZFRD1GXrZpW9jWR8G6Xg9lQN3GBfHngxjrGf39tZ-n03">PlayStore</a></li> <li>Android: Download from the <a href="https://hs-3954379.t.hubspotemail.net/e1t/c/*W41DrrR576YXwW1g0twY4l6xHW0/*W4W80L47W9sgzW29n3jf3B0spz0/5/f18dQhb0S4007rmtHfV12fxx5VRhLcN56MR7dhW2vYW6FzPhr8bLg8BW7wfwHD77xh4BVC-SLw8K_1QSW5GxQvR1sQJ5jVD9fTd4nXXdvMNQbcPgVDM_N33FZt2S-Y7DW91QKkb4RkrPPW493NBn8KgjlJN88JFdQ4DH0cW9cs3zS6VKqGRW7G0nyJ3z8s2PW3pb3q040w1lQW4p0nGT2FfY9KMrYVt8rT2YCW3GL73b2Fj2j4N56RMzHfcp_hW7fW6gW4dBzfRW3tZgJb6wB1JfVd0zbv35wh4RN8zbXKpnyfj6W6yM6K41NZprfN1PZNlPgv7zFW71lRcW8yGypBMnGzt-xFbw9N8TJbMTVfCwcW1YQHxz1GQtXKW657lCJ5fhKvjW1_8CNL4BTT7wW69P8Y64hksdCW80wSFy4CkbFPW1pPcF65bpn_JW7WZ7l285LvsQVWNwb38cgFp2W2DF0P046C5dqN7L0FQ2SrfSCW3yggzM7T60VNW6-9ws44Nq68yW5ghc8S3jzRf5W7NDz4_49hbllW1CCcl63gd1KmW2n5V8p5slbFjW7PgZ_T5vd89hMxFPvDlGMxDW3VqJG78dKTzXN46s6SqMbrmyW5L36lt6n-7WNW141ZBT444dDhW5t6Y8f8Z1MLWV4pX33282QyrW1j06VK7zr2Q6W7bcdfr591ZtSW43_Xkw4lPzBFW4h7jHc97dFs7W88ZFRD1GXrZpW9jWR8G6Xg9lQN3GBfHngxjrGf39tZ-n03">PlayStore</a></li>
</ul> </ul>
<p>Tambien puedes usar <a href="https://metamask.io/">Metamask</a></p> <p>You can also use <a href="https://metamask.io/">Metamask</a></p>
</Fragment> </Fragment>
: :
<Fragment> <Fragment>
{ isOwner && !hidePanel ? { isOwner && !hidePanel ?
<div id="management"> <div id="management">
<span className="close" onClick={ (e) => this.setState({'hidePanel': true})}>cerrar</span> <span className="close" onClick={ (e) => this.setState({'hidePanel': true})}>close</span>
<WithdrawBalance /> <WithdrawBalance />
<AddToken loadShipsForSale={this._loadShipsForSale} /> <AddToken loadShipsForSale={this._loadShipsForSale} />
</div> : '' </div> : ''
} }
<ShipList title="Mis Naves" id="myShips" list={myShips} onAction={(e) => this._loadEverything()} wallet={true} /> <ShipList title="My Wallet" id="myShips" list={myShips} onAction={(e) => this._loadEverything()} wallet={true} />
<MarketPlace list={marketPlaceShips} onAction={(e) => this._loadEverything()} /> <MarketPlace list={marketPlaceShips} onAction={(e) => this._loadEverything()} />
<ShipList title="Tienda" id="shipyard" list={shipsForSale} onAction={(e) => this._loadEverything()} /> <ShipList title="Store" id="shipyard" list={shipsForSale} onAction={(e) => this._loadEverything()} />
</Fragment>); </Fragment>);
} }
} }

View File

@ -32,13 +32,14 @@ module.exports = {
], ],
gas: "auto", gas: "auto",
contracts: { contracts: {
// OpenZeppelin contracts
"AddressUtils": { "deploy": false }, "AddressUtils": { "deploy": false },
"SafeMath": { "deploy": false }, "SafeMath": { "deploy": false },
"ERC721Token": { "deploy": false }, "ERC721Token": { "deploy": false },
"ERC721BasicToken": { "deploy": false }, "ERC721BasicToken": { "deploy": false },
"ERC721Holder": { "deploy": false }, "ERC721Holder": { "deploy": false },
"Ownable": { "deploy": false }, "Ownable": { "deploy": false },
// Our contracts
"SpaceshipToken": { "SpaceshipToken": {
}, },
"SpaceshipMarketplace": { "SpaceshipMarketplace": {

View File

@ -11,6 +11,21 @@ import web3 from "Embark/web3"
import SpaceshipToken from 'Embark/contracts/SpaceshipToken'; import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
``` ```
EmbarkJS offers a `onReady(err)` method to run Javascript code as soon as the connections to the web3 providers and ipfs are done and become safe to interact with. This function is ideal to perfom task that need to be executed as soon as these connections are made.
We'll use this function inside componentDidMount(), to load all the spaceships of the diferent sections of the DApp:
```
componentDidMount(){
EmbarkJS.onReady((err) => {
this._loadEverything();
});
}
```
`_loadEverything()` has a call to the method `_loadShipsForSale()` which is the one we're interested to implement to load all the newly minted tokens that we wish to sell.
_loadShipsForSale = async () => { _loadShipsForSale = async () => {
const { shipsForSaleN, shipsForSale, spaceshipPrices, spaceships } = SpaceshipToken.methods; const { shipsForSaleN, shipsForSale, spaceshipPrices, spaceships } = SpaceshipToken.methods;
@ -189,7 +204,17 @@ withdrawBalance.js
## Display the mint form only if we are the owners of the contract ## Display the mint form only if we are the owners of the contract
One thing you may have noticed is that the minting form shows up always even if you're not the owner of the contract. Our `SpaceshipToken` contract inherits from `Owned` which adds an `owner()` method that we can use to determine if the account browsing the dapp is the owner of the contract One thing you may have noticed is that the minting form shows up always even if you're not the owner of the contract. Our `SpaceshipToken` contract inherits from `Owned` which adds an `owner()` method that we can use to determine if the account browsing the dapp is the owner of the contract
For this, let's go back to `app/js/index.js`. The method `_isOwner` is called when the component mounts, due to it being a good place to load data from a remote endpoint (in this case, the EVM). For this, let's go back to `app/js/index.js`. The method `_isOwner` needs to be called when the component mounts, due to it being a good place to load data from a remote endpoint (in this case, the EVM).
```
componentDidMount(){
EmbarkJS.onReady((err) => {
this._isOwner();
this._loadEverything();
});
}
```
``` ```
_isOwner(){ _isOwner(){