From d5a1a0393c4081955742c2640e58f77450d6c4f3 Mon Sep 17 00:00:00 2001
From: Jacky <jacky@Jackyde-MacBook-Pro.local>
Date: Wed, 25 Jul 2018 08:10:10 +0800
Subject: [PATCH 1/3] fix bet eth field

---
 dapp/src/components/Arena/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/dapp/src/components/Arena/index.js b/dapp/src/components/Arena/index.js
index 7157b4a..322296a 100644
--- a/dapp/src/components/Arena/index.js
+++ b/dapp/src/components/Arena/index.js
@@ -47,6 +47,7 @@ export default class extends React.Component {
 
   // 賭金輸入
   handleBetETHChange = e => {
+    console.log('eee', e)
     let betEth = e.target.value;
     if (betEth > 1) {
       alert('bet eth should not bigger than 1');
@@ -209,7 +210,7 @@ export default class extends React.Component {
       'QmWzdBNu1ikXvcXo7C1WyUk3FxWRnDo5gt2WKm14Rcs1Pc',
       'Qmf8MPrUF41e5N5rtXVEGZg5AC7m8NLsjqf9ad9fvwVSrw',
     ]
-    console.log('battleResult', battleResult)
+
     if (!selectedCard) {
       return null;
     }
@@ -250,7 +251,7 @@ export default class extends React.Component {
 
                 <div className={cx('left-item')}>
                   <span className={cx('bet_eth_field')}>
-                    <input type="number" name="betEth" value={betEth} onChange={this.handleBetETHChange} />
+                    <input type="number" name="betEth" value={betEth} max="1" step="0.01" min="0.01" onChange={this.handleBetETHChange} />
                   </span>
                   <a onClick={this.handlePlaceBet}>
                     <img className={cx('place_bet_button')} src={playgameImg} />

From 432d6fe75e9480804ad59bbcd2c78f32fdf05efb Mon Sep 17 00:00:00 2001
From: Jacky <jacky@Jackyde-MacBook-Pro.local>
Date: Wed, 25 Jul 2018 08:14:32 +0800
Subject: [PATCH 2/3] fix Arena page loading spinner

---
 dapp/src/components/App.js         |  8 +++++---
 dapp/src/components/Arena/index.js | 12 +++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/dapp/src/components/App.js b/dapp/src/components/App.js
index 089b2bf..310803c 100644
--- a/dapp/src/components/App.js
+++ b/dapp/src/components/App.js
@@ -100,10 +100,11 @@ class App extends Component {
 
   // 開局, 前往鬥技場
   handleGoArena = async e => {
+    this.setState({
+      isLoadingCoinLoading: true,
+    });
+
     const { network, account, } = this.props.metaMask;
-    console.log('network', network)
-    console.log('account', account)
-    
     const result = await doGetOwnedTokens(network, account);
     const cardsPromises = result.map(cur => doGetTokenProperty(network, cur.c));
     const detailResult = await Promise.all(cardsPromises);
@@ -117,6 +118,7 @@ class App extends Component {
     });
 
     this.setState({
+      isLoadingCoinLoading: false,
       isShowArena: true,
       userOwnCards,
     });
diff --git a/dapp/src/components/Arena/index.js b/dapp/src/components/Arena/index.js
index 322296a..26a5743 100644
--- a/dapp/src/components/Arena/index.js
+++ b/dapp/src/components/Arena/index.js
@@ -4,6 +4,7 @@ import style from './Arena.css';
 import { TweenMax, } from "gsap/TweenMax";
 import BattleCard from '../BattleCard';
 import Loading from '../Loading';
+import LoadingCoin from '../LoadingCoin';
 import gameplaytitleImg from '../../images/gameplaytitle.png';
 import playgameImg from '../../images/playgame.png';
 import historyImg from '../../images/history.png';
@@ -225,13 +226,6 @@ export default class extends React.Component {
           <img src={gameplaytitleImg} />
         </div>
 
-        {
-          isLoading &&
-          <div className={cx('loading-spinner')}>
-            <div style={{ display: 'inline-block', width: '100px' }}><Loading /></div>
-          </div>
-        }
-
         { /* 開局 */}
         {
           !isLoading && !isShowHistory && !isShowResult &&
@@ -377,6 +371,10 @@ export default class extends React.Component {
 
           </div>
         }
+        
+        {
+          isLoading && <LoadingCoin />
+        }
       </div>
     )
 

From 27aa0e56f94534a28f7d1abae760de187fa467db Mon Sep 17 00:00:00 2001
From: Jacky <jacky@Jackyde-MacBook-Pro.local>
Date: Wed, 25 Jul 2018 08:29:39 +0800
Subject: [PATCH 3/3] add error handler in metamask transaction

---
 dapp/src/components/Arena/index.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/dapp/src/components/Arena/index.js b/dapp/src/components/Arena/index.js
index 26a5743..3fc2097 100644
--- a/dapp/src/components/Arena/index.js
+++ b/dapp/src/components/Arena/index.js
@@ -48,7 +48,6 @@ export default class extends React.Component {
 
   // 賭金輸入
   handleBetETHChange = e => {
-    console.log('eee', e)
     let betEth = e.target.value;
     if (betEth > 1) {
       alert('bet eth should not bigger than 1');
@@ -73,7 +72,6 @@ export default class extends React.Component {
     const { betEth, selectedCardIdx, } = this.state;
     const { account, network } = metaMask;
 
-
     if (betEth > 1 || betEth < 0.01) {
       alert('bet eth should not be bigger than 1 and less than 0.01');
       return;
@@ -93,6 +91,14 @@ export default class extends React.Component {
     };
     
     web3.eth.sendTransaction(tx, (err, response) => {
+      if(err) {
+        alert('Sorry, transaction failed');
+        this.setState({
+          isLoading: false,
+        });
+        return;
+      }
+
       let t = setInterval(async () => {
         const result = await axios.get(`https://api-ropsten.etherscan.io/api?module=transaction&action=gettxreceiptstatus&txhash=${response}&apikey=RAADZVN65BQA7G839DFN3VHWCZBQMRBR11`)
         if (result.data.status === "1") {
@@ -371,7 +377,7 @@ export default class extends React.Component {
 
           </div>
         }
-        
+
         {
           isLoading && <LoadingCoin />
         }