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;