Merge branch 'master' into nymkappa/feature/update-api-case

frontend/src/app/app-routing.module.ts

@@ -500,7 +500,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             },
             {
               path: '**',
-              redirectTo: 'all'
+              redirectTo: 'featured'
             }
           ]
         },

frontend/src/app/components/address/address.component.html

@@ -66,9 +66,14 @@
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
-        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
-          <span class="skeleton-loader"></span>
-        </div>
+
+        <ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
+          <div class="header-bg box" style="padding: 12px; margin-bottom: 10px;">
+            <div class="progress progress-dark">
+              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
+            </div>
+          </div>
+        </ng-container>
 
         <div class="header-bg box">
           <div class="row" style="height: 107px;">
@@ -81,13 +86,6 @@
           </div>
         </div>
 
-        <ng-container *ngIf="addressLoadingStatus$ | async as addressLoadingStatus">
-          <br>
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
-          </div>
-        </ng-container>
-
       </ng-template>
 
       <ng-template [ngIf]="retryLoadMore">
@@ -155,3 +153,9 @@
 <ng-template #confidentialTd>
   <td i18n="shared.confidential">Confidential</td>
 </ng-template>
+
+<ng-template #headerLoader>
+  <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+    <span class="skeleton-loader"></span>
+  </div>
+</ng-template>

frontend/src/app/components/block/block.component.html

@@ -200,9 +200,13 @@
     <ng-template [ngIf]="isLoadingTransactions">
       <div class="text-center mb-4" class="tx-skeleton">
 
-        <div class="header-bg box">
-          <span class="skeleton-loader"></span>
-        </div>
+        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
+          <div class="header-bg box">
+            <div class="progress progress-dark" style="margin: 4px; height: 14px;">
+              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
+            </div>
+          </div>
+        </ng-container>
 
         <div class="header-bg box">
           <div class="row">
@@ -215,14 +219,6 @@
             </div>
           </div>
         </div>
-
-        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus">
-          <br>
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
-          </div>
-        </ng-container>
-
       </div>
     </ng-template>
     <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
@@ -281,6 +277,12 @@
     </div>
   </ng-template>
 
+  <ng-template #headerLoader>
+    <div class="header-bg box">
+      <span class="skeleton-loader"></span>
+    </div>
+  </ng-template>
+
 </div>
 
 <br>

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

@@ -38,7 +38,7 @@
         <a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
-        <a class="nav-link" [routerLink]="['/graphs/mempool' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
       <li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
         <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>

frontend/src/app/components/reward-stats/reward-stats.component.html

@@ -8,7 +8,7 @@
           <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
         </div>
         <span class="fiat">
-          <app-fiat [value]="rewardStats.totalReward"></app-fiat>
+          <app-fiat [value]="rewardStats.totalReward" digitsInfo="1.0-0" ></app-fiat>
         </span>
       </div>
     </div>
@@ -26,7 +26,7 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Reward Per Tx</h5>
+      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
       <div class="card-text" i18n-ngbTooltip="mining.average-fee"
         ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
         <div class="fee-text">{{ rewardStats.feePerTx | amountShortener: 2 }}

frontend/src/app/components/transaction/transaction.component.ts

