Display legal notices for third party software on About page

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

@@ -204,10 +204,10 @@
     </div>
   </div>
 
-  <div class="copyright">
+  <div class="legal">
     <div class="title">
-      Copyright &copy; 2019-2021<br>
+      The Mempool Open Source Project<br>
-      The Mempool Open Source Project
+      Copyright &copy; 2019-2021
     </div>
     <p>
       <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> is free software; you can redistribute it and/or modify it under the terms of (at your option) either:<br>
@@ -223,22 +223,30 @@
     <p>
       This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the full license terms for more details.<br>
     </p>
-    <div class="title">
+
-      Trademark Notice<br>
+    <div class="title">Trademark Notice</div>
-    </div>
+
     <p>
       The Mempool Open Source Project&trade;, mempool.space&trade;, the mempool logo&trade;, the mempool.space logos&trade;, the mempool square logo&trade;, and the mempool blocks logo&trade; are either registered trademarks or trademarks of Mempool Space K.K in Japan, the United States, and/or other countries.
     </p>
     <p>
       While our software is available under an open source software license, the copyright license does not include an implied right or license to use our trademarks. See our <a href="https://mempool.space/trademark-policy">Trademark Policy and Guidelines</a> for more details, published on &lt;https://mempool.space/trademark-policy&gt;.
     </p>
+
+    <div class="title">Third Party Software</div>
+
+    <p>This software incorporates materials from third parties, with permission of the respective licensors and/or copyright holders on the terms provided by such parties as identified below.</p>
+    <textarea class="thirdPartyLicenses">{{ thirdPartyLicenses$ | async }}</textarea>
   </div>
 
+  <br><br>
+
   <div class="footer-links">
-    <a href="/3rdpartylicenses.txt">Third-party Licenses</a>
+    <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 [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
   </div>
   
+  <br>
+
   <div class="footer-version" *ngIf="officialMempoolSpace">
     {{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}]
   </div>

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

@@ -137,7 +137,7 @@
     }
   }
 
-  .copyright {
+  .legal {
     text-align: left;
     max-width: 620px;
     padding: 0px 15px;
@@ -161,16 +161,23 @@
     }
   }
 
+  .thirdPartyLicenses {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 600px;
+    height: 30em;
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+    font-size: 10px;
+    border-color: #e83e8c;
+    background: transparent;
+    color: #e83e8c;
+  }
+  .thirdPartyLicenses > .scroll-pane{
+    -fx-vbar-policy: always;
+  }
+
   .footer-links {
-    display: flex;
-    flex-direction: column;
-    a {
-      display: inline-block;
-      margin: 15px auto 0px;
-      &:last-child {
-        margin: 20px auto 30px;
-      }
-    }
   }
 
   .footer-version {
@@ -180,4 +187,4 @@
 
 .no-about-margin {
   height: 10px;
-}
+}

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
 import { IBackendInfo } from 'src/app/interfaces/websocket.interface';
@@ -17,6 +18,7 @@ import { map } from 'rxjs/operators';
 export class AboutComponent implements OnInit {
   backendInfo$: Observable<IBackendInfo>;
   sponsors$: Observable<any>;
+  thirdPartyLicenses$: Observable<string>;
   allContributors$: Observable<any>;
   frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH;
   packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
@@ -27,6 +29,7 @@ export class AboutComponent implements OnInit {
     private websocketService: WebsocketService,
     private seoService: SeoService,
     public stateService: StateService,
+    private httpClient: HttpClient,
     private apiService: ApiService,
     private router: Router,
     @Inject(LOCALE_ID) public locale: string,
@@ -38,6 +41,7 @@ export class AboutComponent implements OnInit {
     this.websocketService.want(['blocks']);
 
     this.sponsors$ = this.apiService.getDonation$();
+    this.thirdPartyLicenses$ = this.getThirdPartyLicenses$();
     this.allContributors$ = this.apiService.getContributor$().pipe(
       map((contributors) => {
         return {
@@ -48,6 +52,10 @@ export class AboutComponent implements OnInit {
     );
   }
 
+  getThirdPartyLicenses$(): Observable<string> {
+    return this.httpClient.get<string>('/3rdpartylicenses.txt', { responseType: 'text' as 'json' });
+  }
+
   sponsor() {
     if (this.officialMempoolSpace && this.stateService.env.BASE_MODULE === 'mempool') {
       this.router.navigateByUrl('/sponsor');