diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 677d88d6e..4fe24ceb8 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -68,6 +68,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component'; import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component'; +import { AssetCirculationComponent } from './components/asset-circulation/asset-circulation.component'; import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component'; import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component'; @@ -120,6 +121,7 @@ import { DifficultyChartComponent } from './components/difficulty-chart/difficul AssetsNavComponent, AssetsFeaturedComponent, AssetGroupComponent, + AssetCirculationComponent, MiningDashboardComponent, DifficultyChartComponent, ], diff --git a/frontend/src/app/bitcoin.utils.ts b/frontend/src/app/bitcoin.utils.ts index 577249940..ff2d7a885 100644 --- a/frontend/src/app/bitcoin.utils.ts +++ b/frontend/src/app/bitcoin.utils.ts @@ -69,7 +69,7 @@ export function calcSegwitFeeGains(tx: Transaction) { export function moveDec(num: number, n: number) { let frac, int, neg, ref; if (n === 0) { - return num; + return num.toString(); } ref = ('' + num).split('.'), int = ref[0], frac = ref[1]; int || (int = '0'); diff --git a/frontend/src/app/components/asset-circulation/asset-circulation.component.html b/frontend/src/app/components/asset-circulation/asset-circulation.component.html new file mode 100644 index 000000000..1c6337721 --- /dev/null +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.html @@ -0,0 +1,3 @@ + + {{ circulating.amount }} {{ circulating.ticker }} + \ No newline at end of file diff --git a/frontend/src/app/components/asset-circulation/asset-circulation.component.scss b/frontend/src/app/components/asset-circulation/asset-circulation.component.scss new file mode 100644 index 000000000..5e43c829c --- /dev/null +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.scss @@ -0,0 +1,3 @@ +.ticker { + color: grey; +} diff --git a/frontend/src/app/components/asset-circulation/asset-circulation.component.ts b/frontend/src/app/components/asset-circulation/asset-circulation.component.ts new file mode 100644 index 000000000..d1a56abb0 --- /dev/null +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.ts @@ -0,0 +1,62 @@ +import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; +import { combineLatest, Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { moveDec } from 'src/app/bitcoin.utils'; +import { AssetsService } from 'src/app/services/assets.service'; +import { ElectrsApiService } from 'src/app/services/electrs-api.service'; +import { formatNumber } from '@angular/common'; +import { environment } from 'src/environments/environment'; + +@Component({ + selector: 'app-asset-circulation', + templateUrl: './asset-circulation.component.html', + styleUrls: ['./asset-circulation.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class AssetCirculationComponent implements OnInit { + @Input() assetId: string; + + circulatingAmount$: Observable<{ amount: string, ticker: string}>; + + constructor( + private electrsApiService: ElectrsApiService, + private assetsService: AssetsService, + @Inject(LOCALE_ID) private locale: string, + ) { } + + ngOnInit(): void { + this.circulatingAmount$ = combineLatest([ + this.electrsApiService.getAsset$(this.assetId), + this.assetsService.getAssetsMinimalJson$] + ) + .pipe( + map(([asset, assetsMinimal]) => { + const assetData = assetsMinimal[asset.asset_id]; + if (!asset.chain_stats.has_blinded_issuances) { + if (asset.asset_id === environment.nativeAssetId) { + return { + amount: formatNumber(this.formatAmount(asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount + - asset.chain_stats.peg_out_amount, assetData[3]), this.locale, '1.2-2'), + ticker: assetData[1] + }; + } else { + return { + amount: formatNumber(this.formatAmount(asset.chain_stats.issued_amount + - asset.chain_stats.burned_amount, assetData[3]), this.locale, '1.2-2'), + ticker: assetData[1] + }; + } + } else { + return { + amount: $localize`:@@shared.confidential:Confidential`, + ticker: '', + }; + } + }), + ); + } + + formatAmount(value: number, precision = 0): number { + return parseFloat(moveDec(value, -precision)); + } +} diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index b3cbd5fa1..a871f6141 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -16,58 +16,79 @@
- +
- +
-
-
Transaction Fees
-
-
- + +
+
Transaction Fees
+
+
+ +
-
-
- -
+
+ +
+
- +
- -
- -
- + + +
+ +
+ + + + +
- +
- + + + + + + + + +
+ + + + + {{ group.name }} +
@@ -158,6 +179,27 @@
+ + + + + + + + + + +
+
+ 		+
+ 		+
+ 		+
+
+ +
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 39ca2101a..6fb2ee125 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -283,3 +283,25 @@ margin-right: -2px; font-size: 10px; } + +.assetIcon { + width: 40px; + height: 40px; +} + +.asset-title { + text-align: left; + vertical-align: middle; +} + +.asset-icon { + width: 65px; + height: 65px; + vertical-align: middle; +} + +.circulating-amount { + text-align: right; + width: 100%; + vertical-align: middle; +} diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index 7a7e1fbf2..33fb5ea91 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; -import { combineLatest, merge, Observable, of, timer } from 'rxjs'; +import { combineLatest, merge, Observable, of } from 'rxjs'; import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators'; import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface'; @@ -34,6 +34,7 @@ interface MempoolStatsData { }) export class DashboardComponent implements OnInit { collapseLevel: string; + featuredAssets$: Observable; network$: Observable; mempoolBlocksData$: Observable; mempoolInfoData$: Observable; @@ -124,6 +125,19 @@ export class DashboardComponent implements OnInit { }) ); + this.featuredAssets$ = this.apiService.listFeaturedAssets$() + .pipe( + map((featured) => { + const newArray = []; + for (const feature of featured) { + if (feature.ticker !== 'L-BTC' && feature.asset) { + newArray.push(feature); + } + } + return newArray.slice(0, 4); + }), + ); + this.blocks$ = this.stateService.blocks$ .pipe( tap(([block]) => {