mirror of
https://github.com/mempool/mempool.git
synced 2025-03-26 01:33:12 +01:00
Merge pull request #5301 from mempool/natsoni/hide-standard-eta-timeline
Remove standard ETA from timeline
This commit is contained in:
wiz
GitHub
commit
4269077d4b
@ -45,9 +45,9 @@
|
||||
<div class="interval-spacer">
|
||||
<div class="acc-to-confirmed"></div>
|
||||
</div>
|
||||
<div class="node mined" [id]="'confirmed'" >
|
||||
<div class="node selected" [id]="'confirmed'">
|
||||
<div class="acc-to-confirmed left" ></div>
|
||||
<div class="shape-border mined-selected">
|
||||
<div class="shape-border">
|
||||
<div class="shape"></div>
|
||||
</div>
|
||||
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
|
||||
@ -61,7 +61,7 @@
|
||||
</div>
|
||||
} @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
|
||||
} @else if (standardETA) { <!-- Accelerated -->
|
||||
<div class="acceleration-timeline box">
|
||||
<div class="acceleration-timeline box lower-padding">
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline">
|
||||
<div class="intervals">
|
||||
@ -71,7 +71,7 @@
|
||||
<div class="interval">
|
||||
<div class="interval-time">
|
||||
@if (eta) {
|
||||
~<app-time [time]="eta?.wait / 1000"></app-time> <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span>
|
||||
~<app-time [time]="eta?.wait / 1000"></app-time> <!-- <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span> -->
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@ -81,13 +81,12 @@
|
||||
<div class="node-spacer"></div>
|
||||
<div class="interval-spacer"></div>
|
||||
<div class="node">
|
||||
<div class="acc-to-confirmed loading right"></div>
|
||||
<div class="acc-to-confirmed right go-faster"></div>
|
||||
</div>
|
||||
<div class="interval-spacer">
|
||||
<div class="acc-to-confirmed loading"></div>
|
||||
</div>
|
||||
<div class="node" [id]="'confirmed'">
|
||||
<div class="acc-to-confirmed loading left"></div>
|
||||
<div class="acc-to-confirmed left go-faster"></div>
|
||||
<div class="shape-border waiting">
|
||||
<div class="shape animate"></div>
|
||||
</div>
|
||||
@ -106,7 +105,8 @@
|
||||
<div class="node-spacer"></div>
|
||||
<div class="interval">
|
||||
<div class="interval-time">
|
||||
~<app-time [time]="standardETA / 1000 - now"></app-time>
|
||||
<!-- ~<app-time [time]="standardETA / 1000 - now"></app-time> -->
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-spacer"></div>
|
||||
@ -125,11 +125,11 @@
|
||||
<div class="interval-spacer">
|
||||
<div class="seen-to-acc"></div>
|
||||
</div>
|
||||
<div class="node" [id]="'accelerated'">
|
||||
<div class="node accelerated" [id]="'accelerated'">
|
||||
<div class="seen-to-acc left"></div>
|
||||
<div class="seen-to-acc right"></div>
|
||||
<div class="shape-border accelerated-selected">
|
||||
<div class="shape accelerating"></div>
|
||||
<div class="shape-border">
|
||||
<div class="shape"></div>
|
||||
<div class="connector down loading"></div>
|
||||
</div>
|
||||
<div class="time" style="margin-top: 3px;">
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
.acceleration-timeline {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0.5em 0 1em;
|
||||
padding: 1em 0;
|
||||
&.lower-padding {
|
||||
padding: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
&::after, &::before {
|
||||
content: '';
|
||||
@ -52,7 +55,7 @@
|
||||
|
||||
.interval, .interval-spacer {
|
||||
width: 8em;
|
||||
min-width: 5em;
|
||||
min-width: 8em;
|
||||
max-width: 8em;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
@ -112,8 +115,20 @@
|
||||
background: var(--tertiary);
|
||||
border-radius: 5px;
|
||||
|
||||
&.loading {
|
||||
animation: acceleratePulse 1s infinite;
|
||||
&.go-faster {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%239339f4;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px;
|
||||
border-radius: 0;
|
||||
|
||||
&.right {
|
||||
left: calc(50% + 5px);
|
||||
margin-right: calc(-4em + 5px);
|
||||
animation: goFasterRight 0.8s infinite linear;
|
||||
}
|
||||
&.left {
|
||||
right: calc(50% + 5px);
|
||||
margin-left: calc(-4em + 5px);
|
||||
animation: goFasterLeft 0.8s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
@ -123,28 +138,6 @@
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.connector {
|
||||
position: absolute;
|
||||
height: 88px;
|
||||
width: 10px;
|
||||
left: -5px;
|
||||
top: -73px;
|
||||
transform: translateX(120%);
|
||||
background: var(--tertiary);
|
||||
|
||||
&.down {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
&.up {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
animation: acceleratePulse 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nodes {
|
||||
@ -159,16 +152,17 @@
|
||||
margin-bottom: -8px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
background: transparent;
|
||||
|
||||
.shape {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
&.accelerating {
|
||||
animation: acceleratePulse 1s infinite;
|
||||
}
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.waiting {
|
||||
@ -176,17 +170,41 @@
|
||||
background: var(--grey);
|
||||
}
|
||||
}
|
||||
|
||||
&.accelerated-selected {
|
||||
.shape {
|
||||
background: var(--tertiary);
|
||||
|
||||
.connector {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
height: 88px;
|
||||
width: 10px;
|
||||
left: -5px;
|
||||
top: -73px;
|
||||
transform: translateX(120%);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%),
|
||||
background-size: 10px 20px;
|
||||
|
||||
&.down {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
&.up {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
animation: goFasterUp 0.8s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.accelerated {
|
||||
.shape-border {
|
||||
animation: acceleratePulse 0.4s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.mined-selected {
|
||||
.shape {
|
||||
background: var(--success);
|
||||
}
|
||||
&.selected {
|
||||
.shape-border {
|
||||
background: var(--mainnet-alt);
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,3 +238,18 @@
|
||||
50% { background-color: var(--mainnet-alt) }
|
||||
100% { background-color: var(--tertiary) }
|
||||
}
|
||||
|
||||
@keyframes goFasterUp {
|
||||
0% { background-position-y: 0; }
|
||||
100% { background-position-y: -40px; }
|
||||
}
|
||||
|
||||
@keyframes goFasterLeft {
|
||||
0% { background-position: left 0px bottom 0px }
|
||||
100% { background-position: left 40px bottom 0px; }
|
||||
}
|
||||
|
||||
@keyframes goFasterRight {
|
||||
0% { background-position: right 0 bottom 0px; }
|
||||
100% { background-position: right -40px bottom 0px; }
|
||||
}
|
||||
|
||||
@ -28,14 +28,16 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
|
||||
|
||||
ngOnChanges(changes): void {
|
||||
this.now = Math.floor(new Date().getTime() / 1000);
|
||||
if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
|
||||
if (changes?.eta?.currentValue) {
|
||||
if (changes?.acceleratedETA?.currentValue) {
|
||||
this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
|
||||
} else if (changes?.standardETA?.currentValue) {
|
||||
this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
|
||||
}
|
||||
}
|
||||
}
|
||||
// Hide standard ETA while we don't have a proper standard ETA calculation, see https://github.com/mempool/mempool/issues/65
|
||||
|
||||
// if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
|
||||
// if (changes?.eta?.currentValue) {
|
||||
// if (changes?.acceleratedETA?.currentValue) {
|
||||
// this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
|
||||
// } else if (changes?.standardETA?.currentValue) {
|
||||
// this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user