Basic tracker page structure

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

@@ -1,3 +1,76 @@
-<div class="container-xl">
-  🍕
+<div class="mobile-wrapper">
+  <div class="mobile-container">
+    <div class="panel">
+      <div class="field">
+        <div class="label" i18n="shared.transaction">Transaction</div>
+        <div class="value">
+          <app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
+            <app-clipboard [text]="txId"></app-clipboard>
+          </app-truncate>
+        </div>
+      </div>
+    </div>
+      <div class="blockchain-wrapper" [style]="{ height: blockchainHeight * 1.16 + 'px' }">
+        <app-clockchain [height]="blockchainHeight" [width]="blockchainWidth" mode="none"></app-clockchain>
+      </div>
+    <div class="panel">
+      <div class="tracker-bar">
+        <app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
+      </div>
+      <div class="explain">
+        <div class="field">
+          @switch (trackerStage) {
+            @case ('waiting') {
+              <span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
+            }
+            @case ('pending') {
+              <span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
+            }
+            @case ('soon') {
+              <span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
+            }
+            @case ('next') {
+              <span i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
+            }
+            @case ('confirmed') {
+              <span i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
+            }
+          }
+        </div>
+        @if (tx && !tx.status?.confirmed && mempoolPosition) {
+          <div class="field">
+            <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
+            <div class="value">
+              <span class="justify-content-end d-flex align-items-center">
+                @if (mempoolPosition?.block >= 7) {
+                  <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
+                } @else {
+                  <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
+                }
+                @if (isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+                  <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                }
+              </span>
+            </div>
+          </div>
+        } @else if (tx && tx.status?.confirmed) {
+          <div class="field">
+            <div class="label" i18n="transaction.block-height">Block height</div>
+            <div class="value">
+              <span class="justify-content-end d-flex align-items-center">
+                <a [routerLink]="['/block/' | relativeUrl, tx.status?.block_height]" class="block-link">{{ tx.status?.block_height }}</a>
+                <div class="confirmations">
+                  <app-confirmations
+                    *ngIf="tx"
+                    [chainTip]="latestBlock?.height"
+                    [height]="tx?.status?.block_height"
+                  ></app-confirmations>
+                </div>
+              </span>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
 </div>