From 07cd0cbd8fdcf2ad74ccf869a10988a9ef266d40 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Tue, 22 Aug 2017 17:17:13 -0400
Subject: [PATCH] added refresh timer to latest transactions; styled latest
 transactions grid

---
 .../latest-transactions.html                  |  8 +++++---
 .../latest-transactions.scss                  | 20 +++++++++++++++++++
 .../latest-transactions.ts                    | 18 ++++++++++++++---
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/app/src/components/latest-transactions/latest-transactions.html b/app/src/components/latest-transactions/latest-transactions.html
index 7fa05ff..55e5084 100644
--- a/app/src/components/latest-transactions/latest-transactions.html
+++ b/app/src/components/latest-transactions/latest-transactions.html
@@ -12,10 +12,12 @@
       </ion-row>
 
       <ion-row *ngFor="let tx of transactions">
-        <ion-col>
-          <a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>
+        <ion-col col-9>
+          <div class="ellipsis">
+            <a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>
+          </div>
         </ion-col>
-        <ion-col text-right>
+        <ion-col col-3 text-right>
           {{ currency.getConversion(tx.valueOut) }}
         </ion-col>
       </ion-row>
diff --git a/app/src/components/latest-transactions/latest-transactions.scss b/app/src/components/latest-transactions/latest-transactions.scss
index 570ea96..1b68322 100644
--- a/app/src/components/latest-transactions/latest-transactions.scss
+++ b/app/src/components/latest-transactions/latest-transactions.scss
@@ -1,3 +1,23 @@
 latest-transactions {
+  ion-grid {
+    // border: 2px solid green;
+    margin: 10px 0 20px;
 
+    ion-row {
+      border-top: 1px solid #ccc;
+    }
+
+    ion-row:nth-child(even) {
+      background-color: #f4f4f4;
+    }
+
+    ion-row:first-child {
+      background-color: white;
+      border-top: none;
+    }
+
+    ion-row:last-child {
+      background-color: white;
+    }
+  }
 }
diff --git a/app/src/components/latest-transactions/latest-transactions.ts b/app/src/components/latest-transactions/latest-transactions.ts
index 536d89a..5757e91 100644
--- a/app/src/components/latest-transactions/latest-transactions.ts
+++ b/app/src/components/latest-transactions/latest-transactions.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import { Http } from '@angular/http';
 import { NavController } from 'ionic-angular';
 import { ApiProvider } from '../../providers/api/api';
@@ -19,14 +19,26 @@ export class LatestTransactionsComponent {
   private loading: boolean = true;
   private transactions: Array<any> = [];
 
-  constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider) {
+  constructor(private http: Http, private navCtrl: NavController, private api: ApiProvider, public currency: CurrencyProvider, ngZone: NgZone) {
+    this.loadTransactions();
+    ngZone.runOutsideAngular(() => {
+      setInterval(
+        function (): void {
+          ngZone.run(function (): void {
+            this.loadTransactions.call(this);
+          }.bind(this));
+        }.bind(this),
+        1000 * 10
+      );
+    });
+  }
 
+  private loadTransactions(): void {
     let url: string = this.api.apiPrefix + 'txs';
 
     this.http.get(url).subscribe(
       (data) => {
         this.transactions = JSON.parse(data['_body']);
-        console.log('this.transactions', this.transactions);
         this.loading = false;
       },
       (err) => {