mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-23 14:40:38 +01:00
Code Issues Projects Releases Wiki Activity

Tracker bottom panel with status icon

Browse source
This commit is contained in:
Mononaut 2024-04-13 09:05:50 +00:00
parent 29851537eb
commit ecc234a96a
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
4 changed files with 66 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/app/components/tracker/tracker.component.html
View file

@ -72,5 +72,35 @@
}
</div>
</div>
<div class="bottom-panel">
@if (showAccelerationSummary) {
<app-accelerate-checkout *ngIf="(da$ | async) as da;" [tx]="tx" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
} @else {
<div class="progress-icon">
@switch (trackerStage) {
@case ('waiting') {
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
}
@case ('pending') {
<fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
}
@case ('soon') {
<fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
}
@case ('next') {
<fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
}
@case ('confirmed') {
<fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
}
}
</div>
}
</div>
<div class="footer-link" [routerLink]="['/tx' | relativeUrl, tx?.txid]">
<span>See more details <fa-icon [icon]="['fas', 'arrow-alt-circle-right']"></fa-icon></span>
</div>
</div>
</div>

35
frontend/src/app/components/tracker/tracker.component.scss
View file

@ -1,6 +1,5 @@
.mobile-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -8,11 +7,18 @@
.mobile-container {
width: 100vw;
height: 100%;
height: 100vh;
max-width: 600px;
max-height: 1000px;
box-sizing: border-box;
margin: 0;
display: flex;
flex-direction: column;
justify-content: start;
& > * {
flex-shrink: 0;
}
}
.blockchain-wrapper {
@ -25,7 +31,7 @@
}
.panel {
background: var(--box-bg);
background: var(--bg);
}
.field {
@ -72,4 +78,27 @@
height: 100%;
padding: 0.5rem 0.25rem;
background-color: #653b9c;
}
.bottom-panel {
flex-grow: 1;
}
.progress-icon {
font-size: clamp(50px, 30vw, 200px);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.footer-link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.5em;
background: var(--primary);
color: white;
}

1
frontend/src/app/components/tracker/tracker.component.ts
View file

@ -144,7 +144,6 @@ export class TrackerComponent implements OnInit, OnDestroy {
this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
if (this.acceleratorAvailable && this.stateService.ref === 'https://cash.app/') {
this.showAccelerationSummary = true;
this.paymentType = 'cashapp';
}

5
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 { 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 } 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 } 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';
@ -416,5 +416,8 @@ export class SharedModule {
library.addIcons(faCheck);
library.addIcons(faRocket);
library.addIcons(faScaleBalanced);
library.addIcons(faHourglassStart);
library.addIcons(faHourglassHalf);
library.addIcons(faHourglassEnd);
}
}