Audit dashboard: merge utxos and addresses tables in same page

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

@@ -1,5 +1,4 @@
-<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
+<div [ngClass]="{'widget': widget, 'address-container': !widget}">
-  <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-addresses">Liquid Federation Addresses</h1>
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>

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

@@ -1,18 +1,16 @@
+.address-container {
+  @media (min-width: 1100px) {
+    margin-left: 80px;
+    margin-right: 80px;  
+  }
+}
+
 .spinner-border {
   height: 25px;
   width: 25px;
   margin-top: 13px;
 }
 
-.container-xl {
-  max-width: 1000px;
-}
-.container-xl.widget {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-bottom: 0px;
-}
-
 tr, td, th {
   border: 0px;
   padding-top: 0.65rem !important;

frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html

@@ -2,7 +2,7 @@
   
     <div class="fee-estimation-container">
       <div class="item">
-        <a class="title-link" [routerLink]="['/audit/addresses' | relativeUrl]">
+        <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
           <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
@@ -18,7 +18,7 @@
 <ng-template #loadingData>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <a class="title-link" [routerLink]="['/audit/addresses' | relativeUrl]">
+      <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
         <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">

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

@@ -1,5 +1,4 @@
-<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
+<div [ngClass]="{'widget': 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>
 
   <div class="clearfix"></div>

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

@@ -4,15 +4,6 @@
   margin-top: 13px;
 }
 
-.container-xl {
-  max-width: 1400px;
-}
-.container-xl.widget {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-bottom: 0px;
-}
-
 tr, td, th {
   border: 0px;
   padding-top: 0.65rem !important;

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

@@ -2,7 +2,7 @@
   
     <div class="fee-estimation-container">
       <div class="item">
-        <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
+        <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
           <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
@@ -18,7 +18,7 @@
 <ng-template #loadingData>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
+      <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
         <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">

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

@@ -0,0 +1,24 @@
+<div class="container-xl">
+  <div>
+    <h1 i18n="liquid.federation-wallet">Liquid Federation Wallet</h1>
+  </div>
+
+  <div class="nav-container">
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]" routerLinkActive="active">UTXOs</a>
+        
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]" routerLinkActive="active">Addresses</a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="clearfix"></div>
+
+  <router-outlet></router-outlet>
+
+</div>
+
+<br>

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

@@ -0,0 +1,13 @@
+ul {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 767.98px) {
+  .nav-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+  }
+}

frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-federation-wallet',
+  templateUrl: './federation-wallet.component.html',
+  styleUrls: ['./federation-wallet.component.scss']
+})
+export class FederationWalletComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/liquid/liquid-master-page.module.ts

@@ -18,6 +18,7 @@ import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.c
 import { ReservesAuditDashboardComponent } from '../components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component';
 import { ReservesSupplyStatsComponent } from '../components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component';
 import { FederationUtxosStatsComponent } from '../components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component';
+import { FederationWalletComponent } from '../components/liquid-reserves-audit/federation-wallet/federation-wallet.component';
 import { FederationUtxosListComponent } from '../components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component';
 import { FederationAddressesStatsComponent } from '../components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component';
 import { FederationAddressesListComponent } from '../components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component';
@@ -88,12 +89,25 @@ const routes: Routes = [
         ]
       },
       {
-        path: 'audit/utxos',
+        path: 'audit/wallet',
-        component: FederationUtxosListComponent,
+        data: { networks: ['liquid'] },
-      },
+        component: FederationWalletComponent,
-      {
+        children: [
-        path: 'audit/addresses',
+          {
-        component: FederationAddressesListComponent,
+            path: 'utxos',
+            data: { networks: ['liquid'] },
+            component: FederationUtxosListComponent,
+          },
+          {
+            path: 'addresses',
+            data: { networks: ['liquid'] },
+            component: FederationAddressesListComponent,
+          },
+          {
+            path: '**',
+            redirectTo: 'utxos'
+          }
+        ]
       },
       {
         path: 'assets',
@@ -163,6 +177,7 @@ export class LiquidRoutingModule { }
     ReservesAuditDashboardComponent,
     ReservesSupplyStatsComponent,
     FederationUtxosStatsComponent,
+    FederationWalletComponent,
     FederationUtxosListComponent,
     FederationAddressesStatsComponent,
     FederationAddressesListComponent,