Transfering ETH

transfer_gateway

@@ -5,7 +5,7 @@ ganache_port=8545
 dapp_port=8080
 dappchain_port_1=46657
 dappchain_port_2=46658
-build_number=407
+build_number=416
 
 # Check available platforms
 platform='unknown'
@@ -242,7 +242,7 @@ start)
   fi
 
   start_and_deploy_truffle_ethereum
-  start_dappchain
+  # start_dappchain
   deploy_truffle_dappchain
   start_webapp
   run_mapping
@@ -260,7 +260,7 @@ stop)
   echo
 
   stop_webdapp
-  stop_dappchain
+  # stop_dappchain
   stop_truffle_ethereum
 
   echo

webclient/src/components/card.js

@@ -4,9 +4,16 @@ export default class Card extends React.Component {
   render() {
     return (
       <div className="card" style={{ width: 286, height: 300, float: 'left', margin: 4 }}>
+        <h5 className="card-header">{this.props.title}</h5>
         <div className="card-body">
-          <h5 className="card-title">{this.props.title}</h5>
-          <p className="card-text">{this.props.description}</p>
+          <p className="card-text">
+            <strong>Qtd:</strong> 1
+          </p>
+          <p className="card-text">
+            <strong>Desc:</strong> {this.props.description}
+          </p>
+        </div>
+        <div className="card-footer">
           <button
             disabled={this.props.disabled}
             type="button"

webclient/src/components/dappchain_tokens.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import BN from 'bn.js'
 import Wallet from './wallet'
 import Card from './card'
 
@@ -10,6 +11,8 @@ export default class DAppChainTokens extends React.Component {
       account: '0x',
       ethAccount: '0x',
       cardIds: [],
+      ethBalance: 0,
+      balance: 0,
       allowing: false
     }
   }
@@ -29,14 +32,22 @@ export default class DAppChainTokens extends React.Component {
     const cardBalance = await this.props.dcCardManager.getBalanceOfUserAsync(account)
     const balance = await this.props.dcTokenManager.getBalanceOfUserAsync(account)
     const mapping = await this.props.dcAccountManager.getAddressMappingAsync(ethAccount)
+    const ethBalance = (await this.props.dcAccountManager.getEthCoinBalance()).toString()
 
     let cardIds = []
 
     if (cardBalance > 0) {
       cardIds = await this.props.dcCardManager.getTokensCardsOfUserAsync(account, cardBalance)
     }
 
-    this.setState({ account, cardIds, ethAccount, mapping, balance })
+    this.setState({
+      account,
+      cardIds,
+      ethAccount,
+      mapping,
+      balance,
+      ethBalance
+    })
   }
 
   async allowToWithdrawToken(amount) {
@@ -63,6 +74,27 @@ export default class DAppChainTokens extends React.Component {
     await this.updateUI()
   }
 
+  async allowToWithdrawEth(amount) {
+    this.setState({ allowing: true })
+    await this.props.dcAccountManager.approveAsync(this.state.account, amount)
+
+    try {
+      await this.props.dcGatewayManager.withdrawEthAsync(amount)
+
+      alert('Processing allowance')
+    } catch (err) {
+      if (err.message.indexOf('pending') > -1) {
+        alert('Pending withdraw exists, check Ethereum Gateway')
+      } else {
+        console.error(err)
+      }
+    }
+
+    this.setState({ allowing: false })
+
+    await this.updateUI()
+  }
+
   async allowToWithdrawCard(cardId) {
     this.setState({ allowing: true })
     await this.props.dcCardManager.approveAsync(this.state.account, cardId)
@@ -97,6 +129,16 @@ export default class DAppChainTokens extends React.Component {
       />
     )
 
+    const ethWallet = (
+      <Wallet
+        title="Ether"
+        balance={this.state.ethBalance}
+        action="Allow Withdraw"
+        handleOnClick={() => this.allowToWithdrawEth(this.state.ethBalance)}
+        disabled={this.state.sending}
+      />
+    )
+
     const cards = this.state.cardIds.map((cardId, idx) => {
       const cardDef = this.props.ethCardManager.getCardWithId(cardId)
 
@@ -112,6 +154,14 @@ export default class DAppChainTokens extends React.Component {
       )
     })
 
+    const viewEth = !this.state.mapping ? (
+      <p>Please sign your user first</p>
+    ) : this.state.ethBalance > 0 ? (
+      ethWallet
+    ) : (
+      <p>No Ether available</p>
+    )
+
     const viewTokens = !this.state.mapping ? (
       <p>Please sign your user first</p>
     ) : this.state.balance > 0 ? (
@@ -132,6 +182,7 @@ export default class DAppChainTokens extends React.Component {
       <div>
         <h2>DAppChain Available Token</h2>
         <div className="container">
+          <div>{viewEth}</div>
           <div>{viewTokens}</div>
           <div>{viewCards}</div>
         </div>

webclient/src/components/eth_tokens.js

@@ -6,7 +6,14 @@ export default class EthTokens extends React.Component {
   constructor(props) {
     super(props)
 
-    this.state = { account: '0x', mapping: null, sending: false, cardIds: [], balance: 0 }
+    this.state = {
+      account: '0x',
+      mapping: null,
+      sending: false,
+      cardIds: [],
+      balance: 0,
+      ethBalance: 0
+    }
   }
 
   async componentWillMount() {
@@ -18,22 +25,23 @@ export default class EthTokens extends React.Component {
     const balance = await this.props.ethTokenManager.getBalanceOfUserAsync(account)
     const cardsBalance = await this.props.ethCardManager.getBalanceOfUserAsync(account)
     const mapping = await this.props.dcAccountManager.getAddressMappingAsync(account)
+    const ethBalance = await this.props.ethAccountManager.getEthAccountBalance(account)
 
     let cardIds = []
 
     if (cardsBalance > 0) {
       cardIds = await this.props.ethCardManager.getTokensCardsOfUserAsync(account, cardsBalance)
     }
 
-    this.setState({ account, balance, mapping, cardIds })
+    this.setState({ account, balance, mapping, cardIds, ethBalance })
   }
 
   async sendToDAppChainToken(amount) {
     this.setState({ sending: true })
 
     try {
       await this.props.ethTokenManager.depositTokenOnGateway(this.state.account, amount)
-      alert('The amount will be available on DappChain, check DAppChain ')
+      alert('The amount will be available on DappChain, check DAppChain Account')
     } catch (err) {
       console.log('Transaction failed or denied by user')
     }
@@ -46,8 +54,23 @@ export default class EthTokens extends React.Component {
     this.setState({ sending: true })
     try {
       await this.props.ethCardManager.depositCardOnGateway(this.state.account, cardId)
-      alert('The Card will be available on DappChain, check DAppChain Cards')
+      alert('The Card will be available on DappChain, check DAppChain Account')
+    } catch (err) {
+      console.log('Transaction failed or denied by user')
+    }
+
+    this.setState({ sending: false })
+    await this.updateUI()
+  }
+
+  async sendToDAppChainEth(amount) {
+    this.setState({ sending: true })
+    try {
+      await this.props.ethGatewayManager.depositEthOnGateway(this.state.account, 1e16)
+      alert('The Eth will be available on DappChain, check DAppChain Account')
     } catch (err) {
+      console.log(err)
+
       console.log('Transaction failed or denied by user')
     }
 
@@ -56,21 +79,32 @@ export default class EthTokens extends React.Component {
   }
 
   render() {
-    const wallet = (
+    const tokenWallet = (
       <Wallet
+        title="Game Tokens (ERC20)"
         balance={this.state.balance}
         action="Send to DAppChain"
         handleOnClick={() => this.sendToDAppChainToken(this.state.balance)}
         disabled={this.state.sending}
       />
     )
 
+    const ethWallet = (
+      <Wallet
+        title="Ether"
+        balance={this.state.ethBalance}
+        action="Send to DAppChain"
+        handleOnClick={() => this.sendToDAppChainEth(this.state.ethBalance)}
+        disabled={this.state.sending}
+      />
+    )
+
     const cards = this.state.cardIds.map((cardId, idx) => {
       const cardDef = this.props.ethCardManager.getCardWithId(cardId)
 
       return (
         <Card
-          title={cardDef.title}
+          title={`${cardDef.title} (ERC721)`}
           description={cardDef.description}
           key={idx}
           action="Send to DAppChain"
@@ -80,10 +114,18 @@ export default class EthTokens extends React.Component {
       )
     })
 
+    const viewEth = !this.state.mapping ? (
+      <p>Please sign your user first</p>
+    ) : this.state.ethBalance > 0 ? (
+      ethWallet
+    ) : (
+      <p>No Ether available</p>
+    )
+
     const viewTokens = !this.state.mapping ? (
       <p>Please sign your user first</p>
     ) : this.state.balance > 0 ? (
-      wallet
+      tokenWallet
     ) : (
       <p>No tokens available</p>
     )
@@ -100,6 +142,7 @@ export default class EthTokens extends React.Component {
       <div>
         <h2>Ethereum Network Owned Tokens</h2>
         <div className="container">
+          <div>{viewEth}</div>
           <div>{viewTokens}</div>
           <div>{viewCards}</div>
         </div>

webclient/src/components/gateway_tokens.js

@@ -31,7 +31,7 @@ export default class GatewayTokens extends React.Component {
     if (data) {
       switch (data.tokenKind) {
         case 0:
-          throw Error('Not implemented yet')
+          balance = +data.value.toString(10)
           break
         case 1:
           balance = +data.value.toString(10)
@@ -68,6 +68,24 @@ export default class GatewayTokens extends React.Component {
     await this.updateUI()
   }
 
+  async withdrawFromGatewayEth(amount) {
+    this.setState({ withdrawing: true })
+    const data = await this.props.dcGatewayManager.withdrawalReceiptAsync(this.state.account)
+    const tokenOwner = data.tokenOwner.local.toString()
+    const signature = CryptoUtils.bytesToHexAddr(data.oracleSignature)
+
+    try {
+      await this.props.ethAccountManager.withdrawEthAsync(tokenOwner, amount, signature)
+
+      alert('Token withdraw with success, check Owned Tokens')
+    } catch (err) {
+      console.error(err)
+    }
+
+    this.setState({ withdrawing: true })
+    await this.updateUI()
+  }
+
   async withdrawFromGatewayCard(cardId) {
     this.setState({ withdrawing: true })
     const data = await this.props.dcGatewayManager.withdrawalReceiptAsync(this.state.account)
@@ -101,6 +119,16 @@ export default class GatewayTokens extends React.Component {
       />
     )
 
+    const ethWallet = (
+      <Wallet
+        title="Ether"
+        balance={this.state.balance}
+        action="Withdraw from gateway"
+        handleOnClick={() => this.withdrawFromGatewayEth(this.state.balance)}
+        disabled={this.state.sending}
+      />
+    )
+
     const cards = this.state.cardIds.map((cardId, idx) => {
       const cardDef = this.props.ethCardManager.getCardWithId(cardId)
 

webclient/src/components/wallet.js

@@ -4,9 +4,14 @@ export default class Wallet extends React.Component {
   render() {
     return (
       <div className="card" style={{ width: 286, height: 300, float: 'left', margin: 4 }}>
+        <h5 className="card-header">{this.props.title}</h5>
         <div className="card-body">
-          <h5 className="card-title">Game Tokens Wallet</h5>
-          <p className="card-text">{this.props.balance} Game Tokens</p>
+          <p className="card-text">
+            <strong>Qtd:</strong> {this.props.balance}
+          </p>
+          <p className="card-text">{this.props.description}</p>
+        </div>
+        <div className="card-footer">
           <button
             disabled={this.props.disabled}
             type="button"