Merge branch 'master' into nymkappa/accel-checkout

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -174,29 +174,29 @@
 .blink{
   width:400px;
   height:400px;
-  border-bottom: 35px solid #FFF;
+  border-bottom: solid calc(0.3 * var(--block-size)) #FFF;
   animation: blink 0.2s infinite;
 }
 @keyframes blink{
   0% {
-    border-bottom: 35px solid green;
+    border-bottom: solid calc(0.3 * var(--block-size)) green;
   }
   50% {
-    border-bottom: 35px solid yellow;
+    border-bottom: solid calc(0.3 * var(--block-size)) yellow;
   }
   100% {
-    border-bottom: 35px solid orange;
+    border-bottom: solid calc(0.3 * var(--block-size)) orange;
   }
 }
 
 @-webkit-keyframes blink{
   0% {
-    border-bottom: 35px solid green;
+    border-bottom: solid calc(0.3 * var(--block-size)) green;
   }
   50% {
-    border-bottom: 35px solid yellow;
+    border-bottom: solid calc(0.3 * var(--block-size)) yellow;
   }
   100% {
-    border-bottom: 35px solid orange;
+    border-bottom: solid calc(0.3 * var(--block-size)) orange;
   }
 }

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">
@@ -17,27 +20,18 @@
       <div class="tracker-bar">
         <app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
       </div>
-      <div class="explain">
+      <div class="data">
+        @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
           <div class="field">
-          @switch (trackerStage) {
+            <div class="label" i18n="transaction.first-seen|Transaction first seen">First seen</div>
-            @case ('waiting') {
+            <div class="value">
-              <span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
+              @if (transactionTime) {
-            }
+                <i><app-time kind="since" [time]="transactionTime" [fastRender]="true"></app-time></i>
-            @case ('pending') {
+              } @else {
-              <span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
+                <span class="skeleton-loader"></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>
           <div class="field">
             <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
             <div class="value">
@@ -54,6 +48,15 @@
             </div>
           </div>
         } @else if (tx && tx.status?.confirmed) {
+          <div class="field">
+            <div class="label" i18n="transaction.confirmed-at">Confirmed at</div>
+            <div class="value">
+              &lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
+              <div class="lg-inline">
+                <i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true"></app-time>)</i>
+              </div>
+            </div>
+          </div>
           <div class="field">
             <div class="label" i18n="transaction.block-height">Block height</div>
             <div class="value">
@@ -77,25 +80,45 @@
       @if (showAccelerationSummary) {
         <app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
       } @else {
+        @if (tx?.acceleration && !tx.status?.confirmed) {
           <div class="progress-icon">
+            <fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
+          </div>
+          <span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
+        } @else {
           @switch (trackerStage) {
             @case ('waiting') {
+              <div class="progress-icon">
                 <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
+              </div>
+              <span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
             }
             @case ('pending') {
+              <div class="progress-icon">
                 <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
+              </div>
+              <span class="explainer" i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
             }
             @case ('soon') {
+              <div class="progress-icon">
                 <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
+              </div>
+              <span class="explainer" i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
             }
             @case ('next') {
+              <div class="progress-icon">
                 <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
+              </div>
+              <span class="explainer" i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
             }
             @case ('confirmed') {
+              <div class="progress-icon">
                 <fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
-            }
-          }
               </div>
+              <span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
+            }
+          }
+        }
       }
     </div>
 

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;
@@ -55,6 +79,7 @@
     flex-grow: 1;
     width: 0;
     white-space: nowrap;
+    text-align: end;
   }
 }
 
@@ -82,14 +107,19 @@
 
 .bottom-panel {
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .explainer {
+    margin: 0 1em;
+    text-align: center;
+  }
 }
 
 .progress-icon {
-  font-size: clamp(50px, 30vw, 200px);
+  font-size: clamp(30px, 20vw, 150px);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .footer-link {

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

@@ -338,6 +338,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
             this.setCpfpInfo(txPosition.cpfp);
           }
 
+          if (txPosition.position?.accelerated) {
+            this.tx.acceleration = true;
+          }
+
           if (txPosition.position?.block === 0) {
             this.trackerStage = 'next';
           } else if (txPosition.position?.block < 3){

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, faHourglassStart, faHourglassHalf, faHourglassEnd } 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, faWandMagicSparkles } 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';
@@ -419,5 +419,6 @@ export class SharedModule {
     library.addIcons(faHourglassStart);
     library.addIcons(faHourglassHalf);
     library.addIcons(faHourglassEnd);
+    library.addIcons(faWandMagicSparkles);
   }
 }