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

New concept for dashboard layout components. (#469)

Browse Source 
* New concept for dashboard layout components.

* Align dashboard componentes.

* Add divider to fee box component.

* Remove TV icon from mobile and tablet queries.

* Fix form input overflow.

* Add responsive css to statistic component.

* Add responsive css to about page.

* Add global padding bottom.

* Fix graph page styles.

* Add responsive chart and scrollable table.

* Fix mobile css query for navbar menus.

* Fix pagination responsive css.

* Add CSS animated logo.

* Revert "Add CSS animated logo."

This reverts commit 92af38294c0d4fe815a801b37635cde7f8ee1ced.

* Add extra skeleton to fee-box-component.

* Fix latest-blocks and latest-transactions table css.

* Adapt Bisq pages to responsive layout.

* Remove parenthesis from fiat amout.
Fiat prive break not break on desktop.
Transaction ID align left.
Fee box skeleton width resize.

* Fix mobile table text-size.

* Fix dashboard mempool info mobile alignment.
This commit is contained in:
Miguel Medeiros 2021-05-03 10:11:30 -03:00 committed by GitHub
parent 39bb93970b
commit 2f8f3ca2e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 1485 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/bisq/bisq-address/bisq-address.component.html
View File

@ -1,10 +1,12 @@
<div class="container-xl"> <div class="container-xl">
<h1 style="float: left;" i18n="shared.address">Address</h1> <h1 i18n="shared.address">Address</h1>
<a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;"> <span class="address-link">
<span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span> <a [routerLink]="['/address/' | relativeUrl, addressString]">
<span class="d-none d-lg-inline">{{ addressString }}</span> <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
</a> <span class="d-none d-lg-inline">{{ addressString }}</span>
<app-clipboard [text]="addressString"></app-clipboard> </a>
<app-clipboard [text]="addressString"></app-clipboard>
</span>
<br> <br>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -13,26 +15,26 @@
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
<td i18n="address.total-received">Total received</td> <td i18n="address.total-received">Total received</td>
<td>{{ totalReceived / 100 | number: '1.2-2' }} BSQ</td> <td>{{ totalReceived / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="address.total-sent">Total sent</td> <td i18n="address.total-sent">Total sent</td>
<td>{{ totalSent / 100 | number: '1.2-2' }} BSQ</td> <td>{{ totalSent / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="address.balance">Balance</td> <td i18n="address.balance">Balance</td>
<td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount>)</td> <td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="w-100 d-block d-md-none"></div> <div class="w-100 d-block d-md-none"></div>
<div class="col qrcode-col"> <div class="col-md qrcode-col">
<div class="qr-wrapper"> <div class="qr-wrapper">
<app-qrcode [data]="addressString"></app-qrcode> <app-qrcode [data]="addressString"></app-qrcode>
</div> </div>

90
frontend/src/app/bisq/bisq-address/bisq-address.component.scss
View File

@ -3,21 +3,91 @@
padding: 10px; padding: 10px;
padding-bottom: 5px; padding-bottom: 5px;
display: inline-block; display: inline-block;
margin-right: 25px;
} }
@media (min-width: 576px) { .qrcode-col {
.qrcode-col { text-align: center;
text-align: right;
}
} }
@media (max-width: 575.98px) {
.qrcode-col { .qrcode-col > div {
margin: 20px auto 5px;
@media (min-width: 768px) {
text-align: center; text-align: center;
margin: auto;
} }
}
.qrcode-col > div { .fiat {
margin-top: 20px; display: block;
margin-right: 0px; font-size: 13px;
@media (min-width: 768px) {
display: inline-block;
font-size: 14px;
margin-left: 10px;
} }
}
.table {
tr td {
&:last-child {
text-align: right;
@media (min-width: 768px) {
text-align: left;
}
}
}
}
h1 {
margin: 0px;
padding: 0px;
@media (min-width: 576px) {
float: left;
margin-right: 10px;
}
}
.address-link {
line-height: 26px;
margin-left: 0px;
top: 14px;
position: relative;
display: flex;
flex-direction: row;
@media (min-width: 768px) {
line-height: 38px;
}
}
.row{
flex-direction: column;
@media (min-width: 576px) {
flex-direction: row;
}
}
.scriptmessage {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
}
.scriptmessage.longer {
max-width: 500px;
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage.longer {
max-width: 200px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
}
} }

10
frontend/src/app/bisq/bisq-block/bisq-block.component.html
View File

@ -8,9 +8,9 @@
<ng-template [ngIf]="!isLoading && !error"> <ng-template [ngIf]="!isLoading && !error">
<div class="box"> <div class="box block-container">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
@ -28,7 +28,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="col-sm"> <div class="col">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
@ -73,7 +73,7 @@
<ng-template [ngIf]="isLoading && !error"> <ng-template [ngIf]="isLoading && !error">
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
@ -86,7 +86,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="col-sm"> <div class="col">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>

48
frontend/src/app/bisq/bisq-block/bisq-block.component.scss
View File

@ -1,10 +1,44 @@
.td-width { .td-width {
width: 175px; width: 140px;
} @media (min-width: 768px) {
width: 175px;
@media (max-width: 767.98px) {
.td-width {
width: 140px;
} }
} }
h1 {
margin: 0px;
padding: 0px;
@media (min-width: 576px) {
float: left;
margin-right: 10px;
}
}
.row{
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
}
}
.block-container {
.table {
tr td {
&:last-child {
text-align: right;
@media (min-width: 992px) {
text-align: left;
}
}
}
}
.fiat {
display: block;
font-size: 13px;
@media (min-width: 992px) {
display: inline-block;
font-size: 14px;
margin-left: 10px;
}
}
}

8
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
View File

@ -18,7 +18,7 @@
<tr *ngFor="let block of blocks.value[0]; trackBy: trackByFn"> <tr *ngFor="let block of blocks.value[0]; trackBy: trackByFn">
<td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td> <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
<td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since></td> <td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since></td>
<td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span></td> <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
<td class="d-none d-md-block">{{ block.txs.length }}</td> <td class="d-none d-md-block">{{ block.txs.length }}</td>
</tr> </tr>
</tbody> </tbody>
@ -26,9 +26,9 @@
</div> </div>
<br> <br>
<div class="pagination">
<ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination> <ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</div>
</ng-container> </ng-container>
</div> </div>

3
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss
View File

@ -0,0 +1,3 @@
.pagination {
overflow: hidden;
}

2
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
View File

@ -23,7 +23,7 @@ export class BisqBlocksComponent implements OnInit {
isLoading = true; isLoading = true;
// @ts-ignore // @ts-ignore
paginationSize: 'sm' | 'lg' = 'md'; paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 10; paginationMaxSize = 4;
constructor( constructor(
private websocketService: WebsocketService, private websocketService: WebsocketService,

77
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
View File

@ -8,49 +8,54 @@
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
</ng-template> </ng-template>
<ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes"> <div class="chart-container">
<app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area> <ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
</ng-container> <app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
</ng-container>
</div>
</div> </div>
<br><br> <br><br>
<h1> <div class="container-info">
<ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template> <h1>
<ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template> <ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
</h1> <ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
<ng-container *ngIf="{ value: (tickers$ | async) } as tickers"> </h1>
<ng-container *ngIf="{ value: (tickers$ | async) } as tickers">
<div class="table-container">
<table class="table table-borderless table-striped">
<thead>
<th><ng-container i18n>Currency</ng-container> <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
<th i18n>Price</th>
<th><ng-container i18n="Trading volume 7D">Volume (7d)</ng-container> <button [disabled]="(sort$ | async) === 'volumes'" class="btn btn-link btn-sm" (click)="sort('volumes')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
<th><ng-container i18n="Trades amount 7D">Trades (7d)</ng-container> <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
</thead>
<tbody *ngIf="tickers.value; else loadingTmpl">
<tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
<td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</a></td>
<td>
<app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
<ng-template #fiat>
<span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
</ng-template>
</td>
<td>
<app-fiat [value]="ticker.volume?.volume"></app-fiat>
</td>
<td>{{ ticker.volume?.num_trades ? ticker.volume?.num_trades : 0 }}</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-borderless table-striped"> <br><br>
<thead>
<th><ng-container i18n>Currency</ng-container> <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
<th i18n>Price</th>
<th><ng-container i18n="Trading volume 7D">Volume (7d)</ng-container> <button [disabled]="(sort$ | async) === 'volumes'" class="btn btn-link btn-sm" (click)="sort('volumes')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
<th><ng-container i18n="Trades amount 7D">Trades (7d)</ng-container> <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
</thead>
<tbody *ngIf="tickers.value; else loadingTmpl">
<tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
<td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</a></td>
<td>
<app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
<ng-template #fiat>
<span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
</ng-template>
</td>
<td>
<app-fiat [value]="ticker.volume?.volume"></app-fiat>
</td>
<td>{{ ticker.volume?.num_trades }}</td>
</tr>
</tbody>
</table>
<br><br> <h2 i18n="Latest Trades header">Latest Trades</h2>
<app-bisq-trades [trades$]="trades$"></app-bisq-trades>
<h2 i18n="Latest Trades header">Latest Trades</h2> </ng-container>
<app-bisq-trades [trades$]="trades$"></app-bisq-trades> </div>
</ng-container>
</div> </div>
<ng-template #loadingTmpl> <ng-template #loadingTmpl>

27
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss
View File

@ -1,10 +1,35 @@
#volumeHolder { #volumeHolder {
height: 500px; height: 500px;
background-color: #000; background-color: #000;
overflow: hidden;
display: flex;
justify-content: center;
}
.table {
max-width: 100%;
overflow: scroll;
} }
.loadingVolumes { .loadingVolumes {
position: relative; position: relative;
top: 50%; top: 45%;
z-index: 100; z-index: 100;
}
.table-container {
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
font-size: 13px;
@media(min-width: 576px){
font-size: 16px;
}
&::-webkit-scrollbar {
display: none;
}
}
.container-info{
overflow-x: scroll;
} }

55
frontend/src/app/bisq/bisq-market/bisq-market.component.html
View File

@ -4,14 +4,12 @@
<ng-container *ngIf="currency$ | async as currency; else loadingSpinner"> <ng-container *ngIf="currency$ | async as currency; else loadingSpinner">
<h1>{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}</h1> <h1>{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}</h1>
<div class="float-left"> <div class="priceheader">
<span class="priceheader">
<ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container> <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template> <ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</span>
</div> </div>
<form [formGroup]="radioGroupForm" class="mb-3 float-right"> <form [formGroup]="radioGroupForm" class="mb-3 radio-form">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
<label ngbButtonLabel class="btn-primary btn-sm"> <label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'half_hour'" (click)="setFragment('half_hour')"> 30M <input ngbButton type="radio" [value]="'half_hour'" (click)="setFragment('half_hour')"> 30M
@ -75,30 +73,31 @@
<ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers" i18n="Bisq Buy Offers">Buy Offers</ng-template> <ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers" i18n="Bisq Buy Offers">Buy Offers</ng-template>
<ng-template #sellOffers i18n="Bisq Sell Offers">Sell Offers</ng-template> <ng-template #sellOffers i18n="Bisq Sell Offers">Sell Offers</ng-template>
</h2> </h2>
<div class="table-container">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<thead> <thead>
<th i18n>Price</th> <th i18n>Price</th>
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol }"></ng-container></th> <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol }"></ng-container></th>
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.rsymbol }"></ng-container></th> <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.rsymbol }"></ng-container></th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let offer of offers"> <tr *ngFor="let offer of offers">
<td> <td>
<ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container> <ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container>
<ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template> <ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
</td> </td>
<td> <td>
<ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container> <ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container>
<ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} {{ market.lsymbol }}</ng-template> <ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} <span class="symbol">{{ market.lsymbol }}</span></ng-template>
</td> </td>
<td> <td>
<ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container> <ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template> <ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</ng-template> </ng-template>

