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

Simplified acceleration mode for mobile

Browse Source
This commit is contained in:
Mononaut 2024-04-08 04:58:56 +00:00
parent 91a8a8be34
commit aa0c70bd44
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 154 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
View File

@ -65,6 +65,7 @@
</div>
</div>
<br>
@if (paymentType !== 'cashapp') {
<h5 i18n="accelerator.pay-how-much">How much more are you willing to pay?</h5>
<div class="row">
<div class="col">
@ -83,6 +84,7 @@
</div>
</div>
</div>
}
<h5>Acceleration summary</h5>
<div class="row mb-3">
@ -90,6 +92,29 @@
<table class="table table-borderless table-border table-dark table-accelerator">
<tbody>
<!-- ESTIMATED FEE -->
@if (paymentType === 'cashapp') {
<ng-container>
<tr class="group-first">
<td class="item" i18n="accelerator.boost-rate">Boost rate</td>
<td class="amt" style="font-size: 16px">
{{ maxRateOptions[selectFeeRateIndex].rate | number : '1.0-0' }}
</td>
<td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr>
<tr class="info">
<td class="info">
<i><small i18n="accelerator.estimated-extra-fee-required">Boost fee</small></i>
</td>
<td class="amt">
{{ maxRateOptions[selectFeeRateIndex].fee | number }}
</td>
<td class="units">
<span class="symbol" i18n="shared.sats">sats</span>
<span class="fiat ml-1"><app-fiat [value]="maxRateOptions[selectFeeRateIndex].fee"></app-fiat></span>
</td>
</tr>
</ng-container>
} @else {
<ng-container>
<tr class="group-first">
<td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
@ -111,6 +136,7 @@
</td>
</tr>
</ng-container>
}
<!-- MEMPOOL BASE FEE -->
<tr>
@ -141,6 +167,28 @@
</td>
</tr>
@if (paymentType === 'cashapp') {
<!-- FIXED COST -->
<ng-container>
<tr class="group-first group-last" style="border-top: 1px solid lightgrey; border-collapse: collapse;">
<td class="item">
<b style="background-color: #105fb0;" class="p-1 pl-0" i18n="accelerator.total-cost">Total cost</b>
</td>
<td class="amt">
<span style="background-color: #105fb0" class="p-1 pl-0">
{{ maxCost | number }}
</span>
</td>
<td class="units">
<span class="symbol" i18n="shared.sats">sats</span>
<span class="fiat ml-1">
<app-fiat [value]="maxCost" [colorClass]="'green-color'"></app-fiat>
</span>
</td>
</tr>
</ng-container>
} @else {
<!-- NEXT BLOCK ESTIMATE -->
<ng-container>
<tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;">
@ -188,6 +236,7 @@
</td>
</tr>
</ng-container>
}
<!-- USER BALANCE -->
<ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost">

19
frontend/src/app/components/transaction/transaction.component.html
View File

@ -409,6 +409,9 @@
} @else {
<ng-container *ngTemplateOutlet="firstSeenRow"></ng-container>
<ng-container *ngTemplateOutlet="etaRow"></ng-container>
@if (isMobile) {
<ng-container *ngTemplateOutlet="accelerateRow"></ng-container>
}
}
<ng-container *ngTemplateOutlet="featuresRow"></ng-container>
@if (tx?.status?.confirmed) {
@ -530,7 +533,7 @@
} @else if (this.mempoolPosition.block >= 7) {
<span [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
<span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
@if (!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
@if (!isMobile && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
<a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
}
</span>
@ -539,7 +542,7 @@
} @else {
<span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
<app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
@if (!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
@if (!isMobile && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
<a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
}
</span>
@ -552,6 +555,18 @@
}
</ng-template>
<ng-template #accelerateRow>
@if (!isLoadingTx) {
<tr>
<td class="td-width align-items-center align-middle p-0" colspan="2">
<a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn accelerateFullSize" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
</td>
</tr>
} @else {
<ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
}
</ng-template>
<ng-template #gogglesRow>
@if (!isLoadingTx) {
@if (((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration)) || filters.length) {

7
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -311,6 +311,13 @@
}
}
.accelerateFullSize {
width: 100%;
height: 100%;
padding: 0.5rem 0.25rem;
background-color: #653b9c;
}
.goggles-icon {
display: block;
width: 2.2em;