Merge pull request #580 from keerifox/send-page-nano-uri

Add nano URI support to the Send page
Nault · Aug 14, 2023 · c5e1fff · c5e1fff
2 parents 92401e3 + 4d5ffdb
commit c5e1fff
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/src/app/components/send/send.component.html b/src/app/components/send/send.component.html
@@ -32,7 +32,7 @@ <h2 class="uk-heading-divider">{{ (sendDestinationType === 'own-address') ? 'Tra
                 <div class="uk-form-controls">
                   <div class="form-input-destination uk-inline uk-width-1-1">
                     <a class="hide-on-small-viewports uk-form-icon uk-form-icon-flip" uk-icon="icon: camera" (click)="openQR('account1','account')" uk-tooltip title="Scan from QR code"></a>
-                    <input (blur)="validateDestination()" (input)="searchAddressBook()" (focus)="searchAddressBook()" [(ngModel)]="toAccountID" [ngClass]="{ 'uk-form-success': toAccountStatus === 2, 'uk-form-danger': toAccountStatus === 0 }" class="uk-input" id="form-horizontal-text2" type="text" placeholder="Address to send to" autocomplete="off">
+                    <input (blur)="validateDestination()" (input)="onDestinationAddressInput()" (focus)="searchAddressBook()" [(ngModel)]="toAccountID" [ngClass]="{ 'uk-form-success': toAccountStatus === 2, 'uk-form-danger': toAccountStatus === 0 }" class="uk-input" id="form-horizontal-text2" type="text" placeholder="Address to send to / nano:.." autocomplete="off">
 
                     <div *ngIf="(addressBookResults$ | async).length" [hidden]="!showAddressBook" class="nlt-dropdown uk-animation-slide-down-small uk-width-1-1 uk-card uk-card-default uk-card-body uk-position-absolute" style="z-index: 15000">
                       <ul class="uk-nav uk-nav-default">

diff --git a/src/app/components/send/send.component.ts b/src/app/components/send/send.component.ts
@@ -14,6 +14,7 @@ import {NanoBlockService} from '../../services/nano-block.service';
 import { QrModalService } from '../../services/qr-modal.service';
 import { environment } from 'environments/environment';
 import { TranslocoService } from '@ngneat/transloco';
+import * as nanocurrency from 'nanocurrency';
 
 const nacl = window['nacl'];
 
@@ -58,7 +59,7 @@ export class SendComponent implements OnInit {
   selAccountInit = false;
 
   constructor(
-    private router: ActivatedRoute,
+    private route: ActivatedRoute,
     private walletService: WalletService,
     private addressBookService: AddressBookService,
     private notificationService: NotificationService,
@@ -72,7 +73,7 @@ export class SendComponent implements OnInit {
     private translocoService: TranslocoService) { }
 
   async ngOnInit() {
-    const params = this.router.snapshot.queryParams;
+    const params = this.route.snapshot.queryParams;
 
     this.updateQueries(params);
 
@@ -99,7 +100,7 @@ export class SendComponent implements OnInit {
     });
 
     // Update the account if query params changes. For example donation button while active on this page
-    this.router.queryParams.subscribe(queries => {
+    this.route.queryParams.subscribe(queries => {
       this.updateQueries(queries);
     });
 
@@ -192,6 +193,44 @@ export class SendComponent implements OnInit {
     this.amount = nanoAmount.toNumber();
   }
 
+  onDestinationAddressInput() {
+    this.searchAddressBook();
+
+    const destinationAddress = this.toAccountID || '';
+
+    const nanoURIScheme = /^nano:.+$/g;
+    const isNanoURI = nanoURIScheme.test(destinationAddress);
+
+    if (isNanoURI === true) {
+      const url = new URL(destinationAddress);
+
+      if (this.util.account.isValidAccount(url.pathname)) {
+        const amountAsRaw = url.searchParams.get('amount');
+
+        const amountAsXNO = (
+            amountAsRaw
+          ? nanocurrency.convert(
+              amountAsRaw, {
+                from: nanocurrency.Unit.raw,
+                to: nanocurrency.Unit.NANO
+              }
+            ).toString()
+          : null
+        );
+
+        setTimeout(
+          () => {
+            this.updateQueries({
+              to: url.pathname,
+              amount: amountAsXNO,
+            });
+          },
+          10
+        );
+      }
+    }
+  }
+
   searchAddressBook() {
     this.showAddressBook = true;
     const search = this.toAccountID || '';