About page updates.

refs  #128

backend/src/api/donations.ts

@@ -93,7 +93,7 @@ class Donations {
   async $getDonationsFromDatabase() {
     try {
       const connection = await DB.pool.getConnection();
-      const query = `SELECT handle, imageUrl FROM donations WHERE handle != '' ORDER BY id ASC`;
+      const query = `SELECT handle, imageUrl FROM donations WHERE handle != '' ORDER BY id DESC`;
       const [rows] = await connection.query<any>(query);
       connection.release();
       return rows;

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

@@ -1,11 +1,9 @@
 <div class="container-xl">
   <div class="text-center">
     <br />
-    <img src="./resources/mempool-tube.png" width="63" height="63" />
+    <img src="./resources/mempool-logo-bigger.png" height="67.5" width="251">
     <br /><br />
 
-    <h1>Mempool Open Source Project</h1>
-
     <br>
 
     <a target="_blank" class="mr-4 b2812e30 f2874b88 fw6 mb3 mt2 truncate black-80 f4 link" rel="noopener noreferrer nofollow" href="https://github.com/mempool/mempool">
@@ -31,25 +29,26 @@
     <h2>Maintainers</h2>
 
     <div class="container text-center">
-      <div class="row">
-        <div class="col-sm-2 offset-md-4">
-          <div class="profile_photo mx-auto" style="background-image: url(/resources/profile_softsimon.jpg)"></div>
-
-          <a href="https://twitter.com/softsimon_">@softsimon_</a>
+      <div class="row row-cols-2">
+        <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_
+          </a>
           <br>
           Development
         </div>
-        <div class="col-sm-2">
-          <div class="profile_photo mx-auto" style="background-image: url(/resources/profile_wiz.png)"></div>
-
-          <a href="https://twitter.com/wiz">@wiz</a>
+        <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
+          </a>
           <br>
           Operations
         </div>
       </div>
     </div>
 
-
     <br><br>
 
     <h2>Sponsors</h2>
@@ -58,10 +57,15 @@
       <br>
       <div class="spinner-border text-light"></div>
     </div>
-    <div *ngFor="let sponsor of sponsors" (click)="openTwitterProfile(sponsor.handle)" class="profile_photo d-inline-block" [ngStyle]="{'background-image': 'url(' + sponsor.imageUrl + ')'}" [title]="sponsor.handle"></div>
+
+    <ng-template ngFor let-sponsor [ngForOf]="sponsors">
+      <a [href]="'https://twitter.com/' + sponsor.handle" target="_blank">
+        <div class="profile_photo d-inline-block" [ngStyle]="{'background-image': 'url(' + sponsor.imageUrl + ')'}" [title]="sponsor.handle"></div>
+      </a>
+    </ng-template>
     <br><br>
     
-    <button type="button" class="btn btn-primary" (click)="donationStatus = 2" [hidden]="donationStatus !== 1">Become a sponsor</button>
+    <button type="button" class="btn btn-primary" (click)="donationStatus = 2" [hidden]="donationStatus !== 1">Become a sponsor ❤️</button>
     <p *ngIf="donationStatus === 2 && !sponsorsEnabled">
       Navigate to <a href="https://mempool.space/about" target="_blank">https://mempool.space/about</a> to sponsor
     </p>
@@ -94,7 +98,9 @@
 
     <div *ngIf="donationStatus === 3" class="text-center">
       <div class="qr-wrapper mt-2 mb-2">
-        <app-qrcode [data]="'bitcoin:' + donationObj.address + '?amount=' + donationObj.amount"></app-qrcode>
+        <a [href]="bitcoinUrl" target="_blank">
+          <app-qrcode [data]="'bitcoin:' + donationObj.address + '?amount=' + donationObj.amount"></app-qrcode>
+        </a>
       </div>
       <br>
       <p style="font-size: 10px;">{{ donationObj.address }}</p>

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

@@ -9,7 +9,6 @@
   height: 80px;
   background-size: 100%, 100%;
   border-radius: 50%;
-  cursor: pointer;
   margin: 10px;
 }
 

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

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ApiService } from 'src/app/services/api.service';
 import { env } from '../../app.constants';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-about',
@@ -20,6 +21,7 @@ export class AboutComponent implements OnInit {
   donationObj: any;
   sponsorsEnabled = env.SPONSORS_ENABLED;
   sponsors = null;
+  bitcoinUrl: SafeUrl;
 
   constructor(
     private websocketService: WebsocketService,
@@ -27,6 +29,7 @@ export class AboutComponent implements OnInit {
     private stateService: StateService,
     private formBuilder: FormBuilder,
     private apiService: ApiService,
+    private sanitizer: DomSanitizer,
   ) { }
 
   ngOnInit() {
@@ -59,11 +62,8 @@ export class AboutComponent implements OnInit {
     .subscribe((response) => {
       this.websocketService.trackDonation(response.id);
       this.donationObj = response;
+      this.bitcoinUrl = this.sanitizer.bypassSecurityTrustUrl('bitcoin:' + this.donationObj.address + '?amount=' + this.donationObj.amount);
       this.donationStatus = 3;
     });
   }
-
-  openTwitterProfile(handle: string) {
-    window.open('https://twitter.com/' + handle, '_blank');
-  }
 }

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

@@ -52,7 +52,7 @@
       <li *ngIf="network.val === 'liquid'" class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/liquid/assets']" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" title="Assets"></fa-icon></a>
       </li>
-      <li class="nav-item mr-2" routerLinkActive="active">
+      <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" title="API"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active">

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

@@ -13,6 +13,7 @@ export class MasterPageComponent implements OnInit {
   network$: Observable<string>;
   connectionState$: Observable<number>;
   navCollapsed = false;
+  isMobile = window.innerWidth <= 767.98;
 
   constructor(
     private stateService: StateService,