enh(tx): Add TX infinite scroll

fix(tx): Fix TX comment layout
fix(http): Fix error message (url was not shown)

scss/ionic.app.scss

@@ -1296,7 +1296,6 @@ html, body {
   padding-top: 8px;
   margin: 0 !important;
 
-
   .badge-energized {
     background-color: rgba(255, 201, 0, 0.3);
     color: #888 !important;
@@ -1309,18 +1308,6 @@ html, body {
     background-color: white; // Fix issue #847
   }
 
-  .vertical-center{
-    position: absolute;
-    top: 30%;
-    width: 40%;
-  }
-
-  p.comment{
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
   p.text-wrap {
     white-space: normal;
     a {
@@ -1328,17 +1315,38 @@ html, body {
     }
   }
 
+  p.comment {
+    margin: 8px 0;
+    padding-left: 16px; // For icon
+
+    i.ion-ios-chatbubble-outline {
+      margin-left: -16px;
+      position: absolute;
+    }
+  }
+
   .col-pubkey {
     max-width: 80%;
 
-    .pubkeys {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    a {
       display: block;
-      white-space: nowrap;
+      overflow: hidden;
       text-overflow: ellipsis;
+    }
+
+    .pubkeys {
+      display: block;
       max-height: 130px;
       overflow: hidden;
     }
   }
+
+  .col-comment {
+    white-space: normal;
+  }
 }
 
 

www/js/controllers/wallet-controllers.js

@@ -774,6 +774,10 @@ function WalletTxController($scope, $ionicPopover, $state, $timeout, $location,
   // Update view
   $scope.updateView = function() {
     if (!$scope.formData || $scope.loading) return;
+
+    var fetchMoreMinTime = csHttp.date.now() - csSettings.data.walletHistoryTimeSecond * 5;
+    $scope.formData.tx.canFetchMore = $scope.formData.tx.fromTime > 0 && $scope.formData.tx.fromTime > fetchMoreMinTime;
+
     $scope.$broadcast('$$rebind::balance'); // force rebind balance
     $scope.$broadcast('$$rebind::rebind'); // force rebind
     $scope.motion.show({selector: '.view-wallet-tx .item', ink: false});
@@ -813,7 +817,7 @@ function WalletTxController($scope, $ionicPopover, $state, $timeout, $location,
   };
 
   $scope.showQRCode = function(timeout) {
-    if (!wallet || !$scope.qrcodeId) return; // Skip
+    if (!wallet || !$scope.qrcodeId) return; // Skip
 
     // Get the DIV element
     var element = angular.element(document.querySelector('#' + $scope.qrcodeId + ' .content'));
@@ -903,26 +907,37 @@ function WalletTxController($scope, $ionicPopover, $state, $timeout, $location,
     return $scope.goState('app.view_wallet_tx_errors_by_id', {id: wallet.id});
   };
 
+
+
   $scope.showMoreTx = function(fromTime) {
+    if ($scope.formData.tx.loadingMore) return; // Skip
+
+    $scope.formData.tx.loadingMore = true;
 
     fromTime = fromTime ||
       ($scope.formData.tx.fromTime - csSettings.data.walletHistoryTimeSecond) ||
       (csHttp.date.now() - 2 * csSettings.data.walletHistoryTimeSecond);
 
-    UIUtils.loading.show();
+    console.info('[wallet-tx] Fetching more TX, since: ' + fromTime);
+
     return wallet.refreshData({tx: {enable: true, fromTime: fromTime}})
       .then(function() {
         $scope.updateView();
-        UIUtils.loading.hide();
+        $scope.formData.tx.loadingMore = false;
+        $scope.$broadcast('scroll.infiniteScrollComplete');
       })
       .catch(function(err) {
         // If http rest limitation: wait then retry
         if (err.ucode == BMA.errorCodes.HTTP_LIMITATION) {
           $timeout(function() {
-            return $scope.showMoreTx(fromTime);
+            return $scope.showMoreTx(fromTime); // Loop
           }, 2000);
         }
         else {
+          $scope.formData.tx.loadingMore = false;
+          $scope.formData.tx.canFetchMore = false;
+          $scope.$broadcast('scroll.infiniteScrollComplete');
+
           UIUtils.onError('ERROR.REFRESH_WALLET_DATA')(err);
         }
       });

www/js/services/http-services.js

@@ -39,7 +39,7 @@ angular.module('cesium.http.services', ['cesium.cache.services'])
 
   function processError(reject, data, url, status, config, startTime) {
     // Detected timeout error
-    var urlWithParenthesis = + (url ? ' ('+url+')' : '');
+    var urlWithParenthesis = url ? ' ('+url+')' : '';
     var reachTimeout = status === -1 && (config && config.timeout > 0 && startTime > 0) && (Date.now() - startTime) >= config.timeout;
     if (reachTimeout) {
       console.error('[http] Request timeout on [{0}] after waiting {1}ms'.format(url, config.timeout));

www/templates/wallet/item_tx.html

@@ -4,14 +4,16 @@
 <i class="avatar" ng-if="::tx.avatar" style="background-image: url({{::tx.avatar.src}})"></i>
 
 <div class="row no-padding">
+
+  <!-- TX issuer or recipient (uid, pubkey or name) -->
   <div class="col col-pubkey no-padding">
-    <a class="" ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="::tx.uid">
+    <a ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="::tx.uid">
       {{::tx.name||tx.uid}}
     </a>
-    <a class="gray" ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="::!tx.uid && tx.pubkey">
+    <a class="gray" ui-sref="app.wot_identity({pubkey:tx.pubkey})" ng-if="::!tx.uid && tx.pubkey">
       <i class="ion-key gray"></i>
       {{::tx.pubkey | formatPubkey}}
-      <span ng-if="::tx.name"> - {{::tx.name | truncText:40}}</span>
+      <span ng-if="::tx.name"> - {{::tx.name}}</span>
     </a>
     <p ng-if="::tx.pubkeys" class="pubkeys">
       <a class="gray" ng-repeat="pubkey in ::tx.pubkeys.slice(0, 4)"
@@ -20,11 +22,10 @@
       </a>
       <span ng-if="::tx.pubkeys.length &gt; 4">...</span>
     </p>
-    <p class="dark visible-xs comment text-italic"
+    <p class="dark visible-xs visible-sm comment text-italic text-wrap"
        ng-if="::tx.comment"
        title="{{::tx.comment}}">
-      <i class="ion-ios-chatbubble-outline"></i>
-      {{::tx.comment}}<br/>
+      <i class="ion-ios-chatbubble-outline"></i> {{::tx.comment}}
     </p>
     <h4>
       <a ng-if="::!pending" class="gray underline" ui-sref="app.view_block({number: tx.block_number})">
@@ -35,11 +36,15 @@
       </span>
     </h4>
   </div>
-  <div class="col col-50 col-comment no-padding padding-left hidden-xs" ng-if="::tx.comment">
-    <p class="vertical-center gray text-italic "
+
+  <!-- TX comment -->
+  <div class="col col-40 col-comment no-padding padding-left padding-right hidden-xs hidden-sm" ng-if="::tx.comment">
+    <p class="gray text-italic text-wrap"
        data-toggle="tooltip"
        title="{{::tx.comment}}">{{::tx.comment}}</p>
   </div>
+
+  <!-- TX amount -->
   <div class="col col-10 no-padding">
 
     <!-- not locked TX -->

www/templates/wallet/view_wallet_tx.html

@@ -91,11 +91,11 @@
               ng-click="showTransferModal()">
         {{:locale:'COMMON.BTN_SEND_MONEY' | translate}}
       </button>
-  </div>
+    </div>
 
     <div class="row no-padding">
 
-      <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>
+      <div class="col col-10 hidden-xs hidden-sm hidden-md">&nbsp;</div>
 
       <div class="col">
 
@@ -120,7 +120,7 @@
             </span>
 
             <div class="item item-pending item-tx item-icon-left"
-                 ng-repeat="tx in formData.tx.pendings"
+                 ng-repeat="tx in formData.tx.pendings track by tx.hash"
                  ng-init="pending=true;"
                  ng-include="::'templates/wallet/item_tx.html'">
             </div>
@@ -135,7 +135,7 @@
             </span>
 
             <div class="item item-pending item-tx item-icon-left"
-                 ng-repeat="tx in formData.tx.validating"
+                 ng-repeat="tx in formData.tx.validating track by tx.hash"
                  ng-init="validating=true;"
                  ng-include="::!tx.isUD ? 'templates/wallet/item_tx.html' : 'templates/wallet/item_ud.html'">
             </div>
@@ -155,11 +155,12 @@
           <!-- Fix #780: do NOT use hash ash id
           <div ng-repeat="tx in formData.tx.history track by tx.hash"
           -->
-          <div ng-repeat="tx in formData.tx.history"
+          <div ng-repeat="tx in formData.tx.history track by tx.hash"
              class="item item-tx item-icon-left"
              ng-include="::!tx.isUD ? 'templates/wallet/item_tx.html' : 'templates/wallet/item_ud.html'">
           </div>
-          <div class="item item-text-wrap text-center" ng-if="formData.tx.fromTime > 0">
+
+          <div class="item item-text-wrap text-center" ng-if="!formData.tx.canFetchMore && formData.tx.fromTime > 0">
             <p>
               <a ng-click="showMoreTx()">{{:locale:'ACCOUNT.SHOW_MORE_TX'|translate}}</a>
               <span class="gray" translate="ACCOUNT.TX_FROM_DATE" translate-values="{fromTime: formData.tx.fromTime}"></span>
@@ -167,13 +168,19 @@
               <a ng-click="showMoreTx(-1)" translate>ACCOUNT.SHOW_ALL_TX</a>
             </p>
           </div>
+
         </div>
-      </div>
 
-      <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>
+        <ion-infinite-scroll
+          ng-if="formData.tx.canFetchMore"
+          spinner="android"
+          on-infinite="showMoreTx()"
+          distance="20%">
+        </ion-infinite-scroll>
 
-    </div>
+      </div>
 
+      <div class="col col-10 hidden-xs hidden-sm hidden-md">&nbsp;</div>
 
     </div>
   </ion-content>

www/templates/wallet/view_wallet_tx_error.html

@@ -26,7 +26,7 @@
     </div>
 
     <div class="row no-padding">
-      <div class="col col-20 hidden-xs hidden-sm">&nbsp;
+      <div class="col col-10 hidden-xs hidden-sm hidden-md">&nbsp;
       </div>
 
       <div class="col list {{::motion.ionListClass}}">
@@ -78,7 +78,7 @@
 
       </div>
 
-      <div class="col col-20 hidden-xs hidden-sm">&nbsp;
+      <div class="col col-10 hidden-xs hidden-sm hidden-md">&nbsp;
       </div>
     </div>
   </ion-content>