error message when failed to broadcast tx

src/js/actions/exchangeFormActions.js

@@ -158,6 +158,8 @@ export function doApprovalTransaction(id, ethereum, tx, callback) {
       ethereum.sendRawTransaction(tx, (hash) => {
         callback(hash)
         resolve(hash)
+      }, (error) => {
+        reject(error)
       })
     }),
     meta: id,
@@ -199,6 +201,8 @@ export function doTransaction(id, ethereum, tx, callback) {
       ethereum.sendRawTransaction(tx, (hash) => {
         callback(hash, tx)
         resolve(hash)
+      }, (error) => {
+        reject(error)
       })
     }),
     meta: id,

src/js/actions/joinPaymentFormActions.js

@@ -5,6 +5,8 @@ export function doTransaction(ethereum, tx, callback) {
       ethereum.sendRawTransaction(tx, (hash) => {
         callback(hash)
         resolve(hash)
+      }, (error) => {
+        reject(hash)
       })
     })
   }

src/js/components/ExchangeForm.js

@@ -16,6 +16,7 @@ import constants from "../services/constants"
 import ReactTooltip from 'react-tooltip'
 
 import { specifyGasLimit, specifyGasPrice, resetStep, selectAdvance, deselectAdvance } from "../actions/exchangeFormActions"
+import { errorName } from "../utils/converter"
 
 const quickExchangeModalID = "quick-exchange-modal"
 
@@ -36,6 +37,7 @@ const quickExchangeModalID = "quick-exchange-modal"
     tx: store.txs[exchangeForm.txHash],
     isCrossSend: sourceToken != destToken,
     advanced: exchangeForm.advanced,
+    bcError: exchangeForm.bcError,
   }
 })
 export default class ExchangeForm extends React.Component {
@@ -108,6 +110,19 @@ export default class ExchangeForm extends React.Component {
       var tx = this.props.tx
       if (this.props.broadcasting) {
         txStatus = <h3>Broadcasting your transaction...</h3>
+      } else if (this.props.bcError != "") {
+        txStatus = <div>
+          <h3>Broadcasting your transaction failed.</h3>
+          <h3>
+            Error: {errorName(this.props.bcError.message)}
+            <span data-tip data-for='failure-tooltip'>
+              <i class="k-icon k-icon-question"></i>
+            </span>
+          </h3>
+          <ReactTooltip id='failure-tooltip' effect="solid" place="right" offset={{'left': -15}} className="k-tooltip">
+            <span>{this.props.bcError.message}</span>
+          </ReactTooltip>
+        </div>
       } else {
         if (tx.status == "pending") {
           txStatus = <div>
@@ -259,7 +274,7 @@ export default class ExchangeForm extends React.Component {
               </div>
               <div class="page-item item-4">
                 {txStatus}
-                { tx && tx.status == "failed" ?
+                { (tx && tx.status == "failed") || this.props.bcError != "" ?
                   <span class="verify">
                     <i class="k-icon k-icon-failed" ></i>
                   </span> : ""

src/js/components/Payment/JoinPaymentForm.js

@@ -86,7 +86,6 @@ export default class JoinPaymentForm extends React.Component {
       var nonce = verifyNonce(this.props.nonce)
       var name = this.props.name
       var dispatch = this.props.dispatch
-      console.log(this.props)
       deployKyberWallet(
         ethereum, account, nonce, gas,
         gasPrice, account.key, password, (ex) => {

src/js/reducers/exchangeFormReducer.js

@@ -138,6 +138,11 @@ const exchangeForm = (state=initState, action) => {
       newState[id].txHash = action.payload
       return newState
     }
+    case "EXCHANGE_FORM_TX_BROADCAST_REJECTED": {
+      newState[id].broadcasting = false
+      newState[id].bcError = action.payload
+      return newState
+    }
     case "EXCHANGE_FORM_SUGGEST_RATE": {
       var minRate = action.payload.rate
       var minAmount, block, balance, rate

src/js/reducers/joinPaymentFormReducer.js

@@ -3,6 +3,7 @@ const initState = {
   gas: 2000000,
   gasPrice: 20000000000,
   name: "",
+  bcError: "",
   errors: {
     selectedAccountError: "",
     passwordError: "",
@@ -17,6 +18,9 @@ const joinPaymentForm = (state=initState, action) => {
         errors: {...state.errors, selectedAccountError: ""}
       }
     }
+    case "JOIN_PAYMENT_FORM_TX_BROADCAST_REJECTED": {
+      return {...state, bcError: action.payload}
+    }
     case "JOIN_PAYMENT_GAS_PRICE_SPECIFIED": {
       return {...state, gasPrice: action.payload}
     }

src/js/services/ethereum.js

@@ -207,11 +207,11 @@ export default class EthereumService {
   }
 
   // tx should be ethereumjs-tx object
-  sendRawTransaction(tx, callback) {
+  sendRawTransaction(tx, callback, failCallback) {
     return this.rpc.eth.sendRawTransaction(
       ethUtil.bufferToHex(tx.serialize()), (error, hash) => {
         if (error != null) {
-          console.log(error)
+          failCallback(error)
         } else {
           callback(hash)
         }

src/js/utils/converter.js

@@ -123,3 +123,12 @@ export function toEther(number) {
     return bigNumber.dividedBy(1000000000000000000).toString(10)
   }
 }
+
+export function errorName(message) {
+  var parts = message.split(". ")
+  if (parts.length > 0) {
+    return parts[0]
+  } else {
+    return message
+  }
+}