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 449188c19..2a262c1aa 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -322,12 +322,12 @@
-
+
- +
@@ -368,7 +368,7 @@
-
+
Payment to mempool.space for acceleration of txid {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay)) { @@ -381,33 +381,7 @@
} @else { -
- @if (canPayWithBitcoin) { -
- @if (invoice) { -

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

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

Loading invoice...

-
- -
- } -
- @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay || canPayWithCardOnFile) { -
-

—— OR ——

-
- } - } +
@if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay || canPayWithCardOnFile) {

Pay  with

@@ -439,6 +413,19 @@ }
} + @if ((canPayWithBitcoin && (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay || canPayWithCardOnFile))) { +
+ —— OR —— +
+ } + @if (canPayWithBitcoin) { +
+

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

+
+ +
+
+ }
}
@@ -459,7 +446,7 @@
- } @else if (step === 'cashapp' || step === 'applepay' || step === 'googlepay' || step === 'cardonfile') { + } @else if (step === 'cashapp' || step === 'applepay' || step === 'googlepay' || step === 'cardonfile' || step === 'bitcoin') {
@@ -475,60 +462,82 @@
- @if (step === 'cashapp' && !loadingCashapp || step === 'applepay' && !loadingApplePay || step === 'googlepay' && !loadingGooglePay || step === 'cardonfile' && !loadingCardOnFile) { +
+ @if (step === 'cashapp' && !loadingCashapp || step === 'applepay' && !loadingApplePay || step === 'googlepay' && !loadingGooglePay || step === 'cardonfile' && !loadingCardOnFile) { +
+
+ Total additional cost
+ + Pay + + with + + +
+
+ } @else if (step === 'bitcoin') { +
+ @if (loadingBtcpayInvoice) { +

Loading invoice...

+
+ +
+ } @else if (invoice) { +

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

+ + } @else if (btcpayInvoiceFailed) { +
+ + Failed to load invoice + @if (!loadingBtcpayInvoice) { + + } +
+ } +
+ } +
+ + @if (step === 'applepay' || step === 'cashapp' || step === 'googlepay' || step === 'cardonfile') {
- Total additional cost
- - Pay - - with - - + @if (step === 'applepay') { +
+ } @else if (step === 'cashapp') { +
+ } @else if (step === 'googlepay') { +
+ } @else if (step === 'cardonfile') { +
+ @if (['VISA', 'MASTERCARD', 'JCB', 'DISCOVER', 'DISCOVER_DINERS', 'AMERICAN_EXPRESS'].includes(estimate?.availablePaymentMethods?.cardOnFile?.card?.brand)) { + + } @else { + + } + {{ estimate?.availablePaymentMethods?.cardOnFile?.card?.last_4 }} +
+ } + @if (loadingCashapp || loadingApplePay || loadingGooglePay || loadingCardOnFile) { +
+ Loading payment method... + +
+ }
+ @if (isTokenizing > 0) { +
+ +
+ }
} -
-
-
- @if (step === 'applepay') { -
- } @else if (step === 'cashapp') { -
- } @else if (step === 'googlepay') { -
- } @else if (step === 'cardonfile') { -
- @if (['VISA', 'MASTERCARD', 'JCB', 'DISCOVER', 'DISCOVER_DINERS', 'AMERICAN_EXPRESS'].includes(estimate?.availablePaymentMethods?.cardOnFile?.card?.brand)) { - - } @else { - - } - {{ estimate?.availablePaymentMethods?.cardOnFile?.card?.last_4 }} -
- } - @if (loadingCashapp || loadingApplePay || loadingGooglePay || loadingCardOnFile) { -
- Loading payment method... - -
- } -
- @if (isTokenizing > 0) { -
- -
- } -
-
-
- +
} @@ -600,8 +609,8 @@ - - Confirmation expected 
+ + Confirmation expected 
@if (!calculating) { ({{ cost | number }} sats) } @else { 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 aa5a38718..cc4edfb2b 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss @@ -1,3 +1,7 @@ +hr { + border-color: var(--secondary) +} + .close-button { position: absolute; top: 0.5em; @@ -159,8 +163,14 @@ background: var(--bg); margin-top: 0.5rem; padding: 0.5rem; - @media (max-width: 575px) { - padding-bottom: 1.25rem; + padding-bottom: 1.25rem; +} + +.payment-options { + display: flex; + flex-direction: row; + @media (max-width: 640px) { + flex-direction: column; } } 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 8cebc26cb..fdcbb20ef 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -51,7 +51,7 @@ export const MIN_BID_RATIO = 1; export const DEFAULT_BID_RATIO = 2; export const MAX_BID_RATIO = 4; -type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'applepay' | 'googlepay' | 'cardonfile' | 'processing' | 'paid' | 'success'; +type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'applepay' | 'googlepay' | 'cardonfile' | 'bitcoin' | 'processing' | 'paid' | 'success'; @Component({ selector: 'app-accelerate-checkout', @@ -225,19 +225,25 @@ export class AccelerateCheckout implements OnInit, OnDestroy { if (this.timeoutTimer) { clearTimeout(this.timeoutTimer); } + if (!this.estimate && ['quote', 'summary', 'checkout', 'processing'].includes(this.step)) { this.fetchEstimate(); } + if (this._step === 'checkout') { this.insertSquare(); this.enterpriseService.goal(8); this.scrollToElementWithTimeout('acceleratePreviewAnchor', 'start', 100); } + if (this._step === 'checkout' && this.canPayWithBitcoin) { this.btcpayInvoiceFailed = false; this.invoice = undefined; - this.requestBTCPayInvoice(); - this.scrollToElementWithTimeout('acceleratePreviewAnchor', 'start', 100); + this.requestBTCPayInvoice(); // preload invoice + // If only bitcoin available, go straight to showing the QR code (eg on self hosted) + if (this.canOnlyPayWithBitcoin && this.conversions) { + this.moveToStep('bitcoin'); + } } else if (this._step === 'cashapp') { this.loadingCashapp = true; this.setupSquare(); @@ -254,6 +260,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.loadingCardOnFile = true; this.setupSquare(); this.scrollToElementWithTimeout('confirm-title', 'center', 100); + } else if (this._step === 'bitcoin') { + this.scrollToElementWithTimeout('confirm-title', 'nearest', 100); } else if (this._step === 'paid') { this.timePaid = Date.now(); this.timeoutTimer = setTimeout(() => { @@ -1019,6 +1027,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy { return this.couldPayWithBalance || this.couldPayWithBitcoin || this.couldPayWithCashapp || this.couldPayWithApplePay || this.couldPayWithGooglePay; } + get canOnlyPayWithBitcoin(): boolean { + return this.canPayWithBitcoin && !this.canPayWithApplePay && !this.canPayWithBalance && !this.canPayWithCardOnFile && !this.canPayWithCashapp && !this.canPayWithGooglePay + } + get canPayWithBitcoin(): boolean { const paymentMethod = this.estimate?.availablePaymentMethods?.bitcoin; return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max; diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts index c1a48ea20..379152197 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts @@ -5,7 +5,6 @@ import { ServicesApiServices } from '@app/services/services-api.service'; export type AccelerationStats = { totalRequested: number; totalBidBoost: number; - successRate: number; totalVsize: number; } diff --git a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html index 814097171..5cda95f38 100644 --- a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html +++ b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html @@ -24,7 +24,7 @@ -
+