UI/UX - New component for difficult adjustment. (#602)

* Add next difficulty blocks.
Add next difficulty target date.
Add next difficulty total progress.
Add ajustment difficulty avg min per block.

* Fix typo.

* Trigger difficulty calculation every 5 seconds.

* Add rxjs timer to difficultyEpoch.

* Fix pipe.

* Fix small bar position.

* Change i18n strings.

* Fix typo.

* Add time-until component.

* Speed up difficultyEpoch timer to 1000 ms.

* Fix values to 2 decimal places.

* Add title to fee and difficulty adjustment cards.

* Add title outside the card.

* Fix title to center position.

* Add other titles.

* Add new transalations strings.
Refactor time span component.

* Fix difficulty adjustment i18n string.
Fix duplicated i18n strings.

frontend/src/app/app.module.ts

@@ -32,7 +32,7 @@ import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
 import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
-import { TimespanComponent } from './components/timespan/timespan.component';
+import { TimeSpanComponent } from './components/time-span/time-span.component';
 import { SeoService } from './services/seo.service';
 import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component';
 import { AssetComponent } from './components/asset/asset.component';
@@ -71,7 +71,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     AmountComponent,
     LatestBlocksComponent,
     SearchFormComponent,
-    TimespanComponent,
+    TimeSpanComponent,
     AddressLabelsComponent,
     MempoolBlocksComponent,
     ChartistComponent,

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

@@ -19,8 +19,8 @@
       <div class="col">
         <span class="mempoolSize"><ng-container i18n="dashboard.mempool-size|Mempool size">Mempool size</ng-container>:</span>
         <div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData"><span [innerHtml]="mempoolBlocksData.size | bytes"></span> (<ng-container *ngTemplateOutlet="mempoolBlocksData.blocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: mempoolBlocksData.blocks }"></ng-container>)</div>
-          <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
+        <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
-          <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
+        <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
       </div>
     </div>
   </div>

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

@@ -27,7 +27,7 @@
           <ng-template #mergedBlock>
             <div class="time-difference">
               <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
-              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
+              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
             </div>
           </ng-template>
         </div>

