Implement feedbacks on acceleration timeline
This commit is contained in:
natsoni
parent
07370a8dc7
commit
cd56128bb6
@ -20,9 +20,9 @@
|
|||||||
<div class="nodes">
|
<div class="nodes">
|
||||||
<div class="node" [id]="'first-seen'">
|
<div class="node" [id]="'first-seen'">
|
||||||
<div class="seen-to-acc right"></div>
|
<div class="seen-to-acc right"></div>
|
||||||
<a class="shape-border">
|
<div class="shape-border">
|
||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
</a>
|
</div>
|
||||||
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
||||||
<div class="time">
|
<div class="time">
|
||||||
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
||||||
@ -34,9 +34,9 @@
|
|||||||
<div class="node" [id]="'accelerated'">
|
<div class="node" [id]="'accelerated'">
|
||||||
<div class="seen-to-acc left"></div>
|
<div class="seen-to-acc left"></div>
|
||||||
<div class="acc-to-confirmed right"></div>
|
<div class="acc-to-confirmed right"></div>
|
||||||
<a class="shape-border">
|
<div class="shape-border">
|
||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
</a>
|
</div>
|
||||||
<div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
|
<div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
|
||||||
<div class="time">
|
<div class="time">
|
||||||
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
||||||
@ -47,10 +47,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="node mined" [id]="'confirmed'" >
|
<div class="node mined" [id]="'confirmed'" >
|
||||||
<div class="acc-to-confirmed left" ></div>
|
<div class="acc-to-confirmed left" ></div>
|
||||||
<a class="shape-border mined-selected">
|
<div class="shape-border mined-selected">
|
||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
</a>
|
</div>
|
||||||
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
|
|
||||||
<div class="time">
|
<div class="time">
|
||||||
<app-time kind="since" [time]="tx.status.block_time"></app-time>
|
<app-time kind="since" [time]="tx.status.block_time"></app-time>
|
||||||
</div>
|
</div>
|
||||||
@ -60,94 +59,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
} @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
|
} @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
|
||||||
<div class="acceleration-timeline">
|
} @else if (standardETA) { <!-- Accelerated -->
|
||||||
|
<div class="acceleration-timeline box">
|
||||||
<div class="timeline-wrapper">
|
<div class="timeline-wrapper">
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div class="intervals">
|
<div class="intervals">
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
<div class="interval">
|
<div class="interval-spacer"></div>
|
||||||
<div class="interval-time">
|
|
||||||
<app-time [time]="now - transactionTime"></app-time>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
<div class="interval">
|
<div class="interval">
|
||||||
<div class="interval-time">
|
<div class="interval-time">
|
||||||
~<app-time [time]="acceleratedETA / 1000 - now"></app-time>
|
@if (eta) {
|
||||||
|
~<app-time [time]="eta?.wait / 1000"></app-time> <span *ngIf="accelerateRatio > 1" class="compare"> ({{ accelerateRatio }}x faster)</span>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nodes">
|
<div class="nodes">
|
||||||
<div class="node" [id]="'first-seen'">
|
<div class="node-spacer"></div>
|
||||||
<div class="seen-to-acc right"></div>
|
<div class="interval-spacer"></div>
|
||||||
<a class="shape-border">
|
<div class="node">
|
||||||
<div class="shape"></div>
|
<div class="acc-to-confirmed loading right"></div>
|
||||||
</a>
|
|
||||||
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
|
||||||
<div class="time">
|
|
||||||
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="interval-spacer">
|
<div class="interval-spacer">
|
||||||
<div class="seen-to-acc"></div>
|
<div class="acc-to-confirmed loading"></div>
|
||||||
</div>
|
|
||||||
<div class="node" [id]="'accelerated'">
|
|
||||||
<div class="seen-to-acc left"></div>
|
|
||||||
<div class="acc-to-confirmed right"></div>
|
|
||||||
<a class="shape-border waiting">
|
|
||||||
<div class="shape accelerating"></div>
|
|
||||||
</a>
|
|
||||||
<div class="status"><span class="badge badge-waiting" i18n="transaction.audit.accelerated">Accelerated</span></div>
|
|
||||||
<div class="time">
|
|
||||||
<span i18n="date.now">Now</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="interval-spacer">
|
|
||||||
<div class="acc-to-confirmed"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="node" [id]="'confirmed'">
|
<div class="node" [id]="'confirmed'">
|
||||||
<div class="acc-to-confirmed left"></div>
|
<div class="acc-to-confirmed loading left"></div>
|
||||||
<div class="corner-up"></div>
|
<div class="shape-border waiting">
|
||||||
<a class="shape-border waiting">
|
<div class="shape animate"></div>
|
||||||
<div class="shape"></div>
|
</div>
|
||||||
</a>
|
|
||||||
<div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
|
<div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline">
|
|
||||||
<div class="intervals">
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval-spacer"></div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval">
|
|
||||||
<div class="interval-time">
|
|
||||||
~<app-time [time]="eta.time / 1000 - now"></app-time> <span *ngIf="accelerateRatio > 1" style="font-style: italic; color: var(--transparent-fg);"> ({{ accelerateRatio }}x slower)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
</div>
|
|
||||||
<div class="nodes">
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval-spacer"></div>
|
|
||||||
<div class="node-spacer">
|
|
||||||
<div class="connector"><div class="corner-down"></div></div>
|
|
||||||
<div class="seen-to-acc right"></div>
|
|
||||||
</div>
|
|
||||||
<div class="interval-spacer">
|
|
||||||
<div class="seen-to-acc"></div>
|
|
||||||
</div>
|
|
||||||
<div class="node" [id]="'confirmed'">
|
|
||||||
<div class="seen-to-acc left"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
} @else if (standardETA) { <!-- Accelerated, to be mined -->
|
|
||||||
<div class="acceleration-timeline box">
|
|
||||||
<div class="timeline-wrapper">
|
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div class="intervals">
|
<div class="intervals">
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
@ -159,9 +105,7 @@
|
|||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
<div class="interval">
|
<div class="interval">
|
||||||
<div class="interval-time">
|
<div class="interval-time">
|
||||||
@if (eta) {
|
~<app-time [time]="standardETA / 1000 - now"></app-time>
|
||||||
~<app-time [time]="eta?.wait / 1000"></app-time>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="node-spacer"></div>
|
<div class="node-spacer"></div>
|
||||||
@ -169,9 +113,9 @@
|
|||||||
<div class="nodes">
|
<div class="nodes">
|
||||||
<div class="node" [id]="'first-seen'">
|
<div class="node" [id]="'first-seen'">
|
||||||
<div class="seen-to-acc right"></div>
|
<div class="seen-to-acc right"></div>
|
||||||
<a class="shape-border">
|
<div class="shape-border">
|
||||||
<div class="shape"></div>
|
<div class="shape"></div>
|
||||||
</a>
|
</div>
|
||||||
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
|
||||||
<div class="time">
|
<div class="time">
|
||||||
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
<app-time *ngIf="transactionTime > 0" kind="since" [time]="transactionTime"></app-time>
|
||||||
@ -182,52 +126,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="node" [id]="'accelerated'">
|
<div class="node" [id]="'accelerated'">
|
||||||
<div class="seen-to-acc left"></div>
|
<div class="seen-to-acc left"></div>
|
||||||
<div class="acc-to-confirmed right loading"></div>
|
|
||||||
<a class="shape-border accelerated-selected">
|
|
||||||
<div class="shape accelerating"></div>
|
|
||||||
</a>
|
|
||||||
<div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
|
|
||||||
<div class="time sm-margin">
|
|
||||||
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="interval-spacer">
|
|
||||||
<div class="acc-to-confirmed loading"></div>
|
|
||||||
</div>
|
|
||||||
<div class="node" [id]="'confirmed'">
|
|
||||||
<div class="acc-to-confirmed left loading"></div>
|
|
||||||
<div class="corner-up"></div>
|
|
||||||
<a class="shape-border waiting">
|
|
||||||
<div class="shape"></div>
|
|
||||||
</a>
|
|
||||||
<div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline">
|
|
||||||
<div class="intervals">
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval-spacer"></div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval">
|
|
||||||
<div class="interval-time">
|
|
||||||
~<app-time [time]="standardETA / 1000 - now"></app-time> <span *ngIf="accelerateRatio > 1" style="font-style: italic; color: var(--transparent-fg);"> ({{ accelerateRatio }}x slower)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
</div>
|
|
||||||
<div class="nodes">
|
|
||||||
<div class="node-spacer"></div>
|
|
||||||
<div class="interval-spacer"></div>
|
|
||||||
<div class="node-spacer">
|
|
||||||
<div class="connector"><div class="corner-down"></div></div>
|
|
||||||
<div class="seen-to-acc right"></div>
|
<div class="seen-to-acc right"></div>
|
||||||
|
<div class="shape-border accelerated-selected">
|
||||||
|
<div class="shape accelerating"></div>
|
||||||
|
<div class="connector down loading"></div>
|
||||||
|
</div>
|
||||||
|
<div class="time" style="margin-top: 3px;">
|
||||||
|
<span i18n="transaction.audit.accelerated">Accelerated</span> <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="interval-spacer">
|
<div class="interval-spacer">
|
||||||
<div class="seen-to-acc"></div>
|
<div class="seen-to-acc"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="node" [id]="'confirmed'">
|
<div class="node" [id]="'confirmed'">
|
||||||
<div class="seen-to-acc left"></div>
|
<div class="seen-to-acc left"></div>
|
||||||
|
<div class="shape-border waiting">
|
||||||
|
<div class="shape"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.acceleration-timeline {
|
.acceleration-timeline {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1em 0;
|
padding: 0.5em 0 1em;
|
||||||
|
|
||||||
&::after, &::before {
|
&::after, &::before {
|
||||||
content: '';
|
content: '';
|
||||||
@ -69,6 +69,15 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.compare {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--mainnet-alt);
|
||||||
|
font-weight: 600;
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,26 +124,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner-up {
|
.connector {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
height: 88px;
|
||||||
|
width: 10px;
|
||||||
left: -5px;
|
left: -5px;
|
||||||
left: 48.5%;
|
top: -73px;
|
||||||
height: 86px;
|
transform: translateX(120%);
|
||||||
border-left: solid 10px var(--primary);
|
background: var(--tertiary);
|
||||||
border-bottom: solid 10px var(--primary);
|
|
||||||
border-bottom-right-radius: 10px;
|
&.down {
|
||||||
// horrible css:
|
border-top-left-radius: 10px;
|
||||||
@media (max-width: 1030px) {
|
|
||||||
left: 48%;
|
|
||||||
}
|
|
||||||
@media (max-width: 850px) {
|
|
||||||
left: 47%;
|
|
||||||
}
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
left: 46%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.up {
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
animation: acceleratePulse 1s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes {
|
.nodes {
|
||||||
@ -150,8 +160,6 @@
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
background: transparent;
|
|
||||||
transition: background-color 300ms, padding 300ms;
|
|
||||||
|
|
||||||
.shape {
|
.shape {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -161,7 +169,6 @@
|
|||||||
&.accelerating {
|
&.accelerating {
|
||||||
animation: acceleratePulse 1s infinite;
|
animation: acceleratePulse 1s infinite;
|
||||||
}
|
}
|
||||||
transition: background-color 300ms, border 300ms;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.waiting {
|
&.waiting {
|
||||||
@ -203,30 +210,6 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&.sm-margin {
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.connector {
|
|
||||||
position: relative;
|
|
||||||
height: 10px;
|
|
||||||
|
|
||||||
.corner-down {
|
|
||||||
position: absolute;
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
width: 223px;
|
|
||||||
}
|
|
||||||
width: 290px;
|
|
||||||
height: 90px;
|
|
||||||
bottom: 50%;
|
|
||||||
border-left: solid 10px var(--primary);
|
|
||||||
border-bottom: solid 10px var(--primary);
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -237,9 +220,3 @@
|
|||||||
50% { background-color: var(--mainnet-alt) }
|
50% { background-color: var(--mainnet-alt) }
|
||||||
100% { background-color: var(--tertiary) }
|
100% { background-color: var(--tertiary) }
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes textPulse {
|
|
||||||
0% { color: var(--tertiary) }
|
|
||||||
50% { color: var(--mainnet-alt) }
|
|
||||||
100% { color: var(--tertiary) }
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user