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] [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) {