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

[accelerator] blinking cta, polish accel preview

Browse Source
This commit is contained in:
nymkappa
2023-09-03 16:05:12 +03:00
parent 827b0f6ad1
commit 0e1a9d8619
5 changed files with 59 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 {