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 @@
-
-
-
+
+
+
+
+
+
+
+
@@ -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]) => {