diff --git a/frontend/proxy.conf.local-esplora.js b/frontend/proxy.conf.local-esplora.js index 8bb57e623..a7137f3bc 100644 --- a/frontend/proxy.conf.local-esplora.js +++ b/frontend/proxy.conf.local-esplora.js @@ -112,6 +112,14 @@ PROXY_CONFIG.push(...[ "^/testnet": "" }, }, + { + context: ['/api/v1/services/**'], + target: `http://localhost:9000`, + secure: false, + ws: true, + changeOrigin: true, + proxyTimeout: 30000, + }, { context: ['/api/v1/**'], target: `http://127.0.0.1:8999`, diff --git a/frontend/proxy.conf.local.js b/frontend/proxy.conf.local.js index b2fb1bb27..3a502e0ed 100644 --- a/frontend/proxy.conf.local.js +++ b/frontend/proxy.conf.local.js @@ -112,6 +112,14 @@ PROXY_CONFIG.push(...[ "^/testnet": "" }, }, + { + context: ['/api/v1/services/**'], + target: `http://localhost:9000`, + secure: false, + ws: true, + changeOrigin: true, + proxyTimeout: 30000, + }, { context: ['/api/v1/**'], target: `http://localhost:8999`, diff --git a/frontend/proxy.conf.mixed.js b/frontend/proxy.conf.mixed.js index c0c7157ff..76bb06607 100644 --- a/frontend/proxy.conf.mixed.js +++ b/frontend/proxy.conf.mixed.js @@ -95,6 +95,14 @@ if (configContent && configContent.BASE_MODULE === 'bisq') { } PROXY_CONFIG.push(...[ + { + context: ['/api/v1/services/**'], + target: `http://localhost:9000`, + secure: false, + ws: true, + changeOrigin: true, + proxyTimeout: 30000, + }, { context: ['/api/v1/**'], target: `http://localhost:8999`, diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 261f72f55..6bff838aa 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -4,7 +4,8 @@ ®
- v{{ packetJsonVersion }} [{{ frontendGitCommitHash }}] + v{{ packetJsonVersion }} [{{ frontendGitCommitHash }}] + [{{ stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE }}]
diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index 2a5710ca1..f7aa0b965 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -22,6 +22,7 @@ .intro { margin: 25px auto 30px; + margin-top: 25px; width: 250px; display: flex; flex-direction: column; diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.html b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.html new file mode 100644 index 000000000..fe0718ecc --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.html @@ -0,0 +1,21 @@ +
+
+ +
+
+
+

+ {{ bar.label }} + + + +

+
+
+ {{ bar.class === 'tx' ? '' : '+' }} {{ bar.fee | number }} sat +
+
+
+ +
+
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss new file mode 100644 index 000000000..6137b53ee --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss @@ -0,0 +1,157 @@ +.fee-graph { + height: 100%; + min-width: 120px; + width: 120px; + max-height: 90vh; + margin-left: 4em; + margin-right: 1.5em; + padding-bottom: 63px; + + .column { + width: 100%; + height: 100%; + position: relative; + background: #181b2d; + + .bar { + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .fill { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0.75; + pointer-events: none; + } + + .fee { + font-size: 0.9em; + opacity: 0; + pointer-events: none; + } + + .spacer { + width: 100%; + height: 1px; + flex-grow: 1; + pointer-events: none; + } + + .line { + position: absolute; + right: 0; + top: 0; + left: -4.5em; + border-top: dashed white 1.5px; + + .fee-rate { + width: 100%; + position: absolute; + left: 0; + right: 0.2em; + font-size: 0.8em; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + margin: 0; + + .label { + margin-right: .2em; + } + + .rate .symbol { + color: white; + } + } + } + + &.tx { + .fill { + background: #3bcc49; + } + .line { + .fee-rate { + top: 0; + } + } + .fee { + position: absolute; + opacity: 1; + z-index: 11; + } + } + + &.target { + .fill { + background: #653b9c; + } + .fee { + position: absolute; + opacity: 1; + z-index: 11; + } + .line .fee-rate { + bottom: 2px; + } + } + + &.max { + cursor: pointer; + .line .fee-rate { + .label { + opacity: 0; + } + bottom: 2px; + } + &.active, &:hover { + .fill { + background: #105fb0; + } + .line { + .fee-rate .label { + opacity: 1; + } + } + } + } + + &:hover { + .fill { + z-index: 10; + } + .line { + z-index: 11; + } + .fee { + opacity: 1; + z-index: 12; + } + } + } + + &:hover > .bar:not(:hover) { + &.target, &.max { + .fee { + opacity: 0; + } + .line .fee-rate .label { + opacity: 0; + } + } + &.max { + .fill { + background: none; + } + } + } + } +} \ No newline at end of file diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts new file mode 100644 index 000000000..4d746a0d9 --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts @@ -0,0 +1,96 @@ +import { Component, OnInit, Input, Output, OnChanges, EventEmitter, HostListener, Inject, LOCALE_ID } from '@angular/core'; +import { StateService } from '../../services/state.service'; +import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface'; +import { Router } from '@angular/router'; +import { ReplaySubject, merge, Subscription, of } from 'rxjs'; +import { tap, switchMap } from 'rxjs/operators'; +import { ApiService } from '../../services/api.service'; +import { AccelerationEstimate, RateOption } from './accelerate-preview.component'; + +interface GraphBar { + rate: number; + style: any; + class: 'tx' | 'target' | 'max'; + label: string; + active?: boolean; + rateIndex?: number; + fee?: number; +} + +@Component({ + selector: 'app-accelerate-fee-graph', + templateUrl: './accelerate-fee-graph.component.html', + styleUrls: ['./accelerate-fee-graph.component.scss'], +}) +export class AccelerateFeeGraphComponent implements OnInit, OnChanges { + @Input() tx: Transaction; + @Input() estimate: AccelerationEstimate; + @Input() maxRateOptions: RateOption[] = []; + @Input() maxRateIndex: number = 0; + @Output() setUserBid = new EventEmitter<{ fee: number, index: number }>(); + + bars: GraphBar[] = []; + tooltipPosition = { x: 0, y: 0 }; + + ngOnInit(): void { + this.initGraph(); + } + + ngOnChanges(): void { + this.initGraph(); + } + + initGraph(): void { + if (!this.tx || !this.estimate) { + return; + } + const maxRate = Math.max(...this.maxRateOptions.map(option => option.rate)); + const baseRate = this.estimate.txSummary.effectiveFee / this.estimate.txSummary.effectiveVsize; + const baseHeight = baseRate / maxRate; + const bars: GraphBar[] = this.maxRateOptions.slice().reverse().map(option => { + return { + rate: option.rate, + style: this.getStyle(option.rate, maxRate, baseHeight), + class: 'max', + label: 'maximum', + active: option.index === this.maxRateIndex, + rateIndex: option.index, + fee: option.fee, + } + }); + bars.push({ + rate: this.estimate.targetFeeRate, + style: this.getStyle(this.estimate.targetFeeRate, maxRate, baseHeight), + class: 'target', + label: 'next block', + fee: this.estimate.nextBlockFee - this.estimate.txSummary.effectiveFee + }); + bars.push({ + rate: baseRate, + style: this.getStyle(baseRate, maxRate, 0), + class: 'tx', + label: '', + fee: this.estimate.txSummary.effectiveFee, + }); + this.bars = bars; + } + + getStyle(rate, maxRate, base) { + const top = (rate / maxRate); + return { + height: `${(top - base) * 100}%`, + bottom: base ? `${base * 100}%` : '0', + } + } + + onClick(event, bar): void { + if (bar.rateIndex != null) { + this.setUserBid.emit({ fee: bar.fee, index: bar.rateIndex }); + } + } + + @HostListener('pointermove', ['$event']) + onPointerMove(event) { + this.tooltipPosition = { x: event.offsetX, y: event.offsetY }; + } +} diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html new file mode 100644 index 000000000..9bb66eda1 --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html @@ -0,0 +1,262 @@ +
+
+
+ Transaction has now been submitted to mining pools for acceleration. You can track the progress here. +
+
+
+ +
+
+ +
+
+ +
+ + + + + +
+
Your transaction
+
+
+ + Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor{{ estimate.txSummary.ancestorCount > 2 ? 's' : ''}}. + + + + + + + + + + + + + + + + + + +
+ Virtual size +
+ Size in vbytes of this transaction and its unconfirmed ancestors +
+ In-band fees + + {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} sats +
+ Fees already paid by this transaction and its unconfirmed ancestors +
+
+
+
+
How much more are you willing to pay?
+
+
+ + Choose the maximum extra transaction fee you're willing to pay to get into the next block.
+ If the estimated next block rate rises beyond this limit, we will automatically cancel your acceleration request. + +
+
+
+ + + +
+
+
+
+
+ +
Acceleration summary
+
+
+
+
+ Estimated cost +
+
+ Maximum cost +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Next block market rate + + {{ estimate.targetFeeRate | number : '1.0-0' }} + sat/vB
+ Estimated extra fee required + + {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }} + + sats + +
+ Your maximum + + ~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} + sat/vB
+ The maximum extra transaction fee you could pay + + + {{ userBid | number }} + + + sats + +
+ Mempool Accelerator™ fees +
+ mempool.space fee + + +{{ estimate.mempoolBaseFee | number }} + + sats + +
+ Transaction vsize fee + + +{{ estimate.vsizeFee | number }} + + sats + +
+ Estimated acceleration cost + + + {{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }} + + + sats + +
+ If your tx is accelerated to {{ estimate.targetFeeRate | number : '1.0-0' }} sat/vB +
+ Maximum acceleration cost + + + {{ maxCost | number }} + + + sats + + + +
+ If your tx is accelerated to ~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }} sat/vB +
+ Available balance + + {{ estimate.userBalance | number }} + + sats + + + +
+
+
+ +
+
+
+ +
+
+
+ +
+ +
\ No newline at end of file diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss new file mode 100644 index 000000000..433c05520 --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss @@ -0,0 +1,88 @@ +.fee-card { + padding: 15px; + background-color: #1d1f31; + + .feerate { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .fee { + font-size: 1.2em; + } + .rate { + font-size: 0.9em; + .symbol { + color: white; + } + } + } +} + +.btn-border { + border: solid 1px black; + background-color: #0c4a87; +} + +.feerate.active { + background-color: #105fb0 !important; + opacity: 1; + border: 1px solid white !important; +} + +.estimateDisabled { + opacity: 0.5; + pointer-events: none; +} + +.table-toggle { + width: 100%; + margin-top: 0.5em; +} + +.table-accelerator { + tr { + text-wrap: wrap; + + td { + padding-top: 0; + padding-bottom: 0; + vertical-align: baseline; + } + + &.group-first { + td { + padding-top: 0.75rem; + } + } + &.group-last { + td { + padding-bottom: 0.75rem; + } + } + } + td { + &:first-child { + width: 100vw; + } + &.info { + color: #6c757d; + } + &.amt { + text-align: right; + padding-right: 0.2em; + } + &.units { + padding-left: 0.2em; + white-space: nowrap; + } + } +} + +.accelerate-cols { + display: flex; + flex-direction: row; + align-items: stretch; + margin-top: 1em; +} \ No newline at end of file diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts new file mode 100644 index 000000000..1c356a80b --- /dev/null +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts @@ -0,0 +1,205 @@ +import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener } from '@angular/core'; +import { ApiService } from '../../services/api.service'; +import { Subscription, catchError, of, tap } from 'rxjs'; +import { StorageService } from '../../services/storage.service'; +import { Transaction } from '../../interfaces/electrs.interface'; +import { nextRoundNumber } from '../../shared/common.utils'; + +export type AccelerationEstimate = { + txSummary: TxSummary; + nextBlockFee: number; + targetFeeRate: number; + userBalance: number; + enoughBalance: boolean; + cost: number; + mempoolBaseFee: number; + vsizeFee: number; +} +export type TxSummary = { + txid: string; // txid of the current transaction + effectiveVsize: number; // Total vsize of the dependency tree + effectiveFee: number; // Total fee of the dependency tree in sats + ancestorCount: number; // Number of ancestors +} + +export interface RateOption { + fee: number; + rate: number; + index: number; +} + +export const MIN_BID_RATIO = 1; +export const DEFAULT_BID_RATIO = 2; +export const MAX_BID_RATIO = 4; + +@Component({ + selector: 'app-accelerate-preview', + templateUrl: 'accelerate-preview.component.html', + styleUrls: ['accelerate-preview.component.scss'] +}) +export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges { + @Input() tx: Transaction | undefined; + @Input() scrollEvent: boolean; + + math = Math; + error = ''; + showSuccess = false; + estimateSubscription: Subscription; + accelerationSubscription: Subscription; + estimate: any; + hasAncestors: boolean = false; + minExtraCost = 0; + minBidAllowed = 0; + maxBidAllowed = 0; + defaultBid = 0; + maxCost = 0; + userBid = 0; + selectFeeRateIndex = 1; + showTable: 'estimated' | 'maximum' = 'maximum'; + isMobile: boolean = window.innerWidth <= 767.98; + + maxRateOptions: RateOption[] = []; + + constructor( + private apiService: ApiService, + private storageService: StorageService + ) { } + + ngOnDestroy(): void { + if (this.estimateSubscription) { + this.estimateSubscription.unsubscribe(); + } + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.scrollEvent) { + this.scrollToPreview('acceleratePreviewAnchor', 'center'); + } + } + + ngOnInit() { + this.estimateSubscription = this.apiService.estimate$(this.tx.txid).pipe( + tap((response) => { + if (response.status === 204) { + this.estimate = undefined; + this.error = `cannot_accelerate_tx`; + this.scrollToPreviewWithTimeout('mempoolError', 'center'); + this.estimateSubscription.unsubscribe(); + } else { + this.estimate = response.body; + if (!this.estimate) { + this.error = `cannot_accelerate_tx`; + this.scrollToPreviewWithTimeout('mempoolError', 'center'); + this.estimateSubscription.unsubscribe(); + } + + if (this.estimate.userBalance <= 0) { + if (this.isLoggedIn()) { + this.error = `not_enough_balance`; + this.scrollToPreviewWithTimeout('mempoolError', 'center'); + } + } + + this.hasAncestors = this.estimate.txSummary.ancestorCount > 1; + + // Make min extra fee at least 50% of the current tx fee + this.minExtraCost = nextRoundNumber(Math.max(this.estimate.cost * 2, this.estimate.txSummary.effectiveFee)); + + this.maxRateOptions = [1, 2, 4].map((multiplier, index) => { + return { + fee: this.minExtraCost * multiplier, + rate: (this.estimate.txSummary.effectiveFee + (this.minExtraCost * multiplier)) / this.estimate.txSummary.effectiveVsize, + index, + }; + }); + + this.minBidAllowed = this.minExtraCost * MIN_BID_RATIO; + this.defaultBid = this.minExtraCost * DEFAULT_BID_RATIO; + this.maxBidAllowed = this.minExtraCost * MAX_BID_RATIO; + + this.userBid = this.defaultBid; + if (this.userBid < this.minBidAllowed) { + this.userBid = this.minBidAllowed; + } else if (this.userBid > this.maxBidAllowed) { + this.userBid = this.maxBidAllowed; + } + this.maxCost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee; + + if (!this.error) { + this.scrollToPreview('acceleratePreviewAnchor', 'center'); + } + } + }), + catchError((response) => { + this.estimate = undefined; + this.error = response.error; + this.scrollToPreviewWithTimeout('mempoolError', 'center'); + this.estimateSubscription.unsubscribe(); + return of(null); + }) + ).subscribe(); + } + + /** + * User changed his bid + */ + setUserBid({ fee, index }: { fee: number, index: number}) { + if (this.estimate) { + this.selectFeeRateIndex = index; + this.userBid = Math.max(0, fee); + this.maxCost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee; + } + } + + /** + * Scroll to element id with or without setTimeout + */ + scrollToPreviewWithTimeout(id: string, position: ScrollLogicalPosition) { + setTimeout(() => { + this.scrollToPreview(id, position); + }, 100); + } + scrollToPreview(id: string, position: ScrollLogicalPosition) { + const acceleratePreviewAnchor = document.getElementById(id); + if (acceleratePreviewAnchor) { + acceleratePreviewAnchor.scrollIntoView({ + behavior: 'smooth', + inline: position, + block: position, + }); + } +} + + /** + * Send acceleration request + */ + accelerate() { + if (this.accelerationSubscription) { + this.accelerationSubscription.unsubscribe(); + } + this.accelerationSubscription = this.apiService.accelerate$( + this.tx.txid, + this.userBid + ).subscribe({ + next: () => { + this.showSuccess = true; + this.scrollToPreviewWithTimeout('successAlert', 'center'); + this.estimateSubscription.unsubscribe(); + }, + error: (response) => { + this.error = response.error; + this.scrollToPreviewWithTimeout('mempoolError', 'center'); + } + }); + } + + isLoggedIn() { + const auth = this.storageService.getAuth(); + return auth !== null; + } + + @HostListener('window:resize', ['$event']) + onResize(): void { + this.isMobile = window.innerWidth <= 767.98; + } +} \ No newline at end of file diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index 7619587d8..56b7c39e6 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core'; import { firstValueFrom, Subscription } from 'rxjs'; import { StateService } from '../../services/state.service'; @@ -8,12 +8,13 @@ import { StateService } from '../../services/state.service'; styleUrls: ['./blockchain.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BlockchainComponent implements OnInit, OnDestroy { +export class BlockchainComponent implements OnInit, OnDestroy, OnChanges { @Input() pages: any[] = []; @Input() pageIndex: number; @Input() blocksPerPage: number = 8; @Input() minScrollWidth: number = 0; @Input() scrollableMempool: boolean = false; + @Input() containerWidth: number; @Output() mempoolOffsetChange: EventEmitter = new EventEmitter(); @@ -85,19 +86,25 @@ export class BlockchainComponent implements OnInit, OnDestroy { this.mempoolOffsetChange.emit(this.mempoolOffset); } - @HostListener('window:resize', ['$event']) + ngOnChanges(changes: SimpleChanges): void { + if (changes.containerWidth) { + this.onResize(); + } + } + onResize(): void { - if (window.innerWidth >= 768) { + const width = this.containerWidth || window.innerWidth; + if (width >= 768) { if (this.stateService.isLiquid()) { this.dividerOffset = 420; } else { - this.dividerOffset = window.innerWidth * 0.5; + this.dividerOffset = width * 0.5; } } else { if (this.stateService.isLiquid()) { - this.dividerOffset = window.innerWidth * 0.5; + this.dividerOffset = width * 0.5; } else { - this.dividerOffset = window.innerWidth * 0.95; + this.dividerOffset = width * 0.95; } } this.cd.markForCheck(); diff --git a/frontend/src/app/components/fiat-selector/fiat-selector.component.html b/frontend/src/app/components/fiat-selector/fiat-selector.component.html index eec6f4b0a..4fa55deb9 100644 --- a/frontend/src/app/components/fiat-selector/fiat-selector.component.html +++ b/frontend/src/app/components/fiat-selector/fiat-selector.component.html @@ -1,5 +1,5 @@
- +
diff --git a/frontend/src/app/components/language-selector/language-selector.component.html b/frontend/src/app/components/language-selector/language-selector.component.html index 41e0efb0e..bfd36af77 100644 --- a/frontend/src/app/components/language-selector/language-selector.component.html +++ b/frontend/src/app/components/language-selector/language-selector.component.html @@ -1,5 +1,5 @@
-
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index f12fbc960..8863b335f 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -1,6 +1,20 @@ -
+
+
- +
+ -
- -
+
+ + +
+ +
+ +
+ +
+
- diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index 95b9474b9..b82d973de 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -1,3 +1,11 @@ +.sticky-header { + position: sticky; + position: -webkit-sticky; + top: 0; + width: 100%; + z-index: 100; +} + li.nav-item.active { background-color: #653b9c; } @@ -86,7 +94,6 @@ li.nav-item { .navbar-brand { position: relative; - height: 65px; } .navbar-brand.dual-logos { @@ -102,7 +109,7 @@ nav { .connection-badge { position: absolute; - top: 22px; + top: 12px; width: 100%; } @@ -209,4 +216,26 @@ nav { margin-left: 5px; margin-right: 0px; } +} + +.profile_image_container { + width: 35px; + margin-right: 15px; + text-align: center; + align-self: center; + cursor: pointer; + &.anon { + border: 1.5px solid lightgrey; + color: lightgrey; + border-radius: 5px; + } +} +.profile_image { + height: 35px; + border-radius: 5px; +} + +main { + transition: 0.2s; + transition-property: max-width; } \ No newline at end of file diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts index 99bccebb5..a92f77cf9 100644 --- a/frontend/src/app/components/master-page/master-page.component.ts +++ b/frontend/src/app/components/master-page/master-page.component.ts @@ -1,9 +1,13 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { Router } from '@angular/router'; import { Env, StateService } from '../../services/state.service'; import { Observable, merge, of } from 'rxjs'; import { LanguageService } from '../../services/language.service'; import { EnterpriseService } from '../../services/enterprise.service'; import { NavigationService } from '../../services/navigation.service'; +import { MenuComponent } from '../menu/menu.component'; +import { StorageService } from '../../services/storage.service'; +import { ApiService } from '../../services/api.service'; @Component({ selector: 'app-master-page', @@ -25,12 +29,21 @@ export class MasterPageComponent implements OnInit { networkPaths: { [network: string]: string }; networkPaths$: Observable>; footerVisible = true; + user: any = undefined; + servicesEnabled = false; + menuOpen = false; + + @ViewChild(MenuComponent) + public menuComponent!: MenuComponent; constructor( public stateService: StateService, private languageService: LanguageService, private enterpriseService: EnterpriseService, private navigationService: NavigationService, + private storageService: StorageService, + private apiService: ApiService, + private router: Router, ) { } ngOnInit(): void { @@ -51,17 +64,47 @@ export class MasterPageComponent implements OnInit { this.footerVisible = this.footerVisibleOverride; } }); + + this.servicesEnabled = this.officialMempoolSpace && this.stateService.env.ACCELERATOR === true && this.stateService.network === ''; + this.refreshAuth(); + + const isServicesPage = this.router.url.includes('/services/'); + this.menuOpen = isServicesPage && !this.isSmallScreen(); } collapse(): void { this.navCollapsed = !this.navCollapsed; } + isSmallScreen() { + return window.innerWidth <= 767.98; + } + onResize(): void { - this.isMobile = window.innerWidth <= 767.98; + this.isMobile = this.isSmallScreen(); } brandClick(e): void { this.stateService.resetScroll$.next(true); } + + onLoggedOut(): void { + this.refreshAuth(); + } + + refreshAuth(): void { + this.user = this.storageService.getAuth()?.user ?? null; + } + + hamburgerClick(event): void { + if (this.menuComponent) { + this.menuComponent.hamburgerClick(); + this.menuOpen = this.menuComponent.navOpen; + event.stopPropagation(); + } + } + + menuToggled(isOpen: boolean): void { + this.menuOpen = isOpen; + } } diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html new file mode 100644 index 000000000..e89ace64a --- /dev/null +++ b/frontend/src/app/components/menu/menu.component.html @@ -0,0 +1,31 @@ +
+
+ + + +
+ +
\ No newline at end of file diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss new file mode 100644 index 000000000..f1f39b1de --- /dev/null +++ b/frontend/src/app/components/menu/menu.component.scss @@ -0,0 +1,48 @@ +.sidenav { + z-index: 1; + background-color: transparent; + width: 225px; + height: calc(100vh - 65px); + position: sticky; + top: 65px; + transition: 0.25s; + margin-left: -250px; + box-shadow: 5px 0px 30px 0px #000; + padding-bottom: 20px; +} + +.scrollable { + overflow-x: hidden; + overflow-y: scroll; +} + +.sidenav.open { + margin-left: 0px; + left: 0px; + display: block; +} + +.sidenav a, button{ + text-decoration: none; + color: lightgray; + margin-left: 20px; +} +.sidenav a:hover { + color: white; +} +.sidenav nav { + width: 100%; + height: calc(100vh - 65px); + background-color: #1d1f31; + padding-left: 20px; + padding-right: 20px; + padding-top: 20px; + padding-bottom: 20px; + @media (max-width: 991px) { + padding-bottom: 200px; + } +} + +@media screen and (max-height: 450px) { + .sidenav a {font-size: 18px;} +} \ No newline at end of file diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts new file mode 100644 index 000000000..28ba0a1ad --- /dev/null +++ b/frontend/src/app/components/menu/menu.component.ts @@ -0,0 +1,101 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostListener, OnDestroy } from '@angular/core'; +import { Observable } from 'rxjs'; +import { ApiService } from '../../services/api.service'; +import { MenuGroup } from '../../interfaces/services.interface'; +import { StorageService } from '../../services/storage.service'; +import { Router, NavigationStart } from '@angular/router'; +import { StateService } from '../../services/state.service'; + +@Component({ + selector: 'app-menu', + templateUrl: './menu.component.html', + styleUrls: ['./menu.component.scss'] +}) + +export class MenuComponent implements OnInit, OnDestroy { + @Input() navOpen: boolean = false; + @Output() loggedOut = new EventEmitter(); + @Output() menuToggled = new EventEmitter(); + + userMenuGroups$: Observable | undefined; + userAuth: any | undefined; + isServicesPage = false; + + constructor( + private apiService: ApiService, + private storageService: StorageService, + private router: Router, + private stateService: StateService + ) {} + + ngOnInit(): void { + this.userAuth = this.storageService.getAuth(); + + if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) { + this.userMenuGroups$ = this.apiService.getUserMenuGroups$(); + } + + this.isServicesPage = this.router.url.includes('/services/'); + this.router.events.subscribe((event) => { + if (event instanceof NavigationStart) { + if (!this.isServicesPage) { + this.toggleMenu(false); + } + } + }); + } + + toggleMenu(toggled: boolean) { + this.navOpen = toggled; + this.menuToggled.emit(toggled); + } + + isSmallScreen() { + return window.innerWidth <= 767.98; + } + + logout(): void { + this.apiService.logout$().subscribe(() => { + this.loggedOut.emit(true); + if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) { + this.userMenuGroups$ = this.apiService.getUserMenuGroups$(); + this.router.navigateByUrl('/'); + } + }); + } + + onLinkClick(link) { + if (!this.isServicesPage || this.isSmallScreen()) { + this.toggleMenu(false); + } + this.router.navigateByUrl(link); + } + + hamburgerClick() { + this.toggleMenu(!this.navOpen); + this.stateService.menuOpen$.next(this.navOpen); + } + + @HostListener('window:click', ['$event']) + onClick(event) { + const isServicesPageOnMobile = this.isServicesPage && this.isSmallScreen(); + const cssClasses = event.target.className; + + if (!cssClasses.indexOf) { // Click on chart or non html thingy, close the menu + if (!this.isServicesPage || isServicesPageOnMobile) { + this.toggleMenu(false); + } + return; + } + + const isHamburger = cssClasses.indexOf('profile_image') !== -1; + const isMenu = cssClasses.indexOf('menu-click') !== -1; + if (!isHamburger && !isMenu && (!this.isServicesPage || isServicesPageOnMobile)) { + this.toggleMenu(false); + } + } + + ngOnDestroy(): void { + this.stateService.menuOpen$.next(false); + } +} diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html index a2be9df87..7dab6908c 100644 --- a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html +++ b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html @@ -1,5 +1,5 @@
-
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html index 5cf7b4fd9..709a230d9 100644 --- a/frontend/src/app/components/start/start.component.html +++ b/frontend/src/app/components/start/start.component.html @@ -10,15 +10,25 @@
{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!
-
+
- +
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss index f23235035..dff9cb0e7 100644 --- a/frontend/src/app/components/start/start.component.scss +++ b/frontend/src/app/components/start/start.component.scss @@ -6,6 +6,20 @@ overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; + width: calc(100% + 120px); + + transform: translateX(0px); + transition: transform 0; + + &.menu-open { + transform: translateX(-112.5px); + transition: transform 0.25s; + } + + &.menu-closing { + transform: translateX(0px); + transition: transform 0.25s; + } } #blockchain-container::-webkit-scrollbar { diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts index 22e39b2de..18cd0ed30 100644 --- a/frontend/src/app/components/start/start.component.ts +++ b/frontend/src/app/components/start/start.component.ts @@ -28,8 +28,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { lastMark: MarkBlockState; markBlockSubscription: Subscription; blockCounterSubscription: Subscription; + @ViewChild('blockchainWrapper', { static: true }) blockchainWrapper: ElementRef; @ViewChild('blockchainContainer') blockchainContainer: ElementRef; - resetScrollSubscription: Subscription; + resetScrollSubscription: Subscription; + menuSubscription: Subscription; isMobile: boolean = false; isiOS: boolean = false; @@ -49,6 +51,12 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { velocity: number = 0; mempoolOffset: number = 0; + private resizeObserver: ResizeObserver; + chainWidth: number = window.innerWidth; + menuOpen: boolean = false; + menuSliding: boolean = false; + menuTimeout: number; + constructor( private stateService: StateService, ) { @@ -151,6 +159,13 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { this.stateService.resetScroll$.next(false); } }); + + this.menuSubscription = this.stateService.menuOpen$.subscribe((open) => { + if (this.menuOpen !== open) { + this.menuOpen = open; + this.applyMenuScroll(this.menuOpen); + } + }); } onMempoolOffsetChange(offset): void { @@ -171,9 +186,18 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { } } + applyMenuScroll(opening: boolean): void { + this.menuSliding = true; + window.clearTimeout(this.menuTimeout); + this.menuTimeout = window.setTimeout(() => { + this.menuSliding = false; + }, 300); + } + @HostListener('window:resize', ['$event']) onResize(): void { - this.isMobile = window.innerWidth <= 767.98; + this.chainWidth = window.innerWidth; + this.isMobile = this.chainWidth <= 767.98; let firstVisibleBlock; let offset; if (this.blockchainContainer?.nativeElement != null) { @@ -188,7 +212,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { }); } - this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth); + this.blocksPerPage = Math.ceil(this.chainWidth / this.blockWidth); this.pageWidth = this.blocksPerPage * this.blockWidth; this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2); @@ -295,7 +319,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { onScroll(e) { const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1]; // compensate for css transform - const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5); + const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5); const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation; const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation; const scrollLeft = this.getConvertedScrollOffset(); @@ -414,10 +438,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { blockInViewport(height: number): boolean { const firstHeight = this.pages[0].height; - const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5); + const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5); const firstX = this.pages[0].offset - this.getConvertedScrollOffset() + translation; const xPos = firstX + ((firstHeight - height) * 155); - return xPos > -55 && xPos < (window.innerWidth - 100); + return xPos > -55 && xPos < (this.chainWidth - 100); } getConvertedScrollOffset(): number { @@ -458,5 +482,6 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck { this.markBlockSubscription.unsubscribe(); this.blockCounterSubscription.unsubscribe(); this.resetScrollSubscription.unsubscribe(); + this.menuSubscription.unsubscribe(); } } diff --git a/frontend/src/app/components/svg-images/svg-images.component.html b/frontend/src/app/components/svg-images/svg-images.component.html index c4d5296bd..5e8d7d29f 100644 --- a/frontend/src/app/components/svg-images/svg-images.component.html +++ b/frontend/src/app/components/svg-images/svg-images.component.html @@ -74,6 +74,16 @@ + + + + + + + + + + diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 133bcaa1d..006870864 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -6,6 +6,13 @@
+ +

Transaction

@@ -66,12 +73,22 @@
-
+ + +
+

Accelerate

+
+
+ +
+ + +
@@ -92,16 +109,16 @@ - ETA + ETA - + In several hours (or more) - Accelerate + Accelerate @@ -109,9 +126,9 @@ - + - Accelerate + Accelerate diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index 5bef401d7..2e076600e 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/frontend/src/app/components/transaction/transaction.component.scss @@ -130,7 +130,7 @@ } .table { - tr td { + tr td { padding: 0.75rem 0.5rem; @media (min-width: 576px) { padding: 0.75rem 0.75rem; @@ -138,7 +138,7 @@ &:last-child { text-align: right; @media (min-width: 850px) { - text-align: left; + text-align: left; } } .btn { @@ -218,21 +218,52 @@ } } +.link.accelerator { + cursor: pointer; +} + .eta { display: flex; - justify-content: end; flex-wrap: wrap; align-content: center; @media (min-width: 850px) { - justify-content: space-between; + justify-content: left !important; } } .accelerate { + display: flex !important; align-self: auto; margin-top: 3px; - @media (min-width: 850px) { - justify-self: start; + margin-left: auto; + background-color: #653b9c; + @media (max-width: 849px) { + margin-left: 5px; + } +} + +.etaDeepMempool { + display: flex !important; + justify-content: end; + flex-wrap: wrap; + align-content: center; + @media (max-width: 995px) { + justify-content: left !important; + } + @media (max-width: 849px) { + justify-content: right !important; + } +} + +.accelerateDeepMempool { + align-self: auto; + margin-top: 3px; + margin-left: auto; + background-color: #653b9c; + @media (max-width: 995px) { margin-left: 0px; } -} \ No newline at end of file + @media (max-width: 849px) { + margin-left: 5px; + } +} diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 5acda7815..505c4686d 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -19,6 +19,7 @@ import { WebsocketService } from '../../services/websocket.service'; import { AudioService } from '../../services/audio.service'; import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; +import { StorageService } from '../../services/storage.service'; import { seoDescriptionNetwork } from '../../shared/common.utils'; import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment } from '../../interfaces/node-api.interface'; import { LiquidUnblinding } from './liquid-ublinding'; @@ -89,6 +90,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { rbfEnabled: boolean; taprootEnabled: boolean; hasEffectiveFeeRate: boolean; + accelerateCtaType: 'alert' | 'button' = 'alert'; + acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === ''; + showAccelerationSummary = false; + scrollIntoAccelPreview = false; @ViewChild('graphContainer') graphContainer: ElementRef; @@ -105,14 +110,22 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { private apiService: ApiService, private seoService: SeoService, private priceService: PriceService, + private storageService: StorageService ) {} ngOnInit() { + this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === ''; + this.websocketService.want(['blocks', 'mempool-blocks']); this.stateService.networkChanged$.subscribe( - (network) => (this.network = network) + (network) => { + this.network = network; + this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === ''; + } ); + this.accelerateCtaType = (this.storageService.getValue('accel-cta-type') as 'alert' | 'button') ?? 'alert'; + this.setFlowEnabled(); this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => { this.hideFlow = !!hide; @@ -465,6 +478,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { this.setGraphSize(); } + dismissAccelAlert(): void { + this.storageService.setValue('accel-cta-type', 'button'); + this.accelerateCtaType = 'button'; + } + + onAccelerateClicked() { + if (!this.txId) { + return; + } + this.showAccelerationSummary = true && this.acceleratorAvailable; + this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview; + return false; + } + handleLoadElectrsTransactionError(error: any): Observable { if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) { this.websocketService.startMultiTrackTransaction(this.txId); diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss index 8e4c0c7a9..b90b843d9 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.scss +++ b/frontend/src/app/docs/api-docs/api-docs.component.scss @@ -155,7 +155,7 @@ ul.no-bull.block-audit code{ #doc-nav-desktop.fixed { float: unset; position: fixed; - top: 20px; + top: 80px; overflow-y: auto; height: calc(100vh - 50px); scrollbar-color: #2d3348 #11131f; diff --git a/frontend/src/app/docs/api-docs/api-docs.component.ts b/frontend/src/app/docs/api-docs/api-docs.component.ts index 62a0fadba..b0ae5967d 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.ts +++ b/frontend/src/app/docs/api-docs/api-docs.component.ts @@ -43,7 +43,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit { if (this.faqTemplates) { this.faqTemplates.forEach((x) => this.dict[x.type] = x.template); } - this.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative"; + this.desktopDocsNavPosition = ( window.pageYOffset > 115 ) ? "fixed" : "relative"; this.mobileViewport = window.innerWidth <= 992; } @@ -113,7 +113,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit { } onDocScroll() { - this.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative"; + this.desktopDocsNavPosition = ( window.pageYOffset > 115 ) ? "fixed" : "relative"; } anchorLinkClick( event: any ) { diff --git a/frontend/src/app/interfaces/services.interface.ts b/frontend/src/app/interfaces/services.interface.ts new file mode 100644 index 000000000..d79e47812 --- /dev/null +++ b/frontend/src/app/interfaces/services.interface.ts @@ -0,0 +1,13 @@ +import { IconName } from '@fortawesome/fontawesome-common-types'; + +export type MenuItem = { + title: string; + i18n: string; + faIcon: IconName; + link: string; +}; +export type MenuGroup = { + title: string; + i18n: string; + items: MenuItem[]; +} diff --git a/frontend/src/app/interfaces/websocket.interface.ts b/frontend/src/app/interfaces/websocket.interface.ts index 43ab1e5f4..1d0414de7 100644 --- a/frontend/src/app/interfaces/websocket.interface.ts +++ b/frontend/src/app/interfaces/websocket.interface.ts @@ -95,7 +95,7 @@ export interface TransactionStripped { } export interface IBackendInfo { - hostname: string; + hostname?: string; gitCommit: string; version: string; } diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 798df72c1..744474f9d 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -4,10 +4,13 @@ import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITrans PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit } from '../interfaces/node-api.interface'; import { Observable, of } from 'rxjs'; import { StateService } from './state.service'; -import { WebsocketResponse } from '../interfaces/websocket.interface'; +import { IBackendInfo, WebsocketResponse } from '../interfaces/websocket.interface'; import { Outspend, Transaction } from '../interfaces/electrs.interface'; import { Conversion } from './price.service'; +import { MenuGroup } from '../interfaces/services.interface'; +import { StorageService } from './storage.service'; +// Todo - move to config.json const SERVICES_API_PREFIX = `/api/v1/services`; @Injectable({ @@ -20,6 +23,7 @@ export class ApiService { constructor( private httpClient: HttpClient, private stateService: StateService, + private storageService: StorageService ) { this.apiBaseUrl = ''; // use relative URL by default if (!stateService.isBrowser) { // except when inside AU SSR process @@ -32,6 +36,12 @@ export class ApiService { } this.apiBasePath = network ? '/' + network : ''; }); + + if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) { + this.getServicesBackendInfo$().subscribe(version => { + this.stateService.servicesBackendInfo$.next(version); + }) + } } list2HStatistics$(): Observable { @@ -95,7 +105,7 @@ export class ApiService { } getAboutPageProfiles$(): Observable { - return this.httpClient.get(this.apiBaseUrl + '/api/v1/about-page'); + return this.httpClient.get(this.apiBaseUrl + '/api/v1/services/sponsors'); } getOgs$(): Observable { @@ -334,9 +344,50 @@ export class ApiService { /** * Services */ - getNodeOwner$(publicKey: string) { + + getNodeOwner$(publicKey: string): Observable { let params = new HttpParams() .set('node_public_key', publicKey); return this.httpClient.get(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' }); } + + getUserMenuGroups$(): Observable { + const auth = this.storageService.getAuth(); + if (!auth) { + return of(null); + } + + return this.httpClient.get(`${SERVICES_API_PREFIX}/account/menu`); + } + + getUserInfo$(): Observable { + const auth = this.storageService.getAuth(); + if (!auth) { + return of(null); + } + + return this.httpClient.get(`${SERVICES_API_PREFIX}/account`); + } + + logout$(): Observable { + const auth = this.storageService.getAuth(); + if (!auth) { + return of(null); + } + + localStorage.removeItem('auth'); + return this.httpClient.post(`${SERVICES_API_PREFIX}/auth/logout`, {}); + } + + getServicesBackendInfo$(): Observable { + return this.httpClient.get(`${SERVICES_API_PREFIX}/version`); + } + + estimate$(txInput: string) { + return this.httpClient.post(`${SERVICES_API_PREFIX}/accelerator/estimate`, { txInput: txInput }, { observe: 'response' }); + } + + accelerate$(txInput: string, userBid: number) { + return this.httpClient.post(`${SERVICES_API_PREFIX}/accelerator/accelerate`, { txInput: txInput, userBid: userBid }); + } } diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 23bca052c..878edf359 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -8,6 +8,7 @@ import { isPlatformBrowser } from '@angular/common'; import { filter, map, scan, shareReplay } from 'rxjs/operators'; import { StorageService } from './storage.service'; import { hasTouchScreen } from '../shared/pipes/bytes-pipe/utils'; +import { ApiService } from './api.service'; export interface MarkBlockState { blockHeight?: number; @@ -48,6 +49,8 @@ export interface Env { SIGNET_BLOCK_AUDIT_START_HEIGHT: number; HISTORICAL_PRICE: boolean; ACCELERATOR: boolean; + GIT_COMMIT_HASH_MEMPOOL_SPACE?: string; + PACKAGE_JSON_VERSION_MEMPOOL_SPACE?: string; } const defaultEnv: Env = { @@ -120,6 +123,7 @@ export class StateService { vbytesPerSecond$ = new ReplaySubject(1); previousRetarget$ = new ReplaySubject(1); backendInfo$ = new ReplaySubject(1); + servicesBackendInfo$ = new ReplaySubject(1); loadingIndicators$ = new ReplaySubject(1); recommendedFees$ = new ReplaySubject(1); chainTip$ = new ReplaySubject(-1); @@ -143,6 +147,7 @@ export class StateService { rateUnits$: BehaviorSubject; searchFocus$: Subject = new Subject(); + menuOpen$: BehaviorSubject = new BehaviorSubject(false); constructor( @Inject(PLATFORM_ID) private platformId: any, diff --git a/frontend/src/app/services/storage.service.ts b/frontend/src/app/services/storage.service.ts index 60d66b284..5a69d220b 100644 --- a/frontend/src/app/services/storage.service.ts +++ b/frontend/src/app/services/storage.service.ts @@ -56,4 +56,12 @@ export class StorageService { console.log(e); } } + + getAuth(): any | null { + try { + return JSON.parse(localStorage.getItem('auth')); + } catch(e) { + return null; + } + } } diff --git a/frontend/src/app/shared/common.utils.ts b/frontend/src/app/shared/common.utils.ts index e6b43cdd7..a04fa1663 100644 --- a/frontend/src/app/shared/common.utils.ts +++ b/frontend/src/app/shared/common.utils.ts @@ -137,6 +137,14 @@ export function kmToMiles(km: number): number { return km * 0.62137119; } +const roundNumbers = [1, 2, 5, 10, 15, 20, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 600, 700, 750, 800, 900, 1000]; +export function nextRoundNumber(num: number): number { + const log = Math.floor(Math.log10(num)); + const factor = log >= 3 ? Math.pow(10, log - 2) : 1; + num /= factor; + return factor * (roundNumbers.find(val => val >= num) || roundNumbers[roundNumbers.length - 1]); +} + export function seoDescriptionNetwork(network: string): string { if( network === 'liquidtestnet' || network === 'testnet' ) { return ' Testnet'; @@ -144,4 +152,4 @@ export function seoDescriptionNetwork(network: string): string { return ' ' + network.charAt(0).toUpperCase() + network.slice(1); } return ''; -} +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/confirmations/confirmations.component.html b/frontend/src/app/shared/components/confirmations/confirmations.component.html index db3f1f38a..4ad3cb33a 100644 --- a/frontend/src/app/shared/components/confirmations/confirmations.component.html +++ b/frontend/src/app/shared/components/confirmations/confirmations.component.html @@ -1,19 +1,19 @@ - - + - + - + - + \ 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 index e69de29bb..c8af7dd76 100644 --- a/frontend/src/app/shared/components/confirmations/confirmations.component.scss +++ b/frontend/src/app/shared/components/confirmations/confirmations.component.scss @@ -0,0 +1,4 @@ +.no-cursor { + cursor: default !important; + pointer-events: none; +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index 0b9c20387..34d47379e 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -1,12 +1,17 @@ -