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 class="spinner-border text-light" style="width: 1em; height: 1em"></div>
</div> </div>
<span class="explainer">&nbsp;</span> <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 { } @else {
@if (tx?.acceleration && !tx.status?.confirmed) { @if (!tx.status?.confirmed && showAccelerationSummary) {
<div class="progress-icon"> <ng-container *ngIf="(ETA$ | async) as eta;">
<fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon> <app-accelerate-checkout
</div> *ngIf="(da$ | async) as da;"
<span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span> [cashappEnabled]="cashappEligible"
} @else { [advancedEnabled]="false"
@switch (trackerStage) { [forceMobile]="true"
@case ('waiting') { [tx]="tx"
<div class="progress-icon"> [accelerating]="isAcceleration"
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div> [miningStats]="miningStats"
</div> [eta]="eta"
<span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span> [scrollEvent]="scrollIntoAccelPreview"
} (unavailable)="eligibleForAcceleration = false"
@case ('pending') { class="w-100"
<div class="progress-icon"> ></app-accelerate-checkout>
<fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon> </ng-container>
</div> }
<span class="explainer" i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span> <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) {
@case ('soon') { <div class="progress-icon">
<div class="progress-icon"> <fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
<fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon> </div>
</div> <span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
<span class="explainer" i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span> } @else {
} @switch (trackerStage) {
@case ('next') { @case ('waiting') {
<div class="progress-icon"> <div class="progress-icon">
<fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon> <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
</div> </div>
<span class="explainer" i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span> <span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
} }
@case ('confirmed') { @case ('pending') {
<div class="progress-icon"> <div class="progress-icon">
<fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
</div> </div>
<span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span> <span class="explainer" i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
} }
@case ('replaced') { @case ('soon') {
<div class="progress-icon"> <div class="progress-icon">
<fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
</div> </div>
<span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span> <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> </div>

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

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