Sponsor Lightning support.

backend/src/api/donations.ts

@@ -34,7 +34,7 @@ class Donations {
     this.notifyDonationStatusCallback = fn;
   }
 
-  createRequest(amount: number, orderId: string): Promise<any> {
+  $createRequest(amount: number, orderId: string): Promise<any> {
     logger.notice('New invoice request. Handle: ' + orderId + ' Amount: ' + amount + ' BTC');
 
     const postData = {
@@ -55,7 +55,7 @@ class Donations {
         const formattedBody = {
           id: body.data.id,
           amount: parseFloat(body.data.btcPrice),
-          address: body.data.bitcoinAddress,
+          addresses: body.data.addresses,
         };
         resolve(formattedBody);
       });

backend/src/routes.ts

@@ -136,7 +136,7 @@ class Routes {
     }
 
     try {
-      const result = await donations.createRequest(p.amount, p.orderId);
+      const result = await donations.$createRequest(p.amount, p.orderId);
       res.json(result);
     } catch (e) {
       res.status(500).send(e.message);

frontend/src/app/app.module.ts

@@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faChartArea, faCogs, faCubes, faDatabase, faInfoCircle, faList, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle, faLink, faList, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 
@@ -113,5 +113,7 @@ export class AppModule {
     library.addIcons(faTachometerAlt);
     library.addIcons(faDatabase);
     library.addIcons(faSearch);
+    library.addIcons(faLink);
+    library.addIcons(faBolt);
   }
 }

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

@@ -92,14 +92,59 @@
     </ng-template>
 
     <div *ngIf="donationStatus === 3" class="text-center">
-      <div class="qr-wrapper mt-2 mb-2">
-        <a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.address + '?amount=' + donationObj.amount)" target="_blank">
-          <app-qrcode [data]="'bitcoin:' + donationObj.address + '?amount=' + donationObj.amount"></app-qrcode>
-        </a>
-      </div>
-      <br>
-      <p style="font-size: 10px;">{{ donationObj.address }}</p>
-      <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+
+      <form [formGroup]="paymentForm">
+        <div class="btn-group btn-group-toggle mb-2" ngbRadioGroup formControlName="method">
+          <label ngbButtonLabel class="btn-primary">
+            <input ngbButton type="radio" value="chain"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
+          </label>
+          <label ngbButtonLabel class="btn-primary">
+            <input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
+          </label>
+        </div>
+      </form>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
+        <div class="qr-wrapper mt-2 mb-2">
+          <a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
+            <app-qrcode [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
+          </a>
+        </div>
+        <br>
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.BTC"></app-clipboard></button>
+          </div>
+        </div>
+        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+      </ng-template>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
+        <div class="qr-wrapper mt-2 mb-2">
+          <a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
+            <app-qrcode [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
+          </a>
+        </div>
+        <br>
+
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC_LightningLike">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="donationObj.addresses.BTC_LightningLike"></app-clipboard></button>
+          </div>
+        </div>
+
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly value="02837c62c092fbde1fed68774700ef0c0eeec6a370d64d64fd43a0d43798192687@103.99.170.180:9735">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="'02837c62c092fbde1fed68774700ef0c0eeec6a370d64d64fd43a0d43798192687@103.99.170.180:9735'"></app-clipboard></button>
+          </div>
+        </div>
+
+        <p style="font-size: 10px;"></p>
+        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+      </ng-template>
 
       <p>Waiting for transaction... </p>
       <div class="spinner-border text-light"></div>

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

@@ -2,6 +2,7 @@
   background-color: #FFF;
   padding: 10px;
   display: inline-block;
+  padding-bottom: 5px;
 }
 
 .profile_photo {
@@ -22,3 +23,7 @@
 .text-small {
   font-size: 12px;
 }
+
+.info-group {
+  max-width: 400px;
+}

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

@@ -17,6 +17,7 @@ import { map } from 'rxjs/operators';
 export class AboutComponent implements OnInit {
   gitCommit$: Observable<string>;
   donationForm: FormGroup;
+  paymentForm: FormGroup;
   donationStatus = 1;
   sponsors$: Observable<any>;
   donationObj: any;
@@ -42,6 +43,10 @@ export class AboutComponent implements OnInit {
       handle: [''],
     });
 
+    this.paymentForm = this.formBuilder.group({
+      'method': 'chain'
+    });
+
     this.apiService.getDonation$()
       .subscribe((sponsors) => {
         this.sponsors = sponsors;

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

@@ -8,6 +8,7 @@ import * as QRCode from 'qrcode/build/qrcode.js';
 })
 export class QrcodeComponent implements AfterViewInit {
   @Input() data: string;
+  @Input() size = 125;
   @ViewChild('canvas') canvas: ElementRef;
 
   qrcodeObject: any;
@@ -22,8 +23,8 @@ export class QrcodeComponent implements AfterViewInit {
         dark: '#000',
         light: '#fff'
       },
-      width: 125,
-      height: 125,
+      width: this.size,
+      height: this.size,
     };
 
     if (!this.data) {