Merge pull request #6735 from Gamboster/v4

Feat: basic receive and custom amount implemented

package.json

@@ -40,6 +40,7 @@
     "@nsalaun/ng-logger": "2.0.1",
     "ajv": "5.2.2",
     "angular2-moment": "1.7.0",
+    "angular2-qrcode": "^2.0.1",
     "asn1.js": "=4.5.2",
     "autoprefixer": "7.1.2",
     "bitcore-wallet-client": "6.0.0",
@@ -62,7 +63,6 @@
     "ionicons": "3.0.0",
     "lodash": "4.17.4",
     "ngx-clipboard": "8.0.3",
-    "ngx-qrcode2": "0.0.3",
     "rxjs": "5.4.0",
     "sw-toolbox": "3.6.0",
     "zone.js": "0.8.12"

src/app/app.module.ts

@@ -15,7 +15,7 @@ import { QRScanner } from '@ionic-native/qr-scanner';
 import { NgLoggerModule, Logger, Level } from '@nsalaun/ng-logger';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslatePoHttpLoader } from '@biesbjerg/ngx-translate-po-http-loader';
-import { NgxQRCodeModule } from 'ngx-qrcode2';
+import { QRCodeModule } from 'angular2-qrcode';
 import { MomentModule } from 'angular2-moment';
 
 /* Copay App */
@@ -37,10 +37,12 @@ import { SettingsPage } from '../pages/settings/settings';
 /* Settings */
 import { AboutPage } from '../pages/settings/about/about';
 import { TermsOfUsePage } from '../pages/settings/about/terms-of-use/terms-of-use';
-
 /* Send */
 import { AmountPage } from '../pages/send/amount/amount';
 import { ConfirmPage } from '../pages/send/confirm/confirm';
+/* Receive */
+import { CustomAmountPage } from '../pages/receive/custom-amount/custom-amount';
+
 
 /* Providers */
 import { WalletProvider } from '../providers/wallet/wallet';
