highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-29 11:12:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nymkappa 2024-05-17 20:32:43 +02:00
parent 0279fe69d4
commit 6b16b2d651
No known key found for this signature in database
GPG Key ID: 92358FC85D9645DE
8 changed files with 158 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/app/components/faucet/faucet.component.html
View File

@ -4,43 +4,45 @@
<h1 i18n="testnet4.faucet">Testnet4 Faucet</h1>
</div>
@if (error) {
<div class="alert alert-danger">
@switch (error) {
@case ('faucet_too_soon') {
Too many requests! Try again later.
}
@case ('faucet_maximum_reached') {
You have exceeded your testnet4 allowance. Try again later.
}
@case ('faucet_not_available') {
The faucet is not available right now. Try again later.
}
@default {
Sorry, something went wrong! Try again later.
}
}
</div>
}
<div class="faucet-container text-center">
@if (txid) {
<div class="alert alert-mempool d-block text-center">
<a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid }}</a>
</div>
} @else if (loading) {
<p>Waiting for faucet...</p>
@if (loading) {
<p>Loading faucet...</p>
<div class="spinner-border text-light"></div>
} @else {
<form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()">
} @else if (!user) {
<!-- User not logged in -->
<div class="alert alert-mempool d-block text-center pb-2 w-100">
<span class="mb-2">To limit abuse,&nbsp;</span>
<a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">authenticate&nbsp;</a>
<span class="mr-2">or</span>
<app-twitter-login customClass="btn" 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 pb-2 w-100">
<span class="mb-2">To limit abuse,&nbsp;</span>
<a routerLink="/sponsor" [queryParams]="{'redirectTo': '/testnet4/faucet'}">become a sponsor&nbsp;</a>
<span class="mr-2">or</span>
<app-twitter-login customClass="btn" width="220px" redirectTo="/testnet4/faucet" buttonString="Link your Twitter"></app-twitter-login>
</div>
}
@else if (error) {
<!-- User can request -->
<app-mempool-error class="w-100" [error]="error"></app-mempool-error>
}
@if (!loading) {
<form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()" [style]="(error || !this.user) ? 'opacity: 0.3' : ''">
<div class="row">
<div class="col">
<div class="form-group">
<div class="input-group input-group-lg mb-2">
<div class="form-group mb-0">
<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 +51,31 @@
</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="status?.user_requests && amount?.errors?.['max']">Maximum is {{ amount?.errors?.['max'].max }}</div>
<div *ngIf="amount?.errors?.['min']">Minimum is {{ amount?.errors?.['min'].min | number }} tSats</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...">
<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>
<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]="!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>Address is required</div>
} @else {
<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 *ngIf="address?.errors?.['required']">Address is required</div>
<div *ngIf="address?.errors?.['pattern']">Must be a valid testnet4 address</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>
}
}
<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>
<!-- 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>
}
</div>
</div>
</div>

10
frontend/src/app/components/faucet/faucet.component.scss
View File

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

129
frontend/src/app/components/faucet/faucet.component.ts
View File

@ -1,13 +1,13 @@
import { Component, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, ValidationErrors, Validators } from "@angular/forms";
import { StorageService } from '../../services/storage.service';
import { ServicesApiServices } from '../../services/services-api.service';
import { AudioService } from '../../services/audio.service';
import { StateService } from '../../services/state.service';
import { Subscription, tap } from "rxjs";
import { HttpErrorResponse } from "@angular/common/http";
import { Component, OnDestroy, OnInit, ChangeDetectorRef } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Subscription } from "rxjs";
import { StorageService } from "../../services/storage.service";
import { ServicesApiServices } from "../../services/services-api.service";
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,75 @@ import { WebsocketService } from "../../services/websocket.service";
styleUrls: ['./faucet.component.scss']
})
export class FaucetComponent implements OnInit, OnDestroy {
user: any;
loading: boolean = true;
loading = true;
error: string = '';
user: any = undefined;
txid: string = '';
faucetStatusSubscription: Subscription;
status: {
address?: string,
access: boolean
min: number,
user_max: number,
user_requests: number,
min: number; // minimum amount to request at once (in sats)
max: number; // maximum amount to request at once
address?: string; // faucet address
} | 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() {
if (this.faucetStatusSubscription) {
this.faucetStatusSubscription.unsubscribe();
}
}
ngOnInit() {
this.user = this.storageService.getAuth()?.user ?? null;
this.initForm(5000, 500000);
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 {
if (!this.user) {
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;
this.faucetForm = this.formBuilder.group({
'address': ['', [Validators.required, Validators.pattern(getRegex('address', 'testnet4'))]],
'satoshis': [this.status.min, [Validators.required, Validators.min(this.status.min), Validators.max(this.status.max)]]
});
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,26 +101,6 @@ export class FaucetComponent implements OnInit, OnDestroy {
});
}
initForm(min: number, max: number): void {
this.faucetForm = this.formBuilder.group({
'address': ['', [Validators.required, Validators.pattern(getRegex('address', 'testnet4'))]],
'satoshis': ['', [Validators.required, Validators.min(min), Validators.max(max)]]
}, { validators: (formGroup): ValidationErrors | null => {
if (this.status && !this.status?.user_requests) {
return { customError: 'You have used the faucet too many times already! Come back later.'}
}
return null;
}});
this.faucetForm.get('satoshis').setValue(min);
this.loading = false;
}
setAmount(value: number): void {
if (this.faucetForm) {
this.faucetForm.get('satoshis').setValue(value);
}
}
requestCoins(): void {
this.error = null;
this.stateService.markBlock$.next({});
@ -114,23 +117,19 @@ export class FaucetComponent implements OnInit, OnDestroy {
});
}
ngOnDestroy(): void {
this.stateService.markBlock$.next({});
this.websocketService.stopTrackingTransaction();
if (this.mempoolPositionSubscription) {
this.mempoolPositionSubscription.unsubscribe();
}
if (this.confirmationSubscription) {
this.confirmationSubscription.unsubscribe();
setAmount(value: number): void {
if (this.faucetForm) {
this.faucetForm.get('satoshis').setValue(value);
}
}
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)

6
frontend/src/app/components/twitter-login/twitter-login.component.html Normal file
View File

@ -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">{{ buttonString }}</span>
</a>

25
frontend/src/app/components/twitter-login/twitter-login.component.ts Normal file
View File

@ -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;
}
}

2
frontend/src/app/services/services-api.service.ts
View File

@ -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 }>(`${SERVICES_API_PREFIX}/testnet4/faucet/status`, { responseType: 'json' });
}
requestTestnet4Coins$(address: string, sats: number) {

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

@ -22,6 +22,9 @@ 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`,
} as { [error: string]: string };
export function isMempoolError(error: string) {

3
frontend/src/app/shared/shared.module.ts
View File

@ -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,