Merge pull request #591 from keerifox/receive-page-copy-uri-button

Add "Copy payment link" button to Receive page which allows to copy URI nano:...?amount=...

src/app/components/receive/receive.component.html

@@ -13,6 +13,40 @@
       </button>
     </ng-template>
 
+    <ng-template #copyPaymentUriButton>
+      <button
+        *ngIf="(pendingAccountModel !== '0') && (qrAmount != null)"
+        class="uk-width-1-1 uk-width-5-6@s uk-button uk-button-primary uk-text-center nlt-icon-button"
+        [class.nlt-button-success]="recentlyCopiedPaymentUri"
+        [class.uk-disabled]="recentlyCopiedPaymentUri"
+        type="button"
+        ngxClipboard
+        [cbContent]="qrCodeUri"
+        (cbOnSuccess)="copiedPaymentUri()"
+      >
+        <span class="nlt-icon" uk-icon="icon: copy;"></span>
+        {{ recentlyCopiedPaymentUri ? 'Copied!' : 'Copy payment link' }}
+      </button>
+    </ng-template>
+
+    <ng-template #copyPaymentAddressButton>
+      <button
+        *ngIf="(pendingAccountModel !== '0')"
+        class="uk-width-1-1 uk-width-5-6@s uk-button uk-text-center nlt-icon-button"
+        [class.uk-button-primary]="recentlyCopiedAccountAddress || (qrAmount == null)"
+        [class.uk-button-secondary]="!recentlyCopiedAccountAddress && (qrAmount != null)"
+        [class.nlt-button-success]="recentlyCopiedAccountAddress"
+        [class.uk-disabled]="recentlyCopiedAccountAddress"
+        type="button"
+        ngxClipboard
+        [cbContent]="pendingAccountModel"
+        (cbOnSuccess)="copiedAccountAddress()"
+      >
+        <span class="nlt-icon" uk-icon="icon: copy;"></span>
+        {{ recentlyCopiedAccountAddress ? 'Copied!' : 'Copy address' }}
+      </button>
+    </ng-template>
+    
     <div class="uk-margin-bottom uk-flex uk-flex-between">
       <h2 class="uk-flex-1 uk-heading-divider uk-margin-remove">Receive Nano</h2>
       <div class="uk-flex-none uk-visible@s uk-flex uk-flex-top uk-margin-medium-left">
@@ -50,6 +84,15 @@
                 </div>
               </div>
             </div>
+
+            <div class="uk-margin uk-margin-medium-top uk-visible@s uk-flex uk-flex-column" style="width: 320px;">
+              <div class="uk-width-1-1 uk-flex" [style]="( (qrAmount != null) ? 'margin-bottom: 20px;' : '' )">
+                <ng-container *ngTemplateOutlet="copyPaymentUriButton"></ng-container>
+              </div>
+              <div class="uk-width-1-1 uk-flex">
+                <ng-container *ngTemplateOutlet="copyPaymentAddressButton"></ng-container>
+              </div>
+            </div>
           </div>
 
           <div class="uk-flex-1 qr-column">
@@ -73,25 +116,11 @@
             <div>
               <div class="uk-flex uk-flex-center uk-flex-middle uk-text-center qr-address" *ngIf="(pendingAccountModel !== '0')">
                 <app-nano-account-id [accountID]="pendingAccountModel" middle="break" class="nano-address-monospace uk-width-auto" style="max-width: 90%;"></app-nano-account-id>
-                <a class="span-icon hide-on-small-viewports" ngxClipboard [cbContent]="pendingAccountModel" (cbOnSuccess)="copied()" uk-icon="icon: copy" title="Copy Account Address" uk-tooltip></a>
               </div>
