trade with submit and verify process

Author: ripplefox

js/controller/trade.js

@@ -237,18 +237,32 @@ myApp.controller("TradeCtrl", [ '$scope', '$rootScope', 'XrpApi', 'XrpOrderbook'
       $scope.refreshOffer();
       $scope.refreshBook();
     });
-    $scope.$on("txSuccess", function(e, tx) {
-      console.debug('txSuccess event', tx);
-      $scope.refreshOffer();
-      $scope.refreshBook();
-    });
 
     $scope.buying = false;
-    $scope.buy_ok;
     $scope.buy_fail;
     $scope.selling = false;
-    $scope.sell_ok;
     $scope.sell_fail;
+    
+    $scope.buy_hash = "";
+    $scope.buy_state = "";
+    $scope.sell_hash = "";
+    $scope.sell_state = "";
+    $scope.$on("txSuccess", function(e, tx) {
+      console.debug('txSuccess event', tx);
+      if (tx.hash == $scope.buy_hash) $scope.buy_state = "success";
+      if (tx.hash == $scope.sell_hash) $scope.sell_state = "success";
+      $scope.refreshOffer();
+      $scope.refreshBook();
+      $scope.$apply();
+    });
+    $scope.$on("txFail", function(e, tx) {
+      console.debug('txFail event', tx);
+      if (tx.hash == $scope.buy_hash) $scope.buy_state = "fail";
+      if (tx.hash == $scope.sell_hash) $scope.sell_state = "fail";
+      $scope.refreshOffer();
+      $scope.refreshBook();
+      $scope.$apply();
+    });
 
     $scope.buy_price;
     $scope.buy_amount;
@@ -308,7 +322,8 @@ myApp.controller("TradeCtrl", [ '$scope', '$rootScope', 'XrpApi', 'XrpOrderbook'
     $scope.offer = function(type) {
       $scope['fatfinger' + type] = false; // hide the fatfinger warning
       $scope[type + 'ing'] = true;
-      $scope[type + '_ok'] = false;
+      $scope[type + '_hash'] = "";
+      $scope[type + '_state'] = "";
       $scope[type + '_fail'] = "";
       var option = {
         type : type,
@@ -324,9 +339,10 @@ myApp.controller("TradeCtrl", [ '$scope', '$rootScope', 'XrpApi', 'XrpOrderbook'
         option.amount = $scope.sell_amount;
         option.price  = $scope.sell_price;
       }
-      XrpApi.offer(option).then(result => {
+      XrpApi.offer(option).then(hash => {
         $scope[type + 'ing'] = false;
-        $scope[type + '_ok'] = true;
+        $scope[type + '_hash'] = hash;
+        $scope[type + '_state'] = "submitted";
         $scope[type + '_amount'] = "";
         $scope[type + '_price'] = "";
         $scope[type + '_volume'] = "";

js/ripple/api.factory.js

@@ -413,14 +413,16 @@ myApp.factory('XrpApi', ['$rootScope', 'AuthenticationFactory', 'ServerManager',
         order.memos = [{data: _client, type: 'client', format: 'text'}];
         return new Promise(async (resolve, reject) => {
           try {
+            let ledger = await _remote.getLedger();
             let prepared = await _remote.prepareOrder(this.address, order);
-            const {signedTransaction} = AuthenticationFactory.sign(this, prepared.txJSON);
+            const {signedTransaction, id} = AuthenticationFactory.sign(this, prepared.txJSON);
             let result = await _remote.submit(signedTransaction);
-            if ("tesSUCCESS" !== result.engine_result) {
+            this.verifyTx(id, ledger.ledgerVersion, prepared.instructions.maxLedgerVersion);
+            if ("tesSUCCESS" !== result.engine_result && "terQUEUED" !== result.engine_result) {
               console.warn(result);
               return reject(new Error(result.engine_result_message || result.engine_result));
             }
-            resolve(result);
+            resolve(id);
           } catch (err) {
             console.error('offer', err);
             reject(err);

pages/trade.html

@@ -137,7 +137,8 @@ <h3 class="manager_title">{{'buy' | translate}} {{base_code}}</h3>
 							<div class="overview">
 								{{'you_have' | translate}} {{getBalance(counter_code, counter_issuer)}} {{counter_code}}
 							</div>
-							<div class="s-alert s-alert--success" ng-show="buy_ok" translate="offer_success">Offer successfully created</div>
+							<div class="s-alert s-alert--info" ng-show="buy_state=='submitted'" translate="submitted">Transaction submitted.</div>
+							<div class="s-alert s-alert--success" ng-show="buy_state=='success'" translate="offer_success">Offer successfully created</div>
 							<div class="s-alert s-alert--error" ng-show="buy_fail">{{buy_fail}}</div>
 							<button class="btn btn-success" ng-click="offerWithCheck('buy')" ng-disabled="buying">{{'buy' | translate}} {{base_code}}</button>
 					</div>
@@ -176,7 +177,8 @@ <h3 class="manager_title">{{'sell' | translate}} {{base_code}}</h3>
 							<div class="overview">
 								{{'you_have' | translate}} {{getBalance(base_code, base_issuer)}} {{base_code}}
 							</div>
-							<div class="s-alert s-alert--success" ng-show="sell_ok" translate="offer_success">Offer successfully created</div>
+							<div class="s-alert s-alert--info" ng-show="sell_state=='submitted'" translate="submitted">Transaction submitted</div>
+							<div class="s-alert s-alert--success" ng-show="sell_state=='success'" translate="offer_success">Offer successfully created</div>
 							<div class="s-alert s-alert--error" ng-show="sell_fail">{{sell_fail}}</div>
 							<button class="btn btn-success" ng-click="offerWithCheck('sell')" ng-disabled="selling">{{'sell' | translate}} {{base_code}}</button>
 					</div>