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

Fixing Bisq transactions page and skeleton loaders

Browse Source 
fixes #953
This commit is contained in:
softsimon 2021-11-27 13:06:57 +04:00
parent 8c200bc0e4
commit 9377d80dbb
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 84 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,19 @@
<div class="container-xl"> <div class="container-xl">
<div class="title-block">
<ng-template [ngIf]="!isLoading && !error"> <ng-template [ngIf]="!isLoading && !error">
<div class="title-block">
<div>
<div class="title"> <div class="title">
<h1 i18n="shared.transaction">Transaction</h1> <h1 i18n="shared.transaction">Transaction</h1>
</div> </div>
<div class="tx-link"> <span class="tx-link float-left">
<a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]"> <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>
<app-clipboard [text]="bisqTx.id"></app-clipboard> <app-clipboard [text]="bisqTx.id"></app-clipboard>
</div> </span>
<span class="grow"></span>
<div class="container-buttons"> <div class="container-buttons">
<button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right"> <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>
@ -22,6 +21,8 @@
<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> </div>
</div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="box transaction-container"> <div class="box transaction-container">
@ -84,25 +85,33 @@
<br> <br>
<h2 i18n="transaction.details">Details</h2> <div class="title">
<h2 i18n="transaction.details">Details</h2>
</div>
<app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details> <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
<br> <br>
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2> <div class="title">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>
<app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers> <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
<br> <br>
</div> </ng-template>
</ng-template>
<ng-template [ngIf="isLoading && !error"> <ng-template [ngIf]="isLoading && !error">
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="title-block">
<div class="title">
<h1 i18n="shared.transaction">Transaction</h1>
</div>
</div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
@ -112,6 +121,14 @@
<td class="td-width"><span class="skeleton-loader"></span></td> <td class="td-width"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
<tr>
<td class="td-width"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td class="td-width"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -122,6 +139,10 @@
<td class="td-width"><span class="skeleton-loader"></span></td> <td class="td-width"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
<tr>
<td class="td-width"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -130,7 +151,10 @@
<br> <br>
<h2 i18n="transaction.details">Details</h2> <div class="title">
<h2 i18n="transaction.details">Details</h2>
</div>
<div class="box"> <div class="box">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
@ -151,18 +175,30 @@
<br> <br>
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2> <div class="title">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<table class="table table-borderless table-striped"> <div class="col-sm">
<tbody> <table class="table table-borderless table-striped">
<tr> <tbody>
<td><span class="skeleton-loader"></span></td> <tr>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
@ -178,4 +214,4 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>

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

@ -285,24 +285,39 @@
<br> <br>
<h2>Inputs & Outputs</h2> <div class="title">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<table class="table table-borderless table-striped"> <div class="col-sm">
<tbody> <table class="table table-borderless table-striped">
<tr> <tbody>
<td><span class="skeleton-loader"></span></td> <tr>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
<br> <br>
<h2 i18n="transaction.details">Details</h2> <div class="title">
<h2 i18n="transaction.details">Details</h2>
</div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">