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

Merge pull request #4961 from mempool/mononaut/pizza-layout

Browse Source 
Change tx tracker layout
This commit is contained in:
wiz 2024-04-13 23:08:10 +09:00 committed by GitHub
commit 7fbf13fd9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,30 +20,7 @@
<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?.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?.block != null) { @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
<div class="field"> <div class="field">
<div class="label" i18n="transaction.first-seen|Transaction first seen">First seen</div> <div class="label" i18n="transaction.first-seen|Transaction first seen">First seen</div>
@ -103,29 +80,45 @@
@if (showAccelerationSummary) { @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> <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 { } @else {
<div class="progress-icon"> @if (tx?.acceleration && !tx.status?.confirmed) {
@if (tx?.acceleration && !tx.status?.confirmed) { <div class="progress-icon">
<fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
} @else { </div>
@switch (trackerStage) { <span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
@case ('waiting') { } @else {
@switch (trackerStage) {
@case ('waiting') {
<div class="progress-icon">
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div> <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
} </div>
@case ('pending') { <span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
}
@case ('pending') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
} </div>
@case ('soon') { <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') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
} </div>
@case ('next') { <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') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
} </div>
@case ('confirmed') { <span class="explainer" i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
}
@case ('confirmed') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-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>

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

@ -107,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(30px, 20vw, 150px); font-size: clamp(30px, 20vw, 150px);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
.footer-link { .footer-link {