highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-01 00:18:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Minor faucet UI refactor

Browse Source
This commit is contained in:
Mononaut 2024-05-21 00:56:24 +00:00
parent 8bac2db12c
commit 35ff2c7225
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 70 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,16 +13,16 @@
<a class="text-primary" [href]="'/testnet4/tx/' + txid">{{ txid }}</a>
</div>
}
@else if (loading) {
@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>
<span>To use the faucet, please&nbsp;</span>
<a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">login</a>
<span class="mr-2">&nbsp;or</span>
</div>
<app-twitter-login customClass="btn btn-sm" width="220px" redirectTo="/testnet4/faucet" buttonString="Sign up with Twitter"></app-twitter-login>
</div>
@ -31,19 +31,18 @@
<!-- 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>
<span class="mb-2 mr-2">To use the faucet, please</span>
</div>
<app-twitter-login customClass="btn btn-sm" width="180px" 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; pointer-events: none' : ''">
<form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()">
<div class="row">
<div class="col">
<div class="form-group mb-0">
@ -68,7 +67,7 @@
<span class="input-group-text" i18n="address">Address</span>
</div>
<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>
<button type="submit" class="btn btn-primary submit-button" [disabled]="!faucetForm.valid || !faucetForm.get('address')?.dirty || isDisabled()" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
</div>
<div class="text-danger text-left" *ngIf="invalidAddress">
<div *ngIf="address?.errors?.['required']">Address is required</div>
@ -83,7 +82,7 @@
<!-- 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 class="mt-4 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>

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

@ -24,7 +24,7 @@
flex-grow: 1;
}
.submit-button:disabled {
pointer-events: none;
cursor: not-allowed;
}
#satoshis::after {

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

@ -41,10 +41,7 @@ export class FaucetComponent implements OnInit, OnDestroy {
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)]]
});
this.initForm(1000, 500_000, null);
}
ngOnDestroy() {
@ -66,38 +63,7 @@ export class FaucetComponent implements OnInit, OnDestroy {
}
// 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();
}
});
this.updateFaucetStatus();
// Track transaction
this.websocketService.want(['blocks', 'mempool-blocks']);
@ -117,7 +83,34 @@ export class FaucetComponent implements OnInit, OnDestroy {
});
}
updateFaucetStatus(): void {
this.servicesApiService.getFaucetStatus$().subscribe({
next: (status) => {
if (!status) {
this.error = 'internal_server_error';
return;
}
this.status = status;
if (this.status.code !== 'ok') {
this.error = this.status.code;
this.updateForm(this.status.min ?? 1000, this.status.max ?? 500_000, this.status.address);
return;
}
// update the form with the proper validation parameters
this.updateForm(this.status.min, this.status.max, this.status.address);
},
error: (response) => {
this.loading = false;
this.error = response.error;
this.cd.markForCheck();
}
});
}
requestCoins(): void {
if (this.isDisabled()) {
return;
}
this.error = null;
this.txid = '';
this.stateService.markBlock$.next({});
@ -127,6 +120,7 @@ export class FaucetComponent implements OnInit, OnDestroy {
this.txid = response.txid;
this.websocketService.startTrackTransaction(this.txid);
this.audioService.playSound('cha-ching');
this.updateFaucetStatus();
this.cd.markForCheck();
}),
error: (response: HttpErrorResponse) => {
@ -135,9 +129,40 @@ export class FaucetComponent implements OnInit, OnDestroy {
});
}
isDisabled(): boolean {
return !(this.user && this.status?.code === 'ok' && !this.error);
}
getNotFaucetAddressValidator(faucetAddress: string): ValidatorFn {
return faucetAddress ? (control: AbstractControl): ValidationErrors | null => {
const forbidden = control.value === faucetAddress;
return forbidden ? { forbiddenAddress: { value: control.value } } : null;
}: () => null;
}
initForm(min: number, max: number, faucetAddress: string): void {
this.faucetForm = this.formBuilder.group({
'address': ['', [Validators.required, Validators.pattern(getRegex('address', 'testnet4')), this.getNotFaucetAddressValidator(faucetAddress)]],
'satoshis': [min, [Validators.required, Validators.min(min), Validators.max(max)]]
});
this.loading = false;
this.cd.markForCheck();
}
updateForm(min, max, faucetAddress: string): void {
if (!this.faucetForm) {
this.initForm(min, max, faucetAddress);
} else {
this.faucetForm.get('address').setValidators([Validators.required, Validators.pattern(getRegex('address', 'testnet4')), this.getNotFaucetAddressValidator(faucetAddress)]);
this.faucetForm.get('satoshis').setValidators([Validators.required, Validators.min(min), Validators.max(max)]);
}
}
setAmount(value: number): void {
if (this.faucetForm) {
this.faucetForm.get('satoshis').setValue(value);
this.faucetForm.get('satoshis').markAsDirty();
}
}