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';
     }
 

frontend/src/app/shared/shared.module.ts

@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@@ -416,5 +416,8 @@ export class SharedModule {
     library.addIcons(faCheck);
     library.addIcons(faRocket);
     library.addIcons(faScaleBalanced);
+    library.addIcons(faHourglassStart);
+    library.addIcons(faHourglassHalf);
+    library.addIcons(faHourglassEnd);
   }
 }