diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html index d38ef226c..de6c71947 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -365,9 +365,9 @@ -
+
-

Payment to mempool.space for acceleration of txid {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}

+ Payment to mempool.space for acceleration of txid {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay)) {
@@ -386,9 +386,12 @@

Pay {{ ((invoice.btcDue * 100_000_000) || cost) | number }} sats

} @else if (btcpayInvoiceFailed) { -

Failed to load invoice

-
- +
+ + Failed to load invoice + @if (!loadingBtcpayInvoice) { + + }
} @else {

Loading invoice...

@@ -399,7 +402,7 @@
@if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay || canPayWithCardOnFile) {
-

OR

+

—— OR ——

} } diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss index 75c6a397d..27a7e0e90 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss @@ -153,6 +153,11 @@ .payment-area { background: var(--bg); + margin-top: 0.5rem; + padding: 0.5rem; + @media (max-width: 575px) { + padding-bottom: 1.25rem; + } } .col.pie { @@ -219,4 +224,17 @@ } .apple-pay-button-white-with-line { -apple-pay-button-style: white-outline; +} + +.btcpay-invoice { + display: flex; + height: 292px; + flex-direction: column; + justify-content: center; + align-items: center; + @media (max-width: 575px) { + height: 75px; + flex-direction: row; + gap: 5px; + } } \ No newline at end of file diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts index e87b886dc..f4f9fbbc2 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -220,7 +220,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy { } if (this._step === 'checkout' && this.canPayWithBitcoin) { this.btcpayInvoiceFailed = false; - this.loadingBtcpayInvoice = true; this.invoice = null; this.requestBTCPayInvoice(); } else if (this._step === 'cashapp') { @@ -333,7 +332,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy { } if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) { - this.loadingBtcpayInvoice = true; this.requestBTCPayInvoice(); } @@ -935,16 +933,19 @@ export class AccelerateCheckout implements OnInit, OnDestroy { * BTCPay */ async requestBTCPayInvoice(): Promise { + this.loadingBtcpayInvoice = true; this.servicesApiService.generateBTCPayAcceleratorInvoice$(this.tx.txid, this.userBid).pipe( switchMap(response => { return this.servicesApiService.retreiveInvoice$(response.btcpayInvoiceId); }), catchError(error => { console.log(error); + this.loadingBtcpayInvoice = false; this.btcpayInvoiceFailed = true; return of(null); }) ).subscribe((invoice) => { + this.loadingBtcpayInvoice = false; this.invoice = invoice; this.cd.markForCheck(); });