diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts index c406ae803..1452b6fc8 100644 --- a/backend/src/api/blocks.ts +++ b/backend/src/api/blocks.ts @@ -198,7 +198,7 @@ class Blocks { logger.info(`Indexing blocks from #${currentBlockHeight} to #${lastBlockToIndex}`); const chunkSize = 10000; - let totaIndexed = 0; + let totaIndexed = await blocksRepository.$blockCount(null, null); let indexedThisRun = 0; while (currentBlockHeight >= lastBlockToIndex) { const endBlock = Math.max(0, lastBlockToIndex, currentBlockHeight - chunkSize + 1); @@ -208,11 +208,9 @@ class Blocks { if (missingBlockHeights.length <= 0) { logger.debug(`No missing blocks between #${currentBlockHeight} to #${endBlock}`); currentBlockHeight -= chunkSize; - totaIndexed += chunkSize; continue; } - totaIndexed += chunkSize - missingBlockHeights.length; logger.debug(`Indexing ${missingBlockHeights.length} blocks from #${currentBlockHeight} to #${endBlock}`); for (const blockHeight of missingBlockHeights) { @@ -220,7 +218,8 @@ class Blocks { break; } try { - if (totaIndexed % 100 === 0 || blockHeight === lastBlockToIndex) { + ++indexedThisRun; + if (++totaIndexed % 100 === 0 || blockHeight === lastBlockToIndex) { const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt)); const blockPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds)); const progress = Math.round(totaIndexed / indexingBlockAmount * 100); @@ -232,8 +231,6 @@ class Blocks { const transactions = await this.$getTransactionsExtended(blockHash, block.height, true, true); const blockExtended = await this.$getBlockExtended(block, transactions); await blocksRepository.$saveBlockInDatabase(blockExtended); - ++totaIndexed; - ++indexedThisRun; } catch (e) { logger.err(`Something went wrong while indexing blocks.` + e); } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 6ce39b1d2..f0aa73e3d 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -27,6 +27,7 @@ import { AssetGroupComponent } from './components/assets/asset-group/asset-group import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component'; import { AssetsComponent } from './components/assets/assets.component'; import { PoolComponent } from './components/pool/pool.component'; +import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component'; import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component'; let routes: Routes = [ @@ -58,6 +59,10 @@ let routes: Routes = [ path: 'mempool-block/:id', component: MempoolBlockComponent }, + { + path: 'mining', + component: MiningDashboardComponent, + }, ], }, { @@ -154,6 +159,10 @@ let routes: Routes = [ path: 'mempool-block/:id', component: MempoolBlockComponent }, + { + path: 'mining', + component: MiningDashboardComponent, + }, ], }, { @@ -244,6 +253,10 @@ let routes: Routes = [ path: 'mempool-block/:id', component: MempoolBlockComponent }, + { + path: 'mining', + component: MiningDashboardComponent, + }, ], }, { diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 15bebd033..677d88d6e 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -68,6 +68,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component'; import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component'; +import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component'; import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component'; @NgModule({ @@ -119,6 +120,7 @@ import { DifficultyChartComponent } from './components/difficulty-chart/difficul AssetsNavComponent, AssetsFeaturedComponent, AssetGroupComponent, + MiningDashboardComponent, DifficultyChartComponent, ], imports: [ diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index 50fd82b09..1914b5d08 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -21,9 +21,13 @@
+
+ + {{ block.extras.pool.name}} +
-
+
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 3b1347cea..a20b1cb35 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -124,3 +124,9 @@ 50% {opacity: 1.0;} 100% {opacity: 0.7;} } + +.badge { + position: relative; + top: 15px; + z-index: 101; +} \ No newline at end of file diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index ef076e74b..a8d055602 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; import { StateService } from 'src/app/services/state.service'; import { Router } from '@angular/router'; @@ -12,6 +12,7 @@ import { BlockExtended } from 'src/app/interfaces/node-api.interface'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockchainBlocksComponent implements OnInit, OnDestroy { + @Input() showMiningInfo: boolean = false; specialBlocks = specialBlocks; network = ''; blocks: BlockExtended[] = []; diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index 04f71e130..19ee5676d 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -1,8 +1,8 @@ -
+
- +
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index 0527798a2..a33fc58d2 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -16,7 +16,6 @@ } .blockchain-wrapper { - overflow: hidden; height: 250px; -webkit-user-select: none; /* Safari */ @@ -60,4 +59,14 @@ width: 300px; left: -150px; top: 0px; -} \ No newline at end of file +} + +.animate { + transition: all 1s ease-in-out; +} +.move-left { + transform: translate(-40%, 0); + @media (max-width: 767.98px) { + transform: translate(-85%, 0); + } +} diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index f17569e27..b47eee833 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -8,10 +8,11 @@ import { StateService } from 'src/app/services/state.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockchainComponent implements OnInit { + showMiningInfo: boolean = false; network: string; constructor( - private stateService: StateService, + public stateService: StateService, ) {} ngOnInit() { diff --git a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html index 1cdd90576..ca005f2d4 100644 --- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html +++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html @@ -1,11 +1,11 @@ -
+
-
+
- +
diff --git a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss index e69de29bb..c3a63e9fa 100644 --- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss +++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss @@ -0,0 +1,10 @@ +.main-title { + position: relative; + color: #ffffff91; + margin-top: -13px; + font-size: 10px; + text-transform: uppercase; + font-weight: 500; + text-align: center; + padding-bottom: 3px; +} diff --git a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts index 47e0d9ea4..350e3c4be 100644 --- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts +++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; +import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; import { EChartsOption } from 'echarts'; import { Observable } from 'rxjs'; import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; @@ -21,6 +21,8 @@ import { FormBuilder, FormGroup } from '@angular/forms'; `], }) export class DifficultyChartComponent implements OnInit { + @Input() widget: boolean = false; + radioGroupForm: FormGroup; chartOptions: EChartsOption = {}; @@ -99,7 +101,7 @@ export class DifficultyChartComponent implements OnInit { prepareChartOptions(data) { this.chartOptions = { title: { - text: $localize`:@@mining.difficulty:Difficulty`, + text: this.widget? '' : $localize`:@@mining.difficulty:Difficulty`, left: 'center', textStyle: { color: '#FFF', @@ -112,15 +114,13 @@ export class DifficultyChartComponent implements OnInit { axisPointer: { type: 'line', }, - xAxis: [ - { - type: 'time', - } - ], + xAxis: { + type: 'time', + splitNumber: this.isMobile() ? 5 : 10, + }, yAxis: { type: 'value', axisLabel: { - fontSize: 11, formatter: (val) => { const diff = val / Math.pow(10, 12); // terra return diff.toString() + 'T'; @@ -148,4 +148,7 @@ export class DifficultyChartComponent implements OnInit { }; } + isMobile() { + return (window.innerWidth <= 767.98); + } } diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index af47b75c2..bab0f42e9 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -32,7 +32,7 @@
Block
+
@@ -64,8 +63,8 @@ - - + + diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index 17ea83b71..9cebb6574 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { EChartsOption, PieSeriesOption } from 'echarts'; @@ -25,6 +25,8 @@ import { chartColors } from 'src/app/app.constants'; `], }) export class PoolRankingComponent implements OnInit { + @Input() widget: boolean = false; + poolsWindowPreference: string; radioGroupForm: FormGroup; @@ -46,12 +48,17 @@ export class PoolRankingComponent implements OnInit { private router: Router, ) { this.seoService.setTitle($localize`:@@mining.mining-pools:Mining Pools`); - this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w'; - this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference }); - this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference); } ngOnInit(): void { + if (this.widget) { + this.poolsWindowPreference = '1w'; + } else { + this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w'; + } + this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference }); + this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference); + // When... this.miningStatsObservable$ = combineLatest([ // ...a new block is mined @@ -65,7 +72,9 @@ export class PoolRankingComponent implements OnInit { .pipe( startWith(this.poolsWindowPreference), // (trigger when the page loads) tap((value) => { - this.storageService.setValue('poolsWindowPreference', value); + if (!this.widget) { + this.storageService.setValue('poolsWindowPreference', value); + } this.poolsWindowPreference = value; }) ) @@ -146,8 +155,7 @@ export class PoolRankingComponent implements OnInit { this.chartOptions = { title: { - text: $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`, - subtext: $localize`:@@mining.pool-chart-sub-title:Estimated from the # of blocks mined`, + text: this.widget ? '' : $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`, left: 'center', textStyle: { color: '#FFF', @@ -162,10 +170,11 @@ export class PoolRankingComponent implements OnInit { }, series: [ { - top: this.isMobile() ? '5%' : '20%', + top: this.widget ? '0%' : (this.isMobile() ? '5%' : '10%'), + bottom: this.widget ? '0%' : (this.isMobile() ? '0%' : '5%'), name: 'Mining pool', type: 'pie', - radius: this.isMobile() ? ['10%', '50%'] : ['20%', '80%'], + radius: this.widget ? ['20%', '60%'] : (this.isMobile() ? ['10%', '50%'] : ['20%', '70%']), data: this.generatePoolsChartSerieData(miningStats), labelLine: { lineStyle: {
Rank{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)
- All miners {{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }} {{ miningStats.blockCount }}