Merge pull request #5080 from mempool/nymkappa/faucet-polish

[faucet] polish code and UX - Move Twitter login component into FOSS

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

@@ -4,43 +4,54 @@
     <h1 i18n="testnet4.faucet">Testnet4 Faucet</h1>
   </div>
 
-  @if (error) {
+  <div class="faucet-container text-center">
-    <div class="alert alert-danger">
+  
-      @switch (error) {
+    @if (txid) {
-        @case ('faucet_too_soon') {
+      <div class="alert alert-success w-100 text-truncate">
-          Too many requests! Try again later.
+        <fa-icon [icon]="['fas', 'circle-check']"></fa-icon>
-        }
+        Sent!
-        @case ('faucet_maximum_reached') {
+        <a class="text-primary" [href]="'/testnet4/txid/' + txid">{{ txid }}</a>
-          You have exceeded your testnet4 allowance. Try again later.
+      </div>
-        }
-        @case ('faucet_not_available') {
-          The faucet is not available right now. Try again later.
-        }
-        @default {
-          Sorry, something went wrong! Try again later.
     }
+    @else if (loading) {
+      <p>Loading faucet...</p>
+      <div class="spinner-border text-light"></div>
+    } @else if (!user) {
+      <!-- User not logged in -->
+      <div class="alert alert-mempool d-block text-center w-100">
+        <div class="d-inline align-middle">
+          <span>To limit abuse,&nbsp;</span>
+          <a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">authenticate&nbsp;</a>
+          <span class="mr-2">or</span>
+        </div>
+        <app-twitter-login customClass="btn btn-sm" width="220px" redirectTo="/testnet4/faucet" buttonString="Sign up with Twitter"></app-twitter-login>
+      </div>
     }
+    @else if (error === 'not_available') {
+      <!-- User logged in but not a paid user or did not link its Twitter account -->
+      <div class="alert alert-mempool d-block text-center w-100">
+        <div class="d-inline align-middle">
+          <span class="mb-2 mr-2">To limit abuse</span>
+        </div>
+        <app-twitter-login customClass="btn btn-sm" width="180px" redirectTo="/testnet4/faucet" buttonString="Link your Twitter"></app-twitter-login>
       </div>
     }
     
-  <div class="faucet-container text-center">
+    @else if (error) {
-    @if (txid) {
+      <!-- User can request -->
-      <div class="alert alert-mempool d-block text-center">
+      <app-mempool-error class="w-100" [error]="error"></app-mempool-error>
-        <a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid }}</a>
+    }
-      </div>
+
-    } @else if (loading) {
+    @if (!loading) {
-      <p>Waiting for faucet...</p>
+      <form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()" [style]="(error || !this.user) ? 'opacity: 0.3; pointer-events: none' : ''">
-      <div class="spinner-border text-light"></div>
-    } @else {
-      <form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()">
         <div class="row">
           <div class="col">
-            <div class="form-group">
+            <div class="form-group mb-0">
-              <div class="input-group input-group-lg mb-2">
+              <div class="input-group input-group-lg">
                 <div class="input-group-prepend">
                   <span class="input-group-text" i18n="amount-sats">Amount (sats)</span>
                 </div>
-                <input type="number" class="form-control" formControlName="satoshis" id="satoshis">
+                <input type="number" class="form-control" [class]="{invalid: invalidAmount}" formControlName="satoshis" id="satoshis">
                 <div class="button-group">
                   <button type="button" class="btn btn-secondary" (click)="setAmount(5000)">5k</button>
                   <button type="button" class="btn btn-secondary ml-2" (click)="setAmount(50000)">50k</button>
@@ -49,43 +60,32 @@
               </div>
               <div class="text-danger text-left" *ngIf="invalidAmount">
                 <div *ngIf="amount?.errors?.['required']">Amount is required</div>
-                <div *ngIf="status?.user_requests && amount?.errors?.['min']">Minimum is {{ amount?.errors?.['min'].min }}</div>
+                <div *ngIf="amount?.errors?.['min']">Minimum is {{ amount?.errors?.['min'].min | number }} tSats</div>
-                <div *ngIf="status?.user_requests && amount?.errors?.['max']">Maximum is {{ amount?.errors?.['max'].max }}</div>
+                <div *ngIf="amount?.errors?.['max']">Maximum is {{ amount?.errors?.['max'].max | number }} tSats</div>
               </div>
-              <div class="input-group input-group-lg mb-2">
+              <div class="input-group input-group-lg mt-2">
                 <div class="input-group-prepend">
                   <span class="input-group-text" i18n="address">Address</span>
                 </div>
-                <input type="address" class="form-control" formControlName="address" id="address" placeholder="tb1q...">
+                <input type="text" class="form-control" [class]="{invalid: invalidAddress}" formControlName="address" id="address" placeholder="tb1q...">
-                <button type="submit" class="btn btn-primary submit-button" [disabled]="!status?.access || !faucetForm.valid || !faucetForm.get('address')?.dirty" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
+                <button type="submit" class="btn btn-primary submit-button" [disabled]="!faucetForm.valid || !faucetForm.get('address')?.dirty" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
               </div>
               <div class="text-danger text-left" *ngIf="invalidAddress">
-                @if (address?.errors?.['required']) {
+                <div *ngIf="address?.errors?.['required']">Address is required</div>
-                  <div>Address is required</div>
+                <div *ngIf="address?.errors?.['pattern']">Must be a valid testnet4 address</div>
-                } @else {
+                <div *ngIf="address?.errors?.['forbiddenAddress']">You cannot use this address</div>
-                  <div>Must be a valid testnet4 address</div>
-                }
-              </div>
-              <div class="text-danger text-left" *ngIf="status && !status.user_requests">
-                <div>Too many requests! Try again later.</div>
               </div>
             </div>
           </div>
         </div>
       </form>
-      @if (!user) {
-        <div class="alert alert-mempool d-block">
-          To limit abuse, please <a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">log in</a> or <a routerLink="/signup" [queryParams]="{'redirectTo': '/testnet4/faucet'}">sign up</a> and link your Twitter account to use the faucet.
-        </div>
-      } @else if (!status?.access) {
-        <div class="alert alert-mempool d-block">
-          To use this feature, please <a routerLink="/services/account/settings">link your Twitter account</a>.
-        </div>
     }
+
+    <!-- Send back coins -->
+    @if (status?.address) {  
+      <div class="mt-2 alert alert-info w-100">If you no longer need your testnet4 coins, please consider <a class="text-primary" [routerLink]="['/address/' | relativeUrl, status.address]"><u>sending them back</u></a> to replenish the faucet.</div>
     }
-    <br>
+
-    <div *ngIf="status?.address">
-      If you no longer need your testnet4 coins, please consider sending them back to <a [routerLink]="['/address/' | relativeUrl, status.address]">{{ status.address }}</a> to replenish the faucet.
-    </div>
   </div>
+
 </div>

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

@@ -23,6 +23,9 @@
   .submit-button, .button-group, .button-group .btn {
     flex-grow: 1;
   }
+  .submit-button:disabled {
+    pointer-events: none;
+  }
 
   #satoshis::after {
     content: 'sats';
@@ -42,3 +45,8 @@
   max-width: 800px;
   margin: auto;
 }
+
+.invalid {
+  border-width: 1px;
+  border-color: var(--red);
+}

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

@@ -1,13 +1,13 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from "@angular/core";
-import { FormBuilder, FormGroup, ValidationErrors, Validators } from "@angular/forms";
+import { FormBuilder, FormGroup, Validators, ValidatorFn, AbstractControl, ValidationErrors } from "@angular/forms";
-import { StorageService } from '../../services/storage.service';
+import { Subscription } from "rxjs";
-import { ServicesApiServices } from '../../services/services-api.service';
+import { StorageService } from "../../services/storage.service";
-import { AudioService } from '../../services/audio.service';
+import { ServicesApiServices } from "../../services/services-api.service";
-import { StateService } from '../../services/state.service';
-import { Subscription, tap } from "rxjs";
-import { HttpErrorResponse } from "@angular/common/http";
 import { getRegex } from "../../shared/regex.utils";
+import { StateService } from "../../services/state.service";
 import { WebsocketService } from "../../services/websocket.service";
+import { AudioService } from "../../services/audio.service";
+import { HttpErrorResponse } from "@angular/common/http";
 
 @Component({
   selector: 'app-faucet',
@@ -15,52 +15,91 @@ import { WebsocketService } from "../../services/websocket.service";
   styleUrls: ['./faucet.component.scss']
 })
 export class FaucetComponent implements OnInit, OnDestroy {
-  user: any;
+  loading = true;
-  loading: boolean = true;
+  error: string = '';
+  user: any = undefined;
+  txid: string = '';
+ 
+  faucetStatusSubscription: Subscription;
   status: {
-    address?: string,
+    min: number; // minimum amount to request at once (in sats)
-    access: boolean
+    max: number; // maximum amount to request at once
-    min: number,
+    address?: string; // faucet address
-    user_max: number,
+    code: 'ok' | 'faucet_not_available' | 'faucet_maximum_reached' | 'faucet_too_soon';
-    user_requests: number,
   } | null = null;
-  error = '';
   faucetForm: FormGroup;
-  txid = '';
 
   mempoolPositionSubscription: Subscription;
   confirmationSubscription: Subscription;
 
   constructor(
-    private stateService: StateService,
+    private cd: ChangeDetectorRef,
     private storageService: StorageService,
     private servicesApiService: ServicesApiServices,
-    private websocketService: WebsocketService,
-    private audioService: AudioService,
     private formBuilder: FormBuilder,
+    private stateService: StateService,
+    private websocketService: WebsocketService,
+    private audioService: AudioService
   ) {
+    this.faucetForm = this.formBuilder.group({
+      'address': ['', [Validators.required, Validators.pattern(getRegex('address', 'testnet4'))]],
+      'satoshis': [0, [Validators.required, Validators.min(0), Validators.max(0)]]
+    });
   }
 
-  ngOnInit(): void {
+  ngOnDestroy() {
+    this.stateService.markBlock$.next({});
+    this.websocketService.stopTrackingTransaction();
+    if (this.mempoolPositionSubscription) {
+      this.mempoolPositionSubscription.unsubscribe();
+    }
+    if (this.confirmationSubscription) {
+      this.confirmationSubscription.unsubscribe();
+    }
+  }
+
+  ngOnInit() {
     this.user = this.storageService.getAuth()?.user ?? null;
-    this.initForm(5000, 500000);
+    if (!this.user) {
-    if (this.user) {
-      try {
-        this.servicesApiService.getFaucetStatus$().subscribe(status => {
-          this.status = status;
-          this.initForm(this.status.min, this.status.user_max);
-        })
-      } catch (e) {
-        if (e?.status !== 403) {
-          this.error = 'faucet_not_available';
-        }
-      } finally {
-        this.loading = false;
-      }
-    } else {
       this.loading = false;
+      return;
     }
 
+    // Setup form
+    this.faucetStatusSubscription = this.servicesApiService.getFaucetStatus$().subscribe({
+      next: (status) => {
+        if (!status) {
+          this.error = 'internal_server_error';
+          return;
+        }
+        this.status = status;
+
+        const notFaucetAddressValidator = (faucetAddress: string): ValidatorFn => {
+          return (control: AbstractControl): ValidationErrors | null => {
+            const forbidden = control.value === faucetAddress;
+            return forbidden ? { forbiddenAddress: { value: control.value } } : null;
+          };
+        }
+        this.faucetForm = this.formBuilder.group({
+          'address': ['', [Validators.required, Validators.pattern(getRegex('address', 'testnet4')), notFaucetAddressValidator(this.status.address)]],
+          'satoshis': [this.status.min, [Validators.required, Validators.min(this.status.min), Validators.max(this.status.max)]]
+        });
+
+        if (this.status.code !== 'ok') {
+          this.error = this.status.code;
+        }
+
+        this.loading = false;
+        this.cd.markForCheck();
+      },
+      error: (response) => {
+        this.loading = false;
+        this.error = response.error;
+        this.cd.markForCheck();
+      }
+    });
+
+    // Track transaction
     this.websocketService.want(['blocks', 'mempool-blocks']);
     this.mempoolPositionSubscription = this.stateService.mempoolTxPosition$.subscribe(txPosition => {
       if (txPosition && txPosition.txid === this.txid) {
@@ -78,18 +117,22 @@ export class FaucetComponent implements OnInit, OnDestroy {
     });
   }
 
-  initForm(min: number, max: number): void {
+  requestCoins(): void {
-    this.faucetForm = this.formBuilder.group({
+    this.error = null;
-      'address': ['', [Validators.required, Validators.pattern(getRegex('address', 'testnet4'))]],
+    this.txid = '';
-      'satoshis': ['', [Validators.required, Validators.min(min), Validators.max(max)]]
+    this.stateService.markBlock$.next({});
-    }, { validators: (formGroup): ValidationErrors | null => {
+    this.servicesApiService.requestTestnet4Coins$(this.faucetForm.get('address')?.value, parseInt(this.faucetForm.get('satoshis')?.value))
-      if (this.status && !this.status?.user_requests) {
+    .subscribe({
-        return { customError: 'You have used the faucet too many times already! Come back later.'}
+      next: ((response) => {
-      }
+        this.txid = response.txid;
-      return null;
+        this.websocketService.startTrackTransaction(this.txid);
-    }});
+        this.audioService.playSound('cha-ching');
-    this.faucetForm.get('satoshis').setValue(min);
+        this.cd.markForCheck();
-    this.loading = false;
+      }),
+      error: (response: HttpErrorResponse) => {
+        this.error = response.error;
+      },
+    });
   }
 
   setAmount(value: number): void {
@@ -98,39 +141,13 @@ export class FaucetComponent implements OnInit, OnDestroy {
     }
   }
 
-  requestCoins(): void {
-    this.error = null;
-    this.stateService.markBlock$.next({});
-    this.servicesApiService.requestTestnet4Coins$(this.faucetForm.get('address')?.value, parseInt(this.faucetForm.get('satoshis')?.value))
-    .subscribe({
-      next: ((response) => {
-        this.txid = response.txid;
-        this.websocketService.startTrackTransaction(this.txid);
-        this.audioService.playSound('cha-ching');
-      }),
-      error: (response: HttpErrorResponse) => {
-        this.error = response.error;
-      },
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.stateService.markBlock$.next({});
-    this.websocketService.stopTrackingTransaction();
-    if (this.mempoolPositionSubscription) {
-      this.mempoolPositionSubscription.unsubscribe();
-    }
-    if (this.confirmationSubscription) {
-      this.confirmationSubscription.unsubscribe();
-    }
-  }
-
   get amount() { return this.faucetForm.get('satoshis')!; }
-  get address() { return this.faucetForm.get('address')!; }
   get invalidAmount() {
     const amount = this.faucetForm.get('satoshis')!;
     return amount?.invalid && (amount.dirty || amount.touched)
   }
+
+  get address() { return this.faucetForm.get('address')!; }
   get invalidAddress() {
     const address = this.faucetForm.get('address')!;
     return address?.invalid && (address.dirty || address.touched)

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

@@ -102,7 +102,7 @@
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
         <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
-      <li class="nav-item" routerLinkActive="active" id="btn-faucet" *ngIf="stateService.env.OFFICIAL_MEMPOOL_SPACE && stateService.network === 'testnet4'">
+      <li class="nav-item" routerLinkActive="active" id="btn-faucet" *ngIf="stateService.isMempoolSpaceBuild && stateService.env.OFFICIAL_MEMPOOL_SPACE && stateService.network === 'testnet4'">
         <a class="nav-link" [routerLink]="['/faucet' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'faucet-drip']" [fixedWidth]="true" i18n-title="master-page.faucet" title="Faucet"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-docs">

frontend/src/app/components/twitter-login/twitter-login.component.html

@@ -0,0 +1,6 @@
+<a href="#" (click)="twitterLogin()"
+  [class]="(disabled ? 'disabled': '') + (customClass ? customClass : 'w-100 btn mt-1 d-flex justify-content-center align-items-center')"
+  style="background-color: #1DA1F2" [style]="width ? 'width: ' + width : ''">
+  <img src="./resources/twitter.svg" height="25" style="padding: 2px" [alt]="buttonString + ' with Twitter'" />
+  <span class="ml-2 text-light align-middle">{{ buttonString }}</span>
+</a>

frontend/src/app/components/twitter-login/twitter-login.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+@Component({
+  selector: 'app-twitter-login',
+  templateUrl: './twitter-login.component.html',
+})
+export class TwitterLogin {
+  @Input() width: string | null = null;
+  @Input() customClass: string | null = null;
+  @Input() buttonString: string= 'unset';
+  @Input() redirectTo: string | null = null;
+  @Output() clicked = new EventEmitter<boolean>();
+  @Input() disabled: boolean = false;
+
+  constructor() {}
+
+  twitterLogin() {
+    this.clicked.emit(true);
+    if (this.redirectTo) {
+      location.replace(`/api/v1/services/auth/login/twitter?redirectTo=${encodeURIComponent(this.redirectTo)}`);
+    } else {
+      location.replace(`/api/v1/services/auth/login/twitter?redirectTo=${location.href}`);
+    }
+    return false;
+  }
+}

frontend/src/app/master-page.module.ts

@@ -105,6 +105,7 @@ if (window['__env']?.OFFICIAL_MEMPOOL_SPACE) {
     data: { networks: ['bitcoin', 'liquid'] },
     component: ServerStatusComponent
   });
+  if (window['isMempoolSpaceBuild']) {
     routes[0].children.push({
       path: 'faucet',
       canActivate: [(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
@@ -119,6 +120,7 @@ if (window['__env']?.OFFICIAL_MEMPOOL_SPACE) {
       }]
     })
   }
+}
 
 @NgModule({
   imports: [

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

@@ -161,7 +161,7 @@ export class ServicesApiServices {
   }
 
   getFaucetStatus$() {
-    return this.httpClient.get<{ address?: string, access: boolean, min: number, user_max: number, user_requests: number }>(`${SERVICES_API_PREFIX}/testnet4/faucet/status`, { responseType: 'json' });
+    return this.httpClient.get<{ address?: string, min: number, max: number, code: 'ok' | 'faucet_not_available' | 'faucet_maximum_reached' | 'faucet_too_soon'}>(`${SERVICES_API_PREFIX}/testnet4/faucet/status`, { responseType: 'json' });
   }
 
   requestTestnet4Coins$(address: string, sats: number) {

frontend/src/app/shared/components/mempool-error/mempool-error.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
 const MempoolErrors = {
+  'bad_request': `Your request was not valid. Please try again.`,
   'internal_server_error': `Something went wrong, please try again later`,
   'acceleration_duplicated': `This transaction has already been accelerated.`,
   'acceleration_outbid': `Your fee delta is too low.`,
@@ -22,6 +23,12 @@ const MempoolErrors = {
   'waitlisted': `You are currently on the wait list. You will get notified once you are granted access.`,  
   'not_whitelisted_by_any_pool': `You are not whitelisted by any mining pool`,
   'unauthorized': `You are not authorized to do this`,
+  'faucet_too_soon': `You cannot request any more coins right now. Try again later.`,
+  'faucet_not_available': `The faucet is not available right now. Try again later.`,
+  'faucet_maximum_reached': `You are not allowed to request more coins`,
+  'faucet_address_not_allowed': `You cannot use this address`,
+  'faucet_below_minimum': `Requested amount is too small`,
+  'faucet_above_maximum': `Requested amount is too high`,
 } as { [error: string]: string };
 
 export function isMempoolError(error: string) {

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

@@ -115,6 +115,7 @@ import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe';
 import { HttpErrorComponent } from '../shared/components/http-error/http-error.component';
 import { TwitterWidgetComponent } from '../components/twitter-widget/twitter-widget.component';
 import { FaucetComponent } from '../components/faucet/faucet.component';
+import { TwitterLogin } from '../components/twitter-login/twitter-login.component';
 
 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';
 
@@ -230,6 +231,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     HttpErrorComponent,
     TwitterWidgetComponent,
     FaucetComponent,
+    TwitterLogin,
   ],
   imports: [
     CommonModule,
@@ -359,6 +361,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     PendingStatsComponent,
     HttpErrorComponent,
     TwitterWidgetComponent,
+    TwitterLogin,
 
     MempoolBlockOverviewComponent,
     ClockchainComponent,