Adding translators to About page

backend/src/index.ts

@@ -221,6 +221,14 @@ class Server {
           res.status(500).end();
         }
       })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'translators', async (req, res) => {
+        try {
+          const response = await axios.get('https://mempool.space/api/v1/translators', { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
     ;
 
     if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED) {

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

@@ -163,6 +163,19 @@
       </a>
     </div>
   </div>
+
+  <ng-container *ngIf="translators$ | async | keyvalue as translators else loadingSponsors">
+    <div class="maintainers">
+      <h3 i18n="about.translators">Translators</h3>
+      <div class="wrapper">
+        <ng-template ngFor let-translator [ngForOf]="translators">
+          <a [href]="'https://twitter.com/' + translator.value" target="_blank" [title]="translator.key">
+            <span>{{ translator.value }}</span>
+          </a>,
+        </ng-template>
+      </div>
+    </div>
+  </ng-container>
   
   <ng-container *ngIf="allContributors$ | async as contributors else loadingSponsors">
     <div class="contributors">

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

@@ -7,6 +7,7 @@ import { ApiService } from 'src/app/services/api.service';
 import { IBackendInfo } from 'src/app/interfaces/websocket.interface';
 import { Router } from '@angular/router';
 import { map } from 'rxjs/operators';
+import { ITranslators } from 'src/app/interfaces/node-api.interface';
 
 @Component({
   selector: 'app-about',
@@ -17,6 +18,7 @@ import { map } from 'rxjs/operators';
 export class AboutComponent implements OnInit {
   backendInfo$: Observable<IBackendInfo>;
   sponsors$: Observable<any>;
+  translators$: Observable<ITranslators>;
   allContributors$: Observable<any>;
   frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH;
   packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
@@ -38,6 +40,17 @@ export class AboutComponent implements OnInit {
     this.websocketService.want(['blocks']);
 
     this.sponsors$ = this.apiService.getDonation$();
+    this.translators$ = this.apiService.getTranslators$()
+      .pipe(
+        map((translators) => {
+          for (const t in translators) {
+            if (translators[t] === '') {
+              delete translators[t]
+            }
+          }
+          return translators;
+        })
+      );
     this.allContributors$ = this.apiService.getContributor$().pipe(
       map((contributors) => {
         return {

frontend/src/app/interfaces/node-api.interface.ts

@@ -49,3 +49,5 @@ export interface LiquidPegs {
   amount: string;
   date: string;
 }
+
+export interface ITranslators { [language: string]: string; }

frontend/src/app/services/api.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation, LiquidPegs } from '../interfaces/node-api.interface';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation, LiquidPegs, ITranslators } from '../interfaces/node-api.interface';
 import { Observable } from 'rxjs';
 import { StateService } from './state.service';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
@@ -85,6 +85,10 @@ export class ApiService {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/donations');
   }
 
+  getTranslators$(): Observable<ITranslators> {
+    return this.httpClient.get<ITranslators>(this.apiBaseUrl + this.apiBasePath + '/api/v1/translators');
+  }
+
   getContributor$(): Observable<any[]> {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/contributors');
   }