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 86f008a61..301303c89 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -29,7 +29,7 @@ -
+
You are currently on the waitlist
@@ -280,12 +280,12 @@
You are currently on the waitlist for Mempool Accelerator™
-
+
- +
@if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) { -
+
} @else { -
+

Payment to mempool.space for acceleration of txid {{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}

@@ -490,12 +490,12 @@ @if (isLoggedIn() || canPayWithBitcoin || canPayWithCashapp) { - } @else { - diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss index da4dc8079..5cfd153bd 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss @@ -59,7 +59,11 @@ box-shadow: none !important; } -.estimateDisabled { +.grayOut { + opacity: 0.5; +} + +.disabled { opacity: 0.5; pointer-events: none; } @@ -184,4 +188,23 @@ @media (max-width: 640px) { flex-direction: column; } +} + +@keyframes box-shake { + 0% { transform: rotate(0deg); } + 10% { transform: rotate(-8deg); } + 20% { transform: rotate(8deg); } + 30% { transform: rotate(-8deg); } + 40% { transform: rotate(8deg); } + 50% { transform: rotate(-8deg); } + 60% { transform: rotate(8deg); } + 70% { transform: rotate(-8deg); } + 80% { transform: rotate(8deg); } + 90% { transform: rotate(-8deg); } + 100% { transform: rotate(0deg); } +} + +.error-shake { + box-shadow: 0 0 10px 2px var(--danger); + animation: box-shake 1.5s ease-in-out; } \ No newline at end of file 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 49eb990fa..791dc1ebc 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -63,6 +63,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { calculating = true; armed = false; + misfire = false; error = ''; math = Math; isMobile: boolean = window.innerWidth <= 767.98; @@ -149,6 +150,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy { moveToStep(step: CheckoutStep) { this._step = step; + this.misfire = false; if (!this.estimate && ['quote', 'summary', 'checkout'].includes(this.step)) { this.fetchEstimate(); } @@ -266,11 +268,16 @@ export class AccelerateCheckout implements OnInit, OnDestroy { * Advanced mode acceleration button clicked */ accelerate(): void { - if (this.canPay) { - if (this.isLoggedIn()) { - this.accelerateWithMempoolAccount(); + if (this.canPay && !this.calculating) { + if ((!this.armed && this.step === 'summary')) { + this.misfire = true; } else { - this.moveToStep('checkout'); + if (this.isLoggedIn()) { + this.accelerateWithMempoolAccount(); + } else { + this.armed = true; + this.moveToStep('checkout'); + } } } }