mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 22:58:30 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'nymkappa/polish-accelerate-cta' into nymkappa/mega-branch

Browse source
This commit is contained in:
nymkappa 2023-10-04 12:10:39 +02:00
commit 2dd6dd9233
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
5 changed files with 59 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
View file

@ -2,7 +2,6 @@
height: 100%;
min-width: 120px;
width: 120px;
max-height: 90vh;
margin-left: 4em;
margin-right: 1.5em;
padding-bottom: 63px;

10
frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
View file

@ -75,7 +75,7 @@
<ng-container *ngFor="let option of maxRateOptions">
<button type="button" class="btn btn-primary flex-grow-1 btn-border btn-sm feerate" [class]="{active: selectFeeRateIndex === option.index}" (click)="setUserBid(option)">
<span class="fee">{{ option.fee | number }} <span class="symbol" i18n="shared.sats|sats">sats</span></span>
<span class="rate">~ <app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
<span class="rate">~<app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
</button>
</ng-container>
</div>
@ -88,12 +88,12 @@
<div class="row mb-3">
<div class="col">
<div class="table-toggle btn-group btn-group-toggle">
<div class="btn btn-primary btn-sm" [class.active]="showTable === 'estimated'" (click)="showTable = 'estimated'">
<button class="btn btn-primary btn-sm tab" [class.active]="showTable === 'estimated'" (click)="showTable = 'estimated'">
<span>Estimated cost</span>
</div>
<div class="btn btn-primary btn-sm" [class.active]="showTable === 'maximum'" (click)="showTable = 'maximum'">
</button>
<button class="btn btn-primary btn-sm tab" [class.active]="showTable === 'maximum'" (click)="showTable = 'maximum'">
<span>Maximum cost</span>
</div>
</button>
</div>
<table class="table table-borderless table-border table-dark table-accelerator">
<tbody>

23
frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
View file

@ -28,7 +28,10 @@
.feerate.active {
background-color: #105fb0 !important;
opacity: 1;
border: 1px solid white !important;
border: 1px solid #007fff !important;
}
.feerate:focus {
box-shadow: none !important;
}
.estimateDisabled {
@ -41,6 +44,24 @@
margin-top: 0.5em;
}
.tab {
&:first-child {
margin-right: 1px;
}
border: solid 1px black;
border-bottom: none;
background-color: #323655;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
}
.tab.active {
background-color: #5d659d !important;
opacity: 1;
}
.tab:focus {
box-shadow: none !important;
}
.table-accelerator {
tr {
text-wrap: wrap;

7
frontend/src/app/components/transaction/transaction.component.html
View file

@ -6,8 +6,11 @@
<app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
</div>
<div *ngIf="acceleratorAvailable && accelerateCtaType === 'alert' && !tx?.status?.confirmed && !tx?.acceleration" class="alert alert-mempool alert-dismissible" role="alert">
<span><a class="link accelerator" (click)="onAccelerateClicked()">Accelerate</a> this transaction using Mempool Accelerator &trade;</span>
<div *ngIf="acceleratorAvailable && accelerateCtaType === 'alert' && !tx?.status?.confirmed && !tx?.acceleration" class="alert alert-dismissible alert-purple" role="alert">
<div>
<a class="btn btn-sm blink-bg" (click)="onAccelerateClicked()">Accelerate</a>
<span class="align-middle">this transaction using Mempool Accelerator &trade;</span>
</div>
<button type="button" class="close" aria-label="Close" (click)="dismissAccelAlert()">
<span aria-hidden="true">&times;</span>
</button>

29
frontend/src/app/components/transaction/transaction.component.scss
View file

@ -218,8 +218,33 @@
}
}
.link.accelerator {
cursor: pointer;
.alert-purple {
background-color: #5c3a88;
width: 100%;
}
// Blinking block
@keyframes shadowyBackground {
0% {
box-shadow: 0px 0px 20px rgba(#eba814, 1);
}
50% {
box-shadow: 0px 0px 20px rgba(#eba814, .3);
}
100% {
box-shadow: 0px 0px 20px rgba(#ffae00, 1);
}
}
.blink-bg {
color: #fff;
background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
animation: shadowyBackground 1s infinite;
box-shadow: 0px 0px 20px rgba(#eba814, 1);
transition: 100ms all ease-in;
margin-right: 8px;
font-size: 16px;
border: 1px solid gold;
}
.eta {