Add meta titles+descriptions to pages missing them

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -5,6 +5,8 @@ import { BlockExtended } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-blocks-list',
@@ -35,6 +37,7 @@ export class BlocksList implements OnInit {
     private websocketService: WebsocketService,
     public stateService: StateService,
     private cd: ChangeDetectorRef,
+    private seoService: SeoService,
   ) {
   }
 
@@ -50,6 +53,14 @@ export class BlocksList implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
 
+    this.seoService.setTitle($localize`:@@meta.title.blocks-list:Blocks`);
+    if( this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet' ) {
+      this.seoService.setDescription($localize`:@@meta.description.liquid.blocks:See the most recent Liquid${seoDescriptionNetwork(this.stateService.network)} blocks along with basic stats such as block height, block size, and more.`);
+    } else {
+      this.seoService.setDescription($localize`:@@meta.description.bitcoin.blocks:See the most recent Bitcoin${seoDescriptionNetwork(this.stateService.network)} blocks along with basic stats such as block height, block reward, block size, and more.`);
+    }
+
+
     this.blocks$ = combineLatest([
       this.fromHeightSubject.pipe(
         switchMap((fromBlockHeight) => {

frontend/src/app/components/privacy-policy/privacy-policy.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
 
 @Component({
   selector: 'app-privacy-policy',
@@ -11,5 +12,11 @@ export class PrivacyPolicyComponent {
 
   constructor(
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
+
+  ngOnInit(): void {
+    this.seoService.setTitle('Privacy Policy');
+    this.seoService.setDescription('Trusted third parties are security holes, as are trusted first parties...you should only trust your own self-hosted instance of The Mempool Open Source Project™.');
+  }
 }

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

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-push-transaction',
@@ -16,12 +19,17 @@ export class PushTransactionComponent implements OnInit {
   constructor(
     private formBuilder: UntypedFormBuilder,
     private apiService: ApiService,
+    public stateService: StateService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit(): void {
     this.pushTxForm = this.formBuilder.group({
       txHash: ['', Validators.required],
     });
+
+    this.seoService.setTitle($localize`:@@meta.title.push-tx:Broadcast Transaction`);
+    this.seoService.setDescription($localize`:@@meta.description.push-tx:Broadcast a transaction to the ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} network using the transaction's hash.`);
   }
 
   postTx() {

frontend/src/app/components/rbf-list/rbf-list.component.ts

@@ -6,6 +6,8 @@ import { WebsocketService } from '../../services/websocket.service';
 import { RbfTree } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
 import { StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-rbf-list',
@@ -26,6 +28,7 @@ export class RbfList implements OnInit, OnDestroy {
     private apiService: ApiService,
     public stateService: StateService,
     private websocketService: WebsocketService,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit(): void {
@@ -51,6 +54,9 @@ export class RbfList implements OnInit, OnDestroy {
         this.isLoading = false;
       })
     );
+
+    this.seoService.setTitle($localize`:@@meta.title.rbf-list:RBF Replacements`);
+    this.seoService.setDescription($localize`:@@meta.description.rbf-list:See the most recent RBF replacements on the Bitcoin${seoDescriptionNetwork(this.stateService.network)} network, updated in real-time.`);
   }
 
   ngOnDestroy(): void {

frontend/src/app/components/terms-of-service/terms-of-service.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
 
 @Component({
   selector: 'app-terms-of-service',
@@ -10,5 +11,11 @@ export class TermsOfServiceComponent {
 
   constructor(
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
+
+  ngOnInit(): void {
+    this.seoService.setTitle('Terms of Service');
+    this.seoService.setDescription('Out of respect for the Bitcoin community, the mempool.space website is Bitcoin Only and does not display any advertising.');
+  }
 }

frontend/src/app/components/trademark-policy/trademark-policy.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
 
 @Component({
   selector: 'app-trademark-policy',
@@ -11,5 +12,11 @@ export class TrademarkPolicyComponent {
 
   constructor(
     private stateService: StateService,
+    private seoService: SeoService,
   ) { }
+
+  ngOnInit(): void {
+    this.seoService.setTitle('Trademark Policy');
+    this.seoService.setDescription('An overview of the trademarks registered by Mempool Space K.K. and The Mempool Open Source Project™ and what we consider to be lawful usage of those trademarks.');
+  }
 }