Tracker bottom panel with status icon

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

@@ -72,5 +72,35 @@
         }
       </div>
     </div>
+
+    <div class="bottom-panel">
+      @if (showAccelerationSummary) {
+        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [tx]="tx" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
+      } @else {
+        <div class="progress-icon">
+          @switch (trackerStage) {
+            @case ('waiting') {
+              <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
+            }
+            @case ('pending') {
+              <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('soon') {
+              <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('next') {
+              <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('confirmed') {
+              <fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
+            }
+          }
+        </div>
+      }
+    </div>
+
+    <div class="footer-link" [routerLink]="['/tx' | relativeUrl, tx?.txid]">
+      <span>See more details <fa-icon [icon]="['fas', 'arrow-alt-circle-right']"></fa-icon></span>
+    </div>
   </div>
 </div>

frontend/src/app/components/tracker/tracker.component.scss

@@ -1,6 +1,5 @@
 .mobile-wrapper {
   width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8,11 +7,18 @@
 
 .mobile-container {
   width: 100vw;
-  height: 100%;
+  height: 100vh;
   max-width: 600px;
   max-height: 1000px;
   box-sizing: border-box;
   margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+  & > * {
+    flex-shrink: 0;
+  }
 }
 
 .blockchain-wrapper {
@@ -25,7 +31,7 @@
 }
 
 .panel {
-  background: var(--box-bg);
+  background: var(--bg);
 }
 
 .field {
@@ -72,4 +78,27 @@
   height: 100%;
   padding: 0.5rem 0.25rem;
   background-color: #653b9c;
+}
+
+.bottom-panel {
+  flex-grow: 1;
+}
+
+.progress-icon {
+  font-size: clamp(50px, 30vw, 200px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.5em;
+  background: var(--primary);
+  color: white;
 }

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

@@ -144,7 +144,6 @@ 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/') {
-      this.showAccelerationSummary = true;
       this.paymentType = 'cashapp';
     }