Custom BTCPay donation integration

fixes #122

frontend/src/app/components/about/about.component.html

@@ -12,7 +12,49 @@
 
     <br><br>
 
-    <iframe src='https://btcpay.wiz.biz/apps/4XrJdGCE2a8FMEkRd52YwoiwzJqP/pos' style='height: 600px; width: 400px; border: 0;'></iframe>
+    <h2>❤️ Sponsors</h2>
+
+    <div *ngFor="let sponsor of sponsors$ | async; let i = index" (click)="openTwitterProfile(sponsor.handle)" class="profile_photo d-inline-block" [class.ml-3]="i > 0" [ngStyle]="{'background-image': 'url(' + sponsor.imageUrl + ')'}" [title]="sponsor.handle"></div>
+    <br><br>
+    
+    <button type="button" class="btn btn-primary" (click)="donationStatus = 2" [hidden]="donationStatus !== 1">Become a sponsor</button>
+
+    <div style="max-width: 300px;" class="mx-auto" [hidden]="donationStatus !== 2">
+      <form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
+        <div class="input-group mb-2">
+          <div class="input-group-prepend" style="width: 42px;">
+            <span class="input-group-text">₿</span>
+          </div>
+          <input formControlName="amount" class="form-control" type="number" min="0.0001" step="1E-03">
+        </div>
+        <div class="input-group mb-4">
+          <div class="input-group-prepend" style="width: 42px;">
+            <span class="input-group-text">@</span>
+          </div>
+          <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
+        </div>
+        <div class="input-group">
+          <button class="btn btn-primary mx-auto" type="submit">Request invoice</button>
+        </div>
+      </form>
+    </div>
+
+    <div *ngIf="donationStatus === 3" class="text-center">
+      <div class="qr-wrapper mt-4 mb-2">
+        <app-qrcode [data]="donationObj.address + '?amount=' + donationObj.amount"></app-qrcode>
+      </div>
+      <br>
+      <p style="font-size: 10px;">{{ donationObj.address }}</p>
+      <p>Waiting for transaction... </p>
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <div *ngIf="donationStatus === 4" class="text-center">
+      <h2>Donation confirmed!<br>Thank you!</h2>
+      <p>If you specified a Twitter handle, the profile photo should now be visible on this page when you reload.</p>
+    </div>
+
+    <br><br>
 
     <h2>GitHub</h2>
 

frontend/src/app/components/about/about.component.scss

@@ -14,3 +14,17 @@ tr {
 .nowrap {
   white-space: nowrap;
 }
+
+.qr-wrapper {
+  background-color: #FFF;
+  padding: 10px;
+  display: inline-block;
+}
+
+.profile_photo {
+  width: 80px;
+  height: 80px;
+  background-size: 100%, 100%;
+  border-radius: 50%;
+  cursor: pointer;
+}

frontend/src/app/components/about/about.component.ts

@@ -3,22 +3,29 @@ import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
 import { Observable } from 'rxjs';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ApiService } from 'src/app/services/api.service';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AboutComponent implements OnInit {
   active = 1;
   hostname = document.location.hostname;
   gitCommit$: Observable<string>;
+  donationForm: FormGroup;
+  donationStatus = 1;
+  sponsors$: Observable<any>;
+  donationObj: any;
 
   constructor(
     private websocketService: WebsocketService,
     private seoService: SeoService,
     private stateService: StateService,
+    private formBuilder: FormBuilder,
+    private apiService: ApiService,
   ) { }
 
   ngOnInit() {
@@ -31,5 +38,32 @@ export class AboutComponent implements OnInit {
     if (document.location.port !== '') {
       this.hostname = this.hostname + ':' + document.location.port;
     }
+
+    this.donationForm = this.formBuilder.group({
+      amount: [0.001],
+      handle: [''],
+    });
+
+    this.sponsors$ = this.apiService.getDonation$();
+    this.stateService.donationConfirmed$.subscribe(() => this.donationStatus = 4);
+  }
+
+  submitDonation() {
+    if (this.donationForm.invalid) {
+      return;
+    }
+    this.apiService.requestDonation$(
+      this.donationForm.get('amount').value,
+      this.donationForm.get('handle').value
+    )
+    .subscribe((response) => {
+      this.websocketService.trackDonation(response.id);
+      this.donationObj = response;
+      this.donationStatus = 3;
+    });
+  }
+
+  openTwitterProfile(handle: string) {
+    window.open('https://twitter.com/' + handle, '_blank');
   }
 }