Merge branch 'nymkappa/polish-accel' into nymkappa/mini-branch
This commit is contained in:
nymkappa
commit
e4f00285b3
@ -1,147 +1,135 @@
|
|||||||
<div class="container card" style="padding: 20px; background: var(--bg)">
|
<div class="container card h-100 w-100" style="padding: 20px; background: var(--box-bg)" id=acceleratePreviewAnchor>
|
||||||
|
|
||||||
@if (error) {
|
@if (error) {
|
||||||
<app-mempool-error [error]="error"></app-mempool-error>
|
<div class="mt-2">
|
||||||
} @else {
|
<app-mempool-error [error]="error"></app-mempool-error>
|
||||||
|
</div>
|
||||||
@if (step === 'completed') {
|
|
||||||
<div class="row text-center mt-3">
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<div display="d-flex flex-row justify-content-center">
|
|
||||||
<div class="alert alert-success">Transaction is now being accelerated!</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
@else if (step === 'cta') {
|
|
||||||
<!-- Show A/B CTAs -->
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-sm">
|
|
||||||
<h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="form-group form-check">
|
|
||||||
<input type="radio" class="form-check-input" id="accelerate" name="accelerate" (change)="selectedOptionChanged($event)">
|
|
||||||
<label class="form-check-label d-flex flex-column" for="accelerate">
|
|
||||||
<span class="font-weight-bold">Accelerate</span>
|
|
||||||
<span style="color: rgb(186, 186, 186)">Settlement expected in ~1 hour or less<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">sats</span></span>)
|
|
||||||
} @else {
|
|
||||||
<span class="estimating">Calculating cost...</span>
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="form-group form-check">
|
|
||||||
<input type="radio" class="form-check-input" id="wait" name="accelerate" (change)="selectedOptionChanged($event)">
|
|
||||||
<label class="form-check-label d-flex flex-column" for="wait">
|
|
||||||
<span class="font-weight-bold">Wait</span>
|
|
||||||
<span style="color: rgb(186, 186, 186)">Settlement expected to occur <app-time kind="within" [time]="eta" [fastRender]="false" [fixedRender]="true"></app-time></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-2" [style]="choosenOption === 'wait' ? 'opacity: 0.25; pointer-events: none' : ''">
|
|
||||||
<div class="col-sm d-flex flex-row justify-content-center">
|
|
||||||
<button type="button" class="mt-1 btn btn-light rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" style="width: 200px" (click)="enableCheckoutPage()">
|
|
||||||
<img src="/resources/mempool-accelerator-sparkles-compressed.svg" height="20" class="mr-2" style="margin-left: -10px">
|
|
||||||
<span>Accelerate</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
}
|
|
||||||
|
|
||||||
@else if (step === 'checkout') {
|
|
||||||
<!-- Show checkout page -->
|
|
||||||
<div class="row mb-3 text-center">
|
|
||||||
<div class="col-sm">
|
|
||||||
<h1 style="font-size: larger;">Confirm your payment</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + txid" target="_blank">{{ txid.substr(0, 10) }}..{{ txid.substr(-10) }}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@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">
|
|
||||||
<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 text-center">
|
|
||||||
<div class="col-sm d-flex flex-column">
|
|
||||||
<small>Changed your mind?</small>
|
|
||||||
<button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="restart(); closeModal()">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
@else if (step === 'processing') {
|
|
||||||
<div class="row mb-3 text-center">
|
|
||||||
<div class="col-sm">
|
|
||||||
<h1 style="font-size: larger;">Confirm your payment</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Processing payment -->
|
|
||||||
<div id="cash-app-pay" class="d-inline-block" [style]="'opacity: 0; width: 0px; height: 0px; pointer-events: none;'"></div>
|
|
||||||
|
|
||||||
<div class="row text-center mt-1">
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<span class="close-button" (click)="closeModal()">✖</span>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@else if (step === 'cta') {
|
||||||
|
<!-- Show A/B CTAs -->
|
||||||
|
<div class="row mb-3">
|
||||||
|
<div class="col-sm">
|
||||||
|
<h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="form-group form-check">
|
||||||
|
<input type="radio" class="form-check-input" id="accelerate" name="accelerate" (change)="selectedOptionChanged($event)">
|
||||||
|
<label class="form-check-label d-flex flex-column" for="accelerate">
|
||||||
|
<span class="font-weight-bold">Accelerate</span>
|
||||||
|
<span style="color: rgb(186, 186, 186)">Settlement expected in ~1 hour or less<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">sats</span></span>)
|
||||||
|
} @else {
|
||||||
|
<span class="estimating">Calculating cost...</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="form-group form-check">
|
||||||
|
<input type="radio" class="form-check-input" id="wait" name="accelerate" (change)="selectedOptionChanged($event)">
|
||||||
|
<label class="form-check-label d-flex flex-column" for="wait">
|
||||||
|
<span class="font-weight-bold">Wait</span>
|
||||||
|
<span style="color: rgb(186, 186, 186)">Settlement expected to occur <app-time kind="within" [time]="eta" [fastRender]="false" [fixedRender]="true"></app-time></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2" [style]="(choosenOption === 'wait' || calculating) ? 'opacity: 0.25; pointer-events: none' : ''">
|
||||||
|
<div class="col-sm d-flex flex-row justify-content-center">
|
||||||
|
<button type="button" class="mt-1 btn btn-light rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" style="width: 200px" (click)="enableCheckoutPage()">
|
||||||
|
<img src="/resources/mempool-accelerator-sparkles-compressed.svg" height="20" class="mr-2" style="margin-left: -10px">
|
||||||
|
<span>Accelerate</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if (step === 'checkout') {
|
||||||
|
<!-- Show checkout page -->
|
||||||
|
<div class="row mb-3 text-center">
|
||||||
|
<div class="col-sm">
|
||||||
|
<h1 style="font-size: larger;">Confirm your payment</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="form-group w-100">
|
||||||
|
Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + txid" target="_blank">{{ txid.substr(0, 10) }}..{{ txid.substr(-10) }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@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">
|
||||||
|
<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">
|
||||||
|
<small>Changed your mind?</small>
|
||||||
|
<button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="restart(); closeModal()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if (step === 'processing') {
|
||||||
|
<div class="row mb-3 text-center">
|
||||||
|
<div class="col-sm">
|
||||||
|
<h1 style="font-size: larger;">Confirm your payment</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<span class="close-button" (click)="closeModal()">✖</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core';
|
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';
|
||||||
import { Subscription, tap, of, catchError } from 'rxjs';
|
import { Subscription, tap, of, catchError } from 'rxjs';
|
||||||
import { WebsocketService } from '../../services/websocket.service';
|
|
||||||
import { ServicesApiServices } from '../../services/services-api.service';
|
import { ServicesApiServices } from '../../services/services-api.service';
|
||||||
import { nextRoundNumber } from '../../shared/common.utils';
|
import { nextRoundNumber } from '../../shared/common.utils';
|
||||||
import { StateService } from '../../services/state.service';
|
import { StateService } from '../../services/state.service';
|
||||||
@ -14,6 +13,7 @@ import { AudioService } from '../../services/audio.service';
|
|||||||
export class AccelerateCheckout implements OnInit, OnDestroy {
|
export class AccelerateCheckout implements OnInit, OnDestroy {
|
||||||
@Input() eta: number = Date.now() + 123456789;
|
@Input() eta: number = Date.now() + 123456789;
|
||||||
@Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad';
|
@Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad';
|
||||||
|
@Input() scrollEvent: boolean;
|
||||||
@Output() close = new EventEmitter<null>();
|
@Output() close = new EventEmitter<null>();
|
||||||
|
|
||||||
calculating = true;
|
calculating = true;
|
||||||
@ -34,10 +34,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||||||
cashAppPay: any;
|
cashAppPay: any;
|
||||||
cashAppSubscription: Subscription;
|
cashAppSubscription: Subscription;
|
||||||
conversionsSubscription: Subscription;
|
conversionsSubscription: Subscription;
|
||||||
step: 'cta' | 'checkout' | 'processing' | 'completed' = 'cta';
|
step: 'cta' | 'checkout' | 'processing' = 'cta';
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private websocketService: WebsocketService,
|
|
||||||
private servicesApiService: ServicesApiServices,
|
private servicesApiService: ServicesApiServices,
|
||||||
private stateService: StateService,
|
private stateService: StateService,
|
||||||
private audioService: AudioService,
|
private audioService: AudioService,
|
||||||
@ -72,7 +71,33 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes.scrollEvent) {
|
||||||
|
this.scrollToPreview('acceleratePreviewAnchor', 'start');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Scroll to element id with or without setTimeout
|
||||||
|
*/
|
||||||
|
scrollToPreviewWithTimeout(id: string, position: ScrollLogicalPosition) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.scrollToPreview(id, position);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
scrollToPreview(id: string, position: ScrollLogicalPosition) {
|
||||||
|
const acceleratePreviewAnchor = document.getElementById(id);
|
||||||
|
if (acceleratePreviewAnchor) {
|
||||||
|
this.cd.markForCheck();
|
||||||
|
acceleratePreviewAnchor.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
inline: position,
|
||||||
|
block: position,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
* Accelerator
|
* Accelerator
|
||||||
*/
|
*/
|
||||||
estimate() {
|
estimate() {
|
||||||
@ -206,10 +231,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||||||
).subscribe({
|
).subscribe({
|
||||||
next: () => {
|
next: () => {
|
||||||
that.audioService.playSound('ascend-chime-cartoon');
|
that.audioService.playSound('ascend-chime-cartoon');
|
||||||
that.step = 'completed';
|
that.closeModal();
|
||||||
setTimeout(() => {
|
|
||||||
that.closeModal();
|
|
||||||
}, 10000);
|
|
||||||
},
|
},
|
||||||
error: (response) => {
|
error: (response) => {
|
||||||
if (response.status === 403 && response.error === 'not_available') {
|
if (response.status === 403 && response.error === 'not_available') {
|
||||||
@ -236,10 +258,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
selectedOptionChanged(event) {
|
selectedOptionChanged(event) {
|
||||||
this.choosenOption = event.target.id;
|
this.choosenOption = event.target.id;
|
||||||
if (this.choosenOption === 'wait') {
|
|
||||||
this.restart();
|
|
||||||
this.closeModal();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
restart() {
|
restart() {
|
||||||
this.step = 'cta';
|
this.step = 'cta';
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
|
import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
|
||||||
import { Subscription, catchError, of, tap } from 'rxjs';
|
import { Subscription, catchError, of, tap } from 'rxjs';
|
||||||
import { StorageService } from '../../services/storage.service';
|
import { StorageService } from '../../services/storage.service';
|
||||||
import { Transaction } from '../../interfaces/electrs.interface';
|
import { Transaction } from '../../interfaces/electrs.interface';
|
||||||
|
|||||||
@ -85,7 +85,7 @@
|
|||||||
|
|
||||||
<div class="bottom-panel">
|
<div class="bottom-panel">
|
||||||
@if (showAccelerationSummary) {
|
@if (showAccelerationSummary) {
|
||||||
<app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
|
<app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
|
||||||
} @else {
|
} @else {
|
||||||
@if (tx?.acceleration && !tx.status?.confirmed) {
|
@if (tx?.acceleration && !tx.status?.confirmed) {
|
||||||
<div class="progress-icon">
|
<div class="progress-icon">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user