From 49b9a6f53d5bf4015f4a96ade805e30951279621 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Sat, 13 Apr 2024 16:11:49 +0900
Subject: [PATCH] [accelerator] concept accelerator a/b ctas

---
 .../accelerate-checkout.component.html        | 42 +++++++++++++++++++
 .../accelerate-checkout.component.scss        |  0
 .../accelerate-checkout.component.ts          | 17 ++++++++
 frontend/src/app/shared/shared.module.ts      |  3 ++
 ...empool-accelerator-sparkles-compressed.svg |  1 +
 5 files changed, 63 insertions(+)
 create mode 100644 frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
 create mode 100644 frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
 create mode 100644 frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
 create mode 100644 frontend/src/resources/mempool-accelerator-sparkles-compressed.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
new file mode 100644
index 000000000..6010fe47f
--- /dev/null
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
@@ -0,0 +1,42 @@
+<div class="container card" style="padding: 20px; background: var(--bg)">
+
+  <div class="row">
+    <div class="col-sm">
+      <h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
+    </div>
+  </div>
+
+  <form class="mt-3">
+    <div class="row">
+      <div class="col-sm">
+        <div class="form-group form-check">
+          <input type="radio" class="form-check-input" id="accelerate" name="accelerate">
+          <label class="form-check-label d-flex flex-column" for="accelerate">
+            <span class="font-weight-bold">Accelerate</span>
+            <span class="text-muted">Settlement expected in 1 hour or less<br>10,000 sats ($7.00) fee</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">
+          <label class="form-check-label d-flex flex-column" for="wait">
+            <span class="font-weight-bold">Wait</span>
+            <span class="text-muted">Settlement unlikely to occur within 24 hours</span>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="row mt-2">
+      <div class="col-sm d-flex flex-row justify-content-center">
+        <button type="submit" class="btn btn-light w-100 rounded-pill" style="max-width: 250px">
+          <img src="/resources/mempool-accelerator-sparkles-compressed.svg" height="25" class="mr-2" style="margin-left: -33px">
+          <span>Accelerate</span>
+        </button>
+      </div>
+    </div>
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
new file mode 100644
index 000000000..0591e58a2
--- /dev/null
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+@Component({
+  selector: 'app-accelerate-checkout',
+  templateUrl: './accelerate-checkout.component.html',
+  styleUrls: ['./accelerate-checkout.component.scss']
+})
+export class AccelerateCheckout implements OnInit, OnDestroy {
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy() {
+  }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 72d9eb04d..4c0acf222 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -96,6 +96,7 @@ import { MempoolErrorComponent } from './components/mempool-error/mempool-error.
 import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
 import { PendingStatsComponent } from '../components/acceleration/pending-stats/pending-stats.component';
 import { AccelerationStatsComponent } from '../components/acceleration/acceleration-stats/acceleration-stats.component';
+import { AccelerateCheckout } from '../components/accelerate-checkout/accelerate-checkout.component';
 
 import { BlockViewComponent } from '../components/block-view/block-view.component';
 import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
@@ -212,6 +213,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     MempoolErrorComponent,
     AccelerationsListComponent,
     AccelerationStatsComponent,
+    AccelerateCheckout,
     PendingStatsComponent,
     HttpErrorComponent,
   ],
@@ -334,6 +336,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     MempoolErrorComponent,
     AccelerationsListComponent,
     AccelerationStatsComponent,
+    AccelerateCheckout,
     PendingStatsComponent,
     HttpErrorComponent,
 
diff --git a/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg b/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg
new file mode 100644
index 000000000..4a5bac3cc
--- /dev/null
+++ b/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" width="979.085" height="747.647" viewBox="0 0 734.315 560.74" xmlns="http://www.w3.org/2000/svg"><path style="fill:#7b61aa;fill-rule:evenodd;stroke-width:0" transform="translate(-68.202 -122.51)" d="m470.9 400.54 53.51 20.55-19.71 51.32 37.42 14.36 19.7-51.32 52.64 20.21 15.39-40.09-52.64-20.21 20.02-52.15-37.41-14.36L539.8 381l-53.51-20.55zm-47.17 235.11 53.73-19.96 19.14 51.53 37.57-13.95-19.14-51.53 52.85-19.64-14.95-40.25-52.85 19.63-19.45-52.36-37.57 13.95 19.45 52.37-53.73 19.95zM83.14 479.9l53.73-19.96 19.15 51.53 37.57-13.95-19.14-51.53 52.85-19.64-14.95-40.25-52.86 19.63-19.45-52.36-37.57 13.95 19.45 52.37-53.73 19.95zM403 288.01l49.16-29.46 28.26 47.16 34.38-20.6-28.25-47.15 48.36-28.98-22.07-36.84-48.36 28.98-28.71-47.92-34.38 20.6 28.7 47.92-49.16 29.45zm-249.99-26.6 69.39-11.35 10.88 66.56 48.53-7.94-10.88-66.55 68.25-11.16-8.5-51.99-68.25 11.16-11.06-67.63-48.53 7.93 11.06 67.63-69.39 11.35zm169.87 173.4 40.47 9.7-9.3 38.8 28.29 6.78 9.3-38.8 39.8 9.53 7.26-30.31-39.8-9.54 9.45-39.43-28.29-6.78-9.45 39.43-40.46-9.69zm356.55 109.52 45.87-33 31.65 44 32.08-23.08-31.65-44 45.13-32.46-24.73-34.37-45.12 32.46-32.16-44.71-32.08 23.08 32.16 44.71-45.88 33zm-46.36 103.16 41.42-3.97 3.8 39.73 28.96-2.78-3.8-39.72 40.74-3.9-2.97-31.03-40.74 3.9-3.86-40.36-28.97 2.77 3.87 40.36-41.42 3.97z"/></svg>
\ No newline at end of file