Merge pull request #798 from SonicWizard/ionic

Added Search toggle and loading spinners for pages and transaction component

app/ionic.config.json

@@ -1,5 +1,6 @@
 {
   "name": "insight-ui",
   "app_id": "",
-  "type": "ionic-angular"
+  "type": "ionic-angular",
+  "integrations": {}
 }

app/package.json

@@ -42,7 +42,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",

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".
 //

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>

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(): void {
+    this.showSearch = !this.showSearch;
+  }
 }

app/src/components/transaction-list/transaction-list.html

@@ -1,3 +1,9 @@
+<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>
@@ -5,3 +11,4 @@
       </ion-col>
     </ion-row>
   </ion-grid>
+</div>

app/src/pages/address/address.html

@@ -3,6 +3,11 @@
 </ion-header>
 
 <ion-content padding>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
+
+  <div *ngIf="!loading">
     <h1>Address</h1>
     <p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
     <p>{{ currency.getConversion(address.balance) }}</p>
@@ -43,5 +48,6 @@
         <h2>Transactions</h2>
 
         <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
+  </div>
 
 </ion-content>

app/src/pages/block-detail/block-detail.html

@@ -3,6 +3,11 @@
 </ion-header>
 
 <ion-content padding>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
+
+  <div *ngIf="!loading">
     <h1>Block #{{ block.height }}</h1>
     <p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p>
 
@@ -35,7 +40,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>
@@ -94,5 +99,6 @@
 
       <transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
     </div>
+  </div>
 
 </ion-content>

app/src/pages/transaction/transaction.html

@@ -3,6 +3,11 @@
 </ion-header>
 
 <ion-content padding>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
+
+  <div *ngIf="!loading">
     <h1>Transaction</h1>
     <p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
 
@@ -38,5 +43,6 @@
     <h2>Details</h2>
 
     <transaction [tx]="tx"></transaction>
+  </div>
 
 </ion-content>

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) {
   }