From fdd6463ac0f97843e49f40adf7380261ce79069a Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Sun, 14 Apr 2024 16:29:56 +0900 Subject: [PATCH 1/5] [ui] polish pizza accelerator --- .../accelerate-checkout.component.html | 248 +++++++++--------- .../accelerate-checkout.component.ts | 42 ++- .../accelerate-preview.component.ts | 2 +- .../components/tracker/tracker.component.html | 2 +- 4 files changed, 150 insertions(+), 144 deletions(-) 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 5a73a48cf..8faa4e53e 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -1,147 +1,135 @@ -
+
@if (error) { - - } @else { +
+ +
+ } - @if (step === 'completed') { -
-
-
-
-
Transaction is now being accelerated!
-
-
-
+ @else if (step === 'cta') { + +
+
+

Accelerate your Bitcoin transaction?

- } +
- @else if (step === 'cta') { - -
+
+
-

Accelerate your Bitcoin transaction?

-
-
- - -
-
-
- - -
-
-
-
-
-
- - -
-
-
-
-
- -
-
-
- } - - @else if (step === 'checkout') { - -
-
-

Confirm your payment

-
-
- -
-
-
- Payment to mempool.space for acceleration of txid {{ txid.substr(0, 10) }}..{{ txid.substr(-10) }} -
-
-
- - @if (!loadingCashapp) { -
-
-
- Total additional cost
- - Pay - - with - +
+ +
-
-
- } - -
-
-
-
- @if (loadingCashapp) { -
- Loading payment method... -
-
- } +
- -
-
-
- Changed your mind? - -
-
- } - - @else if (step === 'processing') { -
+
-

Confirm your payment

-
-
- - -
- -
-
-
-
- We are processing your payment... -
-
+
+ +
- } - - +
+
+ +
+
+ } + + @else if (step === 'checkout') { + +
+
+

Confirm your payment

+
+
+ +
+
+
+ Payment to mempool.space for acceleration of txid {{ txid.substr(0, 10) }}..{{ txid.substr(-10) }} +
+
+
+ + @if (!loadingCashapp) { +
+
+
+ Total additional cost
+ + Pay + + with + +
+
+
+
+ } + +
+
+
+
+ @if (loadingCashapp) { +
+ Loading payment method... +
+
+ } +
+
+
+ +
+
+
+ Changed your mind? + +
+
+ } + + @else if (step === 'processing') { +
+
+

Confirm your payment

+
+
+ +
+
+
+ +
+
+ We are processing your payment... +
+
+
+
+
+ } + +
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 dc2d03d02..961afdae7 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -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 { WebsocketService } from '../../services/websocket.service'; import { ServicesApiServices } from '../../services/services-api.service'; import { nextRoundNumber } from '../../shared/common.utils'; import { StateService } from '../../services/state.service'; @@ -14,6 +13,7 @@ import { AudioService } from '../../services/audio.service'; export class AccelerateCheckout implements OnInit, OnDestroy { @Input() eta: number = Date.now() + 123456789; @Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad'; + @Input() scrollEvent: boolean; @Output() close = new EventEmitter(); calculating = true; @@ -34,10 +34,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy { cashAppPay: any; cashAppSubscription: Subscription; conversionsSubscription: Subscription; - step: 'cta' | 'checkout' | 'processing' | 'completed' = 'cta'; + step: 'cta' | 'checkout' | 'processing' = 'cta'; constructor( - private websocketService: WebsocketService, private servicesApiService: ServicesApiServices, private stateService: StateService, 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 */ estimate() { @@ -206,10 +231,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { ).subscribe({ next: () => { that.audioService.playSound('ascend-chime-cartoon'); - that.step = 'completed'; - setTimeout(() => { - that.closeModal(); - }, 10000); + that.closeModal(); }, error: (response) => { if (response.status === 403 && response.error === 'not_available') { @@ -236,10 +258,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy { } selectedOptionChanged(event) { this.choosenOption = event.target.id; - if (this.choosenOption === 'wait') { - this.restart(); - this.closeModal(); - } } restart() { this.step = 'cta'; diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts index eaa995683..76833bb1a 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts @@ -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 { StorageService } from '../../services/storage.service'; import { Transaction } from '../../interfaces/electrs.interface'; diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index fc273aaaf..01b32b5e0 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -85,7 +85,7 @@
@if (showAccelerationSummary) { - + } @else { @if (tx?.acceleration && !tx.status?.confirmed) {
From d443e51d30594328bd98fa08e83bc7930045263d Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 16 Apr 2024 11:43:58 +0900 Subject: [PATCH 2/5] [accelerator] if eligible, show pizza accel summary by default --- frontend/src/app/components/tracker/tracker.component.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts index e9a6ab2ae..d07c87510 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -351,6 +351,9 @@ export class TrackerComponent implements OnInit, OnDestroy { } if (txPosition.position?.block > 0 && this.tx.weight < 4000) { this.accelerationEligible = true; + if (this.acceleratorAvailable && this.paymentType === 'cashapp') { + this.showAccelerationSummary = true; + } } } } else { From 64ba03360250daf8a30d78fe2cc82dd6ad76c4b1 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 16 Apr 2024 16:01:52 +0900 Subject: [PATCH 3/5] [accelerator] polish pizza accel --- .../accelerate-checkout.component.html | 28 +++++++++---------- .../components/tracker/tracker.component.html | 10 +++---- .../components/tracker/tracker.component.scss | 4 +++ .../components/tracker/tracker.component.ts | 2 +- .../transaction/transaction.component.ts | 7 +---- frontend/src/app/services/state.service.ts | 6 ++-- ...empool-accelerator-sparkles-compressed.svg | 1 - .../mempool-accelerator-sparkles-light.svg | 13 +++++++++ 8 files changed, 40 insertions(+), 31 deletions(-) delete mode 100644 frontend/src/resources/mempool-accelerator-sparkles-compressed.svg create mode 100644 frontend/src/resources/mempool-accelerator-sparkles-light.svg 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 8faa4e53e..cd19e2809 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -1,4 +1,4 @@ -
+
@if (error) {
@@ -8,7 +8,7 @@ @else if (step === 'cta') { -
+

Accelerate your Bitcoin transaction?

@@ -17,11 +17,11 @@
-
+
-
+
-
+
-
@@ -56,7 +56,7 @@ @else if (step === 'checkout') { -
+

Confirm your payment

@@ -64,7 +64,7 @@
-
+
Payment to mempool.space for acceleration of txid {{ txid.substr(0, 10) }}..{{ txid.substr(-10) }}
@@ -104,13 +104,13 @@
Changed your mind? - +
} @else if (step === 'processing') { -
+

Confirm your payment

@@ -129,7 +129,5 @@
} - -
diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 01b32b5e0..73a1800db 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -29,7 +29,7 @@
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) { -
+
First seen
@if (transactionTime > 0) { @@ -39,7 +39,7 @@ }
-
+
ETA
@@ -48,14 +48,14 @@ } @else { } - @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) { Accelerate }
} @else if (tx && tx.status?.confirmed) { -
+
Confirmed at
‎{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} @@ -64,7 +64,7 @@
-
+
Block height
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index 6d80c7521..90f4cbd4b 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -92,6 +92,10 @@ white-space: nowrap; text-align: end; } + &.narrower { + padding-top: 0.75em !important; + padding-bottom: 0.75em !important; + } } .tracker-bar { diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts index d07c87510..05bb0d097 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -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); diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 0be28f951..ed50b73d8 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -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(); diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 9dfec85e6..970bfcac3 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -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)]); } diff --git a/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg b/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg deleted file mode 100644 index 4a5bac3cc..000000000 --- a/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/resources/mempool-accelerator-sparkles-light.svg b/frontend/src/resources/mempool-accelerator-sparkles-light.svg new file mode 100644 index 000000000..8998e0c22 --- /dev/null +++ b/frontend/src/resources/mempool-accelerator-sparkles-light.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file From 96d85dcacd865d96c609ea870c76ade820172216 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 16 Apr 2024 16:56:37 +0900 Subject: [PATCH 4/5] [accelerator] polish pizza accel x2 --- .../accelerate-checkout.component.html | 2 +- .../accelerate-checkout.component.ts | 26 +++++++++---------- .../components/tracker/tracker.component.html | 4 +-- .../components/tracker/tracker.component.ts | 3 +-- 4 files changed, 17 insertions(+), 18 deletions(-) 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 cd19e2809..552e64d1e 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -104,7 +104,7 @@
Changed your mind? - +
} 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 961afdae7..cc5d0f821 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -62,7 +62,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.estimate(); } }); - } ngOnDestroy() { @@ -97,7 +96,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { } } - /** + /** * Accelerator */ estimate() { @@ -173,8 +172,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.payments = window.Square.payments(this.square.appId, this.square.locationId) await this.requestCashAppPayment(); } catch (e) { - console.error(e); - this.error = 'Error loading Square Payments'; + console.debug('Error loading Square Payments', e); return; } } @@ -189,7 +187,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { this.conversionsSubscription = this.stateService.conversions$.subscribe( async (conversions) => { if (this.cashAppPay) { - await this.cashAppPay.destroy(); + this.cashAppPay.destroy(); } const redirectHostname = document.location.hostname === 'localhost' ? `http://localhost:4200`: `https://${document.location.hostname}`; @@ -231,13 +229,22 @@ export class AccelerateCheckout implements OnInit, OnDestroy { ).subscribe({ next: () => { that.audioService.playSound('ascend-chime-cartoon'); - that.closeModal(); + if (that.cashAppPay) { + that.cashAppPay.destroy(); + } + setTimeout(() => { + that.closeModal(); + }, 1000); }, error: (response) => { if (response.status === 403 && response.error === 'not_available') { that.error = 'waitlisted'; } else { that.error = response.error; + setTimeout(() => { + const urlParams = new URLSearchParams(window.location.search); + window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``)); + }, 3000); } } }); @@ -259,14 +266,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { selectedOptionChanged(event) { this.choosenOption = event.target.id; } - restart() { - this.step = 'cta'; - this.choosenOption = 'wait'; - } closeModal(): void { - if (this.cashAppPay) { - this.cashAppPay.destroy(); - } this.close.emit(); } } diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 73a1800db..c75e6fec6 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -84,8 +84,8 @@
- @if (showAccelerationSummary) { - + @if (showAccelerationSummary && !accelerationFlowCompleted) { + } @else { @if (tx?.acceleration && !tx.status?.confirmed) {
diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts index 05bb0d097..484aa0070 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -19,11 +19,9 @@ import { WebsocketService } from '../../services/websocket.service'; import { AudioService } from '../../services/audio.service'; import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; -import { StorageService } from '../../services/storage.service'; import { seoDescriptionNetwork } from '../../shared/common.utils'; import { Filter } from '../../shared/filters.utils'; import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment, Acceleration } from '../../interfaces/node-api.interface'; -import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe'; import { PriceService } from '../../services/price.service'; import { ServicesApiServices } from '../../services/services-api.service'; import { EnterpriseService } from '../../services/enterprise.service'; @@ -111,6 +109,7 @@ export class TrackerComponent implements OnInit, OnDestroy { acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === ''; accelerationEligible: boolean = false; showAccelerationSummary = false; + accelerationFlowCompleted = false; scrollIntoAccelPreview = false; auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true; From ada18a041387d9df2b26253874317b14de0cd0a8 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 16 Apr 2024 17:02:10 +0900 Subject: [PATCH 5/5] [accelerator] fix redirects --- .../accelerate-checkout/accelerate-checkout.component.ts | 5 +++++ 1 file changed, 5 insertions(+) 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 cc5d0f821..249568efa 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -234,6 +234,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy { } setTimeout(() => { that.closeModal(); + if (window.history.replaceState) { + const urlParams = new URLSearchParams(window.location.search); + window.history.replaceState(null, null, window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, '')); + } }, 1000); }, error: (response) => { @@ -242,6 +246,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { } else { that.error = response.error; setTimeout(() => { + // Reset everything by reloading the page :D, can be improved const urlParams = new URLSearchParams(window.location.search); window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``)); }, 3000);