Liquid: Display block times and amounts correctly.

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

@@ -2,5 +2,10 @@
   <span>{{ conversions.USD * (satoshis / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
 </ng-container>
 <ng-template #viewFiatVin>
-  {{ satoshis / 100000000 | number : '1.8-8' }} BTC
+  <ng-template [ngIf]="network === 'liquid' && !satoshis" [ngIfElse]="default">
+    Confidential
+  </ng-template>
+  <ng-template #default>
+    {{ satoshis / 100000000 | number : '1.8-8' }} BTC
+  </ng-template>
 </ng-template>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-amount',
@@ -11,6 +12,7 @@ import { Observable } from 'rxjs';
 export class AmountComponent implements OnInit {
   conversions$: Observable<any>;
   viewFiat$: Observable<boolean>;
+  network = environment.network;
 
   @Input() satoshis: number;
 

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

@@ -77,7 +77,7 @@ export class BlockComponent implements OnInit, OnDestroy {
       ),
     )
     .subscribe((transactions: Transaction[]) => {
-      if (this.fees === undefined) {
+      if (this.fees === undefined && transactions[0]) {
         this.fees = transactions[0].vout.reduce((acc: number, curr: Vout) => acc + curr.value, 0) / 100000000 - this.blockSubsidy;
       }
       this.transactions = transactions;

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -9,7 +9,14 @@
           </div>
           <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
           <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
-          <div class="time-difference" *ngIf="projectedBlock.blockVSize < 1000000">In ~{{ 10 * i + 10 }} minutes</div>
+          <div class="time-difference" *ngIf="projectedBlock.blockVSize < 1000000">
+            <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
+              In &lt; {{ 1 * i + 1 }} minute
+            </ng-template>
+            <ng-template #timeDiffMainnet>
+              In ~{{ 10 * i + 10 }} minutes
+            </ng-template>
+          </div>
           <ng-template [ngIf]="i === mempoolBlocks.length - 1 && projectedBlock.blockVSize >= 1000000">
             <div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
           </ng-template>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -4,7 +4,7 @@ import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
 import { take } from 'rxjs/operators';
-
+import { environment } from '../../../environments/environment';
 @Component({
   selector: 'app-mempool-blocks',
   templateUrl: './mempool-blocks.component.html',
@@ -14,6 +14,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   mempoolBlocks: MempoolBlock[];
   mempoolBlocksFull: MempoolBlock[];
   mempoolBlocksSubscription: Subscription;
+  network = environment.network;
 
   blockWidth = 125;
   blockPadding = 30;

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

@@ -102,7 +102,12 @@
                       <span class="skeleton-loader"></span>
                     </ng-template>
                     <ng-template #estimationTmpl>
-                      ~{{ 10 * txInBlockIndex + 10 }} minutes <i>({{ txInBlockIndex + 1 }} block{{ txInBlockIndex > 0 ? 's' : '' }})</i>
+                      <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeEstimateDefault">
+                        &lt; {{ 1 * txInBlockIndex + 1 }} minutes <i>({{ txInBlockIndex + 1 }} block{{ txInBlockIndex > 0 ? 's' : '' }})</i>
+                      </ng-template>
+                      <ng-template #timeEstimateDefault>
+                        ~{{ 10 * txInBlockIndex + 10 }} minutes <i>({{ txInBlockIndex + 1 }} block{{ txInBlockIndex > 0 ? 's' : '' }})</i>
+                      </ng-template>
                     </ng-template>
                   </td>
                 </tr>

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

@@ -9,6 +9,7 @@ import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-transaction',
@@ -16,6 +17,7 @@ import { SeoService } from 'src/app/services/seo.service';
   styleUrls: ['./transaction.component.scss']
 })
 export class TransactionComponent implements OnInit, OnDestroy {
+  network = environment.network;
   tx: Transaction;
   txId: string;
   feeRating: number;

frontend/src/environments/environment.prod.ts

@@ -1,3 +1,8 @@
+const full = window.location.host;
+const parts = full.split('.');
+const sub = parts[0];
+
 export const environment = {
-  production: true
+  production: true,
+  network: sub,
 };