About page

package.json

@@ -24,8 +24,10 @@
     "@ionic-native/splash-screen": "3.12.1",
     "@ionic-native/status-bar": "3.12.1",
     "@ionic/storage": "2.0.1",
+    "@types/lodash": "^4.14.71",
     "ionic-angular": "3.5.3",
     "ionicons": "3.0.0",
+    "lodash": "^4.17.4",
     "rxjs": "5.4.0",
     "sw-toolbox": "3.6.0",
     "zone.js": "0.8.12"
@@ -34,6 +36,7 @@
     "@ionic/app-scripts": "2.0.2",
     "@ionic/cli-plugin-cordova": "1.4.1",
     "@ionic/cli-plugin-ionic-angular": "1.3.2",
+    "ionic": "3.6.0",
     "typescript": "2.3.4"
   },
   "description": "Copay Bitcoin Wallet"

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { Copay } from './app.component';
 
@@ -16,6 +17,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { WalletService } from '../providers/wallet-service/wallet-service';
 import { StorageService } from '../providers/storage-service/storage-service';
+import { AppService } from '../providers/app-service/app-service';
 
 @NgModule({
   declarations: [
@@ -29,6 +31,7 @@ import { StorageService } from '../providers/storage-service/storage-service';
   ],
   imports: [
     BrowserModule,
+    HttpModule,
     IonicModule.forRoot(Copay)
   ],
   bootstrap: [IonicApp],
@@ -46,7 +49,8 @@ import { StorageService } from '../providers/storage-service/storage-service';
     SplashScreen,
     {provide: ErrorHandler, useClass: IonicErrorHandler},
     WalletService,
-    StorageService
+    StorageService,
+    AppService
   ]
 })
 export class AppModule {}

src/assets/appConfig.json

@@ -0,0 +1,35 @@
+{
+  "packageName": "copay",
+  "packageDescription": "Copay Bitcoin Wallet",
+  "packageNameId": "com.bitpay.copay",
+  "statusBarColor": "#192c3a",
+  "userVisibleName": "Copay",
+  "purposeLine": "Copay Bitcoin Wallet",
+  "bundleName": "copay",
+  "appUri": "copay",
+  "name": "copay",
+  "nameNoSpace": "copay",
+  "nameCase": "Copay",
+  "nameCaseNoSpace": "Copay",
+  "gitHubRepoName": "copay",
+  "gitHubRepoUrl": "git://github.com/bitpay/copay.git",
+  "gitHubRepoBugs": "https://github.com/bitpay/copay/issues",
+  "disclaimerUrl": "https://copay.io/disclaimer",
+  "url": "https://copay.io",
+  "appDescription": "Copay Bitcoin Wallet",
+  "winAppName": "CopayWallet",
+  "WindowsStoreIdentityName": "18C7659D.Copay-SecureBitcoinWallet",
+  "WindowsStoreDisplayName": "Copay - Secure Bitcoin Wallet",
+  "windowsAppId": "804636ee-b017-4cad-8719-e58ac97ffa5c",
+  "pushSenderId": "1036948132229",
+  "description": "A Secure Bitcoin Wallet",
+  "version": "3.7.1",
+  "androidVersion": "371000",
+  "commitHash": "abcd1234",
+  "_extraCSS": null,
+  "_enabledExtensions": {
+    "coinbase": true,
+    "glidera": true,
+    "amazon": true
+  }
+}

src/pages/about/about.html

@@ -1,18 +1,39 @@
-<!--
-  Generated template for the AboutPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
 
   <ion-navbar>
-    <ion-title>About</ion-title>
+    <ion-title>About Copay</ion-title>
   </ion-navbar>
 
 </ion-header>
 
 
