From e32066affda31a2feb753bcb6dc7a7ab165b520f Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Tue, 9 Mar 2021 03:56:41 +0900
Subject: [PATCH] Display all Project Contributors on About page using GitHub
 API (#382)

---
 .../app/components/about/about.component.html | 32 ++++++++++++++++---
 .../app/components/about/about.component.ts   |  7 ++++
 frontend/src/app/services/api.service.ts      |  4 +++
 nginx-mempool.conf                            |  6 ++++
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html
index 4851cfc1b..528cb14fb 100644
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -281,19 +281,43 @@
       <div class="row row-cols-2" dir="ltr">
         <div class="col col-md-2 offset-md-4">
           <a href="https://twitter.com/softsimon_">
-            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile/softsimon.jpg)"></div>
-            @softsimon_
+            <div class="profile_photo d-inline-block" title="softsimon">
+              <img class="profile_img" src="resources/profile/softsimon.jpg" />
+              softsimon
+            </div>
           </a>
         </div>
         <div class="col col-md-2">
           <a href="https://twitter.com/wiz">
-            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile/wiz.png)"></div>
-            @wiz
+            <div class="profile_photo d-inline-block" title="wiz">
+              <img class="profile_img" src="resources/profile/wiz.png" />
+              wiz
+            </div>
           </a>
         </div>
       </div>
     </div>
 
+    <br><br>
+
+    <h3 i18n="about.contributors">Project Contributors</h3>
+
+    <div *ngIf="contributors === null">
+      <br>
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <ng-template ngFor let-contributor [ngForOf]="contributors">
+      <a [href]="'https://github.com/' + contributor.name" target="_blank">
+        <div class="profile_photo d-inline-block" [title]="contributor.name">
+          <img class="profile_img" [src]="'/api/v1/contributors/images/' + contributor.id" />
+          {{ contributor.name }}
+        </div>
+      </a>
+    </ng-template>
+
+    <br><br>
+
   </div>
 
   <br><br>
diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts
index 6d7b3dbc1..59e941465 100644
--- a/frontend/src/app/components/about/about.component.ts
+++ b/frontend/src/app/components/about/about.component.ts
@@ -19,9 +19,11 @@ export class AboutComponent implements OnInit, OnDestroy {
   paymentForm: FormGroup;
   donationStatus = 1;
   sponsors$: Observable<any>;
+  contributors$: Observable<any>;
   donationObj: any;
   sponsorsEnabled = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
   sponsors = null;
+  contributors = null;
   requestSubscription: Subscription | undefined;
 
   constructor(
@@ -51,6 +53,11 @@ export class AboutComponent implements OnInit, OnDestroy {
       .subscribe((sponsors) => {
         this.sponsors = sponsors;
       });
+
+    this.apiService.getContributor$()
+      .subscribe((contributors) => {
+        this.contributors = contributors;
+      });
   }
 
   ngOnDestroy() {
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index b31bb24f3..21a1aa8b3 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -77,6 +77,10 @@ export class ApiService {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/donations');
   }
 
+  getContributor$(): Observable<any[]> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/contributors');
+  }
+
   checkDonation$(orderId: string): Observable<any[]> {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/donations/check?order_id=' + orderId);
   }
diff --git a/nginx-mempool.conf b/nginx-mempool.conf
index 6da53dfd2..8c2f6948b 100644
--- a/nginx-mempool.conf
+++ b/nginx-mempool.conf
@@ -40,6 +40,12 @@
 	location /api/v1/donations/images {
 		proxy_pass https://mempool.space;
 	}
+	location /api/v1/contributors {
+		proxy_pass https://mempool.space;
+	}
+	location /api/v1/contributors/images {
+		proxy_pass https://mempool.space;
+	}
 	location /api/v1/ws {
 		proxy_pass http://127.0.0.1:8999/;
 		proxy_http_version 1.1;