Merge pull request #1415 from mempool/simon/miner-dashboard-websocket-push-fix
Subscribe to blocks and mempool updates in the mining dashboard
This commit is contained in:
		
						commit
						6123f94785
					
				| @ -34,7 +34,9 @@ export class BlocksList implements OnInit { | |||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   ngOnInit(): void { |   ngOnInit(): void { | ||||||
|  |     if (!this.widget) { | ||||||
|       this.websocketService.want(['blocks']); |       this.websocketService.want(['blocks']); | ||||||
|  |     } | ||||||
| 
 | 
 | ||||||
|     this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()]; |     this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()]; | ||||||
|     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; |     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; | ||||||
|  | |||||||
| @ -1,9 +1,9 @@ | |||||||
| import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; | ||||||
| import { map } from 'rxjs/operators'; | import { map } from 'rxjs/operators'; | ||||||
| import { SeoService } from 'src/app/services/seo.service'; | import { SeoService } from 'src/app/services/seo.service'; | ||||||
| import { StateService } from 'src/app/services/state.service'; | import { StateService } from 'src/app/services/state.service'; | ||||||
| import { formatNumber } from '@angular/common'; |  | ||||||
| import { Observable } from 'rxjs'; | import { Observable } from 'rxjs'; | ||||||
|  | import { WebsocketService } from 'src/app/services/websocket.service'; | ||||||
| 
 | 
 | ||||||
| @Component({ | @Component({ | ||||||
|   selector: 'app-mining-dashboard', |   selector: 'app-mining-dashboard', | ||||||
| @ -19,27 +19,30 @@ export class MiningDashboardComponent implements OnInit { | |||||||
|   public rewardPerTx = '~'; |   public rewardPerTx = '~'; | ||||||
|   public feePerTx = '~'; |   public feePerTx = '~'; | ||||||
| 
 | 
 | ||||||
|   constructor(private seoService: SeoService, |   constructor( | ||||||
|  |     private seoService: SeoService, | ||||||
|     public stateService: StateService, |     public stateService: StateService, | ||||||
|     @Inject(LOCALE_ID) private locale: string, |     private websocketService: WebsocketService, | ||||||
|   ) { |   ) { | ||||||
|     this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`); |     this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   ngOnInit(): void { |   ngOnInit(): void { | ||||||
|  |     this.websocketService.want(['blocks', 'mempool-blocks']); | ||||||
|  | 
 | ||||||
|     this.$rewardStats = this.stateService.blocks$.pipe( |     this.$rewardStats = this.stateService.blocks$.pipe( | ||||||
|       map(([block]) => { |       map(([block]) => { | ||||||
|         this.blocks.unshift(block); |         this.blocks.unshift(block); | ||||||
|         this.blocks = this.blocks.slice(0, 8); |         this.blocks = this.blocks.slice(0, 8); | ||||||
|         const totalTx = this.blocks.reduce((acc, block) => acc + block.tx_count, 0); |         const totalTx = this.blocks.reduce((acc, b) => acc + b.tx_count, 0); | ||||||
|         const totalFee = this.blocks.reduce((acc, block) => acc + block.extras?.totalFees ?? 0, 0); |         const totalFee = this.blocks.reduce((acc, b) => acc + b.extras?.totalFees ?? 0, 0); | ||||||
|         const totalReward = this.blocks.reduce((acc, block) => acc + block.extras?.reward ?? 0, 0); |         const totalReward = this.blocks.reduce((acc, b) => acc + b.extras?.reward ?? 0, 0); | ||||||
| 
 | 
 | ||||||
|         return { |         return { | ||||||
|           'totalReward': totalReward, |           'totalReward': totalReward, | ||||||
|           'rewardPerTx': Math.round(totalReward / totalTx), |           'rewardPerTx': Math.round(totalReward / totalTx), | ||||||
|           'feePerTx': Math.round(totalFee / totalTx), |           'feePerTx': Math.round(totalFee / totalTx), | ||||||
|         } |         }; | ||||||
|       }) |       }) | ||||||
|     ); |     ); | ||||||
|   } |   } | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user