aljaz/angor-hub-old
1
1
Fork 0
mirror of https://github.com/block-core/angor-hub-old.git synced 2026-01-31 15:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor network component: update HTML and CSS, simplify TypeScript code, and remove unused imports

Browse Source
This commit is contained in:
Milad Raeisi
2024-12-02 14:14:04 +04:00
parent 05b93ab7f5
commit 1c19dcfbe4
2 changed files with 54 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/components/settings/network/network.component.html
View File

@@ -1,52 +1,56 @@
<div class="w-full max-w-3xl">
<div class="text-xl">Change your network</div>
<div class="text-secondary">
Switch between Mainnet and Testnet to change your network settings.
<div class="text-xl font-bold">Change Your Network</div>
<div class="text-secondary mt-2">
Switch between Mainnet and Testnet to update your network preferences.
</div>
</div>
<div class="mt-8 grid w-full max-w-3xl gap-6 sm:grid-cols-2">
<!-- Mainnet Card -->
<div
class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow"
class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow hover:shadow-lg transition-shadow"
[ngClass]="{
'ring ring-inset ring-primary': selectedNetwork === 'mainnet',
'ring-2 ring-primary': selectedNetwork() === 'mainnet'
}"
(click)="setNetwork('mainnet')"
>
<mat-icon
*ngIf="selectedNetwork === 'mainnet'"
class="absolute right-0 top-0 mr-3 mt-3 text-primary icon-size-7"
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<div class="font-semibold">Mainnet</div>
<div class="text-secondary mt-1 whitespace-normal">
The live Bitcoin network.
@if (selectedNetwork() === 'mainnet') {
<mat-icon
class="absolute right-2 top-2 text-primary icon-size-7"
[svgIcon]="'heroicons_solid:check-circle'"
aria-label="Selected Network"
></mat-icon>
}
<div class="font-semibold text-lg">Mainnet</div>
<div class="text-secondary mt-2">
The live Bitcoin network for real transactions.
</div>
</div>
<!-- Testnet Card -->
<div
class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow"
class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow hover:shadow-lg transition-shadow"
[ngClass]="{
'ring ring-inset ring-primary': selectedNetwork === 'testnet',
'ring-2 ring-primary': selectedNetwork() === 'testnet'
}"
(click)="setNetwork('testnet')"
>
<mat-icon
*ngIf="selectedNetwork === 'testnet'"
class="absolute right-0 top-0 mr-3 mt-3 text-primary icon-size-7"
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<div class="font-semibold">Testnet</div>
<div class="text-secondary mt-1 whitespace-normal">
The Bitcoin testing network.
@if (selectedNetwork() === 'testnet') {
<mat-icon
class="absolute right-2 top-2 text-primary icon-size-7"
[svgIcon]="'heroicons_solid:check-circle'"
aria-label="Selected Network"
></mat-icon>
}
<div class="font-semibold text-lg">Testnet</div>
<div class="text-secondary mt-2">
A Bitcoin testing network for developers and testing purposes.
</div>
</div>
</div>
<!-- Divider -->
<div class="mb-10 mt-11 w-full max-w-3xl border-t"></div>
<div class="my-10 w-full max-w-3xl border-t"></div>
<!-- Actions -->
<div class="flex w-full max-w-3xl items-center justify-end">

58
src/app/components/settings/network/network.component.ts
View File

@@ -1,19 +1,15 @@
import { AngorAlertComponent } from '@angor/components/alert';
import { CommonModule, CurrencyPipe, NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
ChangeDetectionStrategy,
Component,
OnInit,
signal,
effect,
inject,
} from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { IndexerService } from 'app/services/indexer.service';
@Component({
@@ -22,45 +18,43 @@ import { IndexerService } from 'app/services/indexer.service';
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
FormsModule,
ReactiveFormsModule,
MatRadioModule,
NgClass,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatOptionModule,
MatButtonModule,
CommonModule,
]
],
})
export class SettingsNetworkComponent implements OnInit {
private readonly _indexerService = inject(IndexerService);
networkForm: FormGroup;
selectedNetwork: 'mainnet' | 'testnet' = 'testnet';
constructor(
private _fb: FormBuilder,
private _indexerService: IndexerService
) {}
selectedNetwork = signal<'mainnet' | 'testnet'>('testnet');
constructor(private _fb: FormBuilder) {}
ngOnInit(): void {
const initialNetwork = this._indexerService.getNetwork();
this.networkForm = this._fb.group({
network: [this._indexerService.getNetwork()],
network: [initialNetwork],
});
this.selectedNetwork.set(initialNetwork);
this.selectedNetwork = this._indexerService.getNetwork();
// Effect to handle real-time changes
effect(() => {
console.log('Selected Network:', this.selectedNetwork());
});
}
setNetwork(network: 'mainnet' | 'testnet'): void {
this.selectedNetwork = network;
this._indexerService.setNetwork(this.selectedNetwork);
this.selectedNetwork.set(network);
}
save(): void {
this._indexerService.setNetwork(this.selectedNetwork);
const network = this.selectedNetwork();
this._indexerService.setNetwork(network);
}
cancel(): void {
this.selectedNetwork = this._indexerService.getNetwork();
const currentNetwork = this._indexerService.getNetwork();
this.selectedNetwork.set(currentNetwork);
}
}