diff --git a/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.css b/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.css new file mode 100644 index 0000000..f065e7b --- /dev/null +++ b/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; +} diff --git a/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.html b/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.html index 1b034fd..5ee96dd 100644 --- a/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.html +++ b/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.html @@ -4,7 +4,12 @@ diff --git a/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.ts b/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.ts index 0edf0fb..66ca8a6 100644 --- a/src/Blockcore.Explorer/ClientApp/src/app/home/home.component.ts +++ b/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); + } + } } diff --git a/src/Blockcore.Explorer/ClientApp/src/styles/blockcore.scss b/src/Blockcore.Explorer/ClientApp/src/styles/blockcore.scss index a3f59bb..3bdf012 100644 --- a/src/Blockcore.Explorer/ClientApp/src/styles/blockcore.scss +++ b/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;