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/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,