@@ -74,14 +76,15 @@ export function createTranslateLoader(http: Http) {
     DisclaimerPage,
     TabsPage,
     AmountPage,
-    ConfirmPage
+    ConfirmPage,
+    CustomAmountPage
   ],
   imports: [
     BrowserModule,
     HttpModule,
     NgLoggerModule.forRoot(Level.LOG),
-    NgxQRCodeModule,
     MomentModule,
+    QRCodeModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -108,7 +111,8 @@ export function createTranslateLoader(http: Http) {
     DisclaimerPage,
     TabsPage,
     AmountPage,
-    ConfirmPage
+    ConfirmPage,
+    CustomAmountPage
   ],
   providers: [
     StatusBar,

src/pages/receive/custom-amount/custom-amount.html

@@ -0,0 +1,25 @@
+<!--
+  Generated template for the CustomAmountPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>custom-amount</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+    <div class="qr-container">
+        <qr-code *ngIf="address" [value]="qrAddress" [level]="M" [size]="220" [foreground]="'#334'"></qr-code>
+        <ion-item-group class="custom-info">
+          <ion-item>Address: {{address}}</ion-item>
+          <ion-item>Amount: {{amount}} BTC</ion-item>
+          <ion-item>Receive in: Personal Wallet</ion-item>
+        </ion-item-group>
+    </div>
+</ion-content>

src/pages/receive/custom-amount/custom-amount.scss

@@ -0,0 +1,12 @@
+page-custom-amount {
+  .qr-container {
+    text-align: center;
+    margin: auto;
+    .custom-info {
+      position: absolute;
+      bottom: 0px;      
+      left: 0px;
+      padding: 0px;
+    }
+  }
+}

src/pages/receive/custom-amount/custom-amount.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the CustomAmountPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+
+@Component({
+  selector: 'page-custom-amount',
+  templateUrl: 'custom-amount.html',
+})
+export class CustomAmountPage {
+
+  public protocolHandler: string;
+  public address: string;
+  public amount: string;
+  public qrAddress: string;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+    this.protocolHandler = "bitcoin";
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad CustomAmountPage');
+    this.address = this.navParams.data.address;
+    this.amount = this.navParams.data.amount;
+    this.updateQrAddress();
+  }
+
+  updateQrAddress () {
+    this.qrAddress = this.protocolHandler + ":" + this.address + "?amount=" + this.amount;
+  }
+
+}

src/pages/receive/receive.html

@@ -14,5 +14,21 @@
 
 
 <ion-content padding>
-
+  <div class="qr-container">
+      <qr-code *ngIf="address" [value]="qrAddress" [level]="M" [size]="220" [foreground]="'#334'"></qr-code>
+      <div>
+        <span>{{ address }}</span>
+      </div>
+      <div>
+        <button [hidden]="!address" class="button-request" (click)="requestSpecificAmount()">
+          <span>Request Specific amount</span>
+          <ion-icon name="arrow-forward"></ion-icon> 
+        </button>
+      </div>
+      <div>
+        <button [hidden]="!address" class="button-address" (click)="setAddress(true)">
+          <span>Generate new address</span>
+        </button>
+      </div>
+  </div>
 </ion-content>

src/pages/receive/receive.scss

@@ -1,3 +1,25 @@
 page-receive {
-
+  $v-text-accent-color: #1abb9b;
+  .qr-container {
+    text-align: center;
+    margin: auto;
+    .button-request {
+      margin-top: 10px;
+      background: transparent;
+      border: none;
+      font-size: 12px;
+      color: $v-text-accent-color;
+      ion-icon {
+        vertical-align: middle;
+        padding-left: 5px;
+      }
+    }
+    .button-address {
+      margin-top: 10px;
+      background: transparent;
+      border: none;
+      font-size: 12px;
+      color: $v-text-accent-color;
+    }
+  }
 }

src/pages/receive/receive.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
+import { AmountPage } from '../send/amount/amount';
 
 @Component({
   selector: 'page-receive',
@@ -7,11 +8,31 @@ import { NavController, NavParams } from 'ionic-angular';
 })
 export class ReceivePage {
 
+  public protocolHandler: string;
+  public address: string;
+  public qrAddress: string;
+
   constructor(public navCtrl: NavController, public navParams: NavParams) {
+    this.protocolHandler = "bitcoin";
+    this.address = "1FgGP9dKqtWC1Q9xGhPYVmAeyezeZCFjhf";
+    this.updateQrAddress();
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad ReceivePage');
   }
 
+  requestSpecificAmount() {
+    this.navCtrl.push(AmountPage, {address: this.address, sending: false});
+  }
+
+  setAddress() {
+    this.address = this.address === "1FgGP9dKqtWC1Q9xGhPYVmAeyezeZCFjhf" ? "1RTes3reeRTs1Q9xGhPYVmQFrdUyCr3EsX" : "1FgGP9dKqtWC1Q9xGhPYVmAeyezeZCFjhf";
+    this.updateQrAddress();
+  }
+
+  updateQrAddress () {
+    this.qrAddress = this.protocolHandler + ":" + this.address;
+  }
+
 }

src/pages/send/amount/amount.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 import * as _ from 'lodash';
 import { ConfirmPage } from '../confirm/confirm';
+import { CustomAmountPage } from '../../receive/custom-amount/custom-amount';
 
 @Component({
   selector: 'page-amount',
@@ -14,6 +15,7 @@ export class AmountPage {
   public smallFont: boolean;
   public allowSend: boolean;
   public globalResult: string;
+  public sending: boolean;
   
   private LENGTH_EXPRESSION_LIMIT = 19;
   private SMALL_FONT_SIZE_LIMIT = 10;
@@ -29,6 +31,7 @@ export class AmountPage {
     console.log('ionViewDidLoad AmountPage');
     console.log("this.navParams.data", this.navParams.data);
     this.address = this.navParams.data.address;
+    this.sending = this.navParams.data.sending;
   }
 
   pushDigit(digit: string) {
@@ -142,7 +145,12 @@ export class AmountPage {
   };
 
   finish() {
-    this.navCtrl.push(ConfirmPage, {address: this.address, amount: this.globalResult});
+    if(this.sending) {
+      this.navCtrl.push(ConfirmPage, {address: this.address, amount: this.globalResult});      
+    } else {
+      console.log("To do");
+      this.navCtrl.push(CustomAmountPage, {address: this.address, amount: this.globalResult});            
+    }
   }
 
 }

src/pages/send/send.ts

@@ -24,7 +24,7 @@ export class SendPage {
     // TODO: Improve this function
     console.log("Send search string", search);
     if (search.length === 34  && _.startsWith(search, '1')) {
-      this.navCtrl.push(AmountPage, {address: search});
+      this.navCtrl.push(AmountPage, {address: search, sending: true});
     }
   }