Added fiat balance to address and made fiat balance into a component.
This commit is contained in:
parent
d28730787a
commit
669a5e429d
@ -41,6 +41,7 @@ import { BlockchainComponent } from './components/blockchain/blockchain.componen
|
|||||||
import { FooterComponent } from './components/footer/footer.component';
|
import { FooterComponent } from './components/footer/footer.component';
|
||||||
import { ExplorerComponent } from './components/explorer/explorer.component';
|
import { ExplorerComponent } from './components/explorer/explorer.component';
|
||||||
import { AudioService } from './services/audio.service';
|
import { AudioService } from './services/audio.service';
|
||||||
|
import { FiatComponent } from './fiat/fiat.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -73,6 +74,7 @@ import { AudioService } from './services/audio.service';
|
|||||||
ExplorerComponent,
|
ExplorerComponent,
|
||||||
ChartistComponent,
|
ChartistComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
|
FiatComponent,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Balance</td>
|
<td>Balance</td>
|
||||||
<td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC</td>
|
<td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
@ -49,6 +49,7 @@ export class AddressComponent implements OnInit, OnDestroy {
|
|||||||
this.error = undefined;
|
this.error = undefined;
|
||||||
this.isLoadingAddress = true;
|
this.isLoadingAddress = true;
|
||||||
this.loadedConfirmedTxCount = 0;
|
this.loadedConfirmedTxCount = 0;
|
||||||
|
this.address = null;
|
||||||
this.isLoadingTransactions = true;
|
this.isLoadingTransactions = true;
|
||||||
this.transactions = null;
|
this.transactions = null;
|
||||||
document.body.scrollTo(0, 0);
|
document.body.scrollTo(0, 0);
|
||||||
|
@ -47,7 +47,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Block subsidy</td>
|
<td>Block subsidy</td>
|
||||||
<td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
|
<td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<app-fiat [value]="blockSubsidy"></app-fiat>)</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Status</td>
|
<td>Status</td>
|
||||||
|
@ -22,7 +22,6 @@ export class BlockComponent implements OnInit {
|
|||||||
isLoadingTransactions = true;
|
isLoadingTransactions = true;
|
||||||
error: any;
|
error: any;
|
||||||
blockSubsidy = 50;
|
blockSubsidy = 50;
|
||||||
conversions: any;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
@ -69,12 +68,6 @@ export class BlockComponent implements OnInit {
|
|||||||
|
|
||||||
this.stateService.blocks$
|
this.stateService.blocks$
|
||||||
.subscribe((block) => this.latestBlock = block);
|
.subscribe((block) => this.latestBlock = block);
|
||||||
|
|
||||||
this.stateService.conversions$
|
|
||||||
.subscribe((conversions) => {
|
|
||||||
this.conversions = conversions;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setBlockSubsidy() {
|
setBlockSubsidy() {
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
<ng-template [ngIf]="tx.fee">
|
<ng-template [ngIf]="tx.fee">
|
||||||
<tr>
|
<tr>
|
||||||
<td>Fees</td>
|
<td>Fees</td>
|
||||||
<td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
|
<td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Fees per vByte</td>
|
<td>Fees per vByte</td>
|
||||||
@ -67,7 +67,7 @@
|
|||||||
</ng-template>
|
</ng-template>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Fees</td>
|
<td>Fees</td>
|
||||||
<td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
|
<td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Fees per vByte</td>
|
<td>Fees per vByte</td>
|
||||||
|
@ -18,7 +18,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
|
|||||||
tx: Transaction;
|
tx: Transaction;
|
||||||
txId: string;
|
txId: string;
|
||||||
isLoadingTx = true;
|
isLoadingTx = true;
|
||||||
conversions: any;
|
|
||||||
error: any = undefined;
|
error: any = undefined;
|
||||||
latestBlock: Block;
|
latestBlock: Block;
|
||||||
transactionTime = -1;
|
transactionTime = -1;
|
||||||
@ -66,9 +65,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
|
|||||||
this.isLoadingTx = false;
|
this.isLoadingTx = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.stateService.conversions$
|
|
||||||
.subscribe((conversions) => this.conversions = conversions);
|
|
||||||
|
|
||||||
this.stateService.blocks$
|
this.stateService.blocks$
|
||||||
.subscribe((block) => this.latestBlock = block);
|
.subscribe((block) => this.latestBlock = block);
|
||||||
|
|
||||||
|
1
frontend/src/app/fiat/fiat.component.html
Normal file
1
frontend/src/app/fiat/fiat.component.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<span class="green-color">{{ (conversions$ | async)?.USD * value / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>
|
3
frontend/src/app/fiat/fiat.component.scss
Normal file
3
frontend/src/app/fiat/fiat.component.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.green-color {
|
||||||
|
color: #3bcc49;
|
||||||
|
}
|
25
frontend/src/app/fiat/fiat.component.spec.ts
Normal file
25
frontend/src/app/fiat/fiat.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FiatComponent } from './fiat.component';
|
||||||
|
|
||||||
|
describe('FiatComponent', () => {
|
||||||
|
let component: FiatComponent;
|
||||||
|
let fixture: ComponentFixture<FiatComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FiatComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FiatComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
24
frontend/src/app/fiat/fiat.component.ts
Normal file
24
frontend/src/app/fiat/fiat.component.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { StateService } from '../services/state.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-fiat',
|
||||||
|
templateUrl: './fiat.component.html',
|
||||||
|
styleUrls: ['./fiat.component.scss'],
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
})
|
||||||
|
export class FiatComponent implements OnInit {
|
||||||
|
conversions$: Observable<any>;
|
||||||
|
|
||||||
|
@Input() value: number;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private stateService: StateService,
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.conversions$ = this.stateService.conversions$.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user