feat: receive screen qr code

client/package.json

@@ -21,6 +21,7 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
+    "ng-qrcode": "^21.0.0",
     "qrcode": "^1.5.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

client/src/app/screens/screen-receive/screen-receive.html

@@ -10,7 +10,7 @@
           <div class="mb-4">
             <label class="form-label h5">Amount to Receive</label>
             <div class="input-group input-group-lg mb-3">
-              <span class="input-group-text">$</span>
+              <span class="input-group-text"><i class="bi bi-wallet2"></i></span>
               <input
                 type="number"
                 class="form-control text-center fs-2"
@@ -36,18 +36,28 @@
             </div>
           </div>
 
-          <!-- Share Buttons -->
+          <!-- Share Button -->
+      
+        <ng-template #content let-modal>
+            <div class="modal-header">
+                <h4 class="modal-title" id="modal-basic-title">Pay {{ amount}} to {{ user }}</h4>
+                <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
+            </div>
+            <div class="modal-body text-center">
+                      <qr-code [value]="shareableLink" 
+                             size="300" 
+                             errorCorrectionLevel="M" />
+            </div>
+        </ng-template>
           <div class="d-grid gap-2">
-            <button class="btn btn-primary btn-lg" (click)="shareViaEmail()">
-              <i class="bi bi-envelope me-2"></i> Share via Email
-            </button>
-            <button class="btn btn-outline-primary btn-lg" (click)="shareViaLink()">
-              <i class="bi bi-link me-2"></i> Copy Link
+            <button class="btn btn-primary btn-lg" (click)="open(content)">
+              <i class="bi bi-qr-code-scan me-2"></i> Show QR Code
             </button>
           </div>
         </div>
       </div>
     </div>
   </div>
+
 </div>
 

client/src/app/screens/screen-receive/screen-receive.ts

@@ -1,28 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, inject, TemplateRef } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { QrCodeComponent } from 'ng-qrcode';
 
 @Component({
   selector: 'app-screen-receive',
-  imports: [FormsModule],
+  imports: [FormsModule, QrCodeComponent],
   templateUrl: './screen-receive.html',
   styleUrl: './screen-receive.less',
 })
 export class ScreenReceive {
-  me = 'DemoUser';
+  private modalService = inject(NgbModal);
+
+  user = 'DemoUser';
   amount: number = 0;
-  shareableLink: string = 'https://yourapp.com/receive?amount=0';
+  get shareableLink(): string {
+    const currentDomain = window.location.origin;
+    return `${currentDomain}/send/${this.user}?amount=${this.amount}`;
+  }
 
   copyLink() {
     navigator.clipboard.writeText(this.shareableLink);
-    alert('Link copied to clipboard!');
   }
-
-  shareViaEmail() {
-    const email = `mailto:?subject=Request Money&body=Please send me $${this.amount} via ${this.shareableLink}`;
-    window.location.href = email;
-  }
-
-  shareViaLink() {
-    this.copyLink();
+  open(content: TemplateRef<any>) {
+    this.modalService.open(content)
   }
 }

package-lock.json

@@ -34,6 +34,7 @@
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.8",
         "bootstrap-icons": "^1.13.1",
+        "ng-qrcode": "^21.0.0",
         "qrcode": "^1.5.4",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
@@ -7925,6 +7926,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ng-qrcode": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/ng-qrcode/-/ng-qrcode-21.0.0.tgz",
+      "integrity": "sha512-dtjzHsJXe/StMixj6FckeOw5hnjvAfr0VRSj55uDRyBJhdBMKtE9lvfPSYYOrMO4hWs6fInr1/XhFQyR2dVllA==",
+      "license": "MIT",
+      "dependencies": {
+        "qrcode": "^1.5.3",
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=21 <22",
+        "@angular/core": ">=21 <22"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",