frontend/src/app/components/time-since/time-since.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges, PLATFORM_ID, Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
+import { dates } from 'src/app/shared/i18n/dates';
 
 @Component({
   selector: 'app-time-since',
@@ -53,48 +54,49 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
   calculate() {
     const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
     if (seconds < 60) {
-      return $localize`:@@time-since.just-now:Just now`;
+      return $localize`:@@date-base.just-now:Just now`;
     }
     let counter;
     for (const i in this.intervals) {
       if (this.intervals.hasOwnProperty(i)) {
         counter = Math.floor(seconds / this.intervals[i]);
+        const dateStrings = dates(counter);
         if (counter > 0) {
           if (counter === 1) {
-            switch (i) { // singular (1 day ago)
+            switch (i) { // singular (1 day)
-              case 'year': return $localize`:@@time-since.year.ago:${counter}:INTERPOLATION: year ago`; break;
+              case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
-              case 'month': return $localize`:@@time-since.month.ago:${counter}:INTERPOLATION: month ago`; break;
+              case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
-              case 'week': return $localize`:@@time-since.week.ago:${counter}:INTERPOLATION: week ago`; break;
+              case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
-              case 'day': return $localize`:@@time-since.day.ago:${counter}:INTERPOLATION: day ago`; break;
+              case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
-              case 'hour': return $localize`:@@time-since.hour.ago:${counter}:INTERPOLATION: hour ago`; break;
+              case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
               case 'minute':
                 if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.min.ago:${counter}:INTERPOLATION: min ago`;
+                  return $localize`:@@time-since:${dateStrings.i18nMin}:DATE: ago`;
                 }
-                return $localize`:@@time-since.minute.ago:${counter}:INTERPOLATION: minute ago`;
+                return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`;
               case 'second':
                 if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.sec.ago:${counter}:INTERPOLATION: sec ago`;
+                  return $localize`:@@time-since:${dateStrings.i18nSec}:DATE: ago`;
                 }
-                return $localize`:@@time-since.second.ago:${counter}:INTERPOLATION: second ago`;
+                return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`;
             }
           } else {
-            switch (i) { // plural (2 days ago)
+            switch (i) { // plural (2 days)
-              case 'year': return $localize`:@@time-since.years.ago:${counter}:INTERPOLATION: years ago`; break;
+              case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
-              case 'month': return $localize`:@@time-since.months.ago:${counter}:INTERPOLATION: months ago`; break;
+              case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
-              case 'week': return $localize`:@@time-since.weeks.ago:${counter}:INTERPOLATION: weeks ago`; break;
+              case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
-              case 'day': return $localize`:@@time-since.days.ago:${counter}:INTERPOLATION: days ago`; break;
+              case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
-              case 'hour': return $localize`:@@time-since.hours.ago:${counter}:INTERPOLATION: hours ago`; break;
+              case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
               case 'minute':
                 if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.mins.ago:${counter}:INTERPOLATION: mins ago`;
+                  return $localize`:@@time-since:${dateStrings.i18nMins}:DATE: ago`;
                 }
-                return $localize`:@@time-since.minutes.ago:${counter}:INTERPOLATION: minutes ago`;
+                return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`;
               case 'second':
                 if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.secs.ago:${counter}:INTERPOLATION: secs ago`;
+                  return $localize`:@@time-since:${dateStrings.i18nSecs}:DATE: ago`;
                 }
-                return $localize`:@@time-since.seconds.ago:${counter}:INTERPOLATION: seconds ago`;
+                return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`;
             }
           }
         }

frontend/src/app/components/time-span/time-span.component.ts

@@ -0,0 +1,107 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { dates } from 'src/app/shared/i18n/dates';
+
+@Component({
+  selector: 'app-time-span',
+  template: `{{ text }}`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy {
+  interval: number;
+  text: string;
+  intervals = {};
+
+  @Input() time: number;
+  @Input() fastRender = false;
+
+  constructor(
+    private ref: ChangeDetectorRef,
+    private stateService: StateService,
+  ) {
+      this.intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+      };
+  }
+
+  ngOnInit() {
+    if (!this.stateService.isBrowser) {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+      return;
+    }
+    this.interval = window.setInterval(() => {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+    }, 1000 * (this.fastRender ? 1 : 60));
+  }
+
+  ngOnChanges() {
+    this.text = this.calculate();
+    this.ref.markForCheck();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  calculate() {
+    const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
+    if (seconds < 60) {
+      return $localize`:@@date-base.just-now:Just now`;
+    }
+    let counter;
+    for (const i in this.intervals) {
+      if (this.intervals.hasOwnProperty(i)) {
+        counter = Math.floor(seconds / this.intervals[i]);
+        const dateStrings = dates(counter);
+        if (counter > 0) {
+          if (counter === 1) {
+            switch (i) { // singular (1 day)
+              case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
+              case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
+              case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
+              case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
+              case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
+              case 'minute':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-span:After ${dateStrings.i18nMin}:DATE:`;
+                }
+                return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`;
+              case 'second':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-span:After ${dateStrings.i18nSec}:DATE:`;
+                }
+                return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`;
+            }
+          } else {
+            switch (i) { // plural (2 days)
+              case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
+              case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
+              case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
+              case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
+              case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
+              case 'minute':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-span:After ${dateStrings.i18nMins}:DATE:`;
+                }
+                return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`;
+              case 'second':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-span:After ${dateStrings.i18nSecs}:DATE:`;
+                }
+                return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

frontend/src/app/components/time-until/time-until.component.ts

@@ -0,0 +1,108 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { dates } from 'src/app/shared/i18n/dates';
+
+@Component({
+  selector: 'app-time-until',
+  template: `{{ text }}`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
+  interval: number;
+  text: string;
+  intervals = {};
+
+  @Input() time: number;
+  @Input() fastRender = false;
+
+  constructor(
+    private ref: ChangeDetectorRef,
+    private stateService: StateService,
+  ) {
+      this.intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+      };
+  }
+
+  ngOnInit() {
+    if (!this.stateService.isBrowser) {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+      return;
+    }
+    this.interval = window.setInterval(() => {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+    }, 1000 * (this.fastRender ? 1 : 60));
+  }
+
+  ngOnChanges() {
+    this.text = this.calculate();
+    this.ref.markForCheck();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  calculate() {
+    const seconds = Math.floor((+new Date(this.time) - +new Date()) / 1000);
+
+    if (seconds < 60) {
+      return $localize`:@@date-base.last-minute:In ~1 min`;
+    }
+    let counter;
+    for (const i in this.intervals) {
+      if (this.intervals.hasOwnProperty(i)) {
+        counter = Math.floor(seconds / this.intervals[i]);
+        const dateStrings = dates(counter);
+        if (counter > 0) {
+          if (counter === 1) {
+            switch (i) { // singular (In ~1 day)
+              case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
+              case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
+              case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
+              case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
+              case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
+              case 'minute':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-until:In ~${dateStrings.i18nMin}:DATE:`;
+                }
+                return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
+              case 'second':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-until:In ~${dateStrings.i18nSec}:DATE:`;
+                }
+                return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
+            }
+          } else {
+            switch (i) { // plural (In ~2 days)
+              case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
+              case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
+              case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
+              case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
+              case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
+              case 'minute':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-until:In ~${dateStrings.i18nMins}:DATE:`;
+                }
+                return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`;
+              case 'second':
+                if (document.body.clientWidth < 768) {
+                  return $localize`:@@time-until:In ~${dateStrings.i18nSecs}:DATE:`;
+                }
+                return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

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

@@ -1,45 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
-
-@Component({
-  selector: 'app-timespan',
-  template: `{{ text }}`,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TimespanComponent implements OnChanges {
-  @Input() time: number;
-  text: string;
-
-  constructor() { }
-
-  ngOnChanges() {
-    const seconds = this.time;
-    if (seconds < 60) {
-      this.text = '< 1 minute';
-      return;
-    }
-    const intervals = {
-        year: 31536000,
-        month: 2592000,
-        week: 604800,
-        day: 86400,
-        hour: 3600,
-        minute: 60,
-        second: 1
-    };
-    let counter;
-    for (const i in intervals) {
-      if (intervals.hasOwnProperty(i)) {
-        counter = Math.floor(seconds / intervals[i]);
-        if (counter > 0) {
-          if (counter === 1) {
-              this.text = counter + ' ' + i; // singular (1 day ago)
-              break;
-          } else {
-              this.text = counter + ' ' + i + 's'; // plural (2 days ago)
-              break;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -65,7 +65,7 @@
                 <ng-template [ngIf]="transactionTime > 0">
                   <tr>
                     <td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
-                    <td><ng-container i18n="transaction.confirmed.after|Transaction confirmed after">After <app-timespan [time]="tx.status.block_time - transactionTime"></app-timespan></ng-container></td>
+                    <td><app-time-span [time]="tx.status.block_time - transactionTime" [fastRender]="true"></app-time-span></td>
                   </tr>
                 </ng-template>
                 <tr *ngIf="network !== 'liquid'">
@@ -321,8 +321,8 @@
 
 <ng-template let-i #nextBlockEta i18n="mempool-blocks.eta-of-next-block|Block Frequency">In ~{{ i }} minute</ng-template>
 
-<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
+<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
-<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
+<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
 
 <ng-template #feeTable>
   <table class="table table-borderless table-striped">

frontend/src/app/dashboard/dashboard.component.html

@@ -1,9 +1,9 @@
 
 <div class="container-xl dashboard-container">
-
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
-      <div class="col">
+      <div class="col card-wrapper">
+        <div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -29,7 +29,8 @@
       </div>
     </ng-template>
     <ng-template #expanded>
-      <div class="col">
+      <div class="col card-wrapper">
+        <div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -198,14 +199,61 @@
 </ng-template>
 
 <ng-template #difficultyEpoch>
+  <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+  <div class="card-wrapper">
     <div class="card">
       <div class="card-body more-padding">
-      <h5 class="card-title" i18n="dashboard.difficulty-adjustment">Difficulty adjustment</h5>
+        <div class="difficulty-adjustment-container" *ngIf="(difficultyEpoch$ | async) as epochData; else loadingDifficulty">
-      <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+            <div class="card-text">
+              <ng-container *ngTemplateOutlet="epochData.remainingBlocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.remainingBlocks }"></ng-container>
+              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+              <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
+            </div>
+            <div class="symbol"><app-time-until [time]="epochData.remainingTime" [fastRender]="true"></app-time-until></div>
+          </div>
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+            <div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">{{ epochData.change | number: '1.2-2' }} <span class="symbol">%</span></div>
+            <div class="symbol">~{{ epochData.timeAvg }} <span i18n="difficulty-box.mins-per-block">mins per block</span></div>
+          </div>
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+            <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
+            <div class="progress small-bar">
               <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
               <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
-        <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
+            </div>
-        <div class="progress-text"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+
+<ng-template #loadingDifficulty>
+  <div class="difficulty-skeleton loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
       </div>
     </div>
   </div>

frontend/src/app/dashboard/dashboard.component.scss

@@ -42,7 +42,7 @@
 }
 
 .more-padding {
-  padding: 1.25rem 2rem 1.25rem 2rem;
+  padding: 18px;
 }
 
 .graph-card {
@@ -213,3 +213,115 @@
 .terms-of-service {
   margin-top: 1rem;
 }
+
+.small-bar {
+  height: 8px;
+  top: -4px;
+}
+
+.difficulty-adjustment-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 76px;
+  .shared-block {
+    color: #ffffff66;
+    font-size: 12px;
+  }
+  .item {    
+    max-width: 130px;
+    padding: 0 5px;
+    width: 100%;
+    &:nth-child(1){
+      display: none;
+      @media (min-width: 485px) {
+        display: table-cell;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: table-cell;
+      }
+    }
+  }
+  .card-text {
+    font-size: 22px;
+    margin-top: -9px;
+    position: relative;
+  }
+}
+
+
+.difficulty-skeleton {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }    
+    &:first-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }    
+      @media (min-width: 768px) {
+        display: none;
+      }    
+      @media (min-width: 992px) {
+        display: block;
+      }    
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    margin: 7px auto;
+    &:first-child {
+      max-width: 80px;
+    }
+    &:last-child {
+      max-width: 110px;
+    }
+  }
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
-import { combineLatest, merge, Observable, of } from 'rxjs';
+import { combineLatest, merge, Observable, of, timer } from 'rxjs';
 import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { Block } from '../interfaces/electrs.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -22,6 +22,12 @@ interface EpochProgress {
   green: string;
   red: string;
   change: number;
+  progress: string;
+  remainingBlocks: number;
+  newDifficultyHeight: number;
+  colorAdjustments: string;
+  timeAvg: string;
+  remainingTime: number;
 }
 
 interface MempoolInfoData {
@@ -108,17 +114,21 @@ export class DashboardComponent implements OnInit {
       })
     );
 
-    this.difficultyEpoch$ = combineLatest([
+    this.difficultyEpoch$ = timer(0, 1000)
+      .pipe(
+        switchMap(() => combineLatest([
           this.stateService.blocks$.pipe(map(([block]) => block)),
           this.stateService.lastDifficultyAdjustment$
-    ])
+        ])),
-    .pipe(
         map(([block, DATime]) => {
           const now = new Date().getTime() / 1000;
           const diff = now - DATime;
           const blocksInEpoch = block.height % 2016;
           const estimatedBlocks = Math.round(diff / 60 / 10);
-        const difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          let difficultyChange = 0;
+          if (blocksInEpoch > 0) {
+            difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          }
 
           let base = 0;
           let green = 0;
@@ -132,11 +142,36 @@ export class DashboardComponent implements OnInit {
             red = Math.min((estimatedBlocks - blocksInEpoch) / 2016 * 100, 100 - base);
           }
 
+          let colorAdjustments = '#dc3545';
+          if (difficultyChange >= 0) {
+            colorAdjustments = '#299435';
+          }
+
+          const timeAvgDiff = difficultyChange * 0.1;
+
+          let timeAvgMins = 10;
+          if (timeAvgDiff > 0 ){
+            timeAvgMins -= Math.abs(timeAvgDiff);
+          } else {
+            timeAvgMins += Math.abs(timeAvgDiff);
+          }
+          const remainingBlocks = 2016 - blocksInEpoch;
+          const nowMilliseconds = now * 1000;
+          const timeAvgMilliseconds = timeAvgMins * 60 * 1000;
+          const remainingBlocsMilliseconds = remainingBlocks * timeAvgMilliseconds;
+
           return {
             base: base + '%',
             green: green + '%',
             red: red + '%',
             change: difficultyChange,
+            progress: base.toFixed(2),
+            remainingBlocks,
+            timeAvg: timeAvgMins.toFixed(0),
+            colorAdjustments,
+            blocksInEpoch,
+            newDifficultyHeight: block.height + remainingBlocks,
+            remainingTime: remainingBlocsMilliseconds + nowMilliseconds
           };
         })
       );

frontend/src/app/shared/i18n/dates.ts

@@ -0,0 +1,22 @@
+export const dates = (counter: number) => {
+    return {
+        i18nYear: $localize`:@@date-base.year:${counter}:DATE: year`,
+        i18nYears: $localize`:@@date-base.years:${counter}:DATE: years`,
+        i18nMonth: $localize`:@@date-base.month:${counter}:DATE: month`,
+        i18nMonths: $localize`:@@date-base.months:${counter}:DATE: months`,
+        i18nWeek: $localize`:@@date-base.week:${counter}:DATE: week`,
+        i18nWeeks: $localize`:@@date-base.weeks:${counter}:DATE: weeks`,
+        i18nDay: $localize`:@@date-base.day:${counter}:DATE: day`,
+        i18nDays: $localize`:@@date-base.days:${counter}:DATE: days`,
+        i18nHour: $localize`:@@date-base.hour:${counter}:DATE: hour`,
+        i18nHours: $localize`:@@date-base.hours:${counter}:DATE: hours`,
+        i18nMinute: $localize`:@@date-base.minute:${counter}:DATE: minute`,
+        i18nMinutes: $localize`:@@date-base.minutes:${counter}:DATE: minutes`,
+        i18nMin: $localize`:@@date-base.min:${counter}:DATE: min`,
+        i18nMins: $localize`:@@date-base.mins:${counter}:DATE: mins`,
+        i18nSecond: $localize`:@@date-base.second:${counter}:DATE: second`,
+        i18nSeconds: $localize`:@@date-base.seconds:${counter}:DATE: seconds`,
+        i18nSec: $localize`:@@date-base.sec:${counter}:DATE: sec`,
+        i18nSecs: $localize`:@@date-base.secs:${counter}:DATE: secs`,
+    }
+}

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

@@ -11,6 +11,7 @@ import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubke
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
 import { TimeSinceComponent } from '../components/time-since/time-since.component';
+import { TimeUntilComponent } from '../components/time-until/time-until.component';
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
 import { QrcodeComponent } from '../components/qrcode/qrcode.component';
 import { FiatComponent } from '../fiat/fiat.component';
@@ -25,6 +26,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
   declarations: [
     ClipboardComponent,
     TimeSinceComponent,
+    TimeUntilComponent,
     QrcodeComponent,
     FiatComponent,
     TxFeaturesComponent,
@@ -65,6 +67,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     NgbPaginationModule,
     NgbDropdownModule,
     TimeSinceComponent,
+    TimeUntilComponent,
     ClipboardComponent,
     QrcodeComponent,
     FiatComponent,