diff --git a/frontend/package.json b/frontend/package.json index e93e66ab1..f618314d8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -25,6 +25,7 @@ "bootstrap": "^4.4.1", "chartist": "^0.11.4", "clipboard": "^2.0.4", + "ngx-infinite-scroll": "^8.0.1", "qrcode": "^1.4.4", "rxjs": "~6.5.3", "tlite": "^0.1.9", diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 6db9f84ff..f2e41ac2b 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -4,6 +4,7 @@ import { HttpClientModule } from '@angular/common/http'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './components/app/app.component'; @@ -80,6 +81,7 @@ import { AudioService } from './services/audio.service'; ReactiveFormsModule, BrowserAnimationsModule, NgbButtonsModule, + InfiniteScrollModule, ], providers: [ ElectrsApiService, diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html index 5836f26cf..ac940add8 100644 --- a/frontend/src/app/components/address/address.component.html +++ b/frontend/src/app/components/address/address.component.html @@ -42,14 +42,13 @@

{{ transactions?.length || '?' }} of {{ txCount }} transactions

- +


-
diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index 08edcb5de..6f6929acd 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -153,6 +153,9 @@ export class AddressComponent implements OnInit, OnDestroy { } loadMore() { + if (this.isLoadingTransactions || !this.totalConfirmedTxCount || this.loadedConfirmedTxCount >= this.totalConfirmedTxCount) { + return; + } this.isLoadingTransactions = true; this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.lastTransactionTxId) .subscribe((transactions: Transaction[]) => { diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index e20516d22..241ff58f0 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -65,14 +65,13 @@
- +


-
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 6d55e403f..9055fba2d 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -96,6 +96,10 @@ export class BlockComponent implements OnInit { } loadMore() { + if (this.isLoadingTransactions || !this.transactions.length || this.transactions.length === this.block.tx_count) { + return; + } + this.isLoadingTransactions = true; this.electrsApiService.getBlockTransactions$(this.block.id, this.transactions.length) .subscribe((transactions) => { diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index 4892bcfef..f1df6f48b 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,4 +1,4 @@ - +
@@ -32,8 +32,3 @@
Height Timestamp
- -
-
- -
diff --git a/frontend/src/app/components/time-since/time-since.component.ts b/frontend/src/app/components/time-since/time-since.component.ts index de683cea6..0b89e52cc 100644 --- a/frontend/src/app/components/time-since/time-since.component.ts +++ b/frontend/src/app/components/time-since/time-since.component.ts @@ -31,7 +31,7 @@ export class TimeSinceComponent implements OnInit, OnDestroy { calculate() { const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000); if (seconds < 60) { - return '< 1 min'; + return '< 1 minute'; } const intervals = { year: 31536000, diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index fcf95a0be..2df03e1e1 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -8,7 +8,7 @@ -
+
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts index 8389d1f51..e9299cbb6 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef, Output, EventEmitter } from '@angular/core'; import { StateService } from '../../services/state.service'; import { Observable, forkJoin } from 'rxjs'; import { Block, Outspend, Transaction } from '../../interfaces/electrs.interface'; @@ -15,6 +15,8 @@ export class TransactionsListComponent implements OnInit, OnChanges { @Input() showConfirmations = false; @Input() transactionPage = false; + @Output() loadMore = new EventEmitter(); + latestBlock$: Observable; outspends: Outspend[] = []; @@ -53,6 +55,10 @@ export class TransactionsListComponent implements OnInit, OnChanges { }); } + onScroll() { + this.loadMore.emit(); + } + getTotalTxOutput(tx: any) { return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b); } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 68b9b72a5..50963ffdb 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -5738,6 +5738,13 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== +ngx-infinite-scroll@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-8.0.1.tgz#95b9d7e51f8ed5ee6821889b4e4e3cfe8ddb5838" + integrity sha512-YpgkTPDNT7UCEp0GRX178V1nF+M2slCPJ2TX3CpvPZb5AR99JYwj/fNivcue5lN51oUaTySEG27qjVU73vKhjw== + dependencies: + opencollective-postinstall "^2.0.2" + nice-try@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" @@ -6086,6 +6093,11 @@ open@7.0.0: dependencies: is-wsl "^2.1.0" +opencollective-postinstall@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89" + integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw== + opn@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"