@@ -125,7 +125,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
         }),
         switchMap(() => {
           let transactionObservable$: Observable<Transaction>;
-          if (history.state.data) {
+          if (history.state.data && history.state.data.fee !== -1) {
             transactionObservable$ = of(history.state.data);
           } else {
             transactionObservable$ = this.electrsApiService

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -60,7 +60,10 @@
                     </ng-container>
                     <ng-container *ngSwitchDefault>
                       <ng-template [ngIf]="!vin.prevout" [ngIfElse]="defaultAddress">
-                        <span>{{ vin.issuance ? 'Issuance' : 'UNKNOWN' }}</span>
+                        <span *ngIf="vin.lazy; else defaultNoPrevout" class="skeleton-loader"></span>
+                        <ng-template #defaultNoPrevout>
+                          <span>{{ vin.issuance ? 'Issuance' : 'UNKNOWN' }}</span>
+                        </ng-template>
                       </ng-template>
                       <ng-template #defaultAddress>
                         <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
@@ -87,6 +90,7 @@
                     </ng-template>
                   </ng-template>
                   <ng-template #defaultOutput>
+                    <span *ngIf="vin.lazy" class="skeleton-loader"></span>
                     <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
                   </ng-template>
                 </td>
@@ -141,7 +145,7 @@
             </ng-template>
             <tr *ngIf="tx.vin.length > 12 && tx['@vinLimit']">
               <td colspan="3" class="text-center">
-                <button class="btn btn-sm btn-primary mt-2" (click)="tx['@vinLimit'] = false;"><span i18n="show-all">Show all</span> ({{ tx.vin.length - 10 }})</button>
+                <button class="btn btn-sm btn-primary mt-2" (click)="loadMoreInputs(tx);"><span i18n="show-all">Show all</span> ({{ tx.vin.length - 10 }})</button>
               </td>
             </tr>
           </tbody>
@@ -261,9 +265,10 @@
     </div>
 
     <div class="summary">
-      <div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase">
+      <div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
         {{ tx.fee / (tx.weight / 4) | feeRounding }} <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-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show all inputs to reveal fee data</div>
 
       <div class="float-right">
         <ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -139,4 +139,10 @@ h2 {
 
 .addr-right {
 	font-family: monospace;
-}
+}
+
+.grey-info-text {
+	color:#6c757d;
+	font-style: italic;
+	font-size: 12px;
+}

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -175,6 +175,17 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     }
   }
 
+  loadMoreInputs(tx: Transaction) {
+    tx['@vinLimit'] = false;
+
+    this.electrsApiService.getTransaction$(tx.txid)
+      .subscribe((newTx) => {
+        tx.vin = newTx.vin;
+        tx.fee = newTx.fee;
+        this.ref.markForCheck();
+      });
+  }
+
   ngOnDestroy() {
     this.outspendsSubscription.unsubscribe();
   }

frontend/src/app/docs/api-docs/api-docs-data.ts

@@ -13,6 +13,7 @@ const showJsExamplesDefault = { "": true, "testnet": true, "signet": true, "liqu
 const showJsExamplesDefaultFalse = { "": false, "testnet": false, "signet": false, "liquid": false, "liquidtestnet": false, "bisq": false };
 
 export const wsApiDocsData = {
+  showJsExamples: showJsExamplesDefault,
   codeTemplate: {
     curl: `/api/v1/ws`,
     commonJS: `
@@ -2967,7 +2968,7 @@ export const restApiDocsData = [
     "weight": 3931749,
     "previousblockhash": "00000000000000000002b5b2afc1c62e61e53f966b965a9a8ce99112e24066ae"
   },
-  ...        
+  ...
 ]`,
         },
         codeSampleTestnet: {
@@ -3047,7 +3048,7 @@ export const restApiDocsData = [
     "emptyBlocks": 0,
     "slug": "antpool"
   },
-  ...  
+  ...
   "oldestIndexedBlockTimestamp": 1231006505,
   "blockCount": 1005,
   "lastEstimatedHashrate": 230086716765559200000

frontend/src/app/docs/api-docs/api-docs.component.html

@@ -101,7 +101,7 @@
             <div class="subtitle" i18n>Description</div>
             <div i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-blocks</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</div>
           </div>
-          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" ></app-code-template>
+          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" [showCodeExample]="wsDocs.showJsExamples"></app-code-template>
         </div>
       </div>
     </div>

frontend/src/app/graphs/graphs.routing.module.ts

@@ -7,6 +7,7 @@ import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weigh
 import { GraphsComponent } from '../components/graphs/graphs.component';
 import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
 import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
+import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
 import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
 import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
@@ -17,10 +18,15 @@ import { StatisticsComponent } from '../components/statistics/statistics.compone
 import { TelevisionComponent } from '../components/television/television.component';
 import { DashboardComponent } from '../dashboard/dashboard.component';
 
+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+const isLiquid = browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid';
+
 const routes: Routes = [
   {
     path: '',
-    component: MasterPageComponent,
+    component: isLiquid ? LiquidMasterPageComponent : MasterPageComponent,
     children: [
       {
         path: 'mining/pool/:slug',
@@ -82,6 +88,10 @@ const routes: Routes = [
             path: 'mining/block-sizes-weights',
             component: BlockSizesWeightsGraphComponent,
           },
+          {
+            path: '',
+            redirectTo: 'mempool',
+          },
         ]
       },
       {

frontend/src/app/interfaces/electrs.interface.ts

@@ -54,6 +54,8 @@ export interface Vin {
   // Elements
   is_pegin?: boolean;
   issuance?: Issuance;
+  // Custom
+  lazy?: boolean;
 }
 
 interface Issuance {