[accelerator] accelerate with lightning

2024-06-26 18:35:36 +09:00
parent f1572f0038
commit 66a88b8422
10 changed files with 453 additions and 48 deletions
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
@@ -58,12 +58,24 @@
        </div>
      </div>
    </form>
-  }
-    
-  @else if (step === 'checkout') {
-    <!-- Show checkout page -->
+  
+  } @else if (step === 'paymentMethod') {
    <div class="row mb-md-1 text-center">
      <div class="col-sm">
+        <h1 style="font-size: larger;">Select your payment method</h1>
+      </div>
+    </div>
+    <div class="pt-2 d-flex justify-content-around">
+      @if (cashappEnabled) {
+        <img class="paymentMethod" src="/resources/cash-app.svg" height=55 (click)="selectPaymentMethod('cashapp')">
+      }
+      <img class="paymentMethod" src="/resources/btcpay.svg" height=55 (click)="selectPaymentMethod('btcpay')">
+    </div>
+
+  } @else if (step === 'checkout') {
+    <!-- Show checkout page -->
+    <div class="row mb-md-1 text-center">
+      <div class="col-sm" id="confirm-payment-title">
        <h1 style="font-size: larger;">Confirm your payment</h1>
      </div>
    </div>
@@ -76,36 +88,40 @@
      </div>
    </div>

-    @if (!loadingCashapp) {
+    @if (paymentMethod === 'cashapp') {
+      @if (!loadingCashapp) {
+        <div class="row text-center mt-1">
+          <div class="col-sm">
+            <div class="form-group w-100">
+              <span><u><strong>Total additional cost</strong></u><br>
+                <span style="font-size: 16px" class="d-block mt-2">
+                  Pay
+                  <strong><app-fiat [value]="cost"></app-fiat></strong>
+                  with
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      }
+
      <div class="row text-center mt-1">
        <div class="col-sm">
          <div class="form-group w-100">
-            <span><u><strong>Total additional cost</strong></u><br>
-              <span style="font-size: 16px" class="d-block mt-2">
-                Pay
-                <strong><app-fiat [value]="cost"></app-fiat></strong>
-                with
-              </span>
-            </span>
+            <div id="cash-app-pay" class="d-inline-block" [style]="loadingCashapp ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
+            @if (loadingCashapp) {
+            <div display="d-flex flex-row justify-content-center">
+              <span>Loading payment method...</span>
+              <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+            </div>
+            }
          </div>
        </div>
      </div>
+    } @else if (paymentMethod === 'btcpay' && invoice?.btcpayInvoiceId) {
+      <app-bitcoin-invoice [invoiceId]="invoice.btcpayInvoiceId" (completed)="closeModal(2000)"></app-bitcoin-invoice>
    }

-    <div class="row text-center mt-1">
-      <div class="col-sm">
-        <div class="form-group w-100">
-          <div id="cash-app-pay" class="d-inline-block" [style]="loadingCashapp ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
-          @if (loadingCashapp) {
-          <div display="d-flex flex-row justify-content-center">
-            <span>Loading payment method...</span>
-            <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
-          </div>
-          }
-        </div>
-      </div>
-    </div>
-
    <hr>
    <div class="row mt-2 mb-2 text-center">
      <div class="col-sm d-flex flex-column">
@@ -118,7 +134,7 @@
  @else if (step === 'processing') {
    <div class="row mb-1 text-center">
      <div class="col-sm">
-        <h1 style="font-size: larger;">Confirm your payment</h1>
+        <h1 style="font-size: larger;">Confirming your payment</h1>
      </div>
    </div>

--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
@@ -7,3 +7,11 @@
 .estimating {
  color: var(--green)
 }
+
+.paymentMethod {
+  padding: 10px;
+  background-color: var(--secondary);
+  border-radius: 15px;
+  border: 2px solid var(--bg);
+  cursor: pointer;
+}
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
@@ -16,12 +16,16 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
  @Input() eta: number | null = null;
  @Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad';
  @Input() scrollEvent: boolean;
+  @Input() cashappEnabled: boolean;
  @Output() close = new EventEmitter<null>();

  calculating = true;
  choosenOption: 'wait' | 'accelerate' = 'wait';
  error = '';

+  step: 'paymentMethod' | 'cta' | 'checkout' | 'processing' = 'cta';
+  paymentMethod: 'cashapp' | 'btcpay';
+
  // accelerator stuff
  square: { appId: string, locationId: string};
  accelerationUUID: string;
@@ -38,7 +42,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
  cashAppPay: any;
  cashAppSubscription: Subscription;
  conversionsSubscription: Subscription;
-  step: 'cta' | 'checkout' | 'processing' = 'cta';
+  
+  // btcpay
+  loadingBtcpayInvoice = false;
+  invoice = undefined;

  constructor(
    private servicesApiService: ServicesApiServices,
@@ -77,19 +84,19 @@ export class AccelerateCheckout implements OnInit, OnDestroy {

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.scrollEvent) {
-      this.scrollToPreview('acceleratePreviewAnchor', 'start');
+      this.scrollToElement('acceleratePreviewAnchor', 'start');
    }
  }

  /**
  * Scroll to element id with or without setTimeout
  */
-  scrollToPreviewWithTimeout(id: string, position: ScrollLogicalPosition) {
+  scrollToElementWithTimeout(id: string, position: ScrollLogicalPosition, timeout: number = 1000) {
    setTimeout(() => {
-      this.scrollToPreview(id, position);
-    }, 1000);
+      this.scrollToElement(id, position);
+    }, timeout);
  }
-  scrollToPreview(id: string, position: ScrollLogicalPosition) {
+  scrollToElement(id: string, position: ScrollLogicalPosition) {
    const acceleratePreviewAnchor = document.getElementById(id);
    if (acceleratePreviewAnchor) {
      this.cd.markForCheck();
@@ -111,7 +118,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    this.calculating = true;
    this.estimateSubscription = this.servicesApiService.estimate$(this.txid).pipe(
      tap((response) => {
-        this.calculating = false;
        if (response.status === 204) {
          this.error = `cannot_accelerate_tx`;
        } else {
@@ -126,6 +132,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
          this.maxBidBoost = minExtraBoost * DEFAULT_BID_RATIO;
          this.cost = this.maxBidBoost + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
          this.etaInfo$ = this.etaService.getProjectedEtaObservable(this.estimate);
+          this.calculating = false;
+          this.cd.markForCheck();
        }
      }),

@@ -265,19 +273,48 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    );
  }

+  /**
+   * BTCPay
+   */
+  async requestBTCPayInvoice() {
+    this.servicesApiService.generateBTCPayAcceleratorInvoice$(this.txid).subscribe({
+      next: (response) => {
+        this.invoice = response;
+        this.cd.markForCheck();
+        this.scrollToElementWithTimeout('acceleratePreviewAnchor', 'start', 500);
+      },
+      error: (response) => {
+        console.log(response);
+      }
+    });
+  }
+
  /**
   * UI events
   */
  enableCheckoutPage() {
+    this.step = 'paymentMethod';
+  }
+  selectPaymentMethod(paymentMethod: 'cashapp' | 'btcpay') {
    this.step = 'checkout';
-    this.loadingCashapp = true;
-    this.insertSquare();
-    this.setupSquare();
+    this.paymentMethod = paymentMethod;
+    if (paymentMethod === 'cashapp') {
+      this.loadingCashapp = true;
+      this.insertSquare();
+      this.setupSquare();
+    } else if (paymentMethod === 'btcpay') {
+      this.loadingBtcpayInvoice = true;
+      this.requestBTCPayInvoice();
+    }
  }
  selectedOptionChanged(event) {
    this.choosenOption = event.target.id;
  }
-  closeModal(): void {
-    this.close.emit();
+  closeModal(timeout: number = 0): void {
+    setTimeout(() => {
+      this.step = 'processing';
+      this.cd.markForCheck();
+      this.close.emit();
+    }, timeout);
  }
 }