37
frontend/src/app/bisq/bisq-market/bisq-market.component.scss
View File

@ -1,5 +1,14 @@
.priceheader { .priceheader {
font-size: 24px; font-size: 24px;
@media(min-width: 576px){
float: left;
}
}
.radio-form {
@media(min-width: 576px){
float: right;
}
} }
.loadingChart { .loadingChart {
@ -11,4 +20,32 @@
#graphHolder { #graphHolder {
height: 550px; height: 550px;
overflow: hidden;
}
.col {
&:last-child{
margin-top: 50px;
@media(min-width: 576px){
margin-top: 0px;
}
}
}
.symbol {
color: #ffffff66;
font-size: 11px;
}
.table-container {
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
font-size: 13px;
@media(min-width: 576px){
font-size: 16px;
}
&::-webkit-scrollbar {
display: none;
}
} }

12
frontend/src/app/bisq/bisq-stats/bisq-stats.component.html
View File

@ -5,20 +5,20 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody *ngIf="!isLoading; else loadingTemplate"> <tbody *ngIf="!isLoading; else loadingTemplate">
<tr> <tr>
<td class="td-width" i18n="BSQ existing amount">Existing amount</td> <td class="td-width" i18n="BSQ existing amount">Existing amount</td>
<td>{{ (stats.minted - stats.burnt) | number: '1.2-2' }} BSQ</td> <td>{{ (stats.minted - stats.burnt) | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="BSQ minted amount">Minted amount</td> <td i18n="BSQ minted amount">Minted amount</td>
<td>{{ stats.minted | number: '1.2-2' }} BSQ</td> <td>{{ stats.minted | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="BSQ burnt amount">Burnt amount</td> <td i18n="BSQ burnt amount">Burnt amount</td>
<td>{{ stats.burnt | number: '1.2-2' }} BSQ</td> <td>{{ stats.burnt | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="BSQ addresses">Addresses</td> <td i18n="BSQ addresses">Addresses</td>
@ -33,7 +33,7 @@
<td>{{ stats.spent_txos | number }}</td> <td>{{ stats.spent_txos | number }}</td>
</tr> </tr>
<tr> <tr>
<td i18n="BSQ token price">Price</td> <td i1r8n="BSQ token price">Price</td>
<td><app-fiat [value]="price"></app-fiat></td> <td><app-fiat [value]="price"></app-fiat></td>
</tr> </tr>
<tr> <tr>
@ -44,7 +44,7 @@
</table> </table>
</div> </div>
<div class="col-sm"></div> <div class="col-md"></div>
</div> </div>
</div> </div>

9
frontend/src/app/bisq/bisq-stats/bisq-stats.component.scss
View File

@ -7,3 +7,12 @@
width: 175px; width: 175px;
} }
} }
.fiat {
display: block;
font-size: 13px;
@media (min-width: 768px) {
font-size: 14px;
display: inline-block;
}
}

66
frontend/src/app/bisq/bisq-trades/bisq-trades.component.html
View File

@ -1,39 +1,41 @@
<table class="table table-borderless table-striped"> <div class="table-container">
<thead> <table class="table table-borderless table-striped">
<th i18n>Date</th> <thead>
<th i18n>Price</th> <th i18n>Date</th>
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: 'BTC' }"></ng-container></th> <th i18n>Price</th>
<th> <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: 'BTC' }"></ng-container></th>
<ng-template [ngIf]="market" [ngIfElse]="noMarket"><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }"></ng-container></ng-template> <th>
<ng-template #noMarket i18n>Amount</ng-template> <ng-template [ngIf]="market" [ngIfElse]="noMarket"><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }"></ng-container></ng-template>
</th> <ng-template #noMarket i18n>Amount</ng-template>
</thead> </th>
<tbody *ngIf="(trades$ | async) as trades; else loadingTmpl"> </thead>
<tr *ngFor="let trade of trades;"> <tbody *ngIf="(trades$ | async) as trades; else loadingTmpl">
<td> <tr *ngFor="let trade of trades;">
{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
</td>
<td>
<ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: (trade._market || market).rsymbol }}</span></ng-container>
<ng-template #priceCrypto>{{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}</ng-template>
</td>
<ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeVolume : tradeAmount"></ng-container>
<ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeAmount : tradeVolume"></ng-container>
<ng-template #tradeAmount>
<td> <td>
<ng-container *ngIf="(trade._market || market).ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: (trade._market || market).rsymbol }}</span></ng-container> {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
<ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} {{ (trade._market || market).lsymbol }}</ng-template>
</td> </td>
</ng-template>
<ng-template #tradeVolume>
<td> <td>
<ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: (trade._market || market).rsymbol }}</span></ng-container> <ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: (trade._market || market).rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}</ng-template> <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} <span class="symbol">{{ (trade._market || market).rsymbol }}</span></ng-template>
</td> </td>
</ng-template> <ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeVolume : tradeAmount"></ng-container>
</tr> <ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeAmount : tradeVolume"></ng-container>
</tbody> <ng-template #tradeAmount>
</table> <td>
<ng-container *ngIf="(trade._market || market).ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: (trade._market || market).rsymbol }}</span></ng-container>
<ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} <span class="symbol">{{ (trade._market || market).lsymbol }}</span></ng-template>
</td>
</ng-template>
<ng-template #tradeVolume>
<td>
<ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: (trade._market || market).rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} <span class="symbol">{{ (trade._market || market).rsymbol }}</span></ng-template>
</td>
</ng-template>
</tr>
</tbody>
</table>
</div>
<ng-template #loadingTmpl> <ng-template #loadingTmpl>
<tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]"> <tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">

