From c49626aefce41849f4ea65537b583d0a4fbd6c58 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 30 May 2023 16:36:49 -0400 Subject: [PATCH 1/3] Confirmation badge component, fix negative confirmations --- backend/src/api/websocket-handler.ts | 4 +-- .../bisq-transaction.component.html | 8 +++--- .../bisq-transfers.component.html | 6 +---- .../transaction/transaction.component.html | 14 +---------- .../transaction/transaction.component.ts | 2 +- .../transactions-list.component.html | 9 +------ .../src/app/interfaces/websocket.interface.ts | 2 +- frontend/src/app/services/state.service.ts | 2 +- .../src/app/services/websocket.service.ts | 2 +- .../confirmations.component.html | 13 ++++++++++ .../confirmations.component.scss | 0 .../confirmations/confirmations.component.ts | 25 +++++++++++++++++++ frontend/src/app/shared/shared.module.ts | 3 +++ 13 files changed, 53 insertions(+), 37 deletions(-) create mode 100644 frontend/src/app/shared/components/confirmations/confirmations.component.html create mode 100644 frontend/src/app/shared/components/confirmations/confirmations.component.scss create mode 100644 frontend/src/app/shared/components/confirmations/confirmations.component.ts diff --git a/backend/src/api/websocket-handler.ts b/backend/src/api/websocket-handler.ts index 89b819b08..557d751e4 100644 --- a/backend/src/api/websocket-handler.ts +++ b/backend/src/api/websocket-handler.ts @@ -657,8 +657,8 @@ class WebsocketHandler { if (client['track-tx']) { const trackTxid = client['track-tx']; - if (txIds.indexOf(trackTxid) > -1) { - response['txConfirmed'] = 'true'; + if (trackTxid && txIds.indexOf(trackTxid) > -1) { + response['txConfirmed'] = JSON.stringify(trackTxid); } else { const mempoolTx = _memPool[trackTxid]; if (mempoolTx && mempoolTx.position) { diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html index 3a23688e6..44f7b840e 100644 --- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html +++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html @@ -15,11 +15,9 @@
- +
+ +
diff --git a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html index 0388ea418..dc4993e90 100644 --- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html +++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html @@ -70,11 +70,7 @@
- +   - - - - - - - +
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 60051634d..dd32b05e8 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -391,7 +391,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { this.blocksSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed]) => { this.latestBlock = block; - if (txConfirmed && this.tx && !this.tx.status.confirmed) { + if (txConfirmed && this.tx && !this.tx.status.confirmed && txConfirmed === this.tx.txid) { this.tx.status = { confirmed: true, block_height: block.height, 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 0d195f2ff..c509a799d 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -298,14 +298,7 @@
- - - - + + + + + + + + \ No newline at end of file diff --git a/frontend/src/app/shared/components/confirmations/confirmations.component.scss b/frontend/src/app/shared/components/confirmations/confirmations.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/shared/components/confirmations/confirmations.component.ts b/frontend/src/app/shared/components/confirmations/confirmations.component.ts new file mode 100644 index 000000000..dc66673ed --- /dev/null +++ b/frontend/src/app/shared/components/confirmations/confirmations.component.ts @@ -0,0 +1,25 @@ +import { Component, Input, OnChanges } from '@angular/core'; + + +@Component({ + selector: 'app-confirmations', + templateUrl: './confirmations.component.html', + styleUrls: ['./confirmations.component.scss'], +}) +export class ConfirmationsComponent implements OnChanges { + @Input() chainTip: number; + @Input() height: number; + @Input() replaced: boolean = false; + @Input() hideUnconfirmed: boolean = false; + @Input() buttonClass: string = ''; + + confirmations: number = 0; + + ngOnChanges(): void { + if (this.chainTip != null && this.height != null) { + this.confirmations = Math.max(1, this.chainTip - this.height + 1); + } else { + this.confirmations = 0; + } + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 6e8d8d0f2..d24f5356e 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -85,6 +85,7 @@ import { SatsComponent } from './components/sats/sats.component'; import { TruncateComponent } from './components/truncate/truncate.component'; import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component'; import { TimestampComponent } from './components/timestamp/timestamp.component'; +import { ConfirmationsComponent } from './components/confirmations/confirmations.component'; import { ToggleComponent } from './components/toggle/toggle.component'; import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component'; import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component'; @@ -175,6 +176,7 @@ import { ClockMempoolComponent } from '../components/clock/clock-mempool.compone TruncateComponent, SearchResultsComponent, TimestampComponent, + ConfirmationsComponent, ToggleComponent, GeolocationComponent, TestnetAlertComponent, @@ -289,6 +291,7 @@ import { ClockMempoolComponent } from '../components/clock/clock-mempool.compone TruncateComponent, SearchResultsComponent, TimestampComponent, + ConfirmationsComponent, ToggleComponent, GeolocationComponent, PreviewTitleComponent, From 9d4b58604b43706bcf5a369ec1231ad7a95af724 Mon Sep 17 00:00:00 2001 From: softsimon Date: Sun, 4 Jun 2023 10:32:24 +0400 Subject: [PATCH 2/3] Optimize change detection --- .../shared/components/confirmations/confirmations.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/shared/components/confirmations/confirmations.component.ts b/frontend/src/app/shared/components/confirmations/confirmations.component.ts index dc66673ed..8d14128e5 100644 --- a/frontend/src/app/shared/components/confirmations/confirmations.component.ts +++ b/frontend/src/app/shared/components/confirmations/confirmations.component.ts @@ -1,10 +1,11 @@ -import { Component, Input, OnChanges } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; @Component({ selector: 'app-confirmations', templateUrl: './confirmations.component.html', styleUrls: ['./confirmations.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ConfirmationsComponent implements OnChanges { @Input() chainTip: number; From 8b1dff6d15697d21b3853c3c3c3793a73d9127b7 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sun, 4 Jun 2023 11:44:40 -0400 Subject: [PATCH 3/3] fix txConfirmed type --- frontend/src/app/interfaces/websocket.interface.ts | 2 +- frontend/src/app/services/state.service.ts | 4 ++-- frontend/src/app/services/websocket.service.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/interfaces/websocket.interface.ts b/frontend/src/app/interfaces/websocket.interface.ts index 20d1cbeed..83a0c636e 100644 --- a/frontend/src/app/interfaces/websocket.interface.ts +++ b/frontend/src/app/interfaces/websocket.interface.ts @@ -6,7 +6,7 @@ export interface WebsocketResponse { block?: BlockExtended; blocks?: BlockExtended[]; conversions?: any; - txConfirmed?: string | boolean; + txConfirmed?: string; historicalDate?: string; mempoolInfo?: MempoolInfo; vBytesPerSecond?: number; diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index d6e39ddc9..55f349cc1 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -92,7 +92,7 @@ export class StateService { networkChanged$ = new ReplaySubject(1); lightningChanged$ = new ReplaySubject(1); - blocks$: ReplaySubject<[BlockExtended, string | boolean]>; + blocks$: ReplaySubject<[BlockExtended, string]>; transactions$ = new ReplaySubject(6); conversions$ = new ReplaySubject(1); bsqPrice$ = new ReplaySubject(1); @@ -163,7 +163,7 @@ export class StateService { } }); - this.blocks$ = new ReplaySubject<[BlockExtended, boolean]>(this.env.KEEP_BLOCKS_AMOUNT); + this.blocks$ = new ReplaySubject<[BlockExtended, string]>(this.env.KEEP_BLOCKS_AMOUNT); if (this.env.BASE_MODULE === 'bisq') { this.network = this.env.BASE_MODULE; diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts index 7a84aadd7..af7a465f8 100644 --- a/frontend/src/app/services/websocket.service.ts +++ b/frontend/src/app/services/websocket.service.ts @@ -241,7 +241,7 @@ export class WebsocketService { blocks.forEach((block: BlockExtended) => { if (block.height > this.stateService.latestBlockHeight) { maxHeight = Math.max(maxHeight, block.height); - this.stateService.blocks$.next([block, false]); + this.stateService.blocks$.next([block, '']); } }); this.stateService.updateChainTip(maxHeight); @@ -258,7 +258,7 @@ export class WebsocketService { if (response.block) { if (response.block.height > this.stateService.latestBlockHeight) { this.stateService.updateChainTip(response.block.height); - this.stateService.blocks$.next([response.block, response.txConfirmed]); + this.stateService.blocks$.next([response.block, response.txConfirmed || '']); } if (response.txConfirmed) {