[accelerator] accelerate with lightning
This commit is contained in:
nymkappa
Mononaut
@@ -0,0 +1,89 @@
|
||||
<div class="wrapper">
|
||||
|
||||
<span *ngIf="paymentStatus === 3" class="valid-feedback d-block mt-5">
|
||||
Payment successful. You can close this page.
|
||||
</span>
|
||||
|
||||
<span *ngIf="paymentStatus === 4" class="valid-feedback d-block mt-5">
|
||||
A transaction <a [href]="'/tx/' + invoice.cryptoInfo[0].payments[0].id.split('-')[0]">has been detected in the mempool</a> fully paying for this invoice. Waiting for on-chain confirmation.
|
||||
</span>
|
||||
|
||||
<div *ngIf="paymentStatus === 2">
|
||||
|
||||
<form [formGroup]="paymentForm">
|
||||
|
||||
<div class="form-group">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<!-- <label *ngIf="invoice.addresses.BTC" class="btn btn-primary" [ngClass]="{'active': paymentForm.get('method')?.value === 'chain'}">
|
||||
<input type="radio" value="chain" formControlName="method"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
|
||||
</label> -->
|
||||
<label *ngIf="invoice.addresses.BTC_LightningLike" class="btn btn-primary" [ngClass]="{'active': paymentForm.get('method')?.value === 'lightning'}">
|
||||
<input type="radio" value="lightning" formControlName="method"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
|
||||
</label>
|
||||
<!-- <label *ngIf="invoice.addresses.LBTC" class="btn btn-primary" [ngClass]="{'active': paymentForm.get('method')?.value === 'lbtc'}">
|
||||
<input type="radio" value="lbtc" formControlName="method"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></fa-icon>
|
||||
</label> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method')?.value === 'chain' && invoice">
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<a [href]="bypassSecurityTrustUrl('bitcoin:' + invoice.addresses.BTC + '?amount=' + invoice.amount)" target="_blank">
|
||||
<app-qrcode imageUrl="/resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + invoice.addresses.BTC + '?amount=' + invoice.amount"></app-qrcode>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control input-dark" readonly [value]="invoice.addresses.BTC">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="invoice.addresses.BTC"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ invoice.amount }} <span class="symbol">BTC</span></p>
|
||||
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method')?.value === 'lightning' && invoice">
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<a [href]="bypassSecurityTrustUrl('lightning:' + invoice.addresses.BTC_LightningLike)" target="_blank">
|
||||
<app-qrcode imageUrl="/resources/bitcoin-logo.png" [size]="200" [data]="invoice.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control input-dark" readonly [value]="invoice.addresses.BTC_LightningLike">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="invoice.addresses.BTC_LightningLike"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>{{ invoice.amount * 100_000_000 }} <span class="symbol">sats</span></p>
|
||||
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="invoice && (paymentForm.get('method')?.value === 'lbtc' || paymentForm.get('method')?.value === 'tlbtc')">
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<a [href]="bypassSecurityTrustUrl('liquidnetwork:' + invoice.addresses.LBTC + '?amount=' + invoice.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
|
||||
<app-qrcode imageUrl="/resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + invoice.addresses.LBTC + '?amount=' + invoice.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control input-dark" readonly [value]="invoice.addresses.LBTC" />
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="invoice.addresses.LBTC"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ invoice.amount }} <span class="symbol">BTC</span></p>
|
||||
|
||||
</ng-template>
|
||||
|
||||
<p>Waiting for transaction... </p>
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,149 @@
|
||||
.form-panel {
|
||||
background-color: #292b45;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.sponsor-page {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-wrapper {
|
||||
background-color: #FFF;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
padding-bottom: 5px;
|
||||
margin: 20px auto 0px;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 240px;
|
||||
height: 220px;
|
||||
background-color: var(--bg);
|
||||
border: 2px solid var(--bg);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: 100ms all;
|
||||
margin: 30px 30px 20px 30px;
|
||||
@media(min-width: 476px) {
|
||||
margin: 30px 100px 20px 100px;
|
||||
}
|
||||
@media(min-width: 851px) {
|
||||
margin: 60px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
&.bigger {
|
||||
height: 220px;
|
||||
width: 240px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #5058926b;
|
||||
border: 2px solid #505892;
|
||||
transform: scale(1.1) translateY(-10px);
|
||||
margin-top: 70px;
|
||||
|
||||
.card-header {
|
||||
background-color: #505892;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donation-form {
|
||||
max-width: 280px;
|
||||
margin: auto;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #171929;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.middle-card {
|
||||
width: 280px;
|
||||
height: 260px;
|
||||
margin-top: 40px;
|
||||
&:hover {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.shiny-border {
|
||||
background-color: #5058926b;
|
||||
border: 2px solid #505892;
|
||||
transform: scale(1.1) translateY(-10px);
|
||||
margin-top: 70px;
|
||||
box-shadow: 0px 0px 100px #9858ff52;
|
||||
.card-header {
|
||||
background-color: #505892;
|
||||
}
|
||||
|
||||
&.middle-card {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.donation-confirmed {
|
||||
h2 {
|
||||
margin-top: 50px;
|
||||
span {
|
||||
display: block;
|
||||
&:last-child {
|
||||
color: #9858ff;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-details {
|
||||
margin-top: 50px;
|
||||
span {
|
||||
color: #d81b60;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-dark {
|
||||
background-color: var(--bg);
|
||||
border-color: var(--active-bg);
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Subscription, timer } from 'rxjs';
|
||||
import { retry, switchMap, tap } from 'rxjs/operators';
|
||||
import { ServicesApiServices } from '../../services/services-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bitcoin-invoice',
|
||||
templateUrl: './bitcoin-invoice.component.html',
|
||||
styleUrls: ['./bitcoin-invoice.component.scss']
|
||||
})
|
||||
export class BitcoinInvoiceComponent implements OnInit, OnDestroy {
|
||||
@Input() invoiceId: string;
|
||||
@Input() redirect = true;
|
||||
@Output() completed = new EventEmitter();
|
||||
|
||||
paymentForm: FormGroup;
|
||||
requestSubscription: Subscription | undefined;
|
||||
paymentStatusSubscription: Subscription | undefined;
|
||||
invoice: any;
|
||||
paymentStatus = 1; // 1 - Waiting for invoice | 2 - Pending payment | 3 - Payment completed
|
||||
paramMapSubscription: Subscription | undefined;
|
||||
invoiceSubscription: Subscription | undefined;
|
||||
invoiceTimeout; // Wait for angular to load all the things before making a request
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private apiService: ServicesApiServices,
|
||||
private sanitizer: DomSanitizer,
|
||||
private activatedRoute: ActivatedRoute
|
||||
) { }
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.requestSubscription) {
|
||||
this.requestSubscription.unsubscribe();
|
||||
}
|
||||
if (this.paramMapSubscription) {
|
||||
this.paramMapSubscription.unsubscribe();
|
||||
}
|
||||
if (this.invoiceSubscription) {
|
||||
this.invoiceSubscription.unsubscribe();
|
||||
}
|
||||
if (this.paymentStatusSubscription) {
|
||||
this.paymentStatusSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.paymentForm = this.formBuilder.group({
|
||||
'method': 'lightning'
|
||||
});
|
||||
|
||||
/**
|
||||
* If the invoice is passed in the url, fetch it and display btcpay payment
|
||||
* Otherwise get a new invoice
|
||||
*/
|
||||
this.paramMapSubscription = this.activatedRoute.paramMap
|
||||
.pipe(
|
||||
tap((paramMap) => {
|
||||
const invoiceId = paramMap.get('invoiceId') ?? this.invoiceId;
|
||||
if (invoiceId) {
|
||||
this.paymentStatusSubscription = this.apiService.retreiveInvoice$(invoiceId).pipe(
|
||||
tap((invoice: any) => {
|
||||
this.invoice = invoice;
|
||||
this.invoice.amount = invoice.btcDue ?? (invoice.cryptoInfo.length ? parseFloat(invoice.cryptoInfo[0].totalDue) : 0) ?? 0;
|
||||
|
||||
if (this.invoice.amount > 0) {
|
||||
this.paymentStatus = 2;
|
||||
} else {
|
||||
this.paymentStatus = 4;
|
||||
}
|
||||
}),
|
||||
switchMap(() => this.apiService.getPaymentStatus$(this.invoice.id)
|
||||
.pipe(
|
||||
retry({ delay: () => timer(2000)})
|
||||
)
|
||||
),
|
||||
).subscribe({
|
||||
next: ((result) => {
|
||||
this.paymentStatus = 3;
|
||||
this.completed.emit();
|
||||
}),
|
||||
});
|
||||
}
|
||||
})
|
||||
).subscribe();
|
||||
}
|
||||
|
||||
bypassSecurityTrustUrl(text: string): SafeUrl {
|
||||
return this.sanitizer.bypassSecurityTrustUrl(text);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user