From a47fe86f24bbb5395cb376d181c6d5746d61a6a7 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Wed, 11 Jul 2018 10:20:06 -0400 Subject: [PATCH] Translations and more documentation --- app/index.html | 2 +- app/js/components/enableSales.js | 3 +-- app/js/components/marketplace.js | 3 +-- app/js/components/ship.js | 6 ++++- app/js/index.js | 37 ++++++++++++++++------------- config/contracts.js | 3 ++- tutorial/3-listing-buying-tokens.md | 27 ++++++++++++++++++++- 7 files changed, 57 insertions(+), 24 deletions(-) diff --git a/app/index.html b/app/index.html index f82973f..f4fc852 100644 --- a/app/index.html +++ b/app/index.html @@ -10,7 +10,7 @@ -

CryptoNaves

+

CryptoSpaceShips

diff --git a/app/js/components/enableSales.js b/app/js/components/enableSales.js index 024c3ba..c173560 100644 --- a/app/js/components/enableSales.js +++ b/app/js/components/enableSales.js @@ -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} /> - Habilitar ventas + Enable sales } diff --git a/app/js/components/marketplace.js b/app/js/components/marketplace.js index 71f536b..047a571 100644 --- a/app/js/components/marketplace.js +++ b/app/js/components/marketplace.js @@ -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
- +
; } } diff --git a/app/js/components/ship.js b/app/js/components/ship.js index f7b338e..3c906b9 100644 --- a/app/js/components/ship.js +++ b/app/js/components/ship.js @@ -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
{ !wallet ? {formattedPrice} Ξ : ''} diff --git a/app/js/index.js b/app/js/index.js index 62c7660..2d42032 100644 --- a/app/js/index.js +++ b/app/js/index.js @@ -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 ? -

No se detectó ningun proveedor de web3

-

La forma mas simple de interactuar con esta DApp es a traves de Status:

+

No web3 provider was detected

+

The easiest way to interact with this DApp is using Status:

-

Tambien puedes usar Metamask

+

You can also use Metamask

 : { isOwner && !hidePanel ?
- this.setState({'hidePanel': true})}>cerrar + this.setState({'hidePanel': true})}>close
: '' } - this._loadEverything()} wallet={true} /> + this._loadEverything()} wallet={true} /> this._loadEverything()} /> - this._loadEverything()} /> + this._loadEverything()} /> ); } } diff --git a/config/contracts.js b/config/contracts.js index 9545466..8642b85 100644 --- a/config/contracts.js +++ b/config/contracts.js @@ -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": { diff --git a/tutorial/3-listing-buying-tokens.md b/tutorial/3-listing-buying-tokens.md index 449a142..be0707c 100644 --- a/tutorial/3-listing-buying-tokens.md +++ b/tutorial/3-listing-buying-tokens.md @@ -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(){