Add simple mode checkout to main transaction page

frontend/src/app/components/transaction/transaction.component.html

@@ -84,9 +84,17 @@
 
       <div class="clearfix"></div>
 
-      <div class="box">
-        <app-accelerate-preview [tx]="tx" [miningStats]="miningStats" [scrollEvent]="scrollIntoAccelPreview" [showDetails]="showAccelerationDetails"></app-accelerate-preview>
-      </div>
+      @if (isLoggedIn()) {
+        <div class="box">
+          <app-accelerate-preview [tx]="tx" [miningStats]="miningStats" [scrollEvent]="scrollIntoAccelPreview" [showDetails]="showAccelerationDetails"></app-accelerate-preview>
+        </div>
+      } @else {
+        <ng-container *ngIf="(ETA$ | async) as eta;">
+          <app-accelerate-checkout *ngIf="(da$ | async) as da;" [cashappEnabled]="accelerationEligible" [tx]="tx" [eta]="eta" [miningStats]="miningStats" (close)="showAccelerationSummary = false" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100">
+            <span slot="cta-title">Urgent transaction? Get it confirmed faster.</span>
+          </app-accelerate-checkout>
+        </ng-container>
+      }
     </ng-container>
 
     <ng-template [ngIf]="showCpfpDetails">

frontend/src/app/components/transaction/transaction.component.ts

@@ -140,6 +140,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   showAccelerationSummary = false;
   showAccelerationDetails = false;
   scrollIntoAccelPreview = false;
+  accelerationEligible = false;
   auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
 
   @ViewChild('graphContainer')
@@ -397,6 +398,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           } else if ((this.tx?.acceleration && txPosition.position.acceleratedBy)) {
             this.tx.acceleratedBy = txPosition.position.acceleratedBy;
           }
+          this.accelerationEligible = txPosition?.position?.block > 0 && this.tx?.weight < 4000;
         }
       } else {
         this.mempoolPosition = null;
@@ -910,6 +912,11 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  isLoggedIn(): boolean {
+    const auth = this.storageService.getAuth();
+    return auth !== null;
+  }
+
   ngOnDestroy() {
     this.subscription.unsubscribe();
     this.fetchCpfpSubscription.unsubscribe();

frontend/src/app/components/transaction/transaction.module.ts

@@ -6,7 +6,10 @@ import { SharedModule } from '../../shared/shared.module';
 import { TxBowtieModule } from '../tx-bowtie-graph/tx-bowtie.module';
 import { GraphsModule } from '../../graphs/graphs.module';
 import { AcceleratePreviewComponent } from '../accelerate-preview/accelerate-preview.component';
+import { AccelerateCheckout } from '../accelerate-checkout/accelerate-checkout.component';
 import { AccelerateFeeGraphComponent } from '../accelerate-preview/accelerate-fee-graph.component';
+import { TrackerComponent } from '../tracker/tracker.component';
+import { TrackerBarComponent } from '../tracker/tracker-bar.component';
 
 const routes: Routes = [
   {
@@ -38,7 +41,10 @@ export class TransactionRoutingModule { }
   ],
   declarations: [
     TransactionComponent,
+    TrackerComponent,
+    TrackerBarComponent,
     AcceleratePreviewComponent,
+    AccelerateCheckout,
     AccelerateFeeGraphComponent,
   ]
 })