2024-06-27 09:10:32 +00:00
< div class = "box card w-100" style = "background: var(--box-bg)" id = acceleratePreviewAnchor >
2024-04-13 16:11:49 +09:00
2024-06-28 13:35:34 +00:00
< div class = "row mt-2" * ngIf = "showSuccess" >
< div class = "col" >
< div class = "alert alert-success" >
Transaction has now been < a class = "alert-link" routerLink = "/services/accelerator/history" > submitted</ a > to mining pools for acceleration.
2024-06-27 09:10:32 +00:00
</ div >
2024-06-28 07:02:12 +00:00
</ div >
2024-06-28 13:35:34 +00:00
</ div >
2024-04-13 16:11:49 +09:00
2024-06-28 13:35:34 +00:00
@if (error) {
< div class = "row mt-2" >
2024-06-28 07:02:12 +00:00
< div class = "col" >
< app-mempool-error [ error ]=" error " [ alertClass ]=" error = == ' waitlisted ' ? ' alert-mempool ' : ' alert-danger '" ></ app-mempool-error >
2024-04-13 20:53:19 +09:00
</ div >
2024-06-28 07:02:12 +00:00
</ div >
2024-06-28 13:35:34 +00:00
}
@else if (step === 'quote') {
2024-06-28 07:02:12 +00:00
< div class = "accelerate-cols" >
< ng-container * ngIf = "!isMobile" >
< app-accelerate-fee-graph
[ tx ]=" tx "
[ estimate ]=" estimate "
[ showEstimate ]=" isLoggedIn ()"
[ maxRateOptions ]=" maxRateOptions "
[ maxRateIndex ]=" selectFeeRateIndex "
( setUserBid )=" setUserBid ($ event )"
></ app-accelerate-fee-graph >
</ ng-container >
2024-06-27 09:10:32 +00:00
2024-06-28 07:02:12 +00:00
< ng-container * ngIf = "estimate else loadingEstimate" >
< div [ class ]="{ estimateDisabled: error || showSuccess }" >
2024-06-29 07:13:43 +00:00
< div * ngIf = "isLoggedIn() && !estimate.hasAccess" style = "margin-right: 5em;" >
2024-06-29 07:04:08 +00:00
< div class = "alert alert-mempool mr-6" > You are currently on the waitlist</ div >
2024-06-28 07:02:12 +00:00
</ div >
2024-06-27 09:10:32 +00:00
2024-06-28 07:02:12 +00:00
@if (showDetails) {
2024-06-30 05:51:13 +00:00
< h5 i18n = "accelerator.your-transaction" > Your transaction</ h5 >
2024-06-27 09:10:32 +00:00
< div class = "row" >
< div class = "col" >
2024-06-28 07:02:12 +00:00
< small * ngIf = "hasAncestors" class = "form-text text-muted mb-2" >
< ng-container i18n = "accelerator.plus-unconfirmed-ancestors" > Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor(s)</ ng-container >
</ small >
< table class = "table table-borderless table-border table-dark table-background table-accelerator" >
< tbody >
< tr class = "group-first" >
< td class = "item" i18n = "transaction.vsize|Transaction Virtual Size" > Virtual size</ td >
< td style = "text-align: end;" [ innerHTML ]="'& lrm ;' + ( estimate . txSummary . effectiveVsize | vbytes: 2 )" ></ td >
</ tr >
< tr class = "info" >
< td class = "info" colspan = 3 >
< i >< small i18n = "accelerator.transaction-vbytes-size-description" > Size in vbytes of this transaction (including unconfirmed ancestors)</ small ></ i >
</ td >
</ tr >
< tr >
< td class = "item" i18n = "accelerator.in-band-fees" > In-band fees</ td >
< td style = "text-align: end;" >
{{ estimate.txSummary.effectiveFee | number : '1.0-0' }} < span class = "symbol" i18n = "shared.sats" > sats</ span >
</ td >
</ tr >
< tr class = "info group-last" >
< td class = "info" colspan = 3 >
< i >< small i18n = "accelerator.fees-already-paid-description" > Fees already paid by this transaction (including unconfirmed ancestors)</ small ></ i >
</ td >
</ tr >
</ tbody >
</ table >
2024-06-27 09:10:32 +00:00
</ div >
</ div >
2024-06-28 07:02:12 +00:00
< br >
}
< h5 * ngIf = "estimate?.pools?.length" i18n = "accelerator.how-much-faster" > How much faster?</ h5 >
< div class = "row" >
< div class = "col" >
< ng-container * ngIf = "(etaInfo$ | async) as etaInfo; else loadingEstimate" >
2024-06-30 05:42:32 +00:00
< small class = "form-text checkout-text mb-2" i18n = "accelerator.hashrate-percentage-description" > Your transaction will be prioritized by up to < strong > {{ etaInfo.hashratePercentage | number : '1.1-1' }}%</ strong > of miners.</ small >
< small class = "form-text checkout-text mb-2" i18n = "accelerator.time-estimate-description" > This will reduce your expected waiting time until the first confirmation to < strong >< app-time kind = "within" [ time ]=" etaInfo . acceleratedETA " [ fastRender ]=" false " [ fixedRender ]=" true " ></ app-time ></ strong ></ small >
2024-06-28 07:02:12 +00:00
</ ng-container >
</ div >
< div class = "col pie" >
< app-active-acceleration-box [ miningStats ]=" miningStats " [ pools ]=" estimate . pools " [ chartOnly ]=" true " ></ app-active-acceleration-box >
</ div >
</ div >
< div class = "row" >
< div class = "col" >
< div class = "form-group" >
< div class = "fee-card" >
< div class = "d-flex mb-0" >
< ng-container * ngFor = "let option of maxRateOptions" >
< button type = "button" class = "btn btn-primary flex-grow-1 btn-border btn-sm feerate" [ class ]="{ active: selectFeeRateIndex = == option . index }" ( click )=" setUserBid ( option )" >
< span class = "fee" > {{ option.fee + estimate.mempoolBaseFee + estimate.vsizeFee | number }} < span class = "symbol" i18n = "shared.sats" > sats</ span ></ span >
< span class = "rate" > ~< app-fee-rate [ fee ]=" option . rate " rounding = "1.0-0" ></ app-fee-rate ></ span >
</ button >
</ ng-container >
2024-06-27 09:10:32 +00:00
</ div >
</ div >
</ div >
</ div >
2024-06-28 07:02:12 +00:00
</ div >
2024-06-27 09:10:32 +00:00
2024-06-28 07:02:12 +00:00
< h5 > Summary</ h5 >
< div class = "row" >
< div class = "col" >
< table class = "table table-borderless table-border table-dark table-background table-accelerator" >
< tbody >
<!-- ESTIMATED FEE -->
< ng-container * ngIf = "showDetails" >
2024-06-29 09:17:08 +00:00
@if (isLoggedIn()) {
< tr class = "group-first" >
< td class = "item" i18n = "accelerator.next-block-rate" > Next block market rate</ td >
< td class = "amt" style = "font-size: 16px" >
{{ estimate.targetFeeRate | number : '1.0-0' }}
</ td >
< td class = "units" >< span class = "symbol" i18n = "shared.sat-vbyte|sat/vB" > sat/vB</ span ></ td >
</ tr >
< tr class = "info" >
< td class = "info" >
< i >< small i18n = "accelerator.estimated-extra-fee-required" > Estimated extra fee required</ small ></ i >
</ td >
< td class = "amt" >
{{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >< app-fiat [ value ]=" math . max ( 0 , estimate . nextBlockFee - estimate . txSummary . effectiveFee )" ></ app-fiat ></ span >
</ td >
</ tr >
}
@else {
<!-- TARGET FEE -->
< tr class = "group-first" >
< td class = "item" i18n = "accelerator.target-rate" > Target rate</ td >
< td class = "amt" style = "font-size: 16px" >
{{ maxRateOptions[selectFeeRateIndex].rate | number : '1.0-0' }}
</ td >
< td class = "units" >< span class = "symbol" i18n = "shared.sat-vbyte|sat/vB" > sat/vB</ span ></ td >
</ tr >
< tr class = "info" >
< td class = "info" >
< i >< small i18n = "accelerator.extra-fee-required" > Extra fee required</ small ></ i >
</ td >
< td class = "amt" >
{{ maxRateOptions[selectFeeRateIndex].fee | number }}
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >< app-fiat [ value ]=" maxRateOptions [ selectFeeRateIndex ]. fee " ></ app-fiat ></ span >
</ td >
</ tr >
}
2024-06-27 09:10:32 +00:00
2024-06-28 07:02:12 +00:00
<!-- MEMPOOL BASE FEE -->
< tr >
< td class = "item" i18n = "accelerator.mempool-accelerator-fees" > Mempool Accelerator™ fees</ td >
</ tr >
< tr class = "info" [ class . group-last ]="! estimate . vsizeFee " [ class . dashed-bottom ]="! estimate . vsizeFee " >
< td class = "info" >
< i >< small i18n = "accelerator.service-fee" > Accelerator Service Fee</ small ></ i >
</ td >
< td class = "amt" >
+{{ estimate.mempoolBaseFee | number }}
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >< app-fiat [ value ]=" estimate . mempoolBaseFee " ></ app-fiat ></ span >
</ td >
</ tr >
< tr class = "info group-last dashed-bottom" * ngIf = "estimate.vsizeFee" >
< td class = "info" >
< i >< small i18n = "accelerator.tx-size-surcharge" > Transaction Size Surcharge</ small ></ i >
</ td >
< td class = "amt" >
+{{ estimate.vsizeFee | number }}
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >< app-fiat [ value ]=" estimate . vsizeFee " ></ app-fiat ></ span >
</ td >
</ tr >
</ ng-container >
2024-06-27 09:10:32 +00:00
2024-06-28 07:02:12 +00:00
<!-- NEXT BLOCK ESTIMATE -->
< ng-container * ngIf = "isLoggedIn()" >
< tr class = "group-first" >
< td class = "item" >
< b style = "background-color: #5E35B1" class = "p-1 pl-0" i18n = "accelerator.estimated-cost" > Estimated acceleration cost</ b > ~{{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB
</ td >
< td class = "amt" >
< span style = "background-color: #5E35B1" class = "p-1 pl-0" >
{{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }}
</ span >
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >< app-fiat [ value ]=" estimate . cost + estimate . mempoolBaseFee + estimate . vsizeFee " ></ app-fiat ></ span >
2024-06-27 09:10:32 +00:00
</ td >
</ tr >
2024-06-28 07:02:12 +00:00
</ ng-container >
<!-- MAX COST -->
< ng-container >
2024-06-29 07:04:08 +00:00
< tr class = "group-first group-last" >
2024-06-28 07:02:12 +00:00
< td class = "item" >
@if (isLoggedIn()) {
< b style = "background-color: var(--primary);" class = "p-1 pl-0" i18n = "accelerator.maximum-cost" > Maximum acceleration cost</ b >
} @else {
< b style = "background-color: var(--primary);" class = "p-1 pl-0" i18n = "accelerator.cost" > Acceleration cost</ b >
}
</ td >
< td class = "amt" >
< span style = "background-color: var(--primary)" class = "p-1 pl-0" >
{{ cost | number }}
</ span >
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >
< app-fiat [ value ]=" cost " [ colorClass ]=" isLoggedIn () && estimate . userBalance < cost ? ' red-color ' : ' green-color '" ></ app-fiat >
</ span >
</ td >
</ tr >
</ ng-container >
<!-- USER BALANCE -->
< ng-container * ngIf = "isLoggedIn() && estimate.userBalance < cost" >
< tr class = "group-first group-last dashed-top" >
< td class = "item" i18n = "accelerator.available-balance" > Available balance</ td >
< td class = "amt" >
{{ estimate.userBalance | number }}
</ td >
< td class = "units" >
< span class = "symbol" i18n = "shared.sats" > sats</ span >
< span class = "fiat ml-1" >
< app-fiat [ value ]=" estimate . userBalance " [ colorClass ]=" estimate . userBalance < cost ? ' red-color ' : ' green-color '" ></ app-fiat >
</ span >
</ td >
</ tr >
</ ng-container >
< tr class = "group-first group-last" style = "border-top: 1px dashed grey" >
< td class = "item" ></ td >
< td colspan = "2" >
< div class = "d-flex" >
2024-06-30 05:37:51 +00:00
< ng-container * ngTemplateOutlet = "accelerateButton" ></ ng-container >
2024-06-28 07:02:12 +00:00
</ div >
</ td >
</ tr >
</ tbody >
</ table >
2024-06-27 09:10:32 +00:00
</ div >
2024-06-27 02:02:35 +00:00
</ div >
</ div >
2024-06-28 07:02:12 +00:00
</ ng-container >
</ div >
2024-06-30 05:37:51 +00:00
< hr >
< div class = "row mt-2 mb-2 text-center" >
< div class = "col-sm d-flex flex-column" >
< button type = "button" class = "mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style = "width: 200px" ( click )=" moveToStep (' summary ')" > Go Back</ button >
</ div >
</ div >
2024-06-28 07:02:12 +00:00
< ng-template # loadingEstimate >
< div class = "skeleton-loader" ></ div >
< br >
</ ng-template >
}
@else if (step === 'summary') {
2024-06-29 06:06:11 +00:00
< ng-container * ngIf = "estimate && (etaInfo$ | async) as etaInfo; else loadingSummary" >
<!-- Show A/B CTAs -->
2024-06-30 03:43:28 +00:00
@if (!noCTA) {
< div class = "row mb-1" >
< div class = "col-sm" >
2024-06-30 04:57:00 +00:00
< h1 style = "font-size: larger;" >< ng-content select = "[slot='cta-title']" ></ ng-content >< span class = "default-slot" > Transaction stuck?</ span ></ h1 >
2024-06-30 03:43:28 +00:00
</ div >
2024-06-29 06:06:11 +00:00
</ div >
2024-06-30 03:43:28 +00:00
}
2024-06-27 09:10:32 +00:00
2024-06-29 07:13:43 +00:00
< div * ngIf = "isLoggedIn() && !estimate.hasAccess" >
< div class = "alert alert-mempool mr-6" > You are currently on the waitlist for Mempool Accelerator™ </ div >
</ div >
2024-06-29 07:04:08 +00:00
< form [ class ]="{ estimateDisabled: error || showSuccess }" >
2024-06-30 03:43:28 +00:00
< div class = "row summary-row" >
< div >
2024-06-29 06:06:11 +00:00
< div class = "form-group form-check mb-2" >
2024-06-30 05:37:51 +00:00
< div class = "float-right" >< ng-container * ngTemplateOutlet = "customizeButton" ></ ng-container ></ div >
2024-06-30 03:43:28 +00:00
< input type = "checkbox" [ checked ]=" armed " class = "form-check-input" id = "accel" name = "accel" ( change )=" armed = !armed" >
2024-06-29 06:06:11 +00:00
< label class = "form-check-label d-flex flex-column" for = "accel" >
2024-06-30 05:37:51 +00:00
< span >< b > Accelerate</ b > to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB</ span >
2024-06-29 06:06:11 +00:00
< span class = "checkout-text" > Confirmation expected < app-time kind = "within" [ time ]=" etaInfo . acceleratedETA " [ fastRender ]=" false " [ fixedRender ]=" true " ></ app-time >< br >
@if (!calculating) {
< app-fiat [ value ]=" cost " ></ app-fiat > fee (< span >< small style = "font-family: monospace;" > {{ cost | number }}</ small > < span class = "symbol" i18n = "shared.sats" > sats</ span ></ span > )
} @else {
< span class = "estimating" > Calculating cost...</ span >
}
</ span >
</ label >
</ div >
</ div >
2024-06-30 03:43:28 +00:00
< div class = "pie d-none d-lg-flex" * ngIf = "!forceMobile" >
2024-06-30 05:42:32 +00:00
< small class = "form-text checkout-text mb-2" i18n = "accelerator.hashrate-percentage-description" > Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</ small >
2024-06-29 06:06:11 +00:00
< app-active-acceleration-box [ miningStats ]=" miningStats " [ pools ]=" estimate . pools " [ chartOnly ]=" true " ></ app-active-acceleration-box >
</ div >
2024-06-30 05:37:51 +00:00
< ng-container * ngTemplateOutlet = "accelerateButton" ></ ng-container >
2024-06-29 06:06:11 +00:00
</ div >
</ form >
</ ng-container >
< ng-template # loadingSummary >
2024-06-28 07:02:12 +00:00
< div class = "row" >
< div class = "col-md" >
2024-06-29 06:06:11 +00:00
< div class = "d-flex flex-row justify-content-center align-items-center" >
< div class = "m-4 spinner-border text-light" style = "width: 25px; height: 25px" ></ div >
2024-04-13 23:07:19 +09:00
</ div >
</ div >
2024-06-29 06:06:11 +00:00
</ div >
</ ng-template >
} @else if (step === 'checkout') {
< ng-container * ngIf = "estimate && (etaInfo$ | async) as etaInfo; else loadingCheckout" >
< div class = "row" >
2024-06-28 07:02:12 +00:00
< div class = "col-md" >
2024-06-29 06:06:11 +00:00
< div class = "d-flex flex-column" >
2024-06-30 05:37:51 +00:00
< span >< b > Accelerate</ b > to ~{{ ((userBid + estimate.txSummary.effectiveFee) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB</ span >
2024-06-29 06:06:11 +00:00
< span class = "checkout-text" >
@if (!calculating) {
For an additional < app-fiat [ value ]=" cost " ></ app-fiat > (< span >< small style = "font-family: monospace;" > {{ cost | number }}</ small > < span class = "symbol" i18n = "shared.sats" > sats</ span ></ span > )
} @else {
< span class = "estimating" > Calculating cost...</ span >
}
</ span >
< span class = "checkout-text" * ngIf = "(etaInfo$ | async) as etaInfo" >
Reducing expected confirmation time to < app-time kind = "within" [ time ]=" etaInfo . acceleratedETA " [ fastRender ]=" false " [ fixedRender ]=" true " ></ app-time >
</ span >
2024-06-27 09:10:32 +00:00
</ div >
2024-04-13 23:07:19 +09:00
</ div >
2024-06-29 06:06:11 +00:00
< div class = "col-md pie d-none d-md-flex" * ngIf = "!forceMobile" >
2024-06-30 05:42:32 +00:00
< small class = "form-text checkout-text mb-2" i18n = "accelerator.hashrate-percentage-description" * ngIf = "(etaInfo$ | async) as etaInfo" > Your transaction will be prioritized by up to {{ etaInfo.hashratePercentage | number : '1.1-1' }}% of miners.</ small >
2024-06-28 07:02:12 +00:00
< app-active-acceleration-box [ miningStats ]=" miningStats " [ pools ]=" estimate . pools " [ chartOnly ]=" true " ></ app-active-acceleration-box >
</ div >
2024-06-26 18:35:36 +09:00
</ div >
2024-06-29 06:06:11 +00:00
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
2024-06-29 07:04:08 +00:00
< div class = "d-flex justify-content-center" [ class ]="{ estimateDisabled: ! canPayWithBalance || error || showSuccess }" >
< button type = "button" class = "mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" style = "width: 200px" ( click )=" accelerate ()" >
2024-06-28 07:02:12 +00:00
< img src = "/resources/mempool-accelerator-sparkles-light.svg" height = "20" class = "mr-2" style = "margin-left: -10px" >
< span > Accelerate</ span >
</ button >
</ div >
2024-06-29 06:06:11 +00:00
} @else {
2024-06-29 07:04:08 +00:00
< div class = "payment-area mt-2 p-2" [ class ]="{ estimateDisabled: error || showSuccess }" >
2024-06-29 06:06:11 +00:00
< div class = "row text-center justify-content-center mx-2" style = "font-size: 14px;" >
< p > Payment to mempool.space for acceleration of txid < a [ routerLink ]="'/ tx /' + tx . txid " target = "_blank" > {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</ a ></ p >
</ div >
< div class = "row" >
@if (canPayWithBitcoin) {
< div class = "col-sm text-center d-flex flex-column justify-content-center align-items-center" >
@if (invoice) {
< p > Pay < span >< small style = "font-family: monospace;" > {{ cost | number }}</ small > < span class = "symbol" i18n = "shared.sats" > sats</ span ></ span ></ p >
< app-bitcoin-invoice style = "width: 100%;" [ invoiceId ]=" invoice . btcpayInvoiceId " [ minimal ]=" true " ( completed )=" moveToStep (' paid ')" ></ app-bitcoin-invoice >
} @else {
< span > Loading invoice...</ span >
< div class = "m-4 spinner-border text-light" style = "width: 25px; height: 25px" ></ div >
}
</ div >
@if (canPayWithCashapp) {
< div class = "col-sm text-center flex-grow-0 d-flex flex-column justify-content-center align-items-center" >
< p class = "text-nowrap" > — < span i18n = "or" > OR</ span > — </ p >
</ div >
2024-06-28 07:02:12 +00:00
}
2024-06-29 06:06:11 +00:00
}
2024-06-30 03:20:33 +00:00
@if (canPayWithCashapp) {
2024-06-29 06:06:11 +00:00
< div class = "col-sm text-center d-flex flex-column justify-content-center align-items-center" >
< p > Pay < app-fiat [ value ]=" cost " ></ app-fiat > with</ p >
< img class = "paymentMethod mx-2" src = "/resources/cash-app.svg" height = 55 ( click )=" moveToStep (' cashapp ')" >
2024-06-28 07:02:12 +00:00
</ div >
}
2024-06-29 06:06:11 +00:00
</ div >
</ div >
}
</ ng-container >
< ng-template # loadingCheckout >
< div class = "row" >
< div class = "col-md" >
< div class = "d-flex flex-row justify-content-center align-items-center" >
< div class = "m-4 spinner-border text-light" style = "width: 25px; height: 25px" ></ div >
</ div >
2024-06-28 07:02:12 +00:00
</ div >
</ div >
2024-06-29 06:06:11 +00:00
</ ng-template >
2024-06-30 05:37:51 +00:00
< hr >
2024-06-29 09:17:08 +00:00
< div class = "row mt-2 mb-2 text-center" >
< div class = "col-sm d-flex flex-column" >
< button type = "button" class = "mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style = "width: 200px" ( click )=" moveToStep (' summary ')" > Go Back</ button >
2024-06-28 07:02:12 +00:00
</ div >
2024-06-29 09:17:08 +00:00
</ div >
2024-06-28 07:02:12 +00:00
} @else if (step === 'cashapp') {
2024-06-26 18:35:36 +09:00
<!-- Show checkout page -->
< div class = "row mb-md-1 text-center" >
< div class = "col-sm" id = "confirm-payment-title" >
2024-06-27 02:02:35 +00:00
< h1 style = "font-size: larger;" >< ng-content select = "[slot='checkout-title']" ></ ng-content >< span class = "default-slot" > Confirm your payment</ span ></ h1 >
2024-04-13 20:53:19 +09:00
</ div >
2024-04-14 16:29:56 +09:00
</ div >
2024-04-13 20:53:19 +09:00
2024-04-14 16:29:56 +09:00
< div class = "row text-center" >
< div class = "col-sm" >
2024-04-16 16:01:52 +09:00
< div class = "form-group w-100" style = "font-size: 14px" >
2024-06-27 02:02:35 +00:00
Payment to mempool.space for acceleration of txid < a [ routerLink ]="'/ tx /' + tx . txid " target = "_blank" > {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</ a >
2024-04-13 16:11:49 +09:00
</ div >
</ div >
2024-04-14 16:29:56 +09:00
</ div >
2024-04-13 20:53:19 +09:00
2024-06-28 07:02:12 +00:00
@if (!loadingCashapp) {
2024-06-26 18:35:36 +09:00
< div class = "row text-center mt-1" >
< div class = "col-sm" >
< div class = "form-group w-100" >
2024-06-28 07:02:12 +00:00
< 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 >
2024-04-14 16:29:56 +09:00
</ div >
2024-04-13 23:07:19 +09:00
</ div >
</ div >
2024-06-26 18:35:36 +09:00
}
2024-04-13 20:53:19 +09:00
2024-06-28 07:02:12 +00:00
< 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 >
2024-04-14 16:29:56 +09:00
< hr >
< div class = "row mt-2 mb-2 text-center" >
< div class = "col-sm d-flex flex-column" >
2024-06-28 07:02:12 +00:00
< button type = "button" class = "mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style = "width: 200px" ( click )=" moveToStep (' checkout ')" > Go Back</ button >
2024-04-13 16:11:49 +09:00
</ div >
2024-04-14 16:29:56 +09:00
</ div >
}
@else if (step === 'processing') {
2024-04-16 16:01:52 +09:00
< div class = "row mb-1 text-center" >
2024-04-14 16:29:56 +09:00
< div class = "col-sm" >
2024-06-27 02:02:35 +00:00
< h1 style = "font-size: larger;" >< ng-content select = "[slot='processing-title']" ></ ng-content >< span class = "default-slot" > Confirming your payment</ span ></ h1 >
2024-04-14 16:29:56 +09:00
</ div >
</ div >
2024-04-13 23:07:19 +09:00
2024-04-14 16:29:56 +09:00
< div class = "row text-center mt-1" >
< div class = "col-sm" >
< div class = "form-group w-100" >
<!-- Processing payment -->
< div id = "cash-app-pay" class = "d-inline-block" [ style ]="' opacity: 0 ; width: 0px ; height: 0px ; pointer-events: none ;'" ></ div >
< div display = "d-flex flex-row justify-content-center" >
< span > We are processing your payment...</ span >
< div class = "ml-2 spinner-border text-light" style = "width: 25px; height: 25px" ></ div >
2024-04-13 23:07:19 +09:00
</ div >
</ div >
2024-04-13 16:11:49 +09:00
</ div >
2024-04-14 16:29:56 +09:00
</ div >
2024-04-13 23:07:19 +09:00
}
2024-06-29 06:06:11 +00:00
@else if (step === 'paid') {
< div class = "row mb-1 text-center" >
< div class = "col-sm" >
< h1 style = "font-size: larger;" >< ng-content select = "[slot='accelerating-title']" ></ ng-content >< span class = "default-slot" > Accelerating your transaction</ span ></ h1 >
</ div >
</ div >
< div class = "row text-center mt-1" >
< div class = "col-sm" >
< div class = "d-flex flex-row justify-content-center align-items-center" >
< p > Confirming your acceleration with our mining pool partners...</ p >
< div class = "ml-2 spinner-border text-light" style = "width: 25px; height: 25px" ></ div >
</ div >
</ div >
</ div >
}
2024-06-30 05:37:51 +00:00
</ div >
< ng-template # customizeButton >
< button type = "button" * ngIf = "advancedEnabled" class = "btn btn-sm btn-outline-info btn-small-height ml-3" ( click )=" moveToStep (' quote ')" i18n = "accelerator.customize" > customize</ button >
</ ng-template >
< ng-template # accelerateButton >
@if (isLoggedIn() || canPayWithBitcoin || canPayWithCashapp) {
< button type = "button" class = "mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" [ class . estimateDisabled ]="! canPay || (! armed && step = == ' summary ') || calculating " style = "width: 200px" ( click )=" accelerate ()" >
< img src = "/resources/mempool-accelerator-sparkles-light.svg" height = "20" class = "mr-2" style = "margin-left: -10px" >
< span > Accelerate</ span >
</ button >
} @else {
< button type = "button" class = "mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center estimateDisabled" style = "width: 200px" >
< img src = "/resources/mempool-accelerator-sparkles-light.svg" height = "20" class = "mr-2" style = "margin-left: -10px" >
< span > Coming soon</ span >
</ button >
}
</ ng-template >
