Upgrade to Angular 14

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,