Featured assets and asset groups

frontend/src/app/components/assets/assets-featured/assets-featured.component.html

@@ -0,0 +1,27 @@
+<div *ngIf="featuredAssets$ | async as featured; else loading" class="featuredBox">
+    
+  <div *ngFor="let group of featured.featured">
+    <div class="card">
+      <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
+        <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
+        <div class="sub-title">Group of {{ group.assets.length | number }} assets</div>
+      </ng-template>
+      <ng-template #singleAsset>
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+        <div class="title">
+          <a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
+        </div>
+        <div class="ticker">{{ group.ticker }}</div>
+      </ng-template>
+    </div>
+  </div>
+
+</div>
+
+<ng-template #loading>
+  <br>
+  <div class="text-center loadingGraphs">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>

frontend/src/app/components/assets/assets-featured/assets-featured.component.scss

@@ -0,0 +1,46 @@
+
+.featuredBox {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 27px;
+}
+
+.card {
+  background-color: #1d1f31;
+  width: 200px;
+  height: 200px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.sub-title {
+  color: grey;
+  font-size: 12px;
+}
+
+.assetIcon {
+  width: 100px;
+  height: 100px;
+}
+
+.image {
+  width: 100px;
+  height: 100px;
+  align-self: center;
+}
+
+.view-link {
+  margin-top: 30px;
+}
+
+.ticker {
+  color: grey;
+}

frontend/src/app/components/assets/assets-featured/assets-featured.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { AssetsService } from 'src/app/services/assets.service';
+
+@Component({
+  selector: 'app-assets-featured',
+  templateUrl: './assets-featured.component.html',
+  styleUrls: ['./assets-featured.component.scss']
+})
+export class AssetsFeaturedComponent implements OnInit {
+  featuredAssets$: Observable<any>;
+
+  constructor(
+    private apiService: ApiService,
+    private assetsService: AssetsService,
+  ) { }
+
+  ngOnInit(): void {
+    this.featuredAssets$ = combineLatest([
+      this.assetsService.getAssetsJson$,
+      this.apiService.listFeaturedAssets$(),
+    ]).pipe(
+      map(([assetsJson, featured]) => {
+        return {
+          assetsJson: assetsJson,
+          featured: featured,
+        };
+      })
+    );
+  }
+
+}