From 88df2878cb9e9c0dd8d7f6059663f8a9a837b30b Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 12:26:30 +0000 Subject: [PATCH 1/3] Add logo to tx tracker page, fix bugs --- .../components/tracker/tracker.component.html | 5 +++- .../components/tracker/tracker.component.scss | 24 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index f2f16d010..8832e1c84 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -1,6 +1,9 @@
+
+ +
Transaction
@@ -37,7 +40,7 @@ } }
- @if (tx && !tx.status?.confirmed && mempoolPosition) { + @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
ETA
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index 025479cde..4de8e410d 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -8,6 +8,7 @@ .mobile-container { width: 100vw; height: 100vh; + height: 100svh; max-width: 600px; max-height: 1000px; box-sizing: border-box; @@ -21,6 +22,29 @@ } } +.heading { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + + & > * { + flex-basis: 0; + flex-grow: 1; + } + + .heading-label { + text-align: center; + margin: 0 1em; + } +} + +.nav-header { + position: relative; + box-shadow: 0 -5px 15px #000; + z-index: 100; +} + .blockchain-wrapper { position: relative; display: flex; From 5ca3b24527c0451e133f2940e5a6599d470d480a Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 13:14:26 +0000 Subject: [PATCH 2/3] Fix accelerate arrow, add accelerating status --- .../mempool-blocks.component.scss | 14 +-- .../components/tracker/tracker.component.html | 87 ++++++++++++------- .../components/tracker/tracker.component.scss | 3 +- .../components/tracker/tracker.component.ts | 4 + frontend/src/app/shared/shared.module.ts | 3 +- 5 files changed, 72 insertions(+), 39 deletions(-) diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index 140d83908..660ad6f54 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -174,29 +174,29 @@ .blink{ width:400px; height:400px; - border-bottom: 35px solid #FFF; + border-bottom: solid calc(0.3 * var(--block-size)) #FFF; animation: blink 0.2s infinite; } @keyframes blink{ 0% { - border-bottom: 35px solid green; + border-bottom: solid calc(0.3 * var(--block-size)) green; } 50% { - border-bottom: 35px solid yellow; + border-bottom: solid calc(0.3 * var(--block-size)) yellow; } 100% { - border-bottom: 35px solid orange; + border-bottom: solid calc(0.3 * var(--block-size)) orange; } } @-webkit-keyframes blink{ 0% { - border-bottom: 35px solid green; + border-bottom: solid calc(0.3 * var(--block-size)) green; } 50% { - border-bottom: 35px solid yellow; + border-bottom: solid calc(0.3 * var(--block-size)) yellow; } 100% { - border-bottom: 35px solid orange; + border-bottom: solid calc(0.3 * var(--block-size)) orange; } } \ No newline at end of file diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 8832e1c84..44cb9192a 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -22,25 +22,39 @@
- @switch (trackerStage) { - @case ('waiting') { - Waiting for your transaction to appear in the mempool - } - @case ('pending') { - Your transaction is in the mempool, but it will not be confirmed for some time. - } - @case ('soon') { - Your transaction is near the top of the mempool, and is expected to confirm soon. - } - @case ('next') { - Your transaction is expected to confirm in the next block - } - @case ('confirmed') { - Your transaction is confirmed! + @if (tx?.acceleration && !tx.status?.confirmed) { + Your transaction has been accelerated + } @else { + @switch (trackerStage) { + @case ('waiting') { + Waiting for your transaction to appear in the mempool + } + @case ('pending') { + Your transaction is in the mempool, but it will not be confirmed for some time. + } + @case ('soon') { + Your transaction is near the top of the mempool, and is expected to confirm soon. + } + @case ('next') { + Your transaction is expected to confirm in the next block + } + @case ('confirmed') { + Your transaction is confirmed! + } } }
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) { +
+
First seen
+
+ @if (transactionTime) { + + } @else { + + } +
+
ETA
@@ -57,6 +71,15 @@
} @else if (tx && tx.status?.confirmed) { +
+
Confirmed at
+
+ ‎{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} +
+ () +
+
+
Block height
@@ -81,21 +104,25 @@ } @else {
- @switch (trackerStage) { - @case ('waiting') { - - } - @case ('pending') { - - } - @case ('soon') { - - } - @case ('next') { - - } - @case ('confirmed') { - + @if (tx?.acceleration && !tx.status?.confirmed) { + + } @else { + @switch (trackerStage) { + @case ('waiting') { + + } + @case ('pending') { + + } + @case ('soon') { + + } + @case ('next') { + + } + @case ('confirmed') { + + } } }
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index 4de8e410d..dec56e5f6 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -79,6 +79,7 @@ flex-grow: 1; width: 0; white-space: nowrap; + text-align: end; } } @@ -109,7 +110,7 @@ } .progress-icon { - font-size: clamp(50px, 30vw, 200px); + font-size: clamp(30px, 20vw, 150px); height: 100%; display: flex; align-items: center; diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts index 1a33eae66..2774dfd76 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -334,6 +334,10 @@ export class TrackerComponent implements OnInit, OnDestroy { this.setCpfpInfo(txPosition.cpfp); } + if (txPosition.position?.accelerated) { + this.tx.acceleration = true; + } + if (txPosition.position?.block === 0) { this.trackerStage = 'next'; } else if (txPosition.position?.block < 3){ diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 97fa8aede..50268029b 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle, faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, - faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd } from '@fortawesome/free-solid-svg-icons'; + faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { MenuComponent } from '../components/menu/menu.component'; import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component'; @@ -419,5 +419,6 @@ export class SharedModule { library.addIcons(faHourglassStart); library.addIcons(faHourglassHalf); library.addIcons(faHourglassEnd); + library.addIcons(faWandMagicSparkles); } } From d4f51979d47f51b604fa739c859617ae4f250733 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 13:56:29 +0000 Subject: [PATCH 3/3] Change tx tracker layout --- .../components/tracker/tracker.component.html | 71 +++++++++---------- .../components/tracker/tracker.component.scss | 13 ++-- 2 files changed, 41 insertions(+), 43 deletions(-) diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 44cb9192a..2d3d50d76 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -20,30 +20,7 @@
-
-
- @if (tx?.acceleration && !tx.status?.confirmed) { - Your transaction has been accelerated - } @else { - @switch (trackerStage) { - @case ('waiting') { - Waiting for your transaction to appear in the mempool - } - @case ('pending') { - Your transaction is in the mempool, but it will not be confirmed for some time. - } - @case ('soon') { - Your transaction is near the top of the mempool, and is expected to confirm soon. - } - @case ('next') { - Your transaction is expected to confirm in the next block - } - @case ('confirmed') { - Your transaction is confirmed! - } - } - } -
+
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
First seen
@@ -103,29 +80,45 @@ @if (showAccelerationSummary) { } @else { -
- @if (tx?.acceleration && !tx.status?.confirmed) { + @if (tx?.acceleration && !tx.status?.confirmed) { +
- } @else { - @switch (trackerStage) { - @case ('waiting') { +
+ Your transaction has been accelerated + } @else { + @switch (trackerStage) { + @case ('waiting') { +
- } - @case ('pending') { +
+ Waiting for your transaction to appear in the mempool + } + @case ('pending') { +
- } - @case ('soon') { +
+ Your transaction is in the mempool, but it will not be confirmed for some time. + } + @case ('soon') { +
- } - @case ('next') { +
+ Your transaction is near the top of the mempool, and is expected to confirm soon. + } + @case ('next') { +
- } - @case ('confirmed') { +
+ Your transaction is expected to confirm in the next block + } + @case ('confirmed') { +
- } +
+ Your transaction is confirmed! } } -
+ } }
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index dec56e5f6..2abda231f 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -107,14 +107,19 @@ .bottom-panel { flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .explainer { + margin: 0 1em; + text-align: center; + } } .progress-icon { font-size: clamp(30px, 20vw, 150px); - height: 100%; - display: flex; - align-items: center; - justify-content: center; } .footer-link {