Skeleton audit dashboard

frontend/src/app/components/liquid-master-page/liquid-master-page.component.html

@@ -79,7 +79,7 @@
         <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-audit">
-        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="BTC Reserves Audit"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>

frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html

@@ -1,4 +1,4 @@
-<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
+<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
   <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-utxos">Liquid Federation UTXOs</h1>
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
@@ -10,8 +10,8 @@
         <th class="txid text-left" [ngClass]="{'widget': widget}">Output</th>
         <th class="address text-left" *ngIf="!widget">Address</th>
         <th class="amount text-right" [ngClass]="{'widget': widget}">Amount</th>
-        <th class="pegin text-right" *ngIf="!widget">Liquid Peg-in</th>
+        <th class="pegin text-left" *ngIf="!widget">Liquid Peg-in</th>
-        <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
+        <th class="timestamp text-left" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
       <tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
@@ -24,7 +24,7 @@
             <td class="amount text-right widget">
               <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
             </td>
-            <td class="timestamp text-right widget" [ngClass]="{'widget': widget}">
+            <td class="timestamp text-left widget">
               <app-time kind="since" [time]="utxo.blocktime"></app-time>
             </td>
           </tr>
@@ -49,7 +49,7 @@
                 <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
               </a>
             </td>
-            <td class="timestamp text-right">
+            <td class="timestamp text-left">
               &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
               <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
             </td>
@@ -57,22 +57,38 @@
         </ng-template>
       </tbody>
       <ng-template #skeleton>
-        <tbody>
+        <tbody *ngIf="widget; else regularRowsSkeleton">
           <tr *ngFor="let item of skeletonLines">
-            <td class="txid text-left" [ngClass]="{'widget': widget}">
+            <td class="txid text-left widget">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
+              <span class="skeleton-loader" style="max-width: 190px"></span>
             </td>
-            <td class="address text-left" [ngClass]="{'widget': widget}">
+            <td class="amount text-right widget">
-              <span class="skeleton-loader" style="max-width: 125px"></span>
+              <span class="skeleton-loader" style="max-width: 140px"></span>
             </td>
-            <td class="amount" *ngIf="!widget">
+            <td class="timestamp text-left widget">
-              <span class="skeleton-loader" style="max-width: 150px"></span>
+              <span class="skeleton-loader" style="max-width: 200px"></span>
-            </td>
-            <td class="timestamp" *ngIf="!widget">
-              <span class="skeleton-loader" style="max-width: 125px"></span>
             </td>
           </tr>
         </tbody>
+        <ng-template #regularRowsSkeleton>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="txid text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="address text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="amount text-right">
+              <span class="skeleton-loader" style="max-width: 140px"></span>
+            </td>
+            <td class="pegin text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="timestamp text-left">
+              <span class="skeleton-loader" style="max-width: 140px"></span>
+            </td>
+          </tr>
+        </ng-template>
       </ng-template>
     </table>
 

frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss

@@ -9,6 +9,7 @@
 }
 .container-xl.widget {
   padding-left: 0px;
+  padding-right: 0px;
   padding-bottom: 0px;
 }
 
@@ -43,7 +44,7 @@ tr, td, th {
   max-width: 160px;
 }
 .txid.widget {
-  width: 50%;
+  width: 40%;
   
 }
 
@@ -61,7 +62,7 @@ tr, td, th {
   width: 12%;
 }
 .amount.widget {
-  width: 25%;
+  width: 30%;
 }
 
 .pegin {
@@ -84,7 +85,8 @@ tr, td, th {
   }
 }
 .timestamp.widget {
-  width: 25%;
+  width: 30%;
+  padding-right: 0px !important;
   @media (min-width: 768px) AND (max-width: 1050px) {
     display: none;
   }

frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html

@@ -45,13 +45,57 @@
 </div>
 
 
-<ng-template #loadingTransactions>
+<ng-template #loadingSkeleton>
-  <div class="skeleton-loader skeleton-loader-transactions"></div>
+  <div class="container-xl dashboard-container">
+
+    <div class="row row-cols-1 row-cols-md-2">
+  
+      <div class="col">
+        <div class="main-title">
+          <span i18n="liquid.bitcoin-reserves">BTC Reserves</span>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <app-reserves-supply-stats></app-reserves-supply-stats>
+            <app-reserves-ratio></app-reserves-ratio>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col">
+        <div class="main-title">
+          <span i18n="liquid.federation-utxos">Liquid Federation UTXOs</span>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <app-federation-utxos-stats></app-federation-utxos-stats>
+            <app-federation-utxos-list [widget]="true"></app-federation-utxos-list>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col" style="margin-bottom: 1.47rem">
+        <div class="card graph-card">
+          <div class="card-body pl-2 pr-2">
+            <!-- The historical ratio chart -->
+          </div>
+        </div>
+      </div>
+  
+      <div class="col" style="margin-bottom: 1.47rem">
+        <div class="card graph-card">
+          <div class="card-body pl-2 pr-2">
+            <!-- The addresses table -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #auditInProgress>
-  <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingTransactions">
+  <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingSkeleton">
-    <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingTransactions">
+    <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingSkeleton">
       <span i18n="liquid.audit-in-progress">Audit in progress: block {{ auditStatus.lastBlockAudit }} / {{ auditStatus.bitcoinHeaders }}</span>
     </div>
   </ng-container>