Add L-BTC sponsor support.

frontend/src/app/app.module.ts

@@ -43,7 +43,8 @@ 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 { faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle, faLink, faList, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle,
+  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, 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';
 import { StorageService } from './services/storage.service';
@@ -117,5 +118,6 @@ export class AppModule {
     library.addIcons(faSearch);
     library.addIcons(faLink);
     library.addIcons(faBolt);
+    library.addIcons(faTint);
   }
 }

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

@@ -100,16 +100,19 @@
           <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">
+          <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.BTC_LightningLike">
             <input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
           </label>
+          <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.LBTC">
+            <input ngbButton type="radio" value="lbtc"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></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>
+            <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
           </a>
         </div>
         <br>
@@ -125,7 +128,7 @@
       <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>
+            <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
           </a>
         </div>
         <br>
@@ -148,6 +151,22 @@
         <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
       </ng-template>
 
+      <ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
+        <div class="qr-wrapper mt-2 mb-2">
+          <a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
+            <app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></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.LBTC">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.LBTC"></app-clipboard></button>
+          </div>
+        </div>
+        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+      </ng-template>
+
       <p>Waiting for transaction... </p>
       <div class="spinner-border text-light"></div>
     </div>

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

@@ -1 +1,4 @@
+<div class="holder" [ngStyle]="{'width': size, 'height': size}">
+  <img *ngIf="imageUrl" [src]="imageUrl">
   <canvas #canvas></canvas>
+</div>

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

@@ -0,0 +1,11 @@
+img {
+  position: absolute;
+  top: 67px;
+  left: 67px;
+  width: 65px;
+  height: 65px;
+}
+
+.holder {
+  position: relative;
+}

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

@@ -9,6 +9,7 @@ import * as QRCode from 'qrcode/build/qrcode.js';
 export class QrcodeComponent implements AfterViewInit {
   @Input() data: string;
   @Input() size = 125;
+  @Input() imageUrl: string;
   @ViewChild('canvas') canvas: ElementRef;
 
   qrcodeObject: any;