Add logo to tx tracker page, fix bugs

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

@@ -1,6 +1,9 @@
 <div class="mobile-wrapper">
   <div class="mobile-container">
     <div class="panel">
+      <div class="field nav-header">
+          <app-svg-images name="officialMempoolSpace" style="width: 144px; height: 36px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+      </div>
       <div class="field">
         <div class="label" i18n="shared.transaction">Transaction</div>
         <div class="value">
@@ -37,7 +40,7 @@
             }
           }
         </div>
-        @if (tx && !tx.status?.confirmed && mempoolPosition) {
+        @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
           <div class="field">
             <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
             <div class="value">

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

@@ -8,6 +8,7 @@
 .mobile-container {
   width: 100vw;
   height: 100vh;
+  height: 100svh;
   max-width: 600px;
   max-height: 1000px;
   box-sizing: border-box;
@@ -21,6 +22,29 @@
   }
 }
 
+.heading {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  & > * {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  .heading-label {
+    text-align: center;
+    margin: 0 1em;
+  }
+}
+
+.nav-header {
+  position: relative;
+  box-shadow: 0 -5px 15px #000;
+  z-index: 100;
+}
+
 .blockchain-wrapper {
   position: relative;
   display: flex;