diff --git a/client/package.json b/client/package.json
index 119bc3e..edf6b91 100644
--- a/client/package.json
+++ b/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"
diff --git a/client/src/app/screens/screen-receive/screen-receive.html b/client/src/app/screens/screen-receive/screen-receive.html
index 523b6cc..9b5df88 100644
--- a/client/src/app/screens/screen-receive/screen-receive.html
+++ b/client/src/app/screens/screen-receive/screen-receive.html
@@ -10,7 +10,7 @@
- $
+
-
+
+
+
+
+
+
+
+
-
-
+
diff --git a/client/src/app/screens/screen-receive/screen-receive.ts b/client/src/app/screens/screen-receive/screen-receive.ts
index 71b4a33..6b7b67f 100644
--- a/client/src/app/screens/screen-receive/screen-receive.ts
+++ b/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) {
+ this.modalService.open(content)
}
}
diff --git a/package-lock.json b/package-lock.json
index 83542ec..aa0babb 100644
--- a/package-lock.json
+++ b/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",