Global footer component that fixes Liquid

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html

@@ -107,12 +107,7 @@
 
   <app-language-selector></app-language-selector>
 
-  <div class="text-small text-center mt-3">
+  <app-global-footer></app-global-footer>
-    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-    |
-    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
-  </div>
-
 </div>
 
 <ng-template #loadingTmpl>

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

@@ -432,11 +432,12 @@
     {{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]
   </div>
 
+  <br><br>
 </div>
 
-<br>
 
 <ng-template #loadingSponsors>
   <br>
   <div class="spinner-border text-light"></div>
 </ng-template>
+

frontend/src/app/components/liquid-master-page/liquid-master-page.component.html

@@ -96,5 +96,6 @@
 
 <router-outlet></router-outlet>
 
-<br>
+<app-global-footer></app-global-footer>
+
 </ng-container>

frontend/src/app/components/master-page/master-page.component.html

@@ -69,26 +69,5 @@
   <router-outlet></router-outlet>
 </main>
 
-<footer *ngIf="networkPaths['mainnet'] !== '/about'">
+<app-global-footer></app-global-footer>
-  <div class="pref-selectors">
-    <div class="selector">
-      <app-language-selector></app-language-selector>
-    </div>
-    <div class="selector">
-      <app-fiat-selector></app-fiat-selector>
-    </div>
-  </div>
-
-  <div class="terms-of-service">
-    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-    |
-    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
-    |
-    <a *ngIf="officialMempoolSpace && networkPaths['mainnet'] === '/lightning' else broadcastTransaction" [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to our nodes</a>
-    <ng-template #broadcastTransaction>
-      <a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a>
-    </ng-template>
-  </div>
-  <br>
-</footer>
 </ng-container>

frontend/src/app/components/master-page/master-page.component.scss

@@ -193,27 +193,3 @@ nav {
     font-size: 7px;
   }
 }
-
-footer {
-  text-align: center;
-  margin-top: auto;
-}
-
-.terms-of-service {
-  margin-top: 1rem;
-}
-
-.pref-selectors {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  .selector {
-    margin-left: .5em;
-    margin-bottom: .5em;
-    &:first {
-      margin-left: 0;
-    }
-  }
-}

frontend/src/app/shared/components/global-footer/global-footer.component.html

@@ -0,0 +1,22 @@
+<footer *ngIf="networkPaths['mainnet'] !== '/about'">
+  <div class="pref-selectors">
+    <div class="selector">
+      <app-language-selector></app-language-selector>
+    </div>
+    <div class="selector">
+      <app-fiat-selector></app-fiat-selector>
+    </div>
+  </div>
+
+  <div class="terms-of-service">
+    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+    |
+    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
+    |
+    <a *ngIf="officialMempoolSpace && networkPaths['mainnet'] === '/lightning' else broadcastTransaction" [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to our nodes</a>
+    <ng-template #broadcastTransaction>
+      <a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a>
+    </ng-template>
+  </div>
+  <br>
+</footer>

frontend/src/app/shared/components/global-footer/global-footer.component.scss

@@ -0,0 +1,23 @@
+footer {
+  text-align: center;
+  margin-top: auto;
+}
+
+.terms-of-service {
+  margin-top: 1rem;
+}
+
+.pref-selectors {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .selector {
+    margin-left: .5em;
+    margin-bottom: .5em;
+    &:first {
+      margin-left: 0;
+    }
+  }
+}

frontend/src/app/shared/components/global-footer/global-footer.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NavigationService } from '../../../services/navigation.service';
+import { Env, StateService } from '../../../services/state.service';
+
+@Component({
+  selector: 'app-global-footer',
+  templateUrl: './global-footer.component.html',
+  styleUrls: ['./global-footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GlobalFooterComponent implements OnInit {
+  env: Env;
+  networkPaths: { [network: string]: string };
+  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+
+  constructor(
+    public stateService: StateService,
+    private navigationService: NavigationService,
+  ) {}
+
+  ngOnInit(): void {
+    this.env = this.stateService.env;
+    this.navigationService.subnetPaths.subscribe((paths) => {
+      this.networkPaths = paths;
+    });
+  }
+
+}

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

@@ -88,6 +88,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
 import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component';
 import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component';
+import { GlobalFooterComponent } from './components/global-footer/global-footer.component';
 
 @NgModule({
   declarations: [
@@ -170,6 +171,7 @@ import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.
     ToggleComponent,
     GeolocationComponent,
     TestnetAlertComponent,
+    GlobalFooterComponent,
   ],
   imports: [
     CommonModule,
@@ -276,6 +278,7 @@ import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.
     ToggleComponent,
     GeolocationComponent,
     PreviewTitleComponent,
+    GlobalFooterComponent,
   ]
 })
 export class SharedModule {