Merge pull request #4960 from mempool/mononaut/change-toppings
change pizza tracker toppings
This commit is contained in:
wiz
GitHub
commit
aeb54f59f1
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,9 @@
|
||||
<div class="mobile-wrapper">
|
||||
<div class="mobile-container">
|
||||
<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="label" i18n="shared.transaction">Transaction</div>
|
||||
<div class="value">
|
||||
@ -19,25 +22,39 @@
|
||||
</div>
|
||||
<div class="explain">
|
||||
<div class="field">
|
||||
@switch (trackerStage) {
|
||||
@case ('waiting') {
|
||||
<span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
|
||||
}
|
||||
@case ('pending') {
|
||||
<span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
|
||||
}
|
||||
@case ('soon') {
|
||||
<span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
|
||||
}
|
||||
@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>
|
||||
@if (tx?.acceleration && !tx.status?.confirmed) {
|
||||
<span i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
|
||||
} @else {
|
||||
@switch (trackerStage) {
|
||||
@case ('waiting') {
|
||||
<span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
|
||||
}
|
||||
@case ('pending') {
|
||||
<span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
|
||||
}
|
||||
@case ('soon') {
|
||||
<span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
|
||||
}
|
||||
@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) {
|
||||
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
|
||||
<div class="field">
|
||||
<div class="label" i18n="transaction.first-seen|Transaction first seen">First seen</div>
|
||||
<div class="value">
|
||||
@if (transactionTime) {
|
||||
<i><app-time kind="since" [time]="transactionTime" [fastRender]="true"></app-time></i>
|
||||
} @else {
|
||||
<span class="skeleton-loader"></span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
|
||||
<div class="value">
|
||||
@ -54,6 +71,15 @@
|
||||
</div>
|
||||
</div>
|
||||
} @else if (tx && tx.status?.confirmed) {
|
||||
<div class="field">
|
||||
<div class="label" i18n="transaction.confirmed-at">Confirmed at</div>
|
||||
<div class="value">
|
||||
‎{{ 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="label" i18n="transaction.block-height">Block height</div>
|
||||
<div class="value">
|
||||
@ -78,21 +104,25 @@
|
||||
<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>
|
||||
@if (tx?.acceleration && !tx.status?.confirmed) {
|
||||
<fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
|
||||
} @else {
|
||||
@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>
|
||||
|
||||
@ -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;
|
||||
@ -55,6 +79,7 @@
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,7 +110,7 @@
|
||||
}
|
||||
|
||||
.progress-icon {
|
||||
font-size: clamp(50px, 30vw, 200px);
|
||||
font-size: clamp(30px, 20vw, 150px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -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){
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user