Show pending transactions

- Send compoment brodcasts an event with the pending transaction
- Transactions component keeps list of pending transactions and removes those once it receives a transaction with the same id from the server

src/app/components/send/send.js

@@ -10,13 +10,14 @@ app.component('send', {
     passphrase: '<',
   },
   controller: class send {
-    constructor($scope, $peers, lsk, success, error, $mdDialog, $q) {
+    constructor($scope, $peers, lsk, success, error, $mdDialog, $q, $rootScope) {
       this.$scope = $scope;
       this.$peers = $peers;
       this.success = success;
       this.error = error;
       this.$mdDialog = $mdDialog;
       this.$q = $q;
+      this.$rootScope = $rootScope;
 
       this.recipient = {
         regexp: ADDRESS_VALID_RE,
@@ -80,10 +81,21 @@ app.component('send', {
             secondPassphrase,
           )
           .then(
-            () => this.success.dialog({ text: `${this.amount.value} sent to ${this.recipient.value}` })
+            (data) => {
+              const transaction = {
+                id: data.transactionId,
+                senderPublicKey: this.account.publicKey,
+                senderId: this.account.address,
+                recipientId: this.recipient.value,
+                amount: this.amount.raw,
+                fee: 10000000,
+              };
+              this.$rootScope.$broadcast('transaction-sent', transaction);
+              return this.success.dialog({ text: `${this.amount.value} sent to ${this.recipient.value}` })
                 .then(() => {
                   this.reset();
-                }),
+                });
+            },
             (res) => {
               this.error.dialog({ text: res && res.message ? res.message : 'An error occurred while sending the transaction.' });
             },

src/app/components/transactions/transactions.js

@@ -8,14 +8,21 @@ app.component('transactions', {
     account: '=',
   },
   controller: class transactions {
-    constructor($scope, $timeout, $q, $peers) {
+    constructor($scope, $timeout, $q, $peers, $rootScope) {
       this.$scope = $scope;
       this.$timeout = $timeout;
       this.$q = $q;
       this.$peers = $peers;
+      this.$rootScope = $rootScope;
 
       this.loaded = false;
       this.transactions = [];
+      this.pendingTransactions = [];
+
+      this.$rootScope.$on('transaction-sent', (event, transaction) => {
+        this.pendingTransactions.push(transaction);
+        this.transactions = this.pendingTransactions.concat(this.transactions);
+      });
 
       this.$scope.$watch('account', () => {
         this.reset();
@@ -70,7 +77,9 @@ app.component('transactions', {
     }
 
     _processTransactionsResponse(response) {
-      this.transactions = response.transactions;
+      this.pendingTransactions = this.pendingTransactions.filter(
+        pt => response.transactions.filter(t => t.id === pt.id).length === 0);
+      this.transactions = this.pendingTransactions.concat(response.transactions);
       this.total = response.count;
 
       if (this.total > this.transactions.length) {

src/app/components/transactions/transactions.pug

@@ -20,7 +20,8 @@ md-card.offline-hide
           tbody(md-body)
             tr(md-row, ng-repeat="transaction in $ctrl.transactions track by transaction.id | orderBy:'-timestamp'")
               td(md-cell)
-                timestamp(data='transaction.timestamp')
+                timestamp(data='transaction.timestamp', ng-show='transaction.confirmations')
+                span(ng-bind='transaction.confirmations ? "" : "PENDING"')
               td(md-cell)
                 span(ng-bind='transaction.id')
                   md-tooltip(md-direction='top', md-delay='350') {{ transaction.confirmations }} confirmations

src/test/components/send/send.spec.js

@@ -152,7 +152,7 @@ describe('send component controller', () => {
       controller.go();
 
       const spy = sinon.spy(controller.success, 'dialog');
-      deffered.resolve();
+      deffered.resolve({});
       $scope.$apply();
       expect(spy).to.have.been.calledWith({
         text: `${controller.amount.value} sent to ${controller.recipient.value}`,

src/test/components/transactions/transactions.spec.js

@@ -99,7 +99,7 @@ describe('transactions component controller', () => {
         count: 1,
       };
       controller._processTransactionsResponse(response);
-      expect(controller.transactions).to.equal(response.transactions);
+      expect(controller.transactions).to.deep.equal(response.transactions);
     });
 
     it('sets this.more to how many more other transactions are there on server', () => {