-<ion-content padding>
+<ion-content>
+
+  <ion-list>
+    <ion-item-divider color="light">Release information</ion-item-divider>
+    <ion-item>
+      <ion-icon name="logo-github" item-start></ion-icon>
+      Version
+      <ion-note item-end>
+        {{version}}
+      </ion-note>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="git-commit" item-start></ion-icon>
+      Commit hash
+      <ion-note item-end>
+        {{commitHash}}
+      </ion-note>
+    </ion-item>
+    <ion-item-divider color="light">&nbsp;</ion-item-divider>
+    <ion-item>
+      <ion-icon name="people" item-start></ion-icon>
+      Terms of use
+    </ion-item>
+    <ion-item>
+      <ion-icon name="paper" item-start></ion-icon>
+      Session log
+    </ion-item>
+  </ion-list>
 
 </ion-content>

src/pages/about/about.ts

@@ -1,13 +1,28 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 
+import { AppService } from '../../providers/app-service/app-service';
+
 @Component({
   selector: 'page-about',
   templateUrl: 'about.html',
 })
 export class AboutPage {
+  version: string;
+  commitHash: string;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    private appSrv: AppService
+  ) {
+
+    appSrv.getCommitHash().subscribe((data) => {
+      this.commitHash = data;
+    });
+    appSrv.getVersion().subscribe((data) => {
+      this.version = data;
+    });
   }
 
   ionViewDidLoad() {

src/pages/setting/setting.html

@@ -1,9 +1,3 @@
-<!--
-  Generated template for the SettingPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
 
   <ion-navbar>
@@ -13,12 +7,24 @@
 </ion-header>
 
 
-<ion-content padding>
+<ion-content>
 
   <ion-list>
-    <button ion-item *ngFor="let item of items" (click)="openPage(item.page)">
-      {{ item.name }}
-    </button>
+    <ion-item-divider color="light">&nbsp;</ion-item-divider>
+    <ion-item (click)="openAddressBookPage()">
+      <ion-icon name="contacts" item-start></ion-icon>
+      Address book
+    </ion-item>
+    <ion-item-divider color="light">Preferences</ion-item-divider>
+    <ion-item (click)="openNotificationPage()">
+      <ion-icon name="notifications" item-start></ion-icon>
+      Notification
+    </ion-item>
+    <ion-item-divider color="light">&nbsp;</ion-item-divider>
+    <ion-item (click)="openAboutPage()">
+      <ion-icon name="apps" item-start></ion-icon>
+      About {{appName}}
+    </ion-item>
   </ion-list>
 
 </ion-content>

src/pages/setting/setting.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 
+import { AppService } from '../../providers/app-service/app-service';
+
 import { AboutPage } from '../about/about';
 
 @Component({
@@ -8,27 +10,24 @@ import { AboutPage } from '../about/about';
   templateUrl: 'setting.html',
 })
 export class SettingPage {
-  items: Object[];
+  appName: string;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
-    this.items = [
-      {
-        name: 'Address book',
-        page: null
-      }, {
-        name: 'About Copay',
-        page: AboutPage
-      }
-    ];
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    public appSrv: AppService
+  ) {
+    appSrv.getName().subscribe((data) => {
+      this.appName = data;
+    });
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad SettingPage');
   }
 
-  openPage(page: any) {
-    if (!page) return;
-    this.navCtrl.push(page);
+  openAboutPage() {
+    this.navCtrl.push(AboutPage);
   }
 
 }

src/providers/app-service/app-service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class AppService {
+  private jsonPath: string = '../assets/appConfig.json';
+
+  constructor(public http: Http) {}
+
+  getCommitHash() {
+    return this.http.get(this.jsonPath)
+      .map((res:Response) => res.json().commitHash);
+  }
+
+  getName() {
+    return this.http.get(this.jsonPath)
+      .map((res:Response) => res.json().nameCase);
+  }
+
+  getDescription() {
+    return this.http.get(this.jsonPath)
+      .map((res:Response) => res.json().description);
+  }
+
+  getVersion() {
+    return this.http.get(this.jsonPath)
+      .map((res:Response) => res.json().version);
+  }
+
+}