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">
<h1 style="float: left;" i18n="shared.address">Address</h1>
<a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
<span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ addressString }}</span>
</a>
<app-clipboard [text]="addressString"></app-clipboard>
<h1 i18n="shared.address">Address</h1>
<span class="address-link">
<a [routerLink]="['/address/' | relativeUrl, addressString]">
<span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ addressString }}</span>
</a>
<app-clipboard [text]="addressString"></app-clipboard>
</span>
<br>
<div class="clearfix"></div>
@ -13,26 +15,26 @@
<div class="box">
<div class="row">
<div class="col">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<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>
<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>
<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>
</tbody>
</table>
</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">
<app-qrcode [data]="addressString"></app-qrcode>
</div>

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

@ -3,21 +3,91 @@
padding: 10px;
padding-bottom: 5px;
display: inline-block;
margin-right: 25px;
}
@media (min-width: 576px) {
.qrcode-col {
text-align: right;
}
.qrcode-col {
text-align: center;
}
@media (max-width: 575.98px) {
.qrcode-col {
.qrcode-col > div {
margin: 20px auto 5px;
@media (min-width: 768px) {
text-align: center;
margin: auto;
}
}
.qrcode-col > div {
margin-top: 20px;
margin-right: 0px;
.fiat {
display: block;
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">
<div class="box">
<div class="box block-container">
<div class="row">
<div class="col-sm">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
@ -28,7 +28,7 @@
</tr>
</table>
</div>
<div class="col-sm">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
@ -73,7 +73,7 @@
<ng-template [ngIf]="isLoading && !error">
<div class="box">
<div class="row">
<div class="col-sm">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
@ -86,7 +86,7 @@
</tr>
</table>
</div>
<div class="col-sm">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>

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

@ -1,10 +1,44 @@
.td-width {
width: 175px;
}
@media (max-width: 767.98px) {
.td-width {
width: 140px;
width: 140px;
@media (min-width: 768px) {
width: 175px;
}
}
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">
<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>{{ 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>
</tr>
</tbody>
@ -26,9 +26,9 @@
</div>
<br>
<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 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>
</div>
</ng-container>
</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;
// @ts-ignore
paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 10;
paginationMaxSize = 4;
constructor(
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>
</ng-template>
<ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
<app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
</ng-container>
<div class="chart-container">
<ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
<app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
</ng-container>
</div>
</div>
<br><br>
<h1>
<ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
<ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
</h1>
<ng-container *ngIf="{ value: (tickers$ | async) } as tickers">
<div class="container-info">
<h1>
<ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
<ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
</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">
<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>
<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>
<app-bisq-trades [trades$]="trades$"></app-bisq-trades>
</ng-container>
</ng-container>
</div>
</div>
<ng-template #loadingTmpl>

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

@ -1,10 +1,35 @@
#volumeHolder {
height: 500px;
background-color: #000;
overflow: hidden;
display: flex;
justify-content: center;
}
.table {
max-width: 100%;
overflow: scroll;
}
.loadingVolumes {
position: relative;
top: 50%;
top: 45%;
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">
<h1>{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}</h1>
<div class="float-left">
<span class="priceheader">
<div 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-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</span>
</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">
<label ngbButtonLabel class="btn-primary btn-sm">
<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 #sellOffers i18n="Bisq Sell Offers">Sell Offers</ng-template>
</h2>
<table class="table table-borderless table-striped">
<thead>
<th i18n>Price</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>
</thead>
<tbody>
<tr *ngFor="let offer of offers">
<td>
<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>
</td>
<td>
<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>
</td>
<td>
<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>
</td>
</tr>
</tbody>
</table>
<div class="table-container">
<table class="table table-borderless table-striped">
<thead>
<th i18n>Price</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>
</thead>
<tbody>
<tr *ngFor="let offer of offers">
<td>
<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 }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
</td>
<td>
<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 }} <span class="symbol">{{ market.lsymbol }}</span></ng-template>
</td>
<td>
<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 }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>

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

@ -1,5 +1,14 @@
.priceheader {
font-size: 24px;
@media(min-width: 576px){
float: left;
}
}
.radio-form {
@media(min-width: 576px){
float: right;
}
}
.loadingChart {
@ -11,4 +20,32 @@
#graphHolder {
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="row">
<div class="col-sm">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody *ngIf="!isLoading; else loadingTemplate">
<tr>
<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>
<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>
<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>
<td i18n="BSQ addresses">Addresses</td>
@ -33,7 +33,7 @@
<td>{{ stats.spent_txos | number }}</td>
</tr>
<tr>
<td i18n="BSQ token price">Price</td>
<td i1r8n="BSQ token price">Price</td>
<td><app-fiat [value]="price"></app-fiat></td>
</tr>
<tr>
@ -44,7 +44,7 @@
</table>
</div>
<div class="col-sm"></div>
<div class="col-md"></div>
</div>
</div>

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

@ -7,3 +7,12 @@
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">
<thead>
<th i18n>Date</th>
<th i18n>Price</th>
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: 'BTC' }"></ng-container></th>
<th>
<ng-template [ngIf]="market" [ngIfElse]="noMarket"><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }"></ng-container></ng-template>
<ng-template #noMarket i18n>Amount</ng-template>
</th>
</thead>
<tbody *ngIf="(trades$ | async) as trades; else loadingTmpl">
<tr *ngFor="let trade of trades;">
<td>
{{ 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>
<div class="table-container">
<table class="table table-borderless table-striped">
<thead>
<th i18n>Date</th>
<th i18n>Price</th>
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: 'BTC' }"></ng-container></th>
<th>
<ng-template [ngIf]="market" [ngIfElse]="noMarket"><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }"></ng-container></ng-template>
<ng-template #noMarket i18n>Amount</ng-template>
</th>
</thead>
<tbody *ngIf="(trades$ | async) as trades; else loadingTmpl">
<tr *ngFor="let trade of trades;">
<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 }} {{ (trade._market || market).lsymbol }}</ng-template>
{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
</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 }} {{ (trade._market || market).rsymbol }}</ng-template>
<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 }} <span class="symbol">{{ (trade._market || market).rsymbol }}</span></ng-template>
</td>
</ng-template>
</tr>
</tbody>
</table>
<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>
<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>
<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="row">
<div class="col-sm">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<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>
<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>
<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>
</tbody>
</table>
</div>
<div class="col-sm">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody class="mobile-even">
<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) {
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">
<h1 class="float-left mr-3 mb-md-3" i18n="shared.transaction">Transaction</h1>
<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-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>
<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-none d-lg-inline">{{ bisqTx.id }}</span>
</a>
@ -18,7 +20,7 @@
</div>
<div class="clearfix"></div>
<div class="box">
<div class="box transaction-container">
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
@ -56,12 +58,12 @@
<tr>
<td class="td-width" i18n="BSQ burnt amount">Burnt amount</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>
<td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
<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;
<app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
</td>

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

@ -1,9 +1,144 @@
.td-width {
width: 175px;
.adjust-btn-padding {
padding: 0.55rem;
}
.title-block {
padding-top: 1px;
}
@media (max-width: 767.98px) {
.td-width {
width: 150px;
.mobile-bottomcol {
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>
<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">
{{ 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 #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>
</td>
<td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since></td>
@ -44,8 +44,9 @@
</table>
<br>
<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 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>
</div>
</ng-container>
</div>

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

@ -7,3 +7,14 @@ label {
right: 0px;
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
paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 10;
paginationMaxSize = 4;
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'];

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

@ -58,11 +58,11 @@
</div>
<div>
<div class="float-left mt-2-5" *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>)
<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' }} <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 class="float-right">
<div class="btn-container">
<span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
<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>

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

@ -60,10 +60,13 @@
}
.scriptmessage {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
@media (min-width: 576px) {
max-width: 200px;
}
}
.scriptmessage.longer {
@ -74,11 +77,81 @@
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage {
max-width: 90px !important;
}
.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>
</ng-container>
<ng-template #viewFiatVin>
{{ bsq / 100 | number : digitsInfo }} BSQ
{{ bsq / 100 | number : digitsInfo }} <span class="symbol">BSQ</span>
</ng-template>

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

@ -313,20 +313,21 @@
<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/">
<img src="/resources/profile/liquid.svg" height="52">
</a>
<a href="https://opencrypto.org/">
<img src="/resources/profile/copa.png" height="62">
</a>
<a href="https://opencrypto.org/">
<img src="/resources/profile/copa.png" height="62" style="margin-left: 30px; margin-right: 30px; margin-top: 20px;">
</a>
<a href="https://bisq.network/">
<img src="/resources/profile/bisq.svg" height="62">
</a>
<a href="https://bisq.network/">
<img src="/resources/profile/bisq.svg" height="62">
</a>
</div>
<br><br>
<br><br>

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

@ -48,3 +48,25 @@
color: #FF0000;
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">
<h1 class="float-left" i18n="shared.address">Address</h1>
<a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
<span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
<span class="d-none d-lg-inline">{{ addressString }}</span>
</a>
<app-clipboard [text]="addressString"></app-clipboard>
<h1 i18n="shared.address">Address</h1>
<div class="tx-link">
<a [routerLink]="['/address/' | relativeUrl, addressString]" >
<span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
<span class="d-none d-lg-inline">{{ addressString }}</span>
</a>
<app-clipboard [text]="addressString"></app-clipboard>
</div>
<br>
<div class="clearfix"></div>
@ -13,7 +15,7 @@
<div class="box">
<div class="row">
<div class="col">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<ng-template [ngIf]="!address.electrum">
@ -28,13 +30,13 @@
</ng-template>
<tr>
<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>
</tbody>
</table>
</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">
<app-qrcode [data]="address.address"></app-qrcode>
</div>

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

@ -3,21 +3,94 @@
padding: 10px;
padding-bottom: 5px;
display: inline-block;
margin-right: 25px;
}
@media (min-width: 576px) {
.qrcode-col {
text-align: right;
.qrcode-col {
margin: 20px auto 10px;
text-align: center;
@media (min-width: 992px){
margin: 0px auto 0px;
}
}
@media (max-width: 575.98px) {
.qrcode-col {
text-align: center;
}
.qrcode-col > div {
margin-top: 20px;
margin-right: 0px;
.fiat {
display: block;
@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">
<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-template #viewFiatVin>
<ng-template [ngIf]="network === 'liquid' && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
@ -7,8 +7,8 @@
</ng-template>
<ng-template #default>
&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 === 'signet'">s</ng-template>BTC
<ng-template [ngIf]="network === 'signet'">s</ng-template>BTC</span>
</ng-template>
</ng-template>

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

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

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

@ -1,8 +1,8 @@
<div class="container-xl">
<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>
<button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right mr-2 mt-2">&#10005;</button>
<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">&#10005;</button>
</div>
<div class="clearfix"></div>
@ -43,12 +43,12 @@
<tbody>
<tr *ngIf="block.medianFee !== undefined">
<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>
<ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
<tr>
<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>
<td>{{ fees * 100000000 | number }} L-sat (<app-fiat [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>)</td>
</ng-template>
@ -56,7 +56,7 @@
<tr *ngIf="network !== 'liquid'">
<td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</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>
</tr>
</ng-template>

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

@ -1,22 +1,93 @@
.title-block {
color: #FFF;
padding-top: 20px;
padding-bottom: 3px;
border-top: 3px solid #FFF;
.qr-wrapper {
background-color: #FFF;
padding: 10px;
padding-bottom: 5px;
display: inline-block;
}
.td-width {
width: 175px;
.qrcode-col {
text-align: center;
}
@media (max-width: 767.98px) {
.td-width {
width: 140px;
.qrcode-col > div {
margin: 20px auto 5px;
@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 {
white-space: normal;
word-break: break-all;
.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;
}
}

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

@ -1,39 +1,48 @@
<table style="width: 100%;">
<tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
<td class="d-none d-md-table-cell" style="width: 33%;">
<div class="fee-estimation-wrapper">
<div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
<div class="item">
<h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
<p 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>)
</p>
</td>
<td style="width: 33%;">
<div class="card-text">
<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>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
<p 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>)
</p>
</td>
<td style="width: 33%;">
<div class="card-text">
<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>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
<p 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>)
</p>
</td>
</tr>
</table>
<div class="card-text">
<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>
</div>
</div>
</div>
</div>
<ng-template #loadingFees>
<tr>
<td class="d-none d-md-table-cell" style="width: 33%;">
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
<td style="width: 33%;">
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<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>
</td>
<td style="width: 33%;">
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
</tr>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>

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

@ -1,3 +1,84 @@
.card-title {
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">
<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 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>
</li>
</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;
position: fixed;
width: 100%;
}
@media (min-width: 992px) {
.navbar-nav {
@media (min-width: 992px) {
background: transparent;
box-shadow: none;
position: relative;
width: auto;
}
a {
font-size: 0.8em;
@media (min-width: 375px) {
font-size: 1em;
}
}
}
.navbar-collapse {
flex-basis: auto;
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">
<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 class="clearfix"></div>
@ -14,15 +14,15 @@
<tbody>
<tr>
<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>
<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>
<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>
<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 {
background-color: #2d3348;
position: relative;
top: 5px;
}
.title-block {
@ -7,4 +9,33 @@
padding-top: 20px;
padding-bottom: 3px;
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 {
margin-top: 5px;
}
@media (min-width: 576px) {
form {
@media (min-width: 576px) {
margin-top: 0px;
margin-left: 8px;
}
}
@media (min-width: 992px) {
form {
}
@media (min-width: 992px) {
width: 100%;
}
}
@ -28,30 +22,19 @@ form {
.search-box-container {
width: 100%;
}
.search-box-container input {
border: 0px;
}
.search-box-container .btn {
width: 100px;
}
@media (min-width: 768px) {
.search-box-container {
@media (min-width: 768px) {
min-width: 400px;
}
}
@media (min-width: 992px) {
.search-box-container {
min-width: 260px;
@media (min-width: 992px) {
min-width: 200px;
}
}
@media (min-width: 1200px) {
.search-box-container {
@media (min-width: 1200px) {
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="row">
<div class="col-lg-12" *ngIf="loading">
<div class="container-graph">
<div>
<div *ngIf="loading">
<div class="text-center">
<h3 i18n="statistics.loading-graphs">Loading graphs...</h3>
<br>
<div class="spinner-border text-light"></div>
</div>
</div>
<div class="col-lg-12">
<div>
<div class="card mb-3" *ngIf="mempoolStats.length">
<div class="card-header">
<i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
<form [formGroup]="radioGroupForm" style="float: right;" (click)="saveGraphPreference()">
<form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
<div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm">
@ -64,11 +60,8 @@
[options]="transactionsWeightPerSecondOptions">
</app-chartist>
</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 {
border-bottom: 0;
background-color: none;
font-size: 20px;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.card {
@ -15,12 +21,23 @@
margin-right: 10px;
}
@media (max-width: 767.98px) {
.container-xl {
padding: 0;
}
.card-body {
.card-body {
@media (max-width: 767.98px) {
padding-left: 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>
</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">
<button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">
<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;">
<div class="tx-link">
<a [routerLink]="['/tx/' | relativeUrl, txId]">
<span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ txId }}</span>
</a>
<app-clipboard [text]="txId"></app-clipboard>
</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>
<div class="clearfix"></div>
@ -163,7 +166,7 @@
</a>
</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>
</tr>
</ng-template>
@ -176,7 +179,7 @@
</a>
</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>
</tr>
</ng-template>
@ -324,12 +327,12 @@
<tbody>
<tr>
<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>
<td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</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">
&nbsp;
<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)">
<td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</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">
<app-tx-fee-rating class="d-none d-lg-inline ml-2" *ngIf="tx.fee" [tx]="tx"></app-tx-fee-rating>
</ng-template>

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

@ -6,8 +6,49 @@
color: #FFF;
padding-top: 20px;
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) {
.mobile-bottomcol {
margin-top: 15px;
@ -15,19 +56,13 @@
}
.td-width {
width: 175px;
}
width: 150px;
@media (max-width: 767.98px) {
.td-width {
width: 150px;
@media (max-width: 768px) {
width: 175px;
}
}
h1 {
margin-bottom: 0;
}
.badge {
position: relative;
top: -1px;
@ -43,4 +78,75 @@ h1 {
.arrow-red {
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 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 class="float-right">

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

@ -19,9 +19,9 @@
left: 0;
right: calc(-1*30px/3);
width: 0;
height: 0;
height: 0;
border-top: 6.66px solid transparent;
border-bottom: 6.66px solid transparent
border-bottom: 6.66px solid transparent
}
.arrow:after {
@ -38,52 +38,49 @@
}
.arrow.green:before {
border-left: 10px solid #28a745;
border-left: 10px solid #28a745;
}
.arrow.green:after {
background-color:#28a745;
background-color:#28a745;
}
.arrow.red:before {
border-left: 10px solid #dc3545;
border-left: 10px solid #dc3545;
}
.arrow.red:after {
background-color:#dc3545;
background-color:#dc3545;
}
.arrow.grey:before {
border-left: 10px solid #6c757d;
border-left: 10px solid #6c757d;
}
.arrow.grey:after {
background-color:#6c757d;
background-color:#6c757d;
}
.scriptmessage {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
width: 100%;
max-width: 50px;
@media (min-width: 768px) {
max-width: 200px;
}
}
.scriptmessage.longer {
max-width: 500px;
@media (min-width: 375px) {
max-width: 200px !important;
}
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage {
max-width: 90px !important;
}
.scriptmessage.longer {
max-width: 280px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
.mobile-bottomcol {
margin-top: 15px;
@media (min-width: 992px) {
margin-top: 0px;
}
}
@ -93,6 +90,9 @@
.details-table td {
padding: 0.75rem;
&:first-child {
white-space: pre-wrap;
}
}
.details-table td:nth-child(2) {
@ -101,3 +101,58 @@
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: 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-body">
<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>
<th style="width: 15%;" i18n="dashboard.latest-blocks.height">Height</th>
<th style="width: 35%;" 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 style="width: 30%;" i18n="dashboard.latest-blocks.size">Size</th>
<th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
<th class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
<th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
<th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
</thead>
<tbody>
<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><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>
<td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
<td class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
<td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
<td class="table-cell-size">
<div class="progress">
<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>
@ -102,19 +102,19 @@
<div class="card text-center">
<div class="card-body">
<h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
<table class="table table-borderless text-left">
<table class="table latest-transactions">
<thead>
<th style="width: 20%;" 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 *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell" 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-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
<th class="table-cell-fiat" *ngIf="(network$ | async) === ''" i18n="dashboard.latest-transactions.USD">USD</th>
<th class="table-cell-fees" i18n="dashboard.latest-transactions.fee">Fee</th>
</thead>
<tbody>
<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="text-right d-none d-lg-table-cell"><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="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-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
<td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
<td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></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>
</tbody>
</table>
@ -160,32 +160,30 @@
</ng-template>
<ng-template #mempoolTable let-mempoolInfoData>
<table style="width: 100%;">
<tr>
<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>
<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">
<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>
</td>
<td style="width: 33%;">
<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" style="max-width: 250px;">
<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 class="progress-text">{{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}</div>
</div>
<div class="mempool-info-data">
<div class="item">
<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>
<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>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
</p>
</div>
<div class="item bar">
<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>
</td>
<td class="d-none d-md-table-cell" style="width: 33%;">
<h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</ng-template>
<ng-template #txPerSecond let-mempoolInfoData>

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

@ -1,18 +1,24 @@
.dashboard-container {
padding-bottom: 60px;
}
@media (min-width: 992px) {
.dashboard-container {
@media (min-width: 992px) {
padding-bottom: 0px;
}
.table {
.fiat{
color: #ffffff66;
font-size: 10px;
}
}
}
.card {
background-color: #1d1f31;
height: 100%;
}
.card-title {
color: #4a68b9;
font-size: 1rem;
}
.info-block {
@ -33,7 +39,7 @@
}
.skeleton-loader {
max-width: 200px;
max-width: 100%;
}
.more-padding {
@ -41,5 +47,147 @@
}
.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 {
background-color: #11131f;
min-width: 320px;
padding-bottom: 60px;
}
.container {
position: relative;
padding-bottom: 60px;
}
.container-xl {
padding-bottom: 60px;
}
: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 {
font-size: 14px;
}
@ -175,6 +200,10 @@ body {
.table {
margin-bottom: 0;
font-size: 0.9rem;
@media (min-width: 576px) {
font-size: 1rem;
}
}
.close {