diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html index c0d7be0f2..5836f26cf 100644 --- a/frontend/src/app/components/address/address.component.html +++ b/frontend/src/app/components/address/address.component.html @@ -49,7 +49,7 @@


- + diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index 9bed46edd..2fd600000 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -7,6 +7,7 @@ import { WebsocketService } from 'src/app/services/websocket.service'; import { StateService } from 'src/app/services/state.service'; import { AudioService } from 'src/app/services/audio.service'; import { ApiService } from 'src/app/services/api.service'; +import { of } from 'rxjs'; @Component({ selector: 'app-address', @@ -18,15 +19,19 @@ export class AddressComponent implements OnInit, OnDestroy { addressString: string; isLoadingAddress = true; transactions: Transaction[]; - tempTransactions: Transaction[]; isLoadingTransactions = true; error: any; - + totalConfirmedTxCount = 0; + loadedConfirmedTxCount = 0; txCount = 0; receieved = 0; sent = 0; + private tempTransactions: Transaction[]; + private timeTxIndexes: number[]; + private lastTransactionTxId: string; + constructor( private route: ActivatedRoute, private electrsApiService: ElectrsApiService, @@ -86,6 +91,8 @@ export class AddressComponent implements OnInit, OnDestroy { this.transactions = this.transactions.slice(); this.audioService.playSound('magic'); } + this.totalConfirmedTxCount++; + this.loadedConfirmedTxCount++; }); this.stateService.isOffline$ @@ -108,14 +115,27 @@ export class AddressComponent implements OnInit, OnDestroy { return this.electrsApiService.getAddressTransactions$(address.address); }), switchMap((transactions) => { + this.lastTransactionTxId = transactions[transactions.length - 1].txid; this.tempTransactions = transactions; - const fetchTxs = transactions.map((t) => t.txid); + this.loadedConfirmedTxCount = transactions.filter((tx) => tx.status.confirmed).length; + + const fetchTxs: string[] = []; + this.timeTxIndexes = []; + transactions.forEach((tx, index) => { + if (!tx.status.confirmed) { + fetchTxs.push(tx.txid); + this.timeTxIndexes.push(index); + } + }); + if (!fetchTxs.length) { + return of([]); + } return this.apiService.getTransactionTimes$(fetchTxs); }) ) - .subscribe((times) => { + .subscribe((times: number[]) => { times.forEach((time, index) => { - this.tempTransactions[index].firstSeen = time; + this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time; }); this.tempTransactions.sort((a, b) => { return b.status.block_time - a.status.block_time || b.firstSeen - a.firstSeen; @@ -135,13 +155,41 @@ export class AddressComponent implements OnInit, OnDestroy { this.receieved = this.address.chain_stats.funded_txo_sum + this.address.mempool_stats.funded_txo_sum; this.sent = this.address.chain_stats.spent_txo_sum + this.address.mempool_stats.spent_txo_sum; this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count; + this.totalConfirmedTxCount = this.address.chain_stats.tx_count; } loadMore() { this.isLoadingTransactions = true; - this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.transactions[this.transactions.length - 1].txid) - .subscribe((transactions) => { - this.transactions = this.transactions.concat(transactions); + this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.lastTransactionTxId) + .pipe( + switchMap((transactions) => { + this.tempTransactions = transactions; + this.lastTransactionTxId = transactions[transactions.length - 1].txid; + this.loadedConfirmedTxCount += transactions.filter((tx) => tx.status.confirmed).length; + + const fetchTxs: string[] = []; + this.timeTxIndexes = []; + transactions.forEach((tx, index) => { + if (!tx.status.confirmed) { + fetchTxs.push(tx.txid); + this.timeTxIndexes.push(index); + } + }); + if (!fetchTxs.length) { + return of([]); + } + return this.apiService.getTransactionTimes$(fetchTxs); + }) + ) + .subscribe((times: number[]) => { + times.forEach((time, index) => { + this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time; + }); + this.tempTransactions.sort((a, b) => { + return b.status.block_time - a.status.block_time || b.firstSeen - a.firstSeen; + }); + + this.transactions = this.transactions.concat(this.tempTransactions); this.isLoadingTransactions = false; }); }