machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create separate service for short term tx & block caching

Browse Source
This commit is contained in:
Mononaut
2022-12-27 05:36:58 -06:00
parent befafaa60c
commit 7be3ed416e
9 changed files with 147 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/components/block/block.component.ts
View File

@@ -138,7 +138,6 @@ export class BlockComponent implements OnInit, OnDestroy {
this.page = 1;
this.error = undefined;
this.fees = undefined;
this.stateService.markBlock$.next({});
this.auditDataMissing = false;
if (history.state.data && history.state.data.blockHeight) {

30
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -5,6 +5,7 @@ import { specialBlocks } from '../../app.constants';
import { BlockExtended } from '../../interfaces/node-api.interface';
import { Location } from '@angular/common';
import { config } from 'process';
import { CacheService } from 'src/app/services/cache.service';
interface BlockchainBlock extends BlockExtended {
loading?: boolean;
@@ -28,6 +29,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
markHeight: number;
blocksSubscription: Subscription;
blockPageSubscription: Subscription;
networkSubscription: Subscription;
tabHiddenSubscription: Subscription;
markBlockSubscription: Subscription;
@@ -56,6 +58,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
constructor(
public stateService: StateService,
public cacheService: CacheService,
private cd: ChangeDetectorRef,
private location: Location,
) {
@@ -123,6 +126,12 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
this.cd.markForCheck();
});
} else {
this.blockPageSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
if (block.height <= this.height && block.height > this.height - this.count) {
this.onBlockLoaded(block);
}
});
}
this.markBlockSubscription = this.stateService.markBlock$
@@ -151,6 +160,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (this.blocksSubscription) {
this.blocksSubscription.unsubscribe();
}
if (this.blockPageSubscription) {
this.blockPageSubscription.unsubscribe();
}
this.networkSubscription.unsubscribe();
this.tabHiddenSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
@@ -201,12 +213,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
while (this.blocks.length < Math.min(this.height + 1, this.count)) {
const height = this.height - this.blocks.length;
if (height >= 0) {
// const block = this.cacheService.getCachedBlock(height) || null;
// if (!block) {
// this.cacheService.loadBlock(height);
// }
// this.blocks.push(block || {
this.blocks.push({
this.cacheService.loadBlock(height);
const block = this.cacheService.getCachedBlock(height) || null;
this.blocks.push(block || {
loading: true,
id: '',
height,
@@ -236,6 +245,15 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
}
onBlockLoaded(block: BlockExtended) {
const blockIndex = this.height - block.height;
if (blockIndex >= 0 && blockIndex < this.blocks.length) {
this.blocks[blockIndex] = block;
this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);
}
this.cd.markForCheck();
}
getStyleForBlock(block: BlockchainBlock, index: number, animateSlideStart: boolean = false) {
if (!block || block.loading) {
return this.getStyleForLoadingBlock(index, animateSlideStart);

5
frontend/src/app/components/start/start.component.ts
View File

@@ -46,6 +46,11 @@ export class StartComponent implements OnInit, OnDestroy {
this.chainTip = height;
this.updatePages();
});
this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
if (mark?.blockHeight != null) {
this.scrollToBlock(mark.blockHeight);
}
});
this.stateService.blocks$
.subscribe((blocks: any) => {
if (this.stateService.network !== '') {

4
frontend/src/app/components/transaction/transaction-preview.component.ts
View File

@@ -11,6 +11,7 @@ import {
import { Transaction, Vout } from '../../interfaces/electrs.interface';
import { of, merge, Subscription, Observable, Subject, from } from 'rxjs';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { OpenGraphService } from '../../services/opengraph.service';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
@@ -45,6 +46,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
private route: ActivatedRoute,
private electrsApiService: ElectrsApiService,
private stateService: StateService,
private cacheService: CacheService,
private apiService: ApiService,
private seoService: SeoService,
private openGraphService: OpenGraphService,
@@ -97,7 +99,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
}),
switchMap(() => {
let transactionObservable$: Observable<Transaction>;
const cached = this.stateService.getTxFromCache(this.txId);
const cached = this.cacheService.getTxFromCache(this.txId);
if (cached && cached.fee !== -1) {
transactionObservable$ = of(cached);
} else {

6
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -13,6 +13,7 @@ import {
import { Transaction } from '../../interfaces/electrs.interface';
import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from, throwError } from 'rxjs';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { WebsocketService } from '../../services/websocket.service';
import { AudioService } from '../../services/audio.service';
import { ApiService } from '../../services/api.service';
@@ -74,6 +75,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
private relativeUrlPipe: RelativeUrlPipe,
private electrsApiService: ElectrsApiService,
private stateService: StateService,
private cacheService: CacheService,
private websocketService: WebsocketService,
private audioService: AudioService,
private apiService: ApiService,
@@ -203,7 +205,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}),
switchMap(() => {
let transactionObservable$: Observable<Transaction>;
const cached = this.stateService.getTxFromCache(this.txId);
const cached = this.cacheService.getTxFromCache(this.txId);
if (cached && cached.fee !== -1) {
transactionObservable$ = of(cached);
} else {
@@ -302,7 +304,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.waitingForTransaction = false;
}
this.rbfTransaction = rbfTransaction;
this.stateService.setTxCache([this.rbfTransaction]);
this.cacheService.setTxCache([this.rbfTransaction]);
});
this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {

4
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription } from 'rxjs';
import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service';
@@ -44,6 +45,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
constructor(
public stateService: StateService,
private cacheService: CacheService,
private electrsApiService: ElectrsApiService,
private apiService: ApiService,
private assetsService: AssetsService,
@@ -123,7 +125,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
}
this.transactionsLength = this.transactions.length;
this.stateService.setTxCache(this.transactions);
this.cacheService.setTxCache(this.transactions);
this.transactions.forEach((tx) => {
tx['@voutLimit'] = true;