Colors top-up icon green or pending.

src/js/controllers/bitpayCard.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService) {
+angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService, timeService) {
 
   var self = this;
   var runningBalance;
@@ -163,6 +163,14 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
     runningBalance -= parseFloat(tx.amount);
   };
 
+  this.withinPastDay = function(tx) {
+    var result = false;
+    if (tx.timestamp) {
+      result = timeService.withinPastDay(tx.timestamp);
+    }
+    return result;
+  };
+
   this.openExternalLink = function(url) {
     var optIn = true;
     var title = null;

src/js/controllers/walletDetails.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, $ionicHistory, profileService, lodash, configService, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicScrollDelegate, $window, bwcError, gettextCatalog) {
+angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, $ionicHistory, profileService, lodash, configService, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicScrollDelegate, $window, bwcError, gettextCatalog, timeService) {
 
   var HISTORY_SHOW_LIMIT = 10;
   var currentTxHistoryPage = 0;
@@ -200,28 +200,18 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     return $scope.isFirstInGroup(index + 1);
   };
 
-  function createdDuringSameMonth(tx1, tx2) {
-    if (!tx1 || !tx2) return false;
-    var date1 = new Date(tx1.time * 1000);
-    var date2 = new Date(tx2.time * 1000);
-    return getMonthYear(date1) === getMonthYear(date2);
-  }
+  $scope.createdDuringSameMonth = function(curTx, prevTx) {
+    return timeService.withinSameMonth(curTx.time, prevTx.time);
+  };
 
   $scope.createdWithinPastDay = function(time) {
-    var now = new Date();
-    var date = new Date(time * 1000);
-    return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
+    return timeService.withinPastDay(time);
   };
 
   $scope.isDateInCurrentMonth = function(date) {
-    var now = new Date();
-    return getMonthYear(now) === getMonthYear(date);
+    return timeService.isDateInCurrentMonth(date);
   };
 
-  function getMonthYear(date) {
-    return date.getMonth() + date.getFullYear();
-  }
-
   $scope.isUnconfirmed = function(tx) {
     return !tx.confirmations || tx.confirmations === 0;
   };

src/js/directives/svg.js

@@ -10,7 +10,7 @@ angular.module('copayApp.directives')
       link: function(scope, element, attrs) {
         var imgId = attrs.id;
         var imgClass = attrs.class;
-        var imgUrl = attrs.src;
+        var imgUrl = attrs.src || attrs.ngSrc;
         var svg;
 
         // Load svg content

src/js/services/bitpayCardService.js

@@ -65,6 +65,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($log,
         n.lastFourDigits = x.lastFourDigits;
         n.token = x.token;
         n.currency = x.currency;
+        n.country = x.country;
         cards.push(n);
       });
 

src/js/services/timeService.js

@@ -0,0 +1,30 @@
+'use strict';
+
+angular.module('copayApp.services').factory('timeService', function() {
+  var root = {};
+
+  root.withinSameMonth = function(time1, time2) {
+    if (!time1 || !time2) return false;
+    var date1 = new Date(time1 * 1000);
+    var date2 = new Date(time2 * 1000);
+    return getMonthYear(date1) === getMonthYear(date2);
+  }
+
+  root.withinPastDay = function(time) {
+    var now = new Date();
+    var date = new Date(time * 1000);
+    return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
+  };
+
+  root.isDateInCurrentMonth = function(date) {
+    var now = new Date();
+    return getMonthYear(now) === getMonthYear(date);
+  };
+
+  root.getMonthYear = function(date) {
+    return date.getMonth() + date.getFullYear();
+  }
+
+  return root;
+
+});

src/sass/views/bitpayCard.scss

@@ -70,7 +70,65 @@
     }
   }
   .item {
-    border-color: $item-border-color;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    padding: 0 0 0 1rem;
+    margin: 0;
+    border: 0;
+
+    &.send .svg #-Transaction-icons {
+    }
+    &.receive .svg #-Transaction-icons {
+      stroke: #09C286;
+    }
+    &.pending .svg #-Transaction-icons {
+      stroke: $v-bitcoin-orange;
+    }
+  }
+  .tx-icon {
+    float: left;
+    margin-right: 25px;
+  }
+  .tx-content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    padding: 1rem 0;
+    padding-right: 1rem;
+    border-bottom: 1px solid rgb(245, 245, 245);
+    overflow: hidden;
+  }
+  .tx-title {
+    flex-grow: 1;
+    color: $v-dark-gray;
+    overflow: hidden;
+  }
+  .tx-message {
+    margin-right: 1rem;
+  }
+  .tx-location {
+    margin-right: 1rem;
+    font-size: 12.5px;
+    color: $v-light-gray;
+  }
+  .tx-amount {
+    font-size: 16px;
+    white-space: nowrap;
+    &--received {
+      color: #09C286;
+    }
+    &--sent {
+      color: $v-dark-gray;
+    }
+    &--pending {
+      color: $v-bitcoin-orange;
+    }
+  }
+  .tx-time {
+    white-space: nowrap;
+    color: $v-light-gray;
+    font-size: 12.5px;
   }
   .info {
     .badge {