From 738381702fea116aef8ebff4d445deda6929859b Mon Sep 17 00:00:00 2001 From: softsimon Date: Sat, 12 Feb 2022 00:15:13 +0400 Subject: [PATCH 1/4] Display top featured assets on Liquid dashboard --- .../app/dashboard/dashboard.component.html | 56 +++++++++++++++---- .../app/dashboard/dashboard.component.scss | 23 ++++++++ .../src/app/dashboard/dashboard.component.ts | 16 +++++- 3 files changed, 83 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index b3cbd5fa1..01a32ac7c 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -47,17 +47,36 @@
- -
- -
- + + +
+ +
+ + + + + + + + + + +
+ + + + + {{ group.name }} + {{ group.ticker }} +
+ @@ -158,6 +177,21 @@ + + + + + + + + +
+
+ 		+
+
+ +
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 39ca2101a..23c9b226e 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -283,3 +283,26 @@ margin-right: -2px; font-size: 10px; } + +.assetIcon { + width: 28px; + height: 28px; +} + +.asset-title { + text-align: left; +} + +.asset-ticker { + color: grey; +} + +.asset-icon { + width: 54px; + height: 52px; +} + +.asset-table { + width: calc(100% - 20px); + margin-left: 1.25rem; +} diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index 7a7e1fbf2..36ad73003 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; import { combineLatest, merge, Observable, of, timer } from 'rxjs'; -import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators'; +import { filter, map, scan, share, switchMap, take, tap } from 'rxjs/operators'; import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface'; import { ApiService } from '../services/api.service'; @@ -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( + take(5), + map((featured) => { + for (const feature of featured) { + if (feature.assets) { + feature.asset = feature.assets[0]; + } + } + return featured; + }) + ); + this.blocks$ = this.stateService.blocks$ .pipe( tap(([block]) => { From 294d7915e1d537691885099d68f0ddbff929b0de Mon Sep 17 00:00:00 2001 From: softsimon Date: Sun, 13 Feb 2022 00:46:42 +0400 Subject: [PATCH 2/4] Liquid dashboard assets updates --- frontend/src/app/app.module.ts | 2 + frontend/src/app/bitcoin.utils.ts | 2 +- .../asset-circulation.component.html | 3 ++ .../asset-circulation.component.scss | 0 .../asset-circulation.component.ts | 53 +++++++++++++++++++ .../app/dashboard/dashboard.component.html | 13 +++-- .../app/dashboard/dashboard.component.scss | 13 +++-- .../src/app/dashboard/dashboard.component.ts | 4 +- 8 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 frontend/src/app/components/asset-circulation/asset-circulation.component.html create mode 100644 frontend/src/app/components/asset-circulation/asset-circulation.component.scss create mode 100644 frontend/src/app/components/asset-circulation/asset-circulation.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 97fc16204..28a3f60b7 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -67,6 +67,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'; @NgModule({ declarations: [ @@ -116,6 +117,7 @@ import { AssetGroupComponent } from './components/assets/asset-group/asset-group AssetsNavComponent, AssetsFeaturedComponent, AssetGroupComponent, + AssetCirculationComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), 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..2f4dca8eb --- /dev/null +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.html @@ -0,0 +1,3 @@ + + {{ circulatingAmount }} + \ 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..e69de29bb 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..6d1511c6e --- /dev/null +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.ts @@ -0,0 +1,53 @@ +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; + + 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 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'); + } else { + return formatNumber(this.formatAmount(asset.chain_stats.issued_amount + - asset.chain_stats.burned_amount, assetData[3]), this.locale, '1.2-2'); + } + } else { + return $localize`:@@shared.confidential:Confidential`; + } + }), + ); + } + + 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 01a32ac7c..06f9cb0eb 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -47,7 +47,7 @@
- +
{{ group.name }} - {{ group.ticker }} + {{ group.ticker }} + @@ -180,13 +181,19 @@ - + + +
+
+ 		+
+
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 23c9b226e..e518beaa7 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -285,8 +285,8 @@ } .assetIcon { - width: 28px; - height: 28px; + width: 40px; + height: 40px; } .asset-title { @@ -298,11 +298,16 @@ } .asset-icon { - width: 54px; - height: 52px; + width: 65px; + height: 65px; } .asset-table { width: calc(100% - 20px); margin-left: 1.25rem; } + +.circulating-amount { + text-align: right; + width: 100%; +} diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index 36ad73003..b8a32210c 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -127,15 +127,15 @@ export class DashboardComponent implements OnInit { this.featuredAssets$ = this.apiService.listFeaturedAssets$() .pipe( - take(5), map((featured) => { + featured = featured.slice(0, 4); for (const feature of featured) { if (feature.assets) { feature.asset = feature.assets[0]; } } return featured; - }) + }), ); this.blocks$ = this.stateService.blocks$ From b6f89b1a3e480330bf1081e43c3302dd5b744a11 Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 16 Feb 2022 17:32:12 +0400 Subject: [PATCH 3/4] Moving ticker to circulating amount --- .../asset-circulation.component.html | 4 ++-- .../asset-circulation.component.scss | 3 +++ .../asset-circulation.component.ts | 21 +++++++++++++------ .../app/dashboard/dashboard.component.html | 1 - .../app/dashboard/dashboard.component.scss | 4 ---- .../src/app/dashboard/dashboard.component.ts | 12 +++++------ 6 files changed, 26 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/components/asset-circulation/asset-circulation.component.html b/frontend/src/app/components/asset-circulation/asset-circulation.component.html index 2f4dca8eb..1c6337721 100644 --- a/frontend/src/app/components/asset-circulation/asset-circulation.component.html +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.html @@ -1,3 +1,3 @@ - - {{ circulatingAmount }} + + {{ 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 index e69de29bb..5e43c829c 100644 --- a/frontend/src/app/components/asset-circulation/asset-circulation.component.scss +++ 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 index 6d1511c6e..d1a56abb0 100644 --- a/frontend/src/app/components/asset-circulation/asset-circulation.component.ts +++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.ts @@ -16,7 +16,7 @@ import { environment } from 'src/environments/environment'; export class AssetCirculationComponent implements OnInit { @Input() assetId: string; - circulatingAmount$: Observable; + circulatingAmount$: Observable<{ amount: string, ticker: string}>; constructor( private electrsApiService: ElectrsApiService, @@ -34,14 +34,23 @@ export class AssetCirculationComponent implements OnInit { const assetData = assetsMinimal[asset.asset_id]; if (!asset.chain_stats.has_blinded_issuances) { if (asset.asset_id === environment.nativeAssetId) { - return 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'); + 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 formatNumber(this.formatAmount(asset.chain_stats.issued_amount - - asset.chain_stats.burned_amount, assetData[3]), this.locale, '1.2-2'); + 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 $localize`:@@shared.confidential:Confidential`; + return { + amount: $localize`:@@shared.confidential:Confidential`, + ticker: '', + }; } }), ); diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 06f9cb0eb..7fb17ef83 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -72,7 +72,6 @@ {{ group.name }} - {{ group.ticker }} diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index e518beaa7..4ceac7a6b 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -293,10 +293,6 @@ text-align: left; } -.asset-ticker { - color: grey; -} - .asset-icon { width: 65px; height: 65px; diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index b8a32210c..33fb5ea91 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; -import { combineLatest, merge, Observable, of, timer } from 'rxjs'; -import { filter, map, scan, share, switchMap, take, tap } from 'rxjs/operators'; +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'; import { ApiService } from '../services/api.service'; @@ -128,13 +128,13 @@ export class DashboardComponent implements OnInit { this.featuredAssets$ = this.apiService.listFeaturedAssets$() .pipe( map((featured) => { - featured = featured.slice(0, 4); + const newArray = []; for (const feature of featured) { - if (feature.assets) { - feature.asset = feature.assets[0]; + if (feature.ticker !== 'L-BTC' && feature.asset) { + newArray.push(feature); } } - return featured; + return newArray.slice(0, 4); }), ); From e816f536372587f0842b50f71d6fe66e97195caa Mon Sep 17 00:00:00 2001 From: softsimon Date: Fri, 18 Feb 2022 00:37:37 +0400 Subject: [PATCH 4/4] Flip Liquid dashboard locations --- .../app/dashboard/dashboard.component.html | 54 ++++++++++--------- .../app/dashboard/dashboard.component.scss | 8 ++- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 7fb17ef83..a871f6141 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -16,38 +16,40 @@
- +
- +
-
-
Transaction Fees
-
-
- + +
+
Transaction Fees
+
+
+ +
-
-
- -
+
+ +
+
- +
- +
- - + + + + + + +
+
+
+ +
+
+
@@ -76,17 +89,6 @@
- -
-
-
-
-
-
- -
-
-
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 4ceac7a6b..6fb2ee125 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -291,19 +291,17 @@ .asset-title { text-align: left; + vertical-align: middle; } .asset-icon { width: 65px; height: 65px; -} - -.asset-table { - width: calc(100% - 20px); - margin-left: 1.25rem; + vertical-align: middle; } .circulating-amount { text-align: right; width: 100%; + vertical-align: middle; }