Add buttons to checkout component

src/app/checkout/checkout.component.html

@@ -1,4 +1,5 @@
-<div class="container" style="margin-top: 10px;">
+<div class="container" style="font-family:  'Spartan', sans-serif;
+							  margin-top: 10px;">
 
 	<div class="askPayment">
 		Scan to make payment
@@ -14,7 +15,7 @@
 		</tr>
     </table>
 
-	<mat-dialog-actions>
+	<div style="margin-top: 10px;">
 		<table cellspacing="0" 
 		       width="100%">
 			<tr>
@@ -32,6 +33,31 @@
 				</td>
 			</tr>
 		</table>
-	</mat-dialog-actions>
+	</div>
+	<div style="text-align: center;
+				margin-top: 10px;
+				line-height: 30px;">
+
+		Can't scan?<br>Use this <a [href]="zcashUrl">wallet link</a>, or
+		<div style="display: flex;
+					justify-content: space-between;">
+			<button style="margin-top: 20px;
+						   font-weight: 700;
+						   background-color: lightgray;"
+					mat-raised-button 
+					(click)="copyAddress()">Copy Address</button> 
+			<button style="margin-top: 20px;
+						   font-weight: 700;
+						   background-color: lightgray;"
+					mat-raised-button 
+					(click)="copyAmount()">Copy Amount</button> 
+		</div>		
+		<button style="margin-top: 20px;
+					   font-weight: 700;
+					   background-color: lightgray;"
+				mat-raised-button 
+				(click)="copyMemo()">Copy Memo</button> 
+
+	</div>
 
 </div>

src/app/checkout/checkout.component.ts

@@ -2,6 +2,8 @@ import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
+import { NotifierService } from '../notifier.service';
+
 var QRCode = require('easyqrcodejs');
 var URLSafeBase64 = require('urlsafe-base64');
 var Buffer = require('buffer/').Buffer;
@@ -22,8 +24,9 @@ export class CheckoutComponent implements OnInit{
 	constructor(
 		private dialogRef: MatDialogRef<CheckoutComponent>,
 		private sanitizer: DomSanitizer,
-		@Inject(MAT_DIALOG_DATA) public data: { totalZec: number, addr: string, orderId: string}
+		@Inject(MAT_DIALOG_DATA) public data: { totalZec: number, addr: string, orderId: string},
-	) {
+		private notifierService : NotifierService ) {
+	
 		console.log("Entra a Constructor")
 		this.address = data.addr;
 		this.total = data.totalZec;
@@ -37,8 +40,8 @@ export class CheckoutComponent implements OnInit{
 			{ 
 		        text: this.codeString,
 				logo: "/assets/zcash.png",
-				width: 220,
+				width: 230,
-				height: 220,
+				height: 230,
 				logoWidth: 60,
 				logoHeight: 60,
 		        correctLevel: QRCode.CorrectLevel.H
@@ -54,4 +57,48 @@ export class CheckoutComponent implements OnInit{
 	close() {
 		this.dialogRef.close(false);
 	}
+
+	copyAddress() {
+		if (!navigator.clipboard) {
+//			alert("Copy functionality not supported");
+			this.notifierService
+			    .showNotification("Copy functionality not supported","Close","error");
+		}
+		try {
+			navigator.clipboard.writeText(this.address);
+		} catch (err) {
+			this.notifierService
+			    .showNotification("Error copying address","Close","error");
+//			console.error("Error", err);
+		}
+	}
+	copyAmount() {
+		if (!navigator.clipboard) {
+//			alert("Copy functionality not supported");
+			this.notifierService
+			    .showNotification("Copy functionality not supported","Close","error");
+		}
+		try {
+			navigator.clipboard.writeText(this.total.toString());
+		} catch (err) {
+			this.notifierService
+			    .showNotification("Error while copying ammount","Close","error");
+//			console.error("Error", err);
+		}
+	}
+
+	copyMemo() {
+		if (!navigator.clipboard) {
+//			alert("Copy functionality not supported");
+			this.notifierService
+			    .showNotification("Copy functionality not supported","Close","error");
+		}
+		try {
+			navigator.clipboard.writeText("ZGo Order::" + this.orderId);
+		} catch (err) {
+			this.notifierService
+			    .showNotification("Error while copying Memo","Close","error");
+//			console.error("Error", err);
+		}
+	}
 }