From 7d2b27be7d6b5e81c9d780607d75f50eee845eab Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Tue, 15 Aug 2017 16:36:11 -0400
Subject: [PATCH 1/3] added toggle to searchbar; made text selectable

---
 app/ionic.config.json                        | 3 ++-
 app/package.json                             | 2 +-
 app/src/app/app.scss                         | 4 ++++
 app/src/components/head-nav/head-nav.html    | 4 ++--
 app/src/components/head-nav/head-nav.ts      | 6 ++++++
 app/src/pages/block-detail/block-detail.html | 2 +-
 app/src/providers/api/api.ts                 | 2 +-
 7 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/ionic.config.json b/app/ionic.config.json
index b8ac8d6..1c03d6d 100644
--- a/app/ionic.config.json
+++ b/app/ionic.config.json
@@ -1,5 +1,6 @@
 {
   "name": "insight-ui",
   "app_id": "",
-  "type": "ionic-angular"
+  "type": "ionic-angular",
+  "integrations": {}
 }
diff --git a/app/package.json b/app/package.json
index 1701978..88b33c8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -43,7 +43,7 @@
     "@types/jasmine": "2.5.41",
     "@types/node": "7.0.4",
     "codecov": "2.2.0",
-    "ionic": "3.7.0",
+    "ionic": "3.8.1",
     "jasmine-core": "2.5.2",
     "jasmine-spec-reporter": "3.2.0",
     "karma": "1.4.1",
diff --git a/app/src/app/app.scss b/app/src/app/app.scss
index 6e2f3a9..e254df4 100644
--- a/app/src/app/app.scss
+++ b/app/src/app/app.scss
@@ -25,6 +25,10 @@
   font-size: 1.4rem;
 }
 
+body {
+  user-select: text;
+}
+
 // Shared Sass variables, which can be used to adjust Ionic's
 // default Sass variables, belong in "theme/variables.scss".
 //
diff --git a/app/src/components/head-nav/head-nav.html b/app/src/components/head-nav/head-nav.html
index e7f73fd..1d5ff08 100644
--- a/app/src/components/head-nav/head-nav.html
+++ b/app/src/components/head-nav/head-nav.html
@@ -7,9 +7,9 @@
     <button ion-button (click)="changeCurrency()">
       <ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }}
     </button>
-    <button ion-button icon-only>
+    <button ion-button icon-only (click)="toggleSearch()">
       <ion-icon name="search"></ion-icon>
     </button>
   </ion-buttons>
 </ion-navbar>
-<ion-searchbar (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1000"></ion-searchbar>
+<ion-searchbar [hidden]="!showSearch" (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1500"></ion-searchbar>
diff --git a/app/src/components/head-nav/head-nav.ts b/app/src/components/head-nav/head-nav.ts
index 5333728..b3122b6 100644
--- a/app/src/components/head-nav/head-nav.ts
+++ b/app/src/components/head-nav/head-nav.ts
@@ -18,6 +18,7 @@ import { ActionSheetController } from 'ionic-angular';
 })
 export class HeadNavComponent {
 
+  public showSearch: boolean = false;
   public loading: boolean;
   @Input() public title: string;
   public q: string;
@@ -27,6 +28,7 @@ export class HeadNavComponent {
   }
 
   public search(): void {
+    this.showSearch = false;
     let apiPrefix: string = this.api.apiPrefix;
 
     this.http.get(apiPrefix + 'block/' + this.q).subscribe(
@@ -136,4 +138,8 @@ export class HeadNavComponent {
     });
     actionSheet.present();
   }
+
+  public toggleSearch() {
+    this.showSearch = !this.showSearch;
+  }
 }
diff --git a/app/src/pages/block-detail/block-detail.html b/app/src/pages/block-detail/block-detail.html
index daa0444..a20d197 100644
--- a/app/src/pages/block-detail/block-detail.html
+++ b/app/src/pages/block-detail/block-detail.html
@@ -35,7 +35,7 @@
     </ion-item>
     <ion-item>
       Mined by
-      <span item-end>
+      <span item-end *ngIf="block.poolInfo">
         <a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
       </span>
     </ion-item>
