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",