machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into nymkappa/accel-checkout

Browse Source
This commit is contained in:
nymkappa 2024-04-13 23:13:02 +09:00 committed by GitHub
commit a6e27f1312
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 99 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@ -174,29 +174,29 @@
.blink{ .blink{
width:400px; width:400px;
height:400px; height:400px;
border-bottom: 35px solid #FFF; border-bottom: solid calc(0.3 * var(--block-size)) #FFF;
animation: blink 0.2s infinite; animation: blink 0.2s infinite;
} }
@keyframes blink{ @keyframes blink{
0% { 0% {
border-bottom: 35px solid green; border-bottom: solid calc(0.3 * var(--block-size)) green;
} }
50% { 50% {
border-bottom: 35px solid yellow; border-bottom: solid calc(0.3 * var(--block-size)) yellow;
} }
100% { 100% {
border-bottom: 35px solid orange; border-bottom: solid calc(0.3 * var(--block-size)) orange;
} }
} }
@-webkit-keyframes blink{ @-webkit-keyframes blink{
0% { 0% {
border-bottom: 35px solid green; border-bottom: solid calc(0.3 * var(--block-size)) green;
} }
50% { 50% {
border-bottom: 35px solid yellow; border-bottom: solid calc(0.3 * var(--block-size)) yellow;
} }
100% { 100% {
border-bottom: 35px solid orange; border-bottom: solid calc(0.3 * var(--block-size)) orange;
} }
} }

79
frontend/src/app/components/tracker/tracker.component.html
View File

@ -1,6 +1,9 @@
<div class="mobile-wrapper"> <div class="mobile-wrapper">
<div class="mobile-container"> <div class="mobile-container">
<div class="panel"> <div class="panel">
<div class="field nav-header">
<app-svg-images name="officialMempoolSpace" style="width: 144px; height: 36px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
</div>
<div class="field"> <div class="field">
<div class="label" i18n="shared.transaction">Transaction</div> <div class="label" i18n="shared.transaction">Transaction</div>
<div class="value"> <div class="value">
@ -17,27 +20,18 @@
<div class="tracker-bar"> <div class="tracker-bar">
<app-tracker-bar [stage]="trackerStage"></app-tracker-bar> <app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
</div> </div>
<div class="explain"> <div class="data">
<div class="field"> @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
@switch (trackerStage) { <div class="field">
@case ('waiting') { <div class="label" i18n="transaction.first-seen|Transaction first seen">First seen</div>
<span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span> <div class="value">
} @if (transactionTime) {
@case ('pending') { <i><app-time kind="since" [time]="transactionTime" [fastRender]="true"></app-time></i>
<span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span> } @else {
} <span class="skeleton-loader"></span>
@case ('soon') { }
<span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span> </div>
} </div>
@case ('next') {
<span i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
}
@case ('confirmed') {
<span i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
}
}
</div>
@if (tx && !tx.status?.confirmed && mempoolPosition) {
<div class="field"> <div class="field">
<div class="label" i18n="transaction.eta|Transaction ETA">ETA</div> <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
<div class="value"> <div class="value">
@ -54,6 +48,15 @@
</div> </div>
</div> </div>
} @else if (tx && tx.status?.confirmed) { } @else if (tx && tx.status?.confirmed) {
<div class="field">
<div class="label" i18n="transaction.confirmed-at">Confirmed at</div>
<div class="value">
&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
<div class="lg-inline">
<i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true"></app-time>)</i>
</div>
</div>
</div>
<div class="field"> <div class="field">
<div class="label" i18n="transaction.block-height">Block height</div> <div class="label" i18n="transaction.block-height">Block height</div>
<div class="value"> <div class="value">
@ -77,25 +80,45 @@
@if (showAccelerationSummary) { @if (showAccelerationSummary) {
<app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout> <app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
} @else { } @else {
<div class="progress-icon"> @if (tx?.acceleration && !tx.status?.confirmed) {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
} @else {
@switch (trackerStage) { @switch (trackerStage) {
@case ('waiting') { @case ('waiting') {
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div> <div class="progress-icon">
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
</div>
<span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
} }
@case ('pending') { @case ('pending') {
<fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon> <div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
} }
@case ('soon') { @case ('soon') {
<fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon> <div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
} }
@case ('next') { @case ('next') {
<fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon> <div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
} }
@case ('confirmed') { @case ('confirmed') {
<fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon> <div class="progress-icon">
<fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
} }
} }
</div> }
} }
</div> </div>

40
frontend/src/app/components/tracker/tracker.component.scss
View File

@ -8,6 +8,7 @@
.mobile-container { .mobile-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
height: 100svh;
max-width: 600px; max-width: 600px;
max-height: 1000px; max-height: 1000px;
box-sizing: border-box; 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 { .blockchain-wrapper {
position: relative; position: relative;
display: flex; display: flex;
@ -55,6 +79,7 @@
flex-grow: 1; flex-grow: 1;
width: 0; width: 0;
white-space: nowrap; white-space: nowrap;
text-align: end;
} }
} }
@ -82,14 +107,19 @@
.bottom-panel { .bottom-panel {
flex-grow: 1; flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.explainer {
margin: 0 1em;
text-align: center;
}
} }
.progress-icon { .progress-icon {
font-size: clamp(50px, 30vw, 200px); font-size: clamp(30px, 20vw, 150px);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
.footer-link { .footer-link {

4
frontend/src/app/components/tracker/tracker.component.ts
View File

@ -338,6 +338,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
this.setCpfpInfo(txPosition.cpfp); this.setCpfpInfo(txPosition.cpfp);
} }
if (txPosition.position?.accelerated) {
this.tx.acceleration = true;
}
if (txPosition.position?.block === 0) { if (txPosition.position?.block === 0) {
this.trackerStage = 'next'; this.trackerStage = 'next';
} else if (txPosition.position?.block < 3){ } else if (txPosition.position?.block < 3){

3
frontend/src/app/shared/shared.module.ts
View File

@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle, 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, 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 { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MenuComponent } from '../components/menu/menu.component'; import { MenuComponent } from '../components/menu/menu.component';
import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component'; import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@ -419,5 +419,6 @@ export class SharedModule {
library.addIcons(faHourglassStart); library.addIcons(faHourglassStart);
library.addIcons(faHourglassHalf); library.addIcons(faHourglassHalf);
library.addIcons(faHourglassEnd); library.addIcons(faHourglassEnd);
library.addIcons(faWandMagicSparkles);
} }
} }