diff --git a/app/src/providers/api/api.ts b/app/src/providers/api/api.ts
index 31c1966..a15b48e 100644
--- a/app/src/providers/api/api.ts
+++ b/app/src/providers/api/api.ts
@@ -11,7 +11,7 @@ import 'rxjs/add/operator/map';
 @Injectable()
 export class ApiProvider {
 
-  public apiPrefix: string = 'http://localhost:3001/insight-api/';
+  public apiPrefix: string = 'https://insight.bitpay.com/api/';
 
   constructor(public http: Http) {
   }

From 90379522fe3324abcac4cc781ccded3db8440c1f Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Wed, 16 Aug 2017 11:11:20 -0400
Subject: [PATCH 2/3] added spinner to block detail

---
 app/src/pages/block-detail/block-detail.html | 180 ++++++++++---------
 1 file changed, 93 insertions(+), 87 deletions(-)

diff --git a/app/src/pages/block-detail/block-detail.html b/app/src/pages/block-detail/block-detail.html
index a20d197..aaebe36 100644
--- a/app/src/pages/block-detail/block-detail.html
+++ b/app/src/pages/block-detail/block-detail.html
@@ -3,96 +3,102 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Block #{{ block.height }}</h1>
-  <p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p>
-
-  <h2>Summary</h2>
-
-  <ion-list *ngIf="!loading" class="summary">
-    <ion-item>
-      Number of Transactions
-      <span item-end>
-        {{ block.tx.length }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Height
-      <span item-end>
-        {{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
-      </span>
-    </ion-item>
-    <ion-item>
-      Block Reward
-      <span item-end>
-        {{ currency.getConversion(block.reward) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Timestamp
-      <span item-end>
-        {{ block.time * 1000 | date:'medium' }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Mined by
-      <span item-end *ngIf="block.poolInfo">
-        <a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
-      </span>
-    </ion-item>
-    <ion-item>
-      Merkle Root
-      <span item-end class="ellipsis">
-        {{ block.merkleroot }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Previous Block
-      <span item-end>
-        <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
-      </span>
-    </ion-item>
-    <ion-item>
-      Difficulty 
-      <span item-end>
-        {{ block.difficulty }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Bits
-      <span item-end>
-        {{ block.bits }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Size (bytes)
-      <span item-end>
-        {{ block.size }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Version
-      <span item-end>
-        {{ block.version }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Nonce
-      <span item-end>
-        {{ block.nonce }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Next Block
-      <span item-end>
-        <a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
-      </span>
-    </ion-item>
-  </ion-list>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
 
   <div *ngIf="!loading">
-    <h2>Transactions</h2>
+    <h1>Block #{{ block.height }}</h1>
+    <p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p>
 
-    <transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
+    <h2>Summary</h2>
+
+    <ion-list *ngIf="!loading" class="summary">
+      <ion-item>
+        Number of Transactions
+        <span item-end>
+          {{ block.tx.length }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Height
+        <span item-end>
+          {{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
+        </span>
+      </ion-item>
+      <ion-item>
+        Block Reward
+        <span item-end>
+          {{ currency.getConversion(block.reward) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Timestamp
+        <span item-end>
+          {{ block.time * 1000 | date:'medium' }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Mined by
+        <span item-end *ngIf="block.poolInfo">
+          <a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
+        </span>
+      </ion-item>
+      <ion-item>
+        Merkle Root
+        <span item-end class="ellipsis">
+          {{ block.merkleroot }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Previous Block
+        <span item-end>
+          <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
+        </span>
+      </ion-item>
+      <ion-item>
+        Difficulty
+        <span item-end>
+          {{ block.difficulty }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Bits
+        <span item-end>
+          {{ block.bits }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Size (bytes)
+        <span item-end>
+          {{ block.size }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Version
+        <span item-end>
+          {{ block.version }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Nonce
+        <span item-end>
+          {{ block.nonce }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Next Block
+        <span item-end>
+          <a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
+        </span>
+      </ion-item>
+    </ion-list>
+
+    <div *ngIf="!loading">
+      <h2>Transactions</h2>
+
+      <transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
+    </div>
   </div>
 
 </ion-content>

From c9a1b6b153275f433f58e72fedd6aca9a98e8ff4 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Wed, 16 Aug 2017 12:46:08 -0400
Subject: [PATCH 3/3] added spinners to transaction and address pages and
 transaction list component

---
 app/src/components/head-nav/head-nav.ts       |  2 +-
 .../transaction-list/transaction-list.html    | 21 +++--
 app/src/pages/address/address.html            | 76 ++++++++++---------
 app/src/pages/transaction/transaction.html    | 68 +++++++++--------
 4 files changed, 93 insertions(+), 74 deletions(-)

diff --git a/app/src/components/head-nav/head-nav.ts b/app/src/components/head-nav/head-nav.ts
index b3122b6..664e77e 100644
--- a/app/src/components/head-nav/head-nav.ts
+++ b/app/src/components/head-nav/head-nav.ts
@@ -139,7 +139,7 @@ export class HeadNavComponent {
     actionSheet.present();
   }
 
-  public toggleSearch() {
+  public toggleSearch(): void {
     this.showSearch = !this.showSearch;
   }
 }
diff --git a/app/src/components/transaction-list/transaction-list.html b/app/src/components/transaction-list/transaction-list.html
index 6620fc2..9c0a459 100644
--- a/app/src/components/transaction-list/transaction-list.html
+++ b/app/src/components/transaction-list/transaction-list.html
@@ -1,7 +1,14 @@
-<ion-grid>
-  <ion-row *ngFor="let tx of transactions.txs">
-    <ion-col col-12>
-      <transaction [tx]="tx"></transaction>
-    </ion-col>
-  </ion-row>
-</ion-grid>
+<div *ngIf="loading">
+  <ion-spinner name="crescent"></ion-spinner>
+</div>
+
+
+<div *ngIf="!loading">
+  <ion-grid>
+    <ion-row *ngFor="let tx of transactions.txs">
+      <ion-col col-12>
+        <transaction [tx]="tx"></transaction>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</div>
diff --git a/app/src/pages/address/address.html b/app/src/pages/address/address.html
index 752120a..4dfc4d7 100644
--- a/app/src/pages/address/address.html
+++ b/app/src/pages/address/address.html
@@ -3,45 +3,51 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Address</h1>
-  <p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
-  <p>{{ currency.getConversion(address.balance) }}</p>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
 
-  <h2>Summary</h2>
+  <div *ngIf="!loading">
+    <h1>Address</h1>
+    <p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
+    <p>{{ currency.getConversion(address.balance) }}</p>
 
-  <ion-list class="summary">
-    <ion-item>
-      Total Received
-      <span item-end>
-        {{ currency.getConversion(address.totalReceived) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Total Sent
-      <span item-end>
-        {{ currency.getConversion(address.totalSent) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Final Balance
-      <span item-end>
-        {{ currency.getConversion(address.balance) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      No. Transactions
-      <span item-end>
-        {{ address.txApperances }}
-      </span>
-    </ion-item>
-  </ion-list>
+    <h2>Summary</h2>
 
-  <p text-center>
-    <qr-code [value]="address.addrStr" [size]="160"></qr-code>
-    <p>
+    <ion-list class="summary">
+      <ion-item>
+        Total Received
+        <span item-end>
+          {{ currency.getConversion(address.totalReceived) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Total Sent
+        <span item-end>
+          {{ currency.getConversion(address.totalSent) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Final Balance
+        <span item-end>
+          {{ currency.getConversion(address.balance) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        No. Transactions
+        <span item-end>
+          {{ address.txApperances }}
+        </span>
+      </ion-item>
+    </ion-list>
 
-  <h2>Transactions</h2>
+    <p text-center>
+      <qr-code [value]="address.addrStr" [size]="160"></qr-code>
+      <p>
 
-  <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
+        <h2>Transactions</h2>
+
+        <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
+  </div>
 
 </ion-content>
diff --git a/app/src/pages/transaction/transaction.html b/app/src/pages/transaction/transaction.html
index bed9bd1..7f904dc 100644
--- a/app/src/pages/transaction/transaction.html
+++ b/app/src/pages/transaction/transaction.html
@@ -3,40 +3,46 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Transaction</h1>
-  <p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
 
-  <h2>Summary</h2>
+  <div *ngIf="!loading">
+    <h1>Transaction</h1>
+    <p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
 
-  <ion-list class="summary">
-    <ion-item>
-      Size
-      <span item-end>
-        {{ tx.size }} (bytes)
-      </span>
-    </ion-item>
-    <ion-item>
-      Received Time
-      <span item-end>
-        {{ tx.time * 1000 | date:'medium' }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Mined Time
-      <span item-end>
-        {{ tx.blocktime * 1000 | date:'medium' }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Included in Block
-      <span item-end>
-        <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
-      </span>
-    </ion-item>
-  </ion-list>
+    <h2>Summary</h2>
 
-  <h2>Details</h2>
+    <ion-list class="summary">
+      <ion-item>
+        Size
+        <span item-end>
+          {{ tx.size }} (bytes)
+        </span>
+      </ion-item>
+      <ion-item>
+        Received Time
+        <span item-end>
+          {{ tx.time * 1000 | date:'medium' }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Mined Time
+        <span item-end>
+          {{ tx.blocktime * 1000 | date:'medium' }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Included in Block
+        <span item-end>
+          <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
+        </span>
+      </ion-item>
+    </ion-list>
 
-  <transaction [tx]="tx"></transaction>
+    <h2>Details</h2>
+
+    <transaction [tx]="tx"></transaction>
+  </div>
 
 </ion-content>