-              <div class="uk-margin-medium-top only-on-small-viewports nlt-button-group uk-flex uk-flex-column uk-flex-middle">
+              <div class="uk-margin-medium-top uk-hidden@s nlt-button-group uk-flex uk-flex-column uk-flex-middle">
-                <button
+                <ng-container *ngTemplateOutlet="copyPaymentUriButton"></ng-container>
-                  *ngIf="(pendingAccountModel !== '0')"
+                <ng-container *ngTemplateOutlet="copyPaymentAddressButton"></ng-container>
-                  class="uk-width-1-1 uk-width-4-5@s uk-button uk-button-primary uk-text-center nlt-icon-button"
+                <ng-container *ngTemplateOutlet="switchToMerchantModeButton"></ng-container>
-                  [class.nlt-button-success]="recentlyCopiedAccountAddress"
-                  [class.uk-disabled]="recentlyCopiedAccountAddress"
-                  type="button"
-                  ngxClipboard
-                  [cbContent]="pendingAccountModel"
-                  (cbOnSuccess)="copiedAccountAddress()"
-                >
-                  <span class="nlt-icon" uk-icon="icon: copy;"></span>
-                  {{ recentlyCopiedAccountAddress ? 'Copied!' : 'Copy address' }}
-                </button>
-                <div class="uk-hidden@s uk-width-1-1 uk-flex">
-                  <ng-container *ngTemplateOutlet="switchToMerchantModeButton"></ng-container>
-                </div>
               </div>
             </div>
           </div>

src/app/components/receive/receive.component.ts

@@ -36,10 +36,12 @@ export class ReceiveComponent implements OnInit, OnDestroy {
   pendingAccountModel = '0';
   pendingBlocks = [];
   pendingBlocksForSelectedAccount = [];
+  qrCodeUri = null;
   qrCodeImage = null;
   qrAccount = '';
   qrAmount: BigNumber = null;
   recentlyCopiedAccountAddress = false;
+  recentlyCopiedPaymentUri = false;
   walletAccount: WalletAccount = null;
   selAccountInit = false;
   loadingIncomingTxList = false;
@@ -296,7 +298,8 @@ export class ReceiveComponent implements OnInit, OnDestroy {
     if (account.length > 1) {
       this.qrAccount = account;
       this.qrCodeImage = null;
-      qrCode = await QRCode.toDataURL(`nano:${account}${this.qrAmount ? `?amount=${this.qrAmount.toString(10)}` : ''}`, {scale: 7});
+      this.qrCodeUri = `nano:${account}${this.qrAmount ? `?amount=${this.qrAmount.toString(10)}` : ''}`;
+      qrCode = await QRCode.toDataURL(this.qrCodeUri, {scale: 7});
     }
     this.qrCodeImage = qrCode;
   }
@@ -311,7 +314,8 @@ export class ReceiveComponent implements OnInit, OnDestroy {
     }
     if (this.qrAccount.length > 1) {
       this.qrCodeImage = null;
-      qrCode = await QRCode.toDataURL(`nano:${this.qrAccount}${this.qrAmount ? `?amount=${this.qrAmount.toString(10)}` : ''}`, {scale: 7});
+      this.qrCodeUri = `nano:${this.qrAccount}${this.qrAmount ? `?amount=${this.qrAmount.toString(10)}` : ''}`;
+      qrCode = await QRCode.toDataURL(this.qrCodeUri, {scale: 7});
       this.qrCodeImage = qrCode;
     }
   }
@@ -385,6 +389,7 @@ export class ReceiveComponent implements OnInit, OnDestroy {
       clearTimeout(this.timeoutIdClearingRecentlyCopiedState);
     }
     this.recentlyCopiedAccountAddress = true;
+    this.recentlyCopiedPaymentUri = false;
     this.timeoutIdClearingRecentlyCopiedState = setTimeout(
       () => {
         this.recentlyCopiedAccountAddress = false;
@@ -393,6 +398,20 @@ export class ReceiveComponent implements OnInit, OnDestroy {
     );
   }
 
+  copiedPaymentUri() {
+    if (this.timeoutIdClearingRecentlyCopiedState != null) {
+      clearTimeout(this.timeoutIdClearingRecentlyCopiedState);
+    }
+    this.recentlyCopiedPaymentUri = true;
+    this.recentlyCopiedAccountAddress = false;
+    this.timeoutIdClearingRecentlyCopiedState = setTimeout(
+      () => {
+        this.recentlyCopiedPaymentUri = false;
+      },
+      2000
+    );
+  }
+
   toBigNumber(value) {
     return new BigNumber(value);
   }