Translations and more documentation
This commit is contained in:
Richard Ramos
parent
72d00b5ceb
commit
a47fe86f24
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">CryptoNaves</h1>
|
||||
<h1 class="title">CryptoSpaceShips</h1>
|
||||
<div id="app"></div>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="https://use.fontawesome.com/4271dff08f.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React from 'react';
|
||||
import Toggle from 'react-toggle'
|
||||
|
||||
|
|
@ -11,7 +10,7 @@ const EnableSales = (props) => {
|
|||
onChange={handleChange}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<span>Habilitar ventas</span>
|
||||
<span>Enable sales</span>
|
||||
</label>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React, { Fragment, Component } from 'react';
|
||||
import Toggle from 'react-toggle'
|
||||
import ShipList from './shipList.js'
|
||||
|
|
@ -12,7 +11,7 @@ class MarketPlace extends Component {
|
|||
render(){
|
||||
const {list, onAction} = this.props;
|
||||
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>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,11 @@ class Ship extends Component {
|
|||
const { energy, lasers, shield, price, wallet, salesEnabled, marketplace } = this.props;
|
||||
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">
|
||||
{ !wallet ? <span className="price">{formattedPrice} Ξ</span> : ''}
|
||||
|
|
|
|||
|
|
@ -19,23 +19,28 @@ class App extends Component {
|
|||
}
|
||||
|
||||
componentDidMount(){
|
||||
// TODO: Debemos determinar si la cuenta que estamos usando es la del dueno del token
|
||||
// y cargar tambien las naves
|
||||
// ============== BEGIN: Function implementation here ================ //
|
||||
|
||||
// Determine if we are the owners of the contract
|
||||
this._isOwner();
|
||||
// Load spaceships in different sections
|
||||
this._loadEverything();
|
||||
|
||||
// ============== END: Function implementation here ================ //
|
||||
}
|
||||
|
||||
_loadEverything(){
|
||||
// Cargamos todas las naves que estan a la venta, que estan en mi wallet y en el mercado
|
||||
this._loadShipsForSale();
|
||||
this._loadMyShips();
|
||||
this._loadMarketPlace();
|
||||
this._loadShipsForSale(); // New tokens sales
|
||||
this._loadMyShips(); // My Wallet
|
||||
this._loadMarketPlace(); // Token marketplace
|
||||
}
|
||||
|
||||
_isOwner(){
|
||||
// TODO: Nos interesa saber si somos el dueno del contrato para mostrar el formulario de tokens
|
||||
// Debemos actualizar el estado isOwner con la informacion del contrato
|
||||
// ============== BEGIN: Function implementation here ================ //
|
||||
// TODO: determine if we are the owners of the contract
|
||||
this.setState({isOwner: true});
|
||||
// ============== BEGIN: Function implementation here ================ //
|
||||
// ============== END: Function implementation here ================ //
|
||||
}
|
||||
|
||||
_loadMyShips = async () => {
|
||||
|
|
@ -104,26 +109,26 @@ class App extends Component {
|
|||
return (
|
||||
web3 == undefined
|
||||
? <Fragment>
|
||||
<h3>No se detectó ningun proveedor de web3</h3>
|
||||
<p>La forma mas simple de interactuar con esta DApp es a traves de Status:</p>
|
||||
<h3>No web3 provider was detected</h3>
|
||||
<p>The easiest way to interact with this DApp is using Status:</p>
|
||||
<ul>
|
||||
<li>IOS: Registrate <a href="https://status.im/success.html">aqui</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>IOS: Sign up <a href="https://status.im/success.html">here</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>
|
||||
<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>
|
||||
{ isOwner && !hidePanel ?
|
||||
<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 />
|
||||
<AddToken loadShipsForSale={this._loadShipsForSale} />
|
||||
</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()} />
|
||||
<ShipList title="Tienda" id="shipyard" list={shipsForSale} onAction={(e) => this._loadEverything()} />
|
||||
<ShipList title="Store" id="shipyard" list={shipsForSale} onAction={(e) => this._loadEverything()} />
|
||||
</Fragment>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,13 +32,14 @@ module.exports = {
|
|||
],
|
||||
gas: "auto",
|
||||
contracts: {
|
||||
// OpenZeppelin contracts
|
||||
"AddressUtils": { "deploy": false },
|
||||
"SafeMath": { "deploy": false },
|
||||
"ERC721Token": { "deploy": false },
|
||||
"ERC721BasicToken": { "deploy": false },
|
||||
"ERC721Holder": { "deploy": false },
|
||||
|
||||
"Ownable": { "deploy": false },
|
||||
// Our contracts
|
||||
"SpaceshipToken": {
|
||||
},
|
||||
"SpaceshipMarketplace": {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,21 @@ import web3 from "Embark/web3"
|
|||
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 () => {
|
||||
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
|
||||
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(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue