Use Helper function to copy to clipboard

chaintope · Oct 28, 2023 · 9187a79 · 9187a79
1 parent d59cacb
commit 9187a79
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 79 deletions.
diff --git a/frontend/src/app/address/address.page.ts b/frontend/src/app/address/address.page.ts
@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { NavController } from '@ionic/angular';
+import { NavController, ToastController } from '@ionic/angular';
 
 import { BackendService } from '../backend.service';
 import { AppConst } from '../app.const';
+import Helper from '../app.helper';
 
 @Component({
   selector: 'app-address',
@@ -34,6 +35,7 @@ export class AddressPage implements OnInit {
   constructor(
     private activatedRoute: ActivatedRoute,
     private navCtrl: NavController,
+    private toastController: ToastController,
     private backendService: BackendService
   ) {}
 
@@ -56,24 +58,7 @@ export class AddressPage implements OnInit {
   }
 
   copyAddress() {
-    const textArea = document.createElement('textarea');
-    textArea.value = this.address;
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    try {
-      document.execCommand('copy');
-      this.copied = true;
-      setTimeout(() => {
-        this.copied = false;
-      }, 800);
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err);
-    }
-
-    document.body.removeChild(textArea);
+    Helper.copy(this.toastController, this.address);
   }
 
   onNextPage() {

diff --git a/frontend/src/app/block-rawdata/block-rawdata.page.html b/frontend/src/app/block-rawdata/block-rawdata.page.html
@@ -12,16 +12,8 @@
       <ion-icon name="copy-outline" color="primary" id="copy-icon"></ion-icon>
       Copy Raw Data
     </ion-button>
-    <b *ngIf="copied" id="copied-text">Copied !</b>
   </div>
   <div class="ion-padding ion-margin" id="copy-content">
     <p id="myInput" class="text-color">{{ blockRawData }}</p>
   </div>
-  <div class="ion-text-center block-md">
-    <ion-button (click)="copyBlockRawData()">
-      <ion-icon name="copy-outline" color="primary" id="copy-icon"></ion-icon>
-      Copy Raw Data </ion-button
-    ><br />
-    <b *ngIf="copied" id="copied-text-md">Copied !</b>
-  </div>
 </ion-content>
diff --git a/frontend/src/app/block-rawdata/block-rawdata.page.spec.ts b/frontend/src/app/block-rawdata/block-rawdata.page.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, NavParams } from '@ionic/angular';
 
 import { BlockRawdataPage } from './block-rawdata.page';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -11,7 +11,8 @@ describe('BlockRawdataPage', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [BlockRawdataPage],
-      imports: [IonicModule.forRoot(), HttpClientTestingModule]
+      imports: [IonicModule.forRoot(), HttpClientTestingModule],
+      providers: [NavParams]
     }).compileComponents();
 
     fixture = TestBed.createComponent(BlockRawdataPage);

diff --git a/frontend/src/app/block-rawdata/block-rawdata.page.ts b/frontend/src/app/block-rawdata/block-rawdata.page.ts
@@ -1,24 +1,25 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { NavParams, ModalController } from '@ionic/angular';
+import { NavParams, ModalController, ToastController } from '@ionic/angular';
 import { HttpClient } from '@angular/common/http';
 
 import { BackendService } from '../backend.service';
+import Helper from '../app.helper';
 
 @Component({
   selector: 'app-block-rawdata',
   templateUrl: './block-rawdata.page.html',
   styleUrls: ['./block-rawdata.page.scss'],
-  providers: [BackendService, NavParams]
+  providers: [BackendService]
 })
 export class BlockRawdataPage implements OnInit {
   @Input() blockHash: string;
   blockRawData = '';
-  copied = false;
 
   constructor(
     private navParams: NavParams,
     private httpClient: HttpClient,
     private modalCtrl: ModalController,
+    private toastController: ToastController,
     private backendService: BackendService
   ) {}
 
@@ -40,24 +41,7 @@ export class BlockRawdataPage implements OnInit {
   }
 
   copyBlockRawData() {
-    const textArea = document.createElement('textarea');
-    textArea.value = this.blockRawData;
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    try {
-      document.execCommand('copy');
-      this.copied = true;
-      setTimeout(() => {
-        this.copied = false;
-      }, 800);
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err);
-    }
-
-    document.body.removeChild(textArea);
+    Helper.copy(this.toastController, this.blockRawData);
   }
 
   dismiss() {

diff --git a/frontend/src/app/transaction-rawdata/transaction-rawdata.page.html b/frontend/src/app/transaction-rawdata/transaction-rawdata.page.html
@@ -12,16 +12,8 @@
       <ion-icon name="copy-outline" color="primary" id="copy-icon"></ion-icon>
       Copy Raw Data
     </ion-button>
-    <b *ngIf="copied" id="copied-text">Copied !</b>
   </div>
   <div class="ion-padding ion-margin" id="copy-content">
     <p id="myInput" class="text-color">{{ txRawData }}</p>
   </div>
-  <div class="ion-text-center block-md">
-    <ion-button (click)="copyTxRawData()">
-      <ion-icon name="copy-outline" color="primary" id="copy-icon"></ion-icon>
-      Copy Raw Data </ion-button
-    ><br />
-    <b *ngIf="copied" id="copied-text-md">Copied !</b>
-  </div>
 </ion-content>
diff --git a/frontend/src/app/transaction-rawdata/transaction-rawdata.page.ts b/frontend/src/app/transaction-rawdata/transaction-rawdata.page.ts
@@ -1,8 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { NavParams, ModalController } from '@ionic/angular';
+import { NavParams, ModalController, ToastController } from '@ionic/angular';
 import { HttpClient } from '@angular/common/http';
 
 import { BackendService } from '../backend.service';
+import Helper from '../app.helper';
 
 @Component({
   selector: 'app-transaction-rawdata',
@@ -13,12 +14,12 @@ import { BackendService } from '../backend.service';
 export class TransactionRawdataPage implements OnInit {
   @Input() txid: string;
   txRawData = '';
-  copied = false;
 
   constructor(
     private navParams: NavParams,
     private httpClient: HttpClient,
     private modalCtrl: ModalController,
+    private toastController: ToastController,
     private backendService: BackendService
   ) {}
 
@@ -39,25 +40,8 @@ export class TransactionRawdataPage implements OnInit {
     );
   }
 
-  copyTxRawData() {
-    const textArea = document.createElement('textarea');
-    textArea.value = this.txRawData;
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    try {
-      document.execCommand('copy');
-      this.copied = true;
-      setTimeout(() => {
-        this.copied = false;
-      }, 800);
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err);
-    }
-
-    document.body.removeChild(textArea);
+  async copyTxRawData() {
+    Helper.copy(this.toastController, this.txRawData);
   }
 
   dismiss() {