Add prices on home page and 24 hour change difference

Author: sondreb

src/Blockcore.Explorer/ClientApp/src/app/home/home.component.css

@@ -0,0 +1,75 @@
+.chains-home {
+   width: 100%;
+   font-size: 1.2em;
+   text-align: center;
+}
+
+.chains-home img {
+   width: 32px;
+   height: 32px;
+}
+
+.chains-home li {
+   margin-left: 0.5em;
+   width: 180px;
+}
+
+.chains-home {
+   padding: 2rem;
+}
+
+.chains-home > ul {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+   grid-gap: 1em;
+   list-style-type: none;
+}
+
+.chains-home > ul > li {
+   margin: 0.5em;
+}
+
+.chain-home-link:hover {
+   text-decoration: underline;
+}
+
+.chains-home > ul > li > a {
+   white-space: nowrap;
+   text-decoration: none !important;
+}
+
+.chain-home-item {
+   display: grid;
+   grid-template-columns: 32px 1fr;
+   grid-template-rows: 1fr 1fr;
+   margin-bottom: 1em;
+   column-gap: 10px;
+   row-gap: 0px;
+}
+
+.chain-home-ticker {
+   clear: both;
+   display: block;
+   place-self: start;
+   white-space: nowrap;
+   color: var(--foreground-alternative);
+   font-size: 0.8em;
+}
+
+.chain-home-link {
+   height: 32px;
+   line-height: 32px;
+   place-self: start;
+}
+
+.chain-home-link img {
+   margin-right: 0.2em;
+}
+
+.chain-home-link:hover {
+   text-decoration: none;
+}
+
+.chain-home-ticker-change {
+   margin-left: 0.2em;
+}

src/Blockcore.Explorer/ClientApp/src/app/home/home.component.html

@@ -4,7 +4,12 @@
    <ul>
      <li class="chain-home-item" *ngFor="let chain of setup.chains">
        <a class="chain-home-link" [routerLink]="[chain.symbol.toLowerCase()]"><img [ngClass]="{'mode-aware': chain.filter}" [src]="chain.icon"></a>
-       <a class="chain-home-link" [routerLink]="[chain.symbol.toLowerCase()]">{{chain.name}}</a>
+       <a class="chain-home-link" [routerLink]="[chain.symbol.toLowerCase()]">
+         {{chain.name}}
+        </a><br>
+        <div class="chain-home-ticker" *ngIf="tickers && chain.coin">
+          {{ tickers[chain.coin].btc }} <i class="fab fa-btc"></i> <span *ngIf="tickers[chain.coin].btc_24h_change" class="chain-home-ticker-change" [ngClass]="getChangeClass(tickers[chain.coin].btc_24h_change)">{{tickers[chain.coin].btc_24h_change.toFixed(2)}}%</span>
+        </div>
      </li>
    </ul>
  </div>

src/Blockcore.Explorer/ClientApp/src/app/home/home.component.ts

@@ -1,18 +1,51 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
 import { SetupService } from '../services/setup.service';
 import { Router } from '@angular/router';
+import { ApiService } from '../services/api.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
   // @HostBinding('class.content-centered') hostClass = true;
+  tickers: any;
 
-  constructor(public setup: SetupService, private router: Router) {
+  constructor(
+    public setup: SetupService,
+    private api: ApiService,
+    private router: Router) {
     // When we are not in multichain mode, redirect to chain-home.
     if (!setup.multiChain) {
       router.navigate(['/' + setup.current.toLowerCase()]);
     }
   }
+
+  async ngOnInit() {
+    await this.updateTicker();
+  }
+
+  getChangeClass(value: number) {
+    if (value < 0) {
+      return 'negative';
+    } else {
+      return 'positive';
+    }
+  }
+
+  async updateTicker() {
+
+    try {
+      const coins = this.setup.chains.map(c => c.coin).filter((c) => c != null);;
+      const coinList = coins.join('%2C');
+      const url = `https://api.coingecko.com/api/v3/simple/price?ids=${coinList}&vs_currencies=btc&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true`
+
+      const request = await this.api.download(url);
+      this.tickers = request;
+    }
+    catch (err) {
+      console.error(err);
+    }
+  }
 }

src/Blockcore.Explorer/ClientApp/src/styles/blockcore.scss

@@ -198,75 +198,6 @@ header a:hover {
    z-index: 1;
 }
 
-.chains-home {
-   width: 100%;
-   // margin: 2em;
-   // padding: 1em;
-   // border-radius: 10px;
-   // top: 1em;
-   // left: 5em;
-   font-size: 1.2em;
-   text-align: center;
-}
-
-.chains-home img {
-   width: 32px;
-   height: 32px;
-}
-
-// .chains-home ul {
-//   display: inline-block;
-//   list-style-type: none;
-//   margin: 0;
-//   padding: 0;
-// }
-
-.chains-home li {
-   margin-left: 0.5em;
-   width: 180px;
-}
-
-.chains-home {
-   padding: 2rem;
-}
-
-.chains-home > ul {
-   display: grid;
-   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-   grid-gap: 1em;
-}
-
-.chains-home > ul > li {
-   margin: 0.5em;
-}
-
-.chain-home-link:hover {
-   text-decoration: underline;
-}
-
-.chains-home > ul > li > a {
-   white-space: nowrap;
-   text-decoration: none !important;
-}
-
-.chain-home-item {
-   display: flex;
-   margin-bottom: 1em;
-}
-
-.chain-home-link {
-   height: 32px;
-   line-height: 32px;
-}
-
-.chain-home-link img {
-   margin-right: 0.2em;
-}
-
-.chain-home-link:hover {
-   text-decoration: none;
-}
-
 .chains {
    background-color: var(--box-background);
    border-radius: 6px;
@@ -683,8 +614,8 @@ footer {
    width: 100%;
    font-family: "Manrope", sans-serif;
    font-family: "Raleway", sans-serif;
- }
- 
+}
+
 .search-global {
    display: flex;
    flex-direction: row;