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

[pizza] fix status icon layout w/ accelerator modal

Browse Source
This commit is contained in:
Mononaut 2024-07-14 04:40:27 +00:00
parent 530610add6
commit 6b955acf9e
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 72 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,68 +117,71 @@
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
</div>
<span class="explainer">&nbsp;</span>
} @else if (showAccelerationSummary) {
<ng-container *ngIf="(ETA$ | async) as eta;">
<app-accelerate-checkout
*ngIf="(da$ | async) as da;"
[cashappEnabled]="cashappEligible"
[advancedEnabled]="false"
[forceMobile]="true"
[tx]="tx"
[accelerating]="isAcceleration"
[miningStats]="miningStats"
[eta]="eta"
[scrollEvent]="scrollIntoAccelPreview"
(unavailable)="eligibleForAcceleration = false"
class="h-100 w-100"
></app-accelerate-checkout>
</ng-container>
} @else {
@if (tx?.acceleration && !tx.status?.confirmed) {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
} @else {
@switch (trackerStage) {
@case ('waiting') {
<div class="progress-icon">
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
}
@case ('replaced') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span>
@if (!tx.status?.confirmed && showAccelerationSummary) {
<ng-container *ngIf="(ETA$ | async) as eta;">
<app-accelerate-checkout
*ngIf="(da$ | async) as da;"
[cashappEnabled]="cashappEligible"
[advancedEnabled]="false"
[forceMobile]="true"
[tx]="tx"
[accelerating]="isAcceleration"
[miningStats]="miningStats"
[eta]="eta"
[scrollEvent]="scrollIntoAccelPreview"
(unavailable)="eligibleForAcceleration = false"
class="w-100"
></app-accelerate-checkout>
</ng-container>
}
<div class="status-panel d-flex flex-column h-100 w-100 justify-content-center align-items-center" [class.small-status]="!tx.status?.confirmed && showAccelerationSummary">
@if (tx?.acceleration && !tx.status?.confirmed) {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
} @else {
@switch (trackerStage) {
@case ('waiting') {
<div class="progress-icon">
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
}
@case ('replaced') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span>
}
}
}
}
</div>
}
</div>

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

@ -166,7 +166,7 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: start;
.explainer {
margin: 0 1em;
@ -178,6 +178,15 @@
font-size: clamp(30px, 20vw, 150px);
}
.status-panel {
&.small-status {
min-height: 180px;
.progress-icon {
font-size: clamp(20px, 13vw, 100px);
}
}
}
.footer-link {
display: flex;
flex-direction: row;