machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[accelerator] polish pizza accel

Browse Source
This commit is contained in:
nymkappa
2024-04-16 16:01:52 +09:00
parent 26807e80db
commit 64ba033602
8 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
View File

@@ -1,4 +1,4 @@
<div class="container card h-100 w-100" style="padding: 20px; background: var(--box-bg)" id=acceleratePreviewAnchor>
<div class="container-md card w-100" style="padding: 1em; background: var(--box-bg)" id=acceleratePreviewAnchor>
@if (error) {
<div class="mt-2">
@@ -8,7 +8,7 @@
@else if (step === 'cta') {
<!-- Show A/B CTAs -->
<div class="row mb-3">
<div class="row mb-1">
<div class="col-sm">
<h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
</div>
@@ -17,11 +17,11 @@
<form>
<div class="row">
<div class="col-sm">
<div class="form-group form-check">
<div class="form-group form-check mb-2">
<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>
<span style="color: rgb(186, 186, 186); font-size: 14px;">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>&nbsp;<span class="symbol" i18n="shared.sats|sats">sats</span></span>)
} @else {
@@ -34,19 +34,19 @@
</div>
<div class="row">
<div class="col-sm">
<div class="form-group form-check">
<div class="form-group form-check mb-2">
<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>
<span style="color: rgb(186, 186, 186); font-size: 14px;">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="row mt-2 mb-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">
<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)="enableCheckoutPage()">
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
<span>Accelerate</span>
</button>
</div>
@@ -56,7 +56,7 @@
@else if (step === 'checkout') {
<!-- Show checkout page -->
<div class="row mb-3 text-center">
<div class="row mb-md-1 text-center">
<div class="col-sm">
<h1 style="font-size: larger;">Confirm your payment</h1>
</div>
@@ -64,7 +64,7 @@
<div class="row text-center">
<div class="col-sm">
<div class="form-group w-100">
<div class="form-group w-100" style="font-size: 14px">
Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + txid" target="_blank">{{ txid.substr(0, 10) }}..{{ txid.substr(-10) }}</a>
</div>
</div>
@@ -104,13 +104,13 @@
<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>
<button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="restart()">Go Back</button>
</div>
</div>
}
@else if (step === 'processing') {
<div class="row mb-3 text-center">
<div class="row mb-1 text-center">
<div class="col-sm">
<h1 style="font-size: larger;">Confirm your payment</h1>
</div>
@@ -129,7 +129,5 @@
</div>
</div>
}
<span class="close-button" (click)="closeModal()">✖</span>
</div>

10
frontend/src/app/components/tracker/tracker.component.html
View File

@@ -29,7 +29,7 @@
</div>
<div class="data">
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
<div class="field">
<div class="field narrower mt-2">
<div class="label" i18n="transaction.first-seen|Transaction first seen">First seen</div>
<div class="value">
@if (transactionTime > 0) {
@@ -39,7 +39,7 @@
}
</div>
</div>
<div class="field">
<div class="field narrower">
<div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
<div class="value">
<span class="justify-content-end d-flex align-items-center">
@@ -48,14 +48,14 @@
} @else {
<app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
}
@if (isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
@if (!showAccelerationSummary && isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
<a class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
}
</span>
</div>
</div>
} @else if (tx && tx.status?.confirmed) {
<div class="field">
<div class="field narrower mt-2">
<div class="label" i18n="transaction.confirmed-at">Confirmed at</div>
<div class="value">
&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
@@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="field">
<div class="field narrower">
<div class="label" i18n="transaction.block-height">Block height</div>
<div class="value">
<span class="justify-content-end d-flex align-items-center">

4
frontend/src/app/components/tracker/tracker.component.scss
View File

@@ -92,6 +92,10 @@
white-space: nowrap;
text-align: end;
}
&.narrower {
padding-top: 0.75em !important;
padding-bottom: 0.75em !important;
}
}
.tracker-bar {

2
frontend/src/app/components/tracker/tracker.component.ts
View File

@@ -143,7 +143,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
if (this.acceleratorAvailable && this.stateService.ref === 'https://cash.app/') {
if (this.acceleratorAvailable && this.stateService.referrer === 'https://cash.app/') {
this.paymentType = 'cashapp';
}
const urlParams = new URLSearchParams(window.location.search);

7
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -745,11 +745,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}
resetTransaction() {
if (!this.firstLoad) {
this.stateService.ref = '';
} else {
this.firstLoad = false;
}
this.firstLoad = false;
this.error = undefined;
this.tx = null;
this.setFeatures();
@@ -845,7 +841,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}
ngOnDestroy() {
this.stateService.ref = '';
this.subscription.unsubscribe();
this.fetchCpfpSubscription.unsubscribe();
this.fetchRbfSubscription.unsubscribe();

6
frontend/src/app/services/state.service.ts
View File

@@ -86,7 +86,7 @@ const defaultEnv: Env = {
providedIn: 'root'
})
export class StateService {
ref: string = '';
referrer: string = '';
isBrowser: boolean = isPlatformBrowser(this.platformId);
isMempoolSpaceBuild = window['isMempoolSpaceBuild'] ?? false;
backend: 'esplora' | 'electrum' | 'none' = 'esplora';
@@ -164,7 +164,7 @@ export class StateService {
private router: Router,
private storageService: StorageService,
) {
this.ref = window.document.referrer;
this.referrer = window.document.referrer;
const browserWindow = window || {};
// @ts-ignore
@@ -192,7 +192,7 @@ export class StateService {
}
});
if (this.ref === 'https://cash.app/' && window.innerWidth < 850 && window.location.pathname.startsWith('/tx/')) {
if (this.referrer === 'https://cash.app/' && window.innerWidth < 850 && window.location.pathname.startsWith('/tx/')) {
this.router.navigate(['/tracker/' + window.location.pathname.slice(4)]);
}