From 4030f709fcd54779b9d61de17ea424d9423e61fb Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Mon, 26 Apr 2021 13:14:36 +0300 Subject: [PATCH] Add copy to clipboard functionality to addresses. --- src/app/_helpers/clipboard-copy.ts | 54 +++++++++++++++++++ src/app/_helpers/index.ts | 1 + .../account-details.component.html | 9 ++-- .../account-details.component.ts | 10 +++- src/app/pages/accounts/accounts.module.ts | 4 +- .../transaction-details.component.html | 38 ++++++++++--- .../transaction-details.component.ts | 24 +++++++-- .../pages/transactions/transactions.module.ts | 4 +- src/assets/images/checklist.svg | 1 + 9 files changed, 129 insertions(+), 16 deletions(-) create mode 100644 src/app/_helpers/clipboard-copy.ts create mode 100644 src/assets/images/checklist.svg diff --git a/src/app/_helpers/clipboard-copy.ts b/src/app/_helpers/clipboard-copy.ts new file mode 100644 index 0000000..2f99278 --- /dev/null +++ b/src/app/_helpers/clipboard-copy.ts @@ -0,0 +1,54 @@ +function copyToClipboard(text: any): boolean { + // create our hidden div element + const hiddenCopy = document.createElement('div'); + // set the innerHTML of the div + hiddenCopy.innerHTML = text; + // set the position to be absolute and off the screen + hiddenCopy.style.position = 'absolute'; + hiddenCopy.style.left = '-9999px'; + + // check and see if the user had a text selection range + let currentRange; + if (document.getSelection().rangeCount > 0) { + // the user has a text selection range, store it + currentRange = document.getSelection().getRangeAt(0); + // remove the current selection + window.getSelection().removeRange(currentRange); + } else { + // they didn't have anything selected + currentRange = false; + } + + // append the div to the body + document.body.appendChild(hiddenCopy); + // create a selection range + const copyRange = document.createRange(); + // set the copy range to be the hidden div + copyRange.selectNode(hiddenCopy); + // add the copy range + window.getSelection().addRange(copyRange); + + // since not all browsers support this, use a try block + try { + // copy the text + document.execCommand('copy'); + } catch (err) { + window.alert('Your Browser Doesn\'t support this! Error : ' + err); + return false; + } + // remove the selection range (Chrome throws a warning if we don't.) + window.getSelection().removeRange(copyRange); + // remove the hidden div + document.body.removeChild(hiddenCopy); + + // return the old selection range + if (currentRange) { + window.getSelection().addRange(currentRange); + } + + return true; +} + +export { + copyToClipboard +}; diff --git a/src/app/_helpers/index.ts b/src/app/_helpers/index.ts index 0294677..384ff38 100644 --- a/src/app/_helpers/index.ts +++ b/src/app/_helpers/index.ts @@ -6,3 +6,4 @@ export * from '@app/_helpers/http-getter'; export * from '@app/_helpers/global-error-handler'; export * from '@app/_helpers/export-csv'; export * from '@app/_helpers/read-csv'; +export * from '@app/_helpers/clipboard-copy'; diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html index 187ca9d..11a87ea 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -35,7 +35,10 @@ Balance: {{account?.balance | tokenRatio}} SRF Created: {{account?.date_registered | date}} - Address: {{account?.identities.evm['bloxberg:8996']}} + Address: + {{accountAddress}} + Copy +
@@ -176,13 +179,13 @@
-
- diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts index 7530d05..e6d3dd2 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/src/app/pages/accounts/account-details/account-details.component.ts @@ -6,7 +6,8 @@ import {BlockSyncService, LocationService, LoggingService, TokenService, Transac import {ActivatedRoute, Params, Router} from '@angular/router'; import {first} from 'rxjs/operators'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; -import {CustomErrorStateMatcher, exportCsv} from '@app/_helpers'; +import {copyToClipboard, CustomErrorStateMatcher, exportCsv} from '@app/_helpers'; +import {MatSnackBar} from '@angular/material/snack-bar'; @Component({ selector: 'app-account-details', @@ -54,6 +55,7 @@ export class AccountDetailsComponent implements OnInit { private loggingService: LoggingService, private blockSyncService: BlockSyncService, private cdr: ChangeDetectorRef, + private snackBar: MatSnackBar, ) { this.accountInfoForm = this.formBuilder.group({ name: ['', Validators.required], @@ -190,4 +192,10 @@ export class AccountDetailsComponent implements OnInit { downloadCsv(data: any, filename: string): void { exportCsv(data, filename); } + + copyAddress(): void { + if (copyToClipboard(this.accountAddress)) { + this.snackBar.open(this.accountAddress + ' copied successfully!', 'Close', { duration: 3000 }); + } + } } diff --git a/src/app/pages/accounts/accounts.module.ts b/src/app/pages/accounts/accounts.module.ts index 5d36d3d..1428d15 100644 --- a/src/app/pages/accounts/accounts.module.ts +++ b/src/app/pages/accounts/accounts.module.ts @@ -25,6 +25,7 @@ import {MatRippleModule} from '@angular/material/core'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {ReactiveFormsModule} from '@angular/forms'; import { AccountSearchComponent } from './account-search/account-search.component'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; @NgModule({ @@ -55,7 +56,8 @@ import { AccountSearchComponent } from './account-search/account-search.componen MatTabsModule, MatRippleModule, MatProgressSpinnerModule, - ReactiveFormsModule + ReactiveFormsModule, + MatSnackBarModule, ] }) export class AccountsModule { } diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.html b/src/app/pages/transactions/transaction-details/transaction-details.component.html index 038b837..4789857 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.html +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.html @@ -13,12 +13,20 @@