18
frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss
View File

@ -0,0 +1,18 @@
.symbol {
color: #ffffff66;
font-size: 11px;
}
.table-container {
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
font-size: 13px;
@media(min-width: 576px){
font-size: 16px;
}
&::-webkit-scrollbar {
display: none;
}
}

10
frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html
View File

@ -1,24 +1,24 @@
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
<td class="td-width" i18n="transaction.inputs">Inputs</td> <td class="td-width" i18n="transaction.inputs">Inputs</td>
<td>{{ totalInput / 100 | number: '1.2-2' }} BSQ</td> <td>{{ totalInput / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="transaction.outputs">Outputs</td> <td i18n="transaction.outputs">Outputs</td>
<td>{{ totalOutput / 100 | number: '1.2-2' }} BSQ</td> <td>{{ totalOutput / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="asset.issued-amount|Liquid Asset issued amount">Issued amount</td> <td i18n="asset.issued-amount|Liquid Asset issued amount">Issued amount</td>
<td>{{ totalIssued / 100 | number: '1.2-2' }} BSQ</td> <td>{{ totalIssued / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-sm"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody class="mobile-even"> <tbody class="mobile-even">
<tr> <tr>

11
frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss
View File

@ -8,4 +8,15 @@
.mobile-even tr:nth-of-type(odd) { .mobile-even tr:nth-of-type(odd) {
background-color: inherit; background-color: inherit;
} }
}
.table {
tr td {
&:last-child{
text-align: right;
@media(min-width: 768px){
text-align: left;
}
}
}
} }

18
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
View File

@ -1,16 +1,18 @@
<div class="container-xl"> <div class="container-xl">
<h1 class="float-left mr-3 mb-md-3" i18n="shared.transaction">Transaction</h1>
<ng-template [ngIf]="!isLoading && !error"> <ng-template [ngIf]="!isLoading && !error">
<button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3"> <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
<ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container> <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
<ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template> <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
<ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template> <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
</button> </button>
<div>
<a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]" style="line-height: 56px;">
<h1 i18n="shared.transaction">Transaction</h1>
<div class="tx-link">
<a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
<span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span> <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ bisqTx.id }}</span> <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
</a> </a>
@ -18,7 +20,7 @@
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="box"> <div class="box transaction-container">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
@ -56,12 +58,12 @@
<tr> <tr>
<td class="td-width" i18n="BSQ burnt amount">Burnt amount</td> <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
<td> <td>
{{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>) {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
</tr> </tr>
<tr> <tr>
<td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td> <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
<td *ngIf="!isLoadingTx; else loadingTxFee"> <td *ngIf="!isLoadingTx; else loadingTxFee">
{{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol">sat/vB</span>
&nbsp; &nbsp;
<app-tx-fee-rating [tx]="tx"></app-tx-fee-rating> <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
</td> </td>

143
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
View File

@ -1,9 +1,144 @@
.td-width { .adjust-btn-padding {
width: 175px; padding: 0.55rem;
}
.title-block {
padding-top: 1px;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.td-width { .mobile-bottomcol {
width: 150px; margin-top: 15px;
}
}
.td-width {
width: 150px;
@media (min-width: 768px) {
width: 175px;
}
}
h1 {
margin-bottom: 0;
}
.badge {
position: relative;
top: -1px;
}
.btn-small-height {
line-height: 1.1;
}
.arrow-green {
color: #1a9436;
}
.arrow-red {
color: #dc3545;
}
.btn-success {
float: right;
margin-bottom: 0px;
margin-top: 5px;
}
.tx-link {
display: block;
width: auto;
margin-bottom: 10px;
margin-left: 2px;
margin-top: 40px;
position: absolute;
@media (min-width: 700px) {
margin-top: 14px;
margin-left: 10px;
position: relative;
text-align: left;
width: 100%;
top: 14px;
left: 10px;
}
}
.container-xl {
margin-bottom: 40px;
}
.row{
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
}
}
.scriptmessage {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
}
.scriptmessage.longer {
max-width: 500px;
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage.longer {
max-width: 200px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
}
}
.fiat {
display: block;
font-size: 13px;
@media (min-width: 576px){
display: inline-block;
margin-left: 15px;
font-size: 14px;
text-align: left;
}
}
h1{
font-size: 1.75rem;
margin-top: 2px;
margin-bottom: 0;
float: left;
padding-bottom: 40px;
@media (min-width: 375px){
margin-top: 0px;
font-size: 2rem;
}
@media (min-width: 768px){
padding-bottom: 10px;
}
}
.transaction-container {
font-size: 14px;
@media (min-width: 576px){
font-size: 16px;
}
tr td {
&:last-child{
text-align: right;
@media (min-width: 768px){
text-align: left;
}
}
} }
} }

9
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
View File

@ -31,10 +31,10 @@
<td> <td>
<app-bisq-icon class="d-inline d-md-none mr-1" [txType]="tx.txType"></app-bisq-icon> <app-bisq-icon class="d-inline d-md-none mr-1" [txType]="tx.txType"></app-bisq-icon>
<ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE' || tx.txType === 'ASSET_LISTING_FEE'" [ngIfElse]="defaultTxType"> <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE' || tx.txType === 'ASSET_LISTING_FEE'" [ngIfElse]="defaultTxType">
{{ tx.burntFee / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span> {{ tx.burntFee / 100 | number: '1.2-2' }} <span class="d-none d-md-inline symbol">BSQ</span>
</ng-template> </ng-template>
<ng-template #defaultTxType> <ng-template #defaultTxType>
{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span> {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} <span class="d-none d-md-inline symbol">BSQ</span>
</ng-template> </ng-template>
</td> </td>
<td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since></td> <td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since></td>
@ -44,8 +44,9 @@
</table> </table>
<br> <br>
<div class="pagination">
<ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination> <ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</div>
</ng-container> </ng-container>
</div> </div>

11
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss
View File

@ -7,3 +7,14 @@ label {
right: 0px; right: 0px;
left: inherit; left: inherit;
} }
.pagination {
overflow: hidden;
}
h1{
font-size: 1.5rem;
@media(min-width: 375px){
font-size: 2rem;
}
}

2
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts
View File

@ -60,7 +60,7 @@ export class BisqTransactionsComponent implements OnInit {
// @ts-ignore // @ts-ignore
paginationSize: 'sm' | 'lg' = 'md'; paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 10; paginationMaxSize = 4;
txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE', txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE',
'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL', 'IRREGULAR']; 'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL', 'IRREGULAR'];

6
frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
View File

@ -58,11 +58,11 @@
</div> </div>
<div> <div>
<div class="float-left mt-2-5" *ngIf="showConfirmations && tx.burntFee"> <div class="transaction-fee" *ngIf="showConfirmations && tx.burntFee">
<ng-container i18n="BSQ burnt amount">Burnt amount</ng-container>: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>) <ng-container i18n="BSQ burnt amount">Burnt amount</ng-container>: {{ tx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="extra-info"><span class="fiat"><app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span></span>
</div> </div>
<div class="float-right"> <div class="btn-container">
<span *ngIf="showConfirmations && latestBlock$ | async as latestBlock"> <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
<button type="button" class="btn btn-sm btn-success mt-2"> <button type="button" class="btn btn-sm btn-success mt-2">
<ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></ng-container> <ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></ng-container>

85
frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
View File

@ -60,10 +60,13 @@
} }
.scriptmessage { .scriptmessage {
max-width: 280px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
} }
.scriptmessage.longer { .scriptmessage.longer {
@ -74,11 +77,81 @@
.mobile-bottomcol { .mobile-bottomcol {
margin-top: 15px; margin-top: 15px;
} }
.scriptmessage {
max-width: 90px !important;
}
.scriptmessage.longer { .scriptmessage.longer {
max-width: 280px !important; max-width: 200px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
}
}
.details-table {
margin-top: 5px;
}
.details-table td {
padding: 0.75rem;
}
.details-table td:nth-child(2) {
word-break: break-all;
white-space: normal;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
.smaller-text {
font-size: 12px;
@media (min-width: 576px) {
font-size: 14px !important;
}
}
.longer {
max-width: 100% !important;
width: 200px;
display: inline-block;
}
.row{
flex-direction: column;
@media (min-width: 992px) {
flex-direction: row;
}
}
.extra-info {
display: inline-table;
.fiat {
font-size: 14px;
display: block;
text-align: right;
}
}
.transaction-fee {
display: block;
margin: 0px auto 5px;
@media (min-width: 576px) {
display: inline-table;
}
}
.fiat {
margin-left: 10px;
font-size: 13px;
@media (min-width: 576px) {
font-size: 14px;
}
}
.btn-container {
text-align: right;
@media (min-width: 576px) {
display: inline-table;
float: right;
} }
} }

2
frontend/src/app/bisq/bsq-amount/bsq-amount.component.html
View File

@ -2,5 +2,5 @@
<span [class.green-color]="green">{{ conversions.USD * bsq / 100 * (bsqPrice$ | async) / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span> <span [class.green-color]="green">{{ conversions.USD * bsq / 100 * (bsqPrice$ | async) / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>
</ng-container> </ng-container>
<ng-template #viewFiatVin> <ng-template #viewFiatVin>
{{ bsq / 100 | number : digitsInfo }} BSQ {{ bsq / 100 | number : digitsInfo }} <span class="symbol">BSQ</span>
</ng-template> </ng-template>

23
frontend/src/app/components/about/about.component.html
View File

@ -313,20 +313,21 @@
<br><br> <br><br>
<br><br> <br><br>
<div class="alliances">
<h3 i18n="about.alliances">Community Alliances</h3>
<h3 i18n="about.alliances">Community Alliances</h3> <a href="https://liquid.net/">
<img src="/resources/profile/liquid.svg" height="52">
</a>
<a href="https://liquid.net/"> <a href="https://opencrypto.org/">
<img src="/resources/profile/liquid.svg" height="52"> <img src="/resources/profile/copa.png" height="62">
</a> </a>
<a href="https://opencrypto.org/"> <a href="https://bisq.network/">
<img src="/resources/profile/copa.png" height="62" style="margin-left: 30px; margin-right: 30px; margin-top: 20px;"> <img src="/resources/profile/bisq.svg" height="62">
</a> </a>
</div>
<a href="https://bisq.network/">
<img src="/resources/profile/bisq.svg" height="62">
</a>
<br><br> <br><br>
<br><br> <br><br>

22
frontend/src/app/components/about/about.component.scss
View File

@ -48,3 +48,25 @@
color: #FF0000; color: #FF0000;
font-weight: bold; font-weight: bold;
} }
.alliances {
a {
&:nth-child(3){
position: relative;
top: 10px;
}
}
img {
display: inline-block;
margin: 15px auto;
@media (min-width: 425px) {
margin: 15px 60px;
}
@media (min-width: 576px) {
margin: 15px 120px;
}
@media (min-width: 850px) {
margin: 50px 30px 0px;
}
}
}

20
frontend/src/app/components/address/address.component.html
View File

@ -1,10 +1,12 @@
<div class="container-xl"> <div class="container-xl">
<h1 class="float-left" i18n="shared.address">Address</h1> <h1 i18n="shared.address">Address</h1>
<a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;"> <div class="tx-link">
<span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span> <a [routerLink]="['/address/' | relativeUrl, addressString]" >
<span class="d-none d-lg-inline">{{ addressString }}</span> <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
</a> <span class="d-none d-lg-inline">{{ addressString }}</span>
<app-clipboard [text]="addressString"></app-clipboard> </a>
<app-clipboard [text]="addressString"></app-clipboard>
</div>
<br> <br>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -13,7 +15,7 @@
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col"> <div class="col-md">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<ng-template [ngIf]="!address.electrum"> <ng-template [ngIf]="!address.electrum">
@ -28,13 +30,13 @@
</ng-template> </ng-template>
<tr> <tr>
<td i18n="address.balance">Balance</td> <td i18n="address.balance">Balance</td>
<td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> (<app-fiat [value]="receieved - sent"></app-fiat>)</td> <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="receieved - sent"></app-fiat></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="w-100 d-block d-md-none"></div> <div class="w-100 d-block d-md-none"></div>
<div class="col qrcode-col"> <div class="col-md qrcode-col">
<div class="qr-wrapper"> <div class="qr-wrapper">
<app-qrcode [data]="address.address"></app-qrcode> <app-qrcode [data]="address.address"></app-qrcode>
</div> </div>

95
frontend/src/app/components/address/address.component.scss
View File

@ -3,21 +3,94 @@
padding: 10px; padding: 10px;
padding-bottom: 5px; padding-bottom: 5px;
display: inline-block; display: inline-block;
margin-right: 25px;
} }
@media (min-width: 576px) { .qrcode-col {
.qrcode-col { margin: 20px auto 10px;
text-align: right; text-align: center;
@media (min-width: 992px){
margin: 0px auto 0px;
} }
} }
@media (max-width: 575.98px) {
.qrcode-col {
text-align: center;
}
.qrcode-col > div { .fiat {
margin-top: 20px; display: block;
margin-right: 0px; @media (min-width: 992px){
display: inline-block;
margin-left: 10px;
}
}
.table {
tr td {
&:last-child {
text-align: right;
@media (min-width: 576px) {
text-align: left;
}
}
}
}
h1 {
margin: 0px;
padding: 0px;
@media (min-width: 576px) {
float: left;
margin-right: 10px;
}
}
.address-link {
line-height: 56px;
margin-left: 0px;
top: -2px;
position: relative;
@media (min-width: 768px) {
line-height: 69px;
}
}
.row{
flex-direction: column;
@media (min-width: 576px) {
flex-direction: row;
}
}
.scriptmessage {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
}
.scriptmessage.longer {
max-width: 500px;
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage.longer {
max-width: 200px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
}
}
.tx-link {
display: block;
width: 100%;
top: 14px;
position: relative;
@media (min-width: 768px) {
top: 20px;
} }
} }

6
frontend/src/app/components/amount/amount.component.html
View File

@ -1,5 +1,5 @@
<ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin"> <ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
<span>{{ conversions.USD * (satoshis / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span> <span class="fiat">{{ conversions.USD * (satoshis / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
</ng-container> </ng-container>
<ng-template #viewFiatVin> <ng-template #viewFiatVin>
<ng-template [ngIf]="network === 'liquid' && (satoshis === undefined || satoshis === null)" [ngIfElse]="default"> <ng-template [ngIf]="network === 'liquid' && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
@ -7,8 +7,8 @@
</ng-template> </ng-template>
<ng-template #default> <ng-template #default>
&lrm;{{ satoshis / 100000000 | number : digitsInfo }} &lrm;{{ satoshis / 100000000 | number : digitsInfo }}
<ng-template [ngIf]="network === 'liquid'">L-</ng-template> <span class="symbol"><ng-template [ngIf]="network === 'liquid'">L-</ng-template>
<ng-template [ngIf]="network === 'testnet'">t</ng-template> <ng-template [ngIf]="network === 'testnet'">t</ng-template>
<ng-template [ngIf]="network === 'signet'">s</ng-template>BTC <ng-template [ngIf]="network === 'signet'">s</ng-template>BTC</span>
</ng-template> </ng-template>
</ng-template> </ng-template>

2
frontend/src/app/components/amount/amount.component.scss
View File

@ -1,3 +1,3 @@
.green-color { .green-color {
color: #3bcc49; color: #3bcc49;
} }

10
frontend/src/app/components/block/block.component.html
View File

@ -1,8 +1,8 @@
<div class="container-xl"> <div class="container-xl">
<div class="title-block"> <div class="title-block">
<h1 class="float-left"><ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis </ng-template><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1> <h1><ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis </ng-template><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
<button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right mr-2 mt-2">&#10005;</button> <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -43,12 +43,12 @@
<tbody> <tbody>
<tr *ngIf="block.medianFee !== undefined"> <tr *ngIf="block.medianFee !== undefined">
<td class="td-width" i18n="block.median-fee">Median fee</td> <td class="td-width" i18n="block.median-fee">Median fee</td>
<td>~{{ block.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="block.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)</td> <td>~{{ block.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
</tr> </tr>
<ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees"> <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
<tr> <tr>
<td i18n="block.total-fees|Total fees in a block">Total fees</td> <td i18n="block.total-fees|Total fees in a block">Total fees</td>
<td *ngIf="network !== 'liquid'; else liquidTotalFees"><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td> <td *ngIf="network !== 'liquid'; else liquidTotalFees"><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat></span></td>
<ng-template #liquidTotalFees> <ng-template #liquidTotalFees>
<td>{{ fees * 100000000 | number }} L-sat (<app-fiat [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>)</td> <td>{{ fees * 100000000 | number }} L-sat (<app-fiat [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>)</td>
</ng-template> </ng-template>
@ -56,7 +56,7 @@
<tr *ngIf="network !== 'liquid'"> <tr *ngIf="network !== 'liquid'">
<td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td> <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
<td> <td>
<app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>) <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat></span>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>

97
frontend/src/app/components/block/block.component.scss
View File

@ -1,22 +1,93 @@
.title-block { .qr-wrapper {
color: #FFF; background-color: #FFF;
padding-top: 20px; padding: 10px;
padding-bottom: 3px; padding-bottom: 5px;
border-top: 3px solid #FFF; display: inline-block;
} }
.td-width { .qrcode-col {
width: 175px; text-align: center;
} }
@media (max-width: 767.98px) { .qrcode-col > div {
.td-width { margin: 20px auto 5px;
width: 140px; @media (min-width: 768px) {
text-align: center;
margin: auto;
}
}
.fiat {
display: block;
font-size: 13px;
@media (min-width: 768px) {
font-size: 14px;
display: inline-block;
margin-left: 10px;
}
}
.table {
tr td {
&:last-child {
text-align: right;
@media (min-width: 768px) {
text-align: left;
}
}
}
}
h1 {
margin: 0px;
padding: 0px;
@media (min-width: 576px) {
float: left;
margin-right: 10px;
}
}
.address-link {
line-height: 26px;
margin-left: 0px;
top: 14px;
position: relative;
display: flex;
flex-direction: row;
@media (min-width: 768px) {
line-height: 38px;
}
}
.row{
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
} }
} }
.scriptmessage {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
}
.break-all { .scriptmessage.longer {
white-space: normal; max-width: 500px;
word-break: break-all; }
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage.longer {
max-width: 200px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
}
} }

69
frontend/src/app/components/fees-box/fees-box.component.html
View File

@ -1,39 +1,48 @@
<table style="width: 100%;"> <div class="fee-estimation-wrapper">
<tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees"> <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
<td class="d-none d-md-table-cell" style="width: 33%;"> <div class="item">
<h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5> <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
<p class="card-text"> <div class="card-text">
{{ feeEstimations.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="feeEstimations.hourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>) <div class="fee-text">{{ feeEstimations.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.hourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
</p> </div>
</td> </div>
<td style="width: 33%;"> <div class="item">
<h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5> <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
<p class="card-text"> <div class="card-text">
{{ feeEstimations.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="feeEstimations.halfHourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>) <div class="fee-text">{{ feeEstimations.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.halfHourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
</p> </div>
</td> </div>
<td style="width: 33%;"> <div class="item">
<h5 class="card-title" i18n="fees-box.high-priority">High priority</h5> <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
<p class="card-text"> <div class="card-text">
{{ feeEstimations.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="feeEstimations.fastestFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>) <div class="fee-text">{{ feeEstimations.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.fastestFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
</p> </div>
</td> </div>
</tr> </div>
</table> </div>
<ng-template #loadingFees> <ng-template #loadingFees>
<tr> <div class="fee-estimation-container loading-container">
<td class="d-none d-md-table-cell" style="width: 33%;"> <div class="item">
<h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5> <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p> <div class="card-text">
</td> <div class="skeleton-loader"></div>
<td style="width: 33%;"> <div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5> <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
<p class="card-text"><span class="skeleton-loader" style="width: 80%;"></span></p> <div class="card-text">
</td> <div class="skeleton-loader"></div>
<td style="width: 33%;"> <div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.high-priority">High priority</h5> <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p> <div class="card-text">
</td> <div class="skeleton-loader"></div>
</tr> <div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template> </ng-template>

81
frontend/src/app/components/fees-box/fees-box.component.scss
View File

@ -1,3 +1,84 @@
.card-title { .card-title {
color: #4a68b9; color: #4a68b9;
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
} }
.card-text {
font-size: 22px;
span {
font-size: 11px;
position: relative;
top: -2px;
display: inline-flex;
}
.green-color {
display: block;
}
}
.fee-estimation-container {
display: flex;
justify-content: space-between;
@media (min-width: 376px) {
flex-direction: row;
}
.item {
max-width: 150px;
margin: 0;
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
&:last-child {
margin-bottom: 0;
}
.card-text span {
color: #ffffff66;
font-size: 12px;
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
width: fit-content;
margin: auto;
line-height: 1.45;
padding: 0px 2px;
}
.fiat {
display: block;
font-size: 14px !important;
}
}
}
.loading-container{
min-height: 76px;
}
.card-text {
.skeleton-loader {
width: 100%;
display: block;
margin: 9px auto;
&:first-child {
max-width: 90px;
}
&:last-child {
max-width: 55px;
}
}
}

2
frontend/src/app/components/master-page/master-page.component.html
View File

@ -48,7 +48,7 @@
<li class="nav-item" routerLinkActive="active"> <li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a> <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
</li> </li>
<li class="nav-item d-none d-sm-block" routerLinkActive="active"> <li class="nav-item d-none d-lg-block" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a> <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
</li> </li>
</ng-template> </ng-template>

12
frontend/src/app/components/master-page/master-page.component.scss
View File

@ -42,17 +42,21 @@ li.nav-item {
justify-content: center; justify-content: center;
position: fixed; position: fixed;
width: 100%; width: 100%;
} @media (min-width: 992px) {
@media (min-width: 992px) {
.navbar-nav {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
position: relative; position: relative;
width: auto; width: auto;
} }
a {
font-size: 0.8em;
@media (min-width: 375px) {
font-size: 1em;
}
}
} }
.navbar-collapse { .navbar-collapse {
flex-basis: auto; flex-basis: auto;
justify-content: flex-end; justify-content: flex-end;

8
frontend/src/app/components/mempool-block/mempool-block.component.html
View File

@ -2,7 +2,7 @@
<div class="title-block"> <div class="title-block">
<h1 class="float-left">{{ ordinal$ | async }}</h1> <h1 class="float-left">{{ ordinal$ | async }}</h1>
<button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right mr-2 mt-2">&#10005;</button> <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right">&#10005;</button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -14,15 +14,15 @@
<tbody> <tbody>
<tr> <tr>
<td i18n="mempool-block.median-fee">Median fee</td> <td i18n="mempool-block.median-fee">Median fee</td>
<td>~{{ mempoolBlock.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="mempoolBlock.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)</td> <td>~{{ mempoolBlock.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="mempoolBlock.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
</tr> </tr>
<tr> <tr>
<td i18n="mempool-block.fee-span">Fee span</td> <td i18n="mempool-block.fee-span">Fee span</td>
<td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td> <td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol yellow-color" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
</tr> </tr>
<tr> <tr>
<td i18n="mempool-block.total-fees">Total fees</td> <td i18n="mempool-block.total-fees">Total fees</td>
<td><app-amount [satoshis]="mempoolBlock.totalFees" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount> (<app-fiat [value]="mempoolBlock.totalFees" digitsInfo="1.0-0"></app-fiat>)</td> <td><app-amount [satoshis]="mempoolBlock.totalFees" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolBlock.totalFees" digitsInfo="1.0-0"></app-fiat></span></td>
</tr> </tr>
<tr> <tr>
<td i18n="mempool-block.transactions">Transactions</td> <td i18n="mempool-block.transactions">Transactions</td>

31
frontend/src/app/components/mempool-block/mempool-block.component.scss
View File

@ -1,5 +1,7 @@
.progress { .progress {
background-color: #2d3348; background-color: #2d3348;
position: relative;
top: 5px;
} }
.title-block { .title-block {
@ -7,4 +9,33 @@
padding-top: 20px; padding-top: 20px;
padding-bottom: 3px; padding-bottom: 3px;
border-top: 3px solid #FFF; border-top: 3px solid #FFF;
}
.fiat {
font-size: 13px;
display: block;
@media (min-width: 992px) {
display: inline-block;
margin-left: 10px;
}
}
.table {
tr td {
&:last-child{
text-align: right;
@media (min-width: 992px) {
text-align: left;
}
}
}
}
h1 {
margin: 0px;
padding: 0px;
@media (min-width: 576px) {
float: left;
margin-right: 10px;
}
} }

45
frontend/src/app/components/search-form/search-form.component.scss
View File

@ -7,17 +7,11 @@
form { form {
margin-top: 5px; margin-top: 5px;
} @media (min-width: 576px) {
@media (min-width: 576px) {
form {
margin-top: 0px; margin-top: 0px;
margin-left: 8px; margin-left: 8px;
} }
} @media (min-width: 992px) {
@media (min-width: 992px) {
form {
width: 100%; width: 100%;
} }
} }
@ -28,30 +22,19 @@ form {
.search-box-container { .search-box-container {
width: 100%; width: 100%;
} @media (min-width: 768px) {
.search-box-container input {
border: 0px;
}
.search-box-container .btn {
width: 100px;
}
@media (min-width: 768px) {
.search-box-container {
min-width: 400px; min-width: 400px;
} }
} @media (min-width: 992px) {
min-width: 200px;
@media (min-width: 992px) {
.search-box-container {
min-width: 260px;
} }
} @media (min-width: 1200px) {
@media (min-width: 1200px) {
.search-box-container {
min-width: 300px; min-width: 300px;
} }
} input {
border: 0px;
}
.btn {
width: 100px;
}
}

6
frontend/src/app/components/statistics/chartist.component.scss
View File

@ -0,0 +1,6 @@
.ct-legend{
top: 130px;
@media (min-width: 653px) {
top: 90px;
}
}

17
frontend/src/app/components/statistics/statistics.component.html
View File

@ -1,21 +1,17 @@
<div class="container-xl" style="max-width: 100%;"> <div class="container-graph">
<div>
<div class="row"> <div *ngIf="loading">
<div class="col-lg-12" *ngIf="loading">
<div class="text-center"> <div class="text-center">
<h3 i18n="statistics.loading-graphs">Loading graphs...</h3> <h3 i18n="statistics.loading-graphs">Loading graphs...</h3>
<br> <br>
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
</div> </div>
<div>
<div class="col-lg-12">
<div class="card mb-3" *ngIf="mempoolStats.length"> <div class="card mb-3" *ngIf="mempoolStats.length">
<div class="card-header"> <div class="card-header">
<i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span> <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
<form [formGroup]="radioGroupForm" style="float: right;" (click)="saveGraphPreference()">
<div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div> <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm"> <label ngbButtonLabel class="btn-primary btn-sm">
@ -64,11 +60,8 @@
[options]="transactionsWeightPerSecondOptions"> [options]="transactionsWeightPerSecondOptions">
</app-chartist> </app-chartist>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

31
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -1,7 +1,13 @@
.container-graph {
padding: 0px 15px;
}
.card-header { .card-header {
border-bottom: 0; border-bottom: 0;
background-color: none; font-size: 18px;
font-size: 20px; @media (min-width: 465px) {
font-size: 20px;
}
} }
.card { .card {
@ -15,12 +21,23 @@
margin-right: 10px; margin-right: 10px;
} }
@media (max-width: 767.98px) { .card-body {
.container-xl { @media (max-width: 767.98px) {
padding: 0;
}
.card-body {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
} }
.formRadioGroup{
margin-top: 6px;
@media (min-width: 653px) {
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 10px;
@media (min-width: 768px) {
font-size: 14px;
}
}
}

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

@ -9,26 +9,29 @@
</a> </a>
</div> </div>
<h1 class="float-left mr-3 mb-md-3" i18n="shared.transaction">Transaction</h1> <h1 i18n="shared.transaction">Transaction</h1>
<ng-template [ngIf]="tx?.status?.confirmed"> <div class="tx-link">
<button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3"> <a [routerLink]="['/tx/' | relativeUrl, txId]">
<ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></ng-container>
<ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
<ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
</button>
</ng-template>
<ng-template [ngIf]="tx && !tx?.status.confirmed">
<button type="button" class="btn btn-sm btn-danger float-right mr-2 mt-1 mt-md-3" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
</ng-template>
<div>
<a [routerLink]="['/tx/' | relativeUrl, txId]" style="line-height: 56px;">
<span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span> <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ txId }}</span> <span class="d-none d-lg-inline">{{ txId }}</span>
</a> </a>
<app-clipboard [text]="txId"></app-clipboard> <app-clipboard [text]="txId"></app-clipboard>
</div> </div>
<div class="container-buttons" >
<ng-template [ngIf]="tx?.status?.confirmed">
<button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
<ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></ng-container>
<ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
<ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
</button>
</ng-template>
<ng-template [ngIf]="tx && !tx?.status.confirmed">
<button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
</ng-template>
</div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -163,7 +166,7 @@
</a> </a>
</td> </td>
<td class="d-none d-lg-table-cell">{{ cpfpInfo.bestDescendant.weight / 4 | vbytes: 2 }}</td> <td class="d-none d-lg-table-cell">{{ cpfpInfo.bestDescendant.weight / 4 | vbytes: 2 }}</td>
<td>{{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td> <td>{{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
<td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td> <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
</tr> </tr>
</ng-template> </ng-template>
@ -176,7 +179,7 @@
</a> </a>
</td> </td>
<td class="d-none d-lg-table-cell">{{ cpfpTx.weight / 4 | vbytes: 2 }}</td> <td class="d-none d-lg-table-cell">{{ cpfpTx.weight / 4 | vbytes: 2 }}</td>
<td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td> <td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
<td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td> <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
</tr> </tr>
</ng-template> </ng-template>
@ -324,12 +327,12 @@
<tbody> <tbody>
<tr> <tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td> <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ tx.fee | number }} <span i18n="transaction.fee.sat|Transaction Fee sat">sat</span> (<app-fiat [value]="tx.fee"></app-fiat>)</td> <td>{{ tx.fee | number }} <span class="symbol" i18n="transaction.fee.sat|Transaction Fee sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></td>
</tr> </tr>
<tr> <tr>
<td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td> <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td> <td>
{{ tx.feePerVsize | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> {{ tx.feePerVsize | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<ng-template [ngIf]="tx.status.confirmed"> <ng-template [ngIf]="tx.status.confirmed">
&nbsp; &nbsp;
<app-tx-fee-rating *ngIf="tx.fee && (cpfpInfo && !cpfpInfo.bestDescendant && !cpfpInfo.ancestors.length)" [tx]="tx"></app-tx-fee-rating> <app-tx-fee-rating *ngIf="tx.fee && (cpfpInfo && !cpfpInfo.bestDescendant && !cpfpInfo.ancestors.length)" [tx]="tx"></app-tx-fee-rating>
@ -339,7 +342,7 @@
<tr *ngIf="cpfpInfo && (cpfpInfo.bestDescendant || cpfpInfo.ancestors.length)"> <tr *ngIf="cpfpInfo && (cpfpInfo.bestDescendant || cpfpInfo.ancestors.length)">
<td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td> <td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td> <td>
{{ tx.effectiveFeePerVsize | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> {{ tx.effectiveFeePerVsize | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<ng-template [ngIf]="tx.status.confirmed"> <ng-template [ngIf]="tx.status.confirmed">
<app-tx-fee-rating class="d-none d-lg-inline ml-2" *ngIf="tx.fee" [tx]="tx"></app-tx-fee-rating> <app-tx-fee-rating class="d-none d-lg-inline ml-2" *ngIf="tx.fee" [tx]="tx"></app-tx-fee-rating>
</ng-template> </ng-template>

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

@ -6,8 +6,49 @@
color: #FFF; color: #FFF;
padding-top: 20px; padding-top: 20px;
border-top: 3px solid #FFF; border-top: 3px solid #FFF;
width: 100%;
padding-bottom: 30px;
@media (min-width: 768px) {
padding-bottom: 0px;
}
} }
h1{
font-size: 1.75rem;
margin-top: 2px;
margin-bottom: 0;
float: left;
@media (min-width: 375px){
margin-top: 0px;
font-size: 2rem;
}
}
.container-buttons {
text-align: right;
width: 100%;
@media (min-width: 992px) {
width: 300px;
}
}
.tx-link {
display: block;
width: auto;
margin-bottom: 10px;
margin-left: 2px;
margin-top: 40px;
position: absolute;
@media (min-width: 768px) {
margin-top: 14px;
margin-left: 10px;
position: relative;
text-align: left;
width: 100%;
}
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.mobile-bottomcol { .mobile-bottomcol {
margin-top: 15px; margin-top: 15px;
@ -15,19 +56,13 @@
} }
.td-width { .td-width {
width: 175px; width: 150px;
}
@media (max-width: 767.98px) { @media (max-width: 768px) {
.td-width { width: 175px;
width: 150px;
} }
} }
h1 {
margin-bottom: 0;
}
.badge { .badge {
position: relative; position: relative;
top: -1px; top: -1px;
@ -43,4 +78,75 @@ h1 {
.arrow-red { .arrow-red {
color: #dc3545; color: #dc3545;
} }
.btn {
// float: right;
// margin-bottom: 0px;
margin-top: 5px;
}
.container-xl {
margin-bottom: 40px;
}
.row{
flex-direction: column;
@media (min-width: 850px) {
flex-direction: row;
}
}
.scriptmessage {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
}
.scriptmessage.longer {
max-width: 500px;
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage.longer {
max-width: 200px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
}
}
.fiat {
display: block;
@media (min-width: 768px){
display: inline-block;
margin-left: 15px;
text-align: left;
}
}
.table {
tr td {
&:last-child {
text-align: right;
@media (min-width: 768px) {
text-align: left;
}
}
.btn {
display: block;
}
}
}
// .container-buttons{
// width: 100%;
// display: inline-block;
// }

2
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -198,7 +198,7 @@
<div> <div>
<div class="float-left mt-2-5" *ngIf="!transactionPage && tx.fee"> <div class="float-left mt-2-5" *ngIf="!transactionPage && tx.fee">
{{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span i18n="shared.sat|sat">sat</span> (<app-fiat [value]="tx.fee"></app-fiat>)</span> {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
</div> </div>
<div class="float-right"> <div class="float-right">

101
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@ -19,9 +19,9 @@
left: 0; left: 0;
right: calc(-1*30px/3); right: calc(-1*30px/3);
width: 0; width: 0;
height: 0; height: 0;
border-top: 6.66px solid transparent; border-top: 6.66px solid transparent;
border-bottom: 6.66px solid transparent border-bottom: 6.66px solid transparent
} }
.arrow:after { .arrow:after {
@ -38,52 +38,49 @@
} }
.arrow.green:before { .arrow.green:before {
border-left: 10px solid #28a745; border-left: 10px solid #28a745;
} }
.arrow.green:after { .arrow.green:after {
background-color:#28a745; background-color:#28a745;
} }
.arrow.red:before { .arrow.red:before {
border-left: 10px solid #dc3545; border-left: 10px solid #dc3545;
} }
.arrow.red:after { .arrow.red:after {
background-color:#dc3545; background-color:#dc3545;
} }
.arrow.grey:before { .arrow.grey:before {
border-left: 10px solid #6c757d; border-left: 10px solid #6c757d;
} }
.arrow.grey:after { .arrow.grey:after {
background-color:#6c757d; background-color:#6c757d;
} }
.scriptmessage { .scriptmessage {
max-width: 280px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
width: 100%;
max-width: 50px;
@media (min-width: 768px) {
max-width: 200px;
}
} }
.scriptmessage.longer { .scriptmessage.longer {
max-width: 500px; max-width: 500px;
@media (min-width: 375px) {
max-width: 200px !important;
}
} }
@media (max-width: 767.98px) { .mobile-bottomcol {
.mobile-bottomcol { margin-top: 15px;
margin-top: 15px; @media (min-width: 992px) {
} margin-top: 0px;
.scriptmessage {
max-width: 90px !important;
}
.scriptmessage.longer {
max-width: 280px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
} }
} }
@ -93,6 +90,9 @@
.details-table td { .details-table td {
padding: 0.75rem; padding: 0.75rem;
&:first-child {
white-space: pre-wrap;
}
} }
.details-table td:nth-child(2) { .details-table td:nth-child(2) {
@ -101,3 +101,58 @@
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
font-size: 12px; font-size: 12px;
} }
.smaller-text {
font-size: 12px;
@media (min-width: 576px) {
font-size: 14px !important;
}
}
.longer {
max-width: 100% !important;
width: 200px;
display: inline-block;
}
.row{
flex-direction: column;
@media (min-width: 992px) {
flex-direction: row;
}
}
.extra-info {
display: none;
@media (min-width: 576px) {
display: inline-table;
}
.fiat {
font-size: 14px;
margin-left: 10px;
text-align: right;
}
.sats {
color: #ffffff66;
font-size: 11px;
}
}
.transaction-fee {
display: block;
margin: 0px auto 5px;
@media (min-width: 576px) {
display: inline-table;
}
}
.btn-container {
text-align: right;
@media (min-width: 576px) {
display: inline-table;
float: right;
}
}
.fiat {
margin-left: 10px;
}

84
frontend/src/app/dashboard/dashboard.component.html
View File

@ -73,19 +73,19 @@
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" i18n="dashboard.latest-blocks">Latest blocks</h5> <h5 class="card-title" i18n="dashboard.latest-blocks">Latest blocks</h5>
<table class="table table-borderless text-left"> <table class="table lastest-blocks-table">
<thead> <thead>
<th style="width: 15%;" i18n="dashboard.latest-blocks.height">Height</th> <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
<th style="width: 35%;" i18n="dashboard.latest-blocks.mined">Mined</th> <th class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
<th style="width: 20%;" class="d-none d-lg-table-cell" i18n="dashboard.latest-blocks.transaction-count">TXs</th> <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
<th style="width: 30%;" i18n="dashboard.latest-blocks.size">Size</th> <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock"> <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
<td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td> <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
<td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td> <td class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
<td class="d-none d-lg-table-cell">{{ block.tx_count | number }}</td> <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
<td> <td class="table-cell-size">
<div class="progress"> <div class="progress">
<div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }">&nbsp;</div> <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }">&nbsp;</div>
<div class="progress-text">{{ block.size | bytes: 2 }}</div> <div class="progress-text">{{ block.size | bytes: 2 }}</div>
@ -102,19 +102,19 @@
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5> <h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
<table class="table table-borderless text-left"> <table class="table latest-transactions">
<thead> <thead>
<th style="width: 20%;" i18n="dashboard.latest-transactions.txid">TXID</th> <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
<th style="width: 35%;" class="text-right d-none d-lg-table-cell" i18n="dashboard.latest-transactions.amount">Amount</th> <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
<th *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell" i18n="dashboard.latest-transactions.USD">USD</th> <th class="table-cell-fiat" *ngIf="(network$ | async) === ''" i18n="dashboard.latest-transactions.USD">USD</th>
<th style="width: 25%;" class="text-right" i18n="dashboard.latest-transactions.fee">Fee</th> <th class="table-cell-fees" i18n="dashboard.latest-transactions.fee">Fee</th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let transaction of transactions$ | async; let i = index;"> <tr *ngFor="let transaction of transactions$ | async; let i = index;">
<td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td> <td class="table-cell-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
<td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td> <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
<td *ngIf="(network$ | async) === ''" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td> <td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
<td class="text-right">{{ transaction.fee / transaction.vsize | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td> <td class="table-cell-fees">{{ transaction.fee / transaction.vsize | number : '1.1-1' }} <span class="fiat" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -160,32 +160,30 @@
</ng-template> </ng-template>
<ng-template #mempoolTable let-mempoolInfoData> <ng-template #mempoolTable let-mempoolInfoData>
<table style="width: 100%;"> <div class="mempool-info-data">
<tr> <div class="item">
<td style="width: 33%;"> <h5 *ngIf="!mempoolInfoData.value || mempoolInfoData.value.memPoolInfo.mempoolminfee === 0.00001 else purgingText" class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Minimum fee</h5>
<h5 *ngIf="!mempoolInfoData.value || mempoolInfoData.value.memPoolInfo.mempoolminfee === 0.00001 else purgingText" class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Minimum fee</h5> <ng-template #purgingText><h5 class="card-title" i18n="dashboard.purging|Purgin below fee">Purging</h5></ng-template>
<ng-template #purgingText><h5 class="card-title" i18n="dashboard.purging|Purgin below fee">Purging</h5></ng-template> <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
<p class="card-text" *ngIf="mempoolInfoData.value; else loading"> <ng-template [ngIf]="mempoolInfoData.value.memPoolInfo.mempoolminfee > 0.00001">&lt; </ng-template>{{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} <span><ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container></span>
<ng-template [ngIf]="mempoolInfoData.value.memPoolInfo.mempoolminfee > 0.00001">&lt; </ng-template>{{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container> </p>
</p> </div>
</td> <div class="item">
<td style="width: 33%;"> <h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
<h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory usage</h5> <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
<div class="card-text" *ngIf="mempoolInfoData.value; else loadingsmall"> {{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
<div class="progress" style="max-width: 250px;"> </p>
<div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div> </div>
<div class="progress-text">{{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}</div> <div class="item bar">
</div> <h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory usage</h5>
<div class="card-text" *ngIf="mempoolInfoData.value; else loadingsmall">
<div class="progress">
<div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div>
<div class="progress-text">{{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}</div>
</div> </div>
</td> </div>
<td class="d-none d-md-table-cell" style="width: 33%;"> </div>
<h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5> </div>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
</p>
</td>
</tr>
</table>
</ng-template> </ng-template>
<ng-template #txPerSecond let-mempoolInfoData> <ng-template #txPerSecond let-mempoolInfoData>

158
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -1,18 +1,24 @@
.dashboard-container { .dashboard-container {
padding-bottom: 60px; padding-bottom: 60px;
} @media (min-width: 992px) {
@media (min-width: 992px) {
.dashboard-container {
padding-bottom: 0px; padding-bottom: 0px;
} }
.table {
.fiat{
color: #ffffff66;
font-size: 10px;
}
}
} }
.card { .card {
background-color: #1d1f31; background-color: #1d1f31;
height: 100%;
} }
.card-title { .card-title {
color: #4a68b9; color: #4a68b9;
font-size: 1rem;
} }
.info-block { .info-block {
@ -33,7 +39,7 @@
} }
.skeleton-loader { .skeleton-loader {
max-width: 200px; max-width: 100%;
} }
.more-padding { .more-padding {
@ -41,5 +47,147 @@
} }
.graph-card { .graph-card {
height: 385px; height: 100%;
@media (min-width: 992px) {
height: 385px;
}
} }
.mempool-info-data {
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 124px;
margin: 0px auto 20px;
display: inline-block;
@media (min-width: 400px) {
width: 50%;
}
&:last-child {
margin: 0px auto 0px;
}
&:nth-child(2) {
order: 2;
@media (min-width: 485px) {
order: 3;
}
}
&:nth-child(3) {
order: 3;
@media (min-width: 485px) {
order: 2;
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
.card-text {
font-size: 18px;
span {
color: #ffffff66;
font-size: 12px;
}
}
}
.bar {
width: 93%;
margin: 0px 5px 20px;
@media (min-width: 485px) {
max-width: 200px;
margin: 0px auto 0px;
}
}
}
.latest-transactions {
width: 100%;
text-align: left;
tr, td, th {
border: 0px;
}
.table-cell-txid {
width: 20%;
}
.table-cell-satoshis {
display: none;
text-align: right;
width: 30%;
@media (min-width: 576px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 1100px) {
display: table-cell;
}
}
.table-cell-fiat {
display: none;
text-align: right;
width: 30%;
@media (min-width: 485px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: table-cell;
}
}
.table-cell-fees {
width: 25%;
text-align: right;
}
}
.lastest-blocks-table {
width: 100%;
text-align: left;
tr, td, th {
border: 0px;
}
.table-cell-height {
width: 15%;
}
.table-cell-mined {
width: 35%;
text-align: right;
@media (min-width: 376px) {
text-align: left;
}
}
.table-cell-transaction-count {
display: none;
text-align: right;
width: 20%;
@media (min-width: 376px) {
display: table-cell;
}
}
.table-cell-size {
display: none;
text-align: center;
width: 30%;
@media (min-width: 485px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: table-cell;
}
}
}

29
frontend/src/styles.scss
View File

@ -55,10 +55,15 @@ html, body {
body { body {
background-color: #11131f; background-color: #11131f;
min-width: 320px; min-width: 320px;
padding-bottom: 60px;
} }
.container { .container {
position: relative; position: relative;
padding-bottom: 60px;
}
.container-xl {
padding-bottom: 60px;
} }
:focus { :focus {
@ -161,6 +166,26 @@ body {
} }
} }
.symbol {
color: #ffffff66;
font-size: 11px;
}
.break-all {
white-space: normal;
word-break: break-all;
}
.title-block {
color: #FFF;
padding-top: 20px;
padding-bottom: 10px;
border-top: 3px solid #FFF;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.smaller-text { .smaller-text {
font-size: 14px; font-size: 14px;
} }
@ -175,6 +200,10 @@ body {
.table { .table {
margin-bottom: 0; margin-bottom: 0;
font-size: 0.9rem;
@media (min-width: 576px) {
font-size: 1rem;
}
} }
.close { .close {