Upgrade to Angular 14

frontend/src/app/app-routing.module.ts

@@ -627,7 +627,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
-    initialNavigation: 'enabled',
+    initialNavigation: 'enabledBlocking',
     scrollPositionRestoration: 'enabled',
     anchorScrolling: 'enabled',
     preloadingStrategy: AppPreloadingStrategy

frontend/src/app/bisq/bisq-market/bisq-market.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, merge, Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -19,7 +19,7 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
   currency$: Observable<any>;
   offers$: Observable<OffersMarket>;
   trades$: Observable<Trade[]>;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
   defaultInterval = 'day';
 
   isLoadingGraph = false;
@@ -28,7 +28,7 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private route: ActivatedRoute,
     private bisqApiService: BisqApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private seoService: SeoService,
     private router: Router,
   ) { }

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -5,7 +5,7 @@ import { Observable, Subscription } from 'rxjs';
 import { switchMap, map, tap } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from '../../services/seo.service';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from '../../components/ngx-bootstrap-multiselect/types'
 import { WebsocketService } from '../../services/websocket.service';
@@ -23,7 +23,7 @@ export class BisqTransactionsComponent implements OnInit, OnDestroy {
   fiveItemsPxSize = 250;
   isLoading = true;
   loadingItems: number[];
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
   types: string[] = [];
   radioGroupSubscription: Subscription;
 
@@ -70,7 +70,7 @@ export class BisqTransactionsComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private bisqApiService: BisqApiService,
     private seoService: SeoService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private cd: ChangeDetectorRef,

frontend/src/app/components/assets/assets-nav/assets-nav.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { merge, Observable, of, Subject } from 'rxjs';
@@ -19,7 +19,7 @@ import { environment } from '../../../../environments/environment';
 export class AssetsNavComponent implements OnInit {
   @ViewChild('instance', {static: true}) instance: NgbTypeahead;
   nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
-  searchForm: FormGroup;
+  searchForm: UntypedFormGroup;
   assetsCache: AssetExtended[];
 
   typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
@@ -30,7 +30,7 @@ export class AssetsNavComponent implements OnInit {
   itemsPerPage = 15;
 
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private seoService: SeoService,
     private router: Router,
     private assetsService: AssetsService,

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { AssetsService } from '../../services/assets.service';
 import { environment } from '../../../environments/environment';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
@@ -22,7 +22,7 @@ export class AssetsComponent implements OnInit {
 
   assets: AssetExtended[];
   assetsCache: AssetExtended[];
-  searchForm: FormGroup;
+  searchForm: UntypedFormGroup;
   assets$: Observable<AssetExtended[]>;
 
   page = 1;

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -5,7 +5,7 @@ import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
@@ -33,7 +33,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
   @Input() left: number | string = 75;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -50,7 +50,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
     private stateService: StateService,

frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts

@@ -5,7 +5,7 @@ import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
@@ -31,7 +31,7 @@ export class BlockFeesGraphComponent implements OnInit {
   @Input() left: number | string = 75;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -48,7 +48,7 @@ export class BlockFeesGraphComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
     private route: ActivatedRoute,

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts

@@ -5,7 +5,7 @@ import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
 import { StorageService } from '../../services/storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -31,7 +31,7 @@ export class BlockPredictionGraphComponent implements OnInit {
   @Input() left: number | string = 75;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -48,7 +48,7 @@ export class BlockPredictionGraphComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private zone: NgZone,
     private route: ActivatedRoute,

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -5,7 +5,7 @@ import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
 import { MiningService } from '../../services/mining.service';
 import { StorageService } from '../../services/storage.service';
@@ -31,7 +31,7 @@ export class BlockRewardsGraphComponent implements OnInit {
   @Input() left: number | string = 75;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -48,7 +48,7 @@ export class BlockRewardsGraphComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private miningService: MiningService,
     private storageService: StorageService,
     private route: ActivatedRoute,

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts

@@ -5,7 +5,7 @@ import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
@@ -30,7 +30,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
   @Input() left: number | string = 75;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -49,7 +49,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
     private route: ActivatedRoute,

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -5,7 +5,7 @@ import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { selectPowerOfTen } from '../../bitcoin.utils';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
@@ -34,7 +34,7 @@ export class HashrateChartComponent implements OnInit {
   @Input() left: number | string = 75;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -54,7 +54,7 @@ export class HashrateChartComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
     private route: ActivatedRoute,

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { poolsColor } from '../../app.constants';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
@@ -30,7 +30,7 @@ export class HashrateChartPoolsComponent implements OnInit {
   @Input() left: number | string = 25;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -48,7 +48,7 @@ export class HashrateChartPoolsComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private cd: ChangeDetectorRef,
     private storageService: StorageService,
     private miningService: MiningService,

frontend/src/app/components/language-selector/language-selector.component.ts

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { languages } from '../../app.constants';
 import { LanguageService } from '../../services/language.service';
 
@@ -11,12 +11,12 @@ import { LanguageService } from '../../services/language.service';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LanguageSelectorComponent implements OnInit {
-  languageForm: FormGroup;
+  languageForm: UntypedFormGroup;
   languages = languages;
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private languageService: LanguageService,
   ) { }
 

frontend/src/app/components/ngx-bootstrap-multiselect/ngx-bootstrap-multiselect.component.ts

@@ -17,8 +17,8 @@ import {
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormBuilder,
-  FormControl,
+  UntypedFormBuilder,
+  UntypedFormControl,
   NG_VALUE_ACCESSOR,
   Validator,
 } from '@angular/forms';
@@ -52,7 +52,7 @@ export class NgxDropdownMultiselectComponent implements OnInit,
   private localIsVisible = false;
   private workerDocClicked = false;
 
-  filterControl: FormControl = this.fb.control('');
+  filterControl: UntypedFormControl = this.fb.control('');
 
   @Input() options: Array<IMultiSelectOption>;
   @Input() settings: IMultiSelectSettings;
@@ -151,7 +151,7 @@ export class NgxDropdownMultiselectComponent implements OnInit,
   }
 
   constructor(
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private searchFilter: MultiSelectSearchFilter,
     differs: IterableDiffers,
     private cdRef: ChangeDetectorRef

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit, HostBinding } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EChartsOption, PieSeriesOption } from 'echarts';
 import { concat, Observable } from 'rxjs';
@@ -24,7 +24,7 @@ export class PoolRankingComponent implements OnInit {
   @Input() widget = false;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   isLoading = true;
   chartOptions: EChartsOption = {};
@@ -41,7 +41,7 @@ export class PoolRankingComponent implements OnInit {
   constructor(
     private stateService: StateService,
     private storageService: StorageService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private miningService: MiningService,
     private seoService: SeoService,
     private router: Router,

frontend/src/app/components/push-transaction/push-transaction.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ApiService } from '../../services/api.service';
 
 @Component({
@@ -8,13 +8,13 @@ import { ApiService } from '../../services/api.service';
   styleUrls: ['./push-transaction.component.scss']
 })
 export class PushTransactionComponent implements OnInit {
-  pushTxForm: FormGroup;
+  pushTxForm: UntypedFormGroup;
   error: string = '';
   txId: string = '';
   isLoading = false;
 
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private apiService: ApiService,
   ) { }
 

frontend/src/app/components/search-form/search-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, ElementRef } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AssetsService } from '../../services/assets.service';
 import { StateService } from '../../services/state.service';
@@ -22,7 +22,7 @@ export class SearchFormComponent implements OnInit {
   isSearching = false;
   isTypeaheading$ = new BehaviorSubject<boolean>(false);
   typeAhead$: Observable<any>;
-  searchForm: FormGroup;
+  searchForm: UntypedFormGroup;
   dropdownHidden = false;
 
   @HostListener('document:click', ['$event'])
@@ -48,7 +48,7 @@ export class SearchFormComponent implements OnInit {
   }
 
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private router: Router,
     private assetsService: AssetsService,
     private stateService: StateService,

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, LOCALE_ID, Inject, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { of, merge} from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
@@ -39,7 +39,7 @@ export class StatisticsComponent implements OnInit {
   mempoolUnconfirmedTransactionsData: any;
   mempoolTransactionsWeightPerSecondData: any;
 
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
   graphWindowPreference: string;
   inverted: boolean;
   feeLevelDropdownData = [];
@@ -47,7 +47,7 @@ export class StatisticsComponent implements OnInit {
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private websocketService: WebsocketService,
     private apiService: ApiService,

frontend/src/app/docs/docs.routing.module.ts

@@ -31,6 +31,7 @@ if (browserWindowEnv.BASE_MODULE && (browserWindowEnv.BASE_MODULE === 'bisq' ||
   routes = [
     {
       path: '',
+      pathMatch: 'full',
       redirectTo: 'faq'
     },
     {

frontend/src/app/graphs/graphs.routing.module.ts

@@ -139,6 +139,7 @@ const routes: Routes = [
           },
           {
             path: '',
+            pathMatch: 'full',
             redirectTo: 'mempool',
           },
           {

frontend/src/app/lightning/channels-list/channels-list.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { BehaviorSubject, merge, Observable } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
 import { isMobile } from '../../shared/common.utils';
@@ -23,7 +23,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
   itemsPerPage = 10;
   page = 1;
   channelsPage$ = new BehaviorSubject<number>(1);
-  channelStatusForm: FormGroup;
+  channelStatusForm: UntypedFormGroup;
   defaultStatus = 'open';
   status = 'open';
   publicKeySize = 25;
@@ -31,7 +31,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
 
   constructor(
     private lightningApiService: LightningApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) { 
     this.channelStatusForm = this.formBuilder.group({
       status: [this.defaultStatus],

frontend/src/app/lightning/group/group.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { map, Observable, share } from 'rxjs';
 import { SeoService } from '../../services/seo.service';
 import { GeolocationData } from '../../shared/components/geolocation/geolocation.component';
@@ -17,12 +17,12 @@ export class GroupComponent implements OnInit {
   skeletonLines: number[] = [];
   selectedSocketIndex = 0;
   qrCodeVisible = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-  socketToggleForm: FormGroup;
+  socketToggleForm: UntypedFormGroup;
 
   constructor(
     private lightningApiService: LightningApiService,
     private seoService: SeoService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) {
     for (let i = 0; i < 20; ++i) {
       this.skeletonLines.push(i);

frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts

@@ -3,7 +3,7 @@ import { EChartsOption } from 'echarts';
 import { Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { formatNumber } from '@angular/common';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { StorageService } from '../../services/storage.service';
 import { download } from '../../shared/graphs.utils';
 import { LightningApiService } from '../lightning-api.service';
@@ -29,7 +29,7 @@ export class NodeStatisticsChartComponent implements OnInit {
   @Input() widget = false;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts

@@ -3,7 +3,7 @@ import { EChartsOption, graphic, LineSeriesOption} from 'echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { formatNumber } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
 import { download } from '../../shared/graphs.utils';
@@ -32,7 +32,7 @@ export class NodesNetworksChartComponent implements OnInit {
   @Input() widget = false;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -51,7 +51,7 @@ export class NodesNetworksChartComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private lightningApiService: LightningApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
     private amountShortenerPipe: AmountShortenerPipe,

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
 import { download } from '../../shared/graphs.utils';
@@ -31,7 +31,7 @@ export class LightningStatisticsChartComponent implements OnInit {
   @Input() widget = false;
 
   miningWindowPreference: string;
-  radioGroupForm: FormGroup;
+  radioGroupForm: UntypedFormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -50,7 +50,7 @@ export class LightningStatisticsChartComponent implements OnInit {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private lightningApiService: LightningApiService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
     private amountShortenerPipe: AmountShortenerPipe,