apply custom favicons

Fix time traveling balance charts

backend/src/api/rbf-cache.ts

@@ -119,7 +119,11 @@ class RbfCache {
 
 
   public add(replaced: MempoolTransactionExtended[], newTxExtended: MempoolTransactionExtended): void {
-    if (!newTxExtended || !replaced?.length || this.txs.has(newTxExtended.txid)) {
+    if ( !newTxExtended
+      || !replaced?.length
+      || this.txs.has(newTxExtended.txid)
+      || !(replaced.some(tx => !this.replacedBy.has(tx.txid)))
+    ) {
       return;
     }
 

backend/src/api/services/services-routes.ts

@@ -7,6 +7,7 @@ class ServicesRoutes {
   public initRoutes(app: Application): void {
     app
       .get(config.MEMPOOL.API_URL_PREFIX + 'wallet/:walletId', this.$getWallet)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/custom/config', this.$getCustomConfig)
     ;
   }
 
@@ -22,6 +23,11 @@ class ServicesRoutes {
       handleError(req, res, 500, 'Failed to get wallet');
     }
   }
+
+  // serve a blank custom config file by default
+  private async $getCustomConfig(req: Request, res: Response): Promise<void> {
+    res.status(200).contentType('application/javascript').send('');
+  }
 }
 
 export default new ServicesRoutes();

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts

@@ -613,7 +613,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
               return;
             }
             const verificationToken = await this.$verifyBuyer(this.payments, tokenResult.token, tokenResult.details, costUSD.toFixed(2));
-            if (!verificationToken) {
+            if (!verificationToken || !verificationToken.token) {
               console.error(`SCA verification failed`);
               this.accelerateError = 'SCA Verification Failed. Payment Declined.';
               this.processing = false;
@@ -623,10 +623,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
             this.servicesApiService.accelerateWithGooglePay$(
               this.tx.txid,
               tokenResult.token,
-              verificationToken,
+              verificationToken.token,
               cardTag,
               `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-              costUSD
+              costUSD,
+              verificationToken.userChallenged
             ).subscribe({
               next: () => {
                 this.processing = false;
@@ -752,9 +753,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   /**
-   * Required in SCA Mandated Regions: Learn more at https://developer.squareup.com/docs/sca-overview
+   * https://developer.squareup.com/docs/sca-overview
    */
-  async $verifyBuyer(payments, token, details, amount) {
+  async $verifyBuyer(payments, token, details, amount): Promise<{token: string, userChallenged: boolean}> {
     const verificationDetails = {
       amount: amount,
       currencyCode: 'USD',
@@ -774,7 +775,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       token,
       verificationDetails,
     );
-    return verificationResults.token;
+    return verificationResults;
   }
 
   /**

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -46,6 +46,8 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
 
   aggregatedHistory$: Observable<any>;
   statsSubscription: Subscription;
+  aggregatedHistorySubscription: Subscription;
+  fragmentSubscription: Subscription;
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
@@ -79,8 +81,8 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
     }
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
-    
-    this.route.fragment.subscribe((fragment) => {
+
+    this.fragmentSubscription = this.route.fragment.subscribe((fragment) => {
       if (['24h', '3d', '1w', '1m', '3m', 'all'].indexOf(fragment) > -1) {
         this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
       }
@@ -113,7 +115,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
       share(),
     );
 
-    this.aggregatedHistory$.subscribe();
+    this.aggregatedHistorySubscription = this.aggregatedHistory$.subscribe();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -335,8 +337,8 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
   }
 
   ngOnDestroy(): void {
-    if (this.statsSubscription) {
-      this.statsSubscription.unsubscribe();
-    }
+    this.aggregatedHistorySubscription?.unsubscribe();
+    this.fragmentSubscription?.unsubscribe();
+    this.statsSubscription?.unsubscribe();
   }
 }

frontend/src/app/components/address-graph/address-graph.component.ts

@@ -478,25 +478,30 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   }
 
   extendSummary(summary) {
-    let extendedSummary = summary.slice();
+    const extendedSummary = summary.slice();
 
     // Add a point at today's date to make the graph end at the current time
     extendedSummary.unshift({ time: Date.now() / 1000, value: 0 });
-    extendedSummary.reverse();
 
-    let oneHour = 60 * 60;
+    let maxTime = Date.now() / 1000;
+
+    const oneHour = 60 * 60;
     // Fill gaps longer than interval
     for (let i = 0; i < extendedSummary.length - 1; i++) {
-      let hours = Math.floor((extendedSummary[i + 1].time - extendedSummary[i].time) / oneHour);      
+      if (extendedSummary[i].time > maxTime) {
+        extendedSummary[i].time = maxTime - 30;
+      }
+      maxTime = extendedSummary[i].time;
+      const hours = Math.floor((extendedSummary[i].time - extendedSummary[i + 1].time) / oneHour);
       if (hours > 1) {
         for (let j = 1; j < hours; j++) {
-          let newTime = extendedSummary[i].time + oneHour * j;
+          const newTime = extendedSummary[i].time - oneHour * j;
           extendedSummary.splice(i + j, 0, { time: newTime, value: 0 });
         }
         i += hours - 1;
       }
     }
 
-    return extendedSummary.reverse();
+    return extendedSummary;
   }
 }

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

@@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {
-    if (event.target instanceof HTMLInputElement) {
+    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
       return;
     }
     // prevent arrow key horizontal scrolling

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -172,13 +172,19 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   ngOnDestroy(): void {
     if (this.animationFrameRequest) {
       cancelAnimationFrame(this.animationFrameRequest);
-      clearTimeout(this.animationHeartBeat);
     }
+    clearTimeout(this.animationHeartBeat);
     if (this.canvas) {
       this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
       this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
-      this.themeChangedSubscription?.unsubscribe();
     }
+    if (this.scene) {
+      this.scene.destroy();
+    }
+    this.vertexArray.destroy();
+    this.vertexArray = null;
+    this.themeChangedSubscription?.unsubscribe();
+    this.searchSubscription?.unsubscribe();
   }
 
   clear(direction): void {
@@ -447,7 +453,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
     this.applyQueuedUpdates();
     // skip re-render if there's no change to the scene
-    if (this.scene && this.gl) {
+    if (this.scene && this.gl && this.vertexArray) {
       /* SET UP SHADER UNIFORMS */
       // screen dimensions
       this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);
@@ -489,9 +495,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.running && this.scene && now <= (this.scene.animateUntil + 500)) {
       this.doRun();
     } else {
-      if (this.animationHeartBeat) {
-        clearTimeout(this.animationHeartBeat);
-      }
+      clearTimeout(this.animationHeartBeat);
       this.animationHeartBeat = window.setTimeout(() => {
         this.start();
       }, 1000);

frontend/src/app/components/block-overview-graph/fast-vertex-array.ts

@@ -19,6 +19,7 @@ export class FastVertexArray {
   freeSlots: number[];
   lastSlot: number;
   dirty = false;
+  destroyed = false;
 
   constructor(length, stride) {
     this.length = length;
@@ -32,6 +33,9 @@ export class FastVertexArray {
   }
 
   insert(sprite: TxSprite): number {
+    if (this.destroyed) {
+      return;
+    }
     this.count++;
 
     let position;
@@ -45,11 +49,14 @@ export class FastVertexArray {
       }
     }
     this.sprites[position] = sprite;
-    return position;
     this.dirty = true;
+    return position;
   }
 
   remove(index: number): void {
+    if (this.destroyed) {
+      return;
+    }
     this.count--;
     this.clearData(index);
     this.freeSlots.push(index);
@@ -61,20 +68,26 @@ export class FastVertexArray {
   }
 
   setData(index: number, dataChunk: number[]): void {
+    if (this.destroyed) {
+      return;
+    }
     this.data.set(dataChunk, (index * this.stride));
     this.dirty = true;
   }
 
-  clearData(index: number): void {
+  private clearData(index: number): void {
     this.data.fill(0, (index * this.stride), ((index + 1) * this.stride));
     this.dirty = true;
   }
 
   getData(index: number): Float32Array {
+    if (this.destroyed) {
+      return;
+    }
     return this.data.subarray(index, this.stride);
   }
 
-  expand(): void {
+  private expand(): void {
     this.length *= 2;
     const newData = new Float32Array(this.length * this.stride);
     newData.set(this.data);
@@ -82,7 +95,7 @@ export class FastVertexArray {
     this.dirty = true;
   }
 
-  compact(): void {
+  private compact(): void {
     // New array length is the smallest power of 2 larger than the sprite count (but no smaller than 512)
     const newLength = Math.max(512, Math.pow(2, Math.ceil(Math.log2(this.count))));
     if (newLength !== this.length) {
@@ -110,4 +123,13 @@ export class FastVertexArray {
   getVertexData(): Float32Array {
     return this.data;
   }
+
+  destroy(): void {
+    this.data = null;
+    this.sprites = null;
+    this.freeSlots = null;
+    this.lastSlot = 0;
+    this.dirty = false;
+    this.destroyed = true;
+  }
 }

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

@@ -116,7 +116,7 @@ export class BlockViewComponent implements OnInit, OnDestroy {
         this.isLoadingBlock = false;
         this.isLoadingOverview = true;
       }),
-      shareReplay(1)
+      shareReplay({ bufferSize: 1, refCount: true })
     );
 
     this.overviewSubscription = block$.pipe(
@@ -176,5 +176,8 @@ export class BlockViewComponent implements OnInit, OnDestroy {
     if (this.queryParamsSubscription) {
       this.queryParamsSubscription.unsubscribe();
     }
+    if (this.blockGraph) {
+      this.blockGraph.destroy();
+    }
   }
 }

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

@@ -117,7 +117,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
         this.openGraphService.waitOver('block-data-' + this.rawId);
       }),
       throttleTime(50, asyncScheduler, { leading: true, trailing: true }),
-      shareReplay(1)
+      shareReplay({ bufferSize: 1, refCount: true })
     );
 
     this.overviewSubscription = block$.pipe(

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

@@ -1,8 +1,8 @@
 import { Component, OnInit, OnDestroy, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
 import { Location } from '@angular/common';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ActivatedRoute, ParamMap, Params, Router } from '@angular/router';
 import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter } from 'rxjs/operators';
+import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter, take } from 'rxjs/operators';
 import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest, forkJoin } from 'rxjs';
 import { StateService } from '@app/services/state.service';
 import { SeoService } from '@app/services/seo.service';
@@ -68,6 +68,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
   numUnexpected: number = 0;
   mode: 'projected' | 'actual' = 'projected';
+  currentQueryParams: Params;
 
   overviewSubscription: Subscription;
   accelerationsSubscription: Subscription;
@@ -80,8 +81,8 @@ export class BlockComponent implements OnInit, OnDestroy {
   timeLtr: boolean;
   childChangeSubscription: Subscription;
   auditPrefSubscription: Subscription;
+  isAuditEnabledSubscription: Subscription;
   oobSubscription: Subscription;
-  
   priceSubscription: Subscription;
   blockConversion: Price;
 
@@ -118,7 +119,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.setAuditAvailable(this.auditSupported);
 
     if (this.auditSupported) {
-      this.isAuditEnabledFromParam().subscribe(auditParam => {
+      this.isAuditEnabledSubscription = this.isAuditEnabledFromParam().subscribe(auditParam => {
         if (this.auditParamEnabled) {
           this.auditModeEnabled = auditParam;
         } else {
@@ -281,7 +282,7 @@ export class BlockComponent implements OnInit, OnDestroy {
         }
       }),
       throttleTime(300, asyncScheduler, { leading: true, trailing: true }),
-      shareReplay(1)
+      shareReplay({ bufferSize: 1, refCount: true })
     );
 
     this.overviewSubscription = this.block$.pipe(
@@ -363,6 +364,7 @@ export class BlockComponent implements OnInit, OnDestroy {
       .subscribe((network) => this.network = network);
 
     this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
+      this.currentQueryParams = params;
       if (params.showDetails === 'true') {
         this.showDetails = true;
       } else {
@@ -414,6 +416,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.stateService.markBlock$.next({});
     this.overviewSubscription?.unsubscribe();
+    this.accelerationsSubscription?.unsubscribe();
     this.keyNavigationSubscription?.unsubscribe();
     this.blocksSubscription?.unsubscribe();
     this.cacheBlocksSubscription?.unsubscribe();
@@ -421,8 +424,16 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.queryParamsSubscription?.unsubscribe();
     this.timeLtrSubscription?.unsubscribe();
     this.childChangeSubscription?.unsubscribe();
-    this.priceSubscription?.unsubscribe();
+    this.auditPrefSubscription?.unsubscribe();
+    this.isAuditEnabledSubscription?.unsubscribe();
     this.oobSubscription?.unsubscribe();
+    this.priceSubscription?.unsubscribe();
+    this.blockGraphProjected.forEach(graph => {
+      graph.destroy();
+    });
+    this.blockGraphActual.forEach(graph => {
+      graph.destroy();
+    });
   }
 
   // TODO - Refactor this.fees/this.reward for liquid because it is not
@@ -733,19 +744,18 @@ export class BlockComponent implements OnInit, OnDestroy {
   toggleAuditMode(): void {
     this.stateService.hideAudit.next(this.auditModeEnabled);
 
-    this.route.queryParams.subscribe(params => {
-      const queryParams = { ...params };
-      delete queryParams['audit'];
+    const queryParams = { ...this.currentQueryParams };
+    delete queryParams['audit'];
 
-      let newUrl = this.router.url.split('?')[0];
-      const queryString = new URLSearchParams(queryParams).toString();
-      if (queryString) {
-        newUrl += '?' + queryString;
-      }
-  
-      this.location.replaceState(newUrl);
-    });
+    let newUrl = this.router.url.split('?')[0];
+    const queryString = new URLSearchParams(queryParams).toString();
+    if (queryString) {
+      newUrl += '?' + queryString;
+    }
+    this.location.replaceState(newUrl);
 
+    // avoid duplicate subscriptions
+    this.auditPrefSubscription?.unsubscribe();
     this.auditPrefSubscription = this.stateService.hideAudit.subscribe((hide) => {
       this.auditModeEnabled = !hide;
       this.showAudit = this.auditAvailable && this.auditModeEnabled;
@@ -762,7 +772,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     return this.route.queryParams.pipe(
       map(params => {
         this.auditParamEnabled = 'audit' in params;
-        
+
         return this.auditParamEnabled ? !(params['audit'] === 'false') : true;
       })
     );

frontend/src/app/components/custom-dashboard/custom-dashboard.component.html

@@ -281,9 +281,11 @@
           <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
             <div class="card">
               <div class="card-body">
-                <span class="title-link">
+                <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/wallet/' + widget.props.wallet | relativeUrl]">
                   <h5 class="card-title d-inline" i18n="dashboard.treasury-transactions">Treasury Transactions</h5>
-                </span>
+                  <span>&nbsp;</span>
+                  <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
+                </a>
                 <app-address-transactions-widget [addressSummary$]="walletSummary$"></app-address-transactions-widget>
               </div>
             </div>

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

@@ -162,6 +162,9 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     this.cacheBlocksSubscription?.unsubscribe();
     this.networkChangedSubscription?.unsubscribe();
     this.queryParamsSubscription?.unsubscribe();
+    this.blockGraphs.forEach(graph => {
+      graph.destroy();
+    });
   }
 
   shiftTestBlocks(): void {

frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts

@@ -120,6 +120,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   }
 
   ngOnDestroy(): void {
+    this.blockGraph?.destroy();
     this.blockSub.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
     this.websocketService.stopTrackMempoolBlock();

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

@@ -24,6 +24,7 @@
           [height]="tx?.status?.block_height"
           [replaced]="replaced"
           [removed]="this.rbfInfo?.mined && !this.tx?.status?.confirmed"
+          [cached]="isCached"
         ></app-confirmations>
       </div>
     </ng-container>

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

@@ -240,7 +240,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         retry({ count: 2, delay: 2000 }),
         // Try again until we either get a valid response, or the transaction is confirmed
         repeat({ delay: 2000 }),
-        filter((transactionTimes) => transactionTimes?.length && transactionTimes[0] > 0 && !this.tx.status?.confirmed),
+        filter((transactionTimes) => transactionTimes?.[0] > 0 || this.tx.status?.confirmed),
         take(1),
       )),
     )

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

@@ -202,12 +202,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             for (const address of this.addresses) {
               switch (address.length) {
                 case 130: {
-                  if (v.scriptpubkey === '21' + address + 'ac') {
+                  if (v.scriptpubkey === '41' + address + 'ac') {
                     return v.value;
                   }
                 } break;
                 case 66: {
-                  if (v.scriptpubkey === '41' + address + 'ac') {
+                  if (v.scriptpubkey === '21' + address + 'ac') {
                     return v.value;
                   }
                 } break;
@@ -224,12 +224,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             for (const address of this.addresses) {
               switch (address.length) {
                 case 130: {
-                  if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
+                  if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
                     return v.prevout?.value;
                   }
                 } break;
                 case 66: {
-                  if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
+                  if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
                     return v.prevout?.value;
                   }
                 } break;

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

@@ -1,6 +1,6 @@
 <div class="container-xl" [class.liquid-address]="network === 'liquid' || network === 'liquidtestnet'">
   <div class="title-address">
-    <h1 i18n="shared.wallet">Wallet</h1>
+    <h1>{{ walletName }}</h1>
   </div>
 
   <div class="clearfix"></div>
@@ -74,6 +74,36 @@
     </ng-container>
   </ng-container>
 
+  <br>
+
+  <div class="title-tx">
+    <h2 class="text-left" i18n="address.transactions">Transactions</h2>
+  </div>
+
+  <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [addresses]="addressStrings" (loadMore)="loadMore()"></app-transactions-list>
+
+  <div class="text-center">
+    <ng-template [ngIf]="isLoadingTransactions">
+      <div class="header-bg box">
+        <div class="row" style="height: 107px;">
+          <div class="col-sm">
+            <span class="skeleton-loader"></span>
+          </div>
+          <div class="col-sm">
+            <span class="skeleton-loader"></span>
+          </div>
+        </div>
+      </div>
+
+    </ng-template>
+
+    <ng-template [ngIf]="retryLoadMore">
+      <br>
+      <button type="button" class="btn btn-outline-info btn-sm" (click)="loadMore()"><fa-icon [icon]="['fas', 'redo-alt']" [fixedWidth]="true"></fa-icon></button>
+    </ng-template>
+  </div>
+
+
   <ng-template #loadingTemplate>
 
     <div class="box" *ngIf="!error; else errorTemplate">

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

@@ -9,6 +9,8 @@ import { of, Observable, Subscription } from 'rxjs';
 import { SeoService } from '@app/services/seo.service';
 import { seoDescriptionNetwork } from '@app/shared/common.utils';
 import { WalletAddress } from '@interfaces/node-api.interface';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { AudioService } from '@app/services/audio.service';
 
 class WalletStats implements ChainStats {
   addresses: string[];
@@ -24,6 +26,7 @@ class WalletStats implements ChainStats {
         acc.funded_txo_sum += stat.funded_txo_sum;
         acc.spent_txo_count += stat.spent_txo_count;
         acc.spent_txo_sum += stat.spent_txo_sum;
+        acc.tx_count += stat.tx_count;
         return acc;
       }, {
         funded_txo_count: 0,
@@ -109,12 +112,17 @@ export class WalletComponent implements OnInit, OnDestroy {
   addressStrings: string[] = [];
   walletName: string;
   isLoadingWallet = true;
+  isLoadingTransactions = true;
+  transactions: Transaction[];
+  totalTransactionCount: number;
+  retryLoadMore = false;
   wallet$: Observable<Record<string, WalletAddress>>;
   walletAddresses$: Observable<Record<string, Address>>;
   walletSummary$: Observable<AddressTxSummary[]>;
   walletStats$: Observable<WalletStats>;
   error: any;
   walletSubscription: Subscription;
+  transactionSubscription: Subscription;
 
   collapseAddresses: boolean = true;
 
@@ -129,6 +137,8 @@ export class WalletComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private stateService: StateService,
     private apiService: ApiService,
+    private electrsApiService: ElectrsApiService,
+    private audioService: AudioService,
     private seoService: SeoService,
   ) { }
 
@@ -172,6 +182,21 @@ export class WalletComponent implements OnInit, OnDestroy {
       }),
       switchMap(initial => this.stateService.walletTransactions$.pipe(
         startWith(null),
+        tap((transactions) => {
+          if (!transactions?.length) {
+            return;
+          }
+          for (const transaction of transactions) {
+            const tx = this.transactions.find((t) => t.txid === transaction.txid);
+            if (tx) {
+              tx.status = transaction.status;
+            } else {
+              this.transactions.unshift(transaction);
+            }
+          }
+          this.transactions = this.transactions.slice();
+          this.audioService.playSound('magic');
+        }),
         scan((wallet, walletTransactions) => {
           for (const tx of (walletTransactions || [])) {
             const funded: Record<string, number> = {};
@@ -267,8 +292,57 @@ export class WalletComponent implements OnInit, OnDestroy {
             return stats;
           }, walletStats),
         );
-      }),
+      })
     );
+
+    this.transactionSubscription = this.wallet$.pipe(
+      switchMap(wallet => {
+        const addresses = Object.keys(wallet).map(addr => this.normalizeAddress(addr));
+        return this.electrsApiService.getAddressesTransactions$(addresses);
+      }),
+      map(transactions => {
+        // only confirmed transactions supported for now
+        return transactions.filter(tx => tx.status.confirmed).sort((a, b) => b.status.block_height - a.status.block_height);
+      }),
+      catchError((error) => {
+        console.log(error);
+        this.error = error;
+        this.seoService.logSoft404();
+        this.isLoadingWallet = false;
+        return of([]);
+      })
+    ).subscribe((transactions: Transaction[] | null) => {
+      if (!transactions) {
+        return;
+      }
+      this.transactions = transactions;
+      this.isLoadingTransactions = false;
+    });
+  }
+
+  loadMore(): void {
+    if (this.isLoadingTransactions || this.fullyLoaded) {
+      return;
+    }
+    this.isLoadingTransactions = true;
+    this.retryLoadMore = false;
+    this.electrsApiService.getAddressesTransactions$(this.addressStrings, this.transactions[this.transactions.length - 1].txid)
+      .subscribe((transactions: Transaction[]) => {
+        if (transactions && transactions.length) {
+          this.transactions = this.transactions.concat(transactions.sort((a, b) => b.status.block_height - a.status.block_height));
+        } else {
+          this.fullyLoaded = true;
+        }
+        this.isLoadingTransactions = false;
+      },
+      (error) => {
+        this.isLoadingTransactions = false;
+        this.retryLoadMore = true;
+        // In the unlikely event of the txid wasn't found in the mempool anymore and we must reload the page.
+        if (error.status === 422) {
+          window.location.reload();
+        }
+      });
   }
 
   deduplicateWalletTransactions(walletTransactions: AddressTxSummary[]): AddressTxSummary[] {
@@ -299,5 +373,6 @@ export class WalletComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.websocketService.stopTrackingWallet();
     this.walletSubscription.unsubscribe();
+    this.transactionSubscription.unsubscribe();
   }
 }

frontend/src/app/docs/api-docs/api-docs-nav.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Env, StateService } from '@app/services/state.service';
-import { restApiDocsData } from '@app/docs/api-docs/api-docs-data';
+import { restApiDocsData, wsApiDocsData } from '@app/docs/api-docs/api-docs-data';
 import { faqData } from '@app/docs/api-docs/api-docs-data';
 
 @Component({
@@ -28,6 +28,8 @@ export class ApiDocsNavComponent implements OnInit {
     this.auditEnabled = this.env.AUDIT;
     if (this.whichTab === 'rest') {
       this.tabData = restApiDocsData;
+    } else if (this.whichTab === 'websocket') {
+      this.tabData = wsApiDocsData;
     } else if (this.whichTab === 'faq') {
       this.tabData = faqData;
     }

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

@@ -108,18 +108,43 @@
       </div>
     </div>
 
-    <div id="websocketAPI" *ngIf="( whichTab === 'websocket' )">
-      <div class="api-category">
-        <div class="websocket">
-          <div class="endpoint">
-            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-            {{ wrapUrl(network.val, wsDocs, true) }}
+    <div id="websocketAPI" *ngIf="whichTab === 'websocket'">
+
+      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
+        <app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
+      </div>
+
+      <div class="doc-content">
+
+        <div id="enterprise-cta-mobile" *ngIf="officialMempoolInstance && showMobileEnterpriseUpsell">
+          <p>Get higher API limits with <span class="no-line-break">Mempool Enterprise®</span></p>
+          <div class="button-group">
+            <a class="btn btn-small btn-secondary" (click)="showMobileEnterpriseUpsell = false">No Thanks</a>
+            <a class="btn btn-small btn-purple" href="https://mempool.space/enterprise">More Info <fa-icon [icon]="['fas', 'angle-right']" [styles]="{'font-size': '12px'}"></fa-icon></a>
           </div>
-          <div class="description">
-            <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>
+
+        <p class="doc-welcome-note">Below is a reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title-websocket">Websocket service</ng-container> running at {{ websocketUrl(network.val) }}.</p>
+        <p class="doc-welcome-note api-note" *ngIf="officialMempoolInstance">Note that usage limits apply to our WebSocket API. Consider an <a href="https://mempool.space/enterprise">enterprise sponsorship</a> if you need higher API limits, such as higher tracking limits.</p>
+
+        <div class="doc-item-container" *ngFor="let item of wsDocs">
+          <div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance )">
+            <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
+            <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
+              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})">{{ item.title }} <span>{{ item.category }}</span></a>
+              <div class="endpoint-content">
+                <div class="description">
+                  <div class="subtitle" i18n>Description</div>
+                  <div [innerHTML]="item.description.default" i18n></div>
+                </div>
+                <div class="description">
+                  <div class="subtitle" i18n>Payload</div>
+                  <pre><code [innerText]="item.payload"></code></pre>
+                </div>
+                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" [showCodeExample]="item.showJsExamples"></app-code-template>
+              </div>
+            </div>
           </div>
-          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" [showCodeExample]="wsDocs.showJsExamples"></app-code-template>
         </div>
       </div>
     </div>

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

@@ -470,3 +470,21 @@ dd {
     margin-left: 1em;
   }
 }
+
+code {
+  background-color: var(--bg);
+  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+}
+
+pre {
+  display: block;
+  font-size: 87.5%;
+  color: #f18920;
+  background-color: var(--bg);
+  padding: 30px;
+  code{
+    background-color: transparent;
+    white-space: break-spaces;
+    word-break: break-all;
+  }
+}

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

@@ -145,7 +145,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
     if (document.getElementById( targetId + "-tab-header" )) {
       tabHeaderHeight = document.getElementById( targetId + "-tab-header" ).scrollHeight;
     }
-    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) ) && targetId ) {
+    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) || ( this.whichTab === 'websocket' ) ) && targetId ) {
       const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
       const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
       const endPointContentElHeight = endpointContentEl.clientHeight;
@@ -207,13 +207,29 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
       text = text.replace('%{' + indexNumber + '}', curlText);
     }
 
-    if (websocket) {
-      const wsHostname = this.hostname.replace('https://', 'wss://');
-      wsHostname.replace('http://', 'ws://');
-      return `${wsHostname}${curlNetwork}${text}`;
-    }
     return `${this.hostname}${curlNetwork}${text}`;
   }
 
+  websocketUrl(network: string) {
+    let curlNetwork = '';
+    if (this.env.BASE_MODULE === 'mempool') {
+      if (!['', 'mainnet'].includes(network)) {
+        curlNetwork = `/${network}`;
+      }
+    } else if (this.env.BASE_MODULE === 'liquid') {
+      if (!['', 'liquid'].includes(network)) {
+        curlNetwork = `/${network}`;
+      }
+    }
+
+    if (network === this.env.ROOT_NETWORK) {
+      curlNetwork = '';
+    }
+
+    let wsHostname = this.hostname.replace('https://', 'wss://');
+    wsHostname = wsHostname.replace('http://', 'ws://');
+    return `${wsHostname}${curlNetwork}/api/v1/ws`;
+  }
+
 }
 

frontend/src/app/interfaces/node-api.interface.ts

@@ -1,4 +1,4 @@
-import { AddressTxSummary, Block, ChainStats, Transaction } from "./electrs.interface";
+import { AddressTxSummary, Block, ChainStats } from "./electrs.interface";
 
 export interface OptimizedMempoolStats {
   added: number;

frontend/src/app/services/electrs-api.service.ts

@@ -142,12 +142,16 @@ export class ElectrsApiService {
     return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + '/api/address/' + address + '/txs', { params });
   }
 
-  getAddressesTransactions$(addresses: string[],  txid?: string): Observable<Transaction[]> {
+  getAddressesTransactions$(addresses: string[], txid?: string): Observable<Transaction[]> {
     let params = new HttpParams();
     if (txid) {
       params = params.append('after_txid', txid);
     }
-    return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs?addresses=${addresses.join(',')}`, { params });
+    return this.httpClient.post<Transaction[]>(
+      this.apiBaseUrl + this.apiBasePath + '/api/addresses/txs',
+      addresses,
+      { params }
+    );
   }
 
   getAddressSummary$(address: string,  txid?: string): Observable<AddressTxSummary[]> {
@@ -163,7 +167,7 @@ export class ElectrsApiService {
     if (txid) {
       params = params.append('after_txid', txid);
     }
-    return this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs/summary?addresses=${addresses.join(',')}`, { params });
+    return this.httpClient.post<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/addresses/txs/summary', addresses, { params });
   }
 
   getScriptHashTransactions$(script: string,  txid?: string): Observable<Transaction[]> {
@@ -182,7 +186,7 @@ export class ElectrsApiService {
       params = params.append('after_txid', txid);
     }
     return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
-      switchMap(scriptHashes => this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs?scripthashes=${scriptHashes.join(',')}`, { params })),
+      switchMap(scriptHashes => this.httpClient.post<Transaction[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthashes/txs', scriptHashes, { params })),
     );
   }
 
@@ -212,7 +216,7 @@ export class ElectrsApiService {
       params = params.append('after_txid', txid);
     }
     return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
-      switchMap(scriptHashes => this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs/summary?scripthashes=${scriptHashes.join(',')}`, { params })),
+      switchMap(scriptHashes => this.httpClient.post<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthashes/txs/summary', scriptHashes, { params })),
     );
   }
 

frontend/src/app/services/enterprise.service.ts

@@ -2,7 +2,7 @@ import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable } from '@angular/core';
 import { ApiService } from '@app/services/api.service';
 import { SeoService } from '@app/services/seo.service';
-import { StateService } from '@app/services/state.service';
+import { Customization, StateService } from '@app/services/state.service';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
@@ -51,6 +51,8 @@ export class EnterpriseService {
     if (this.stateService.env.customize?.branding) {
       const info = this.stateService.env.customize?.branding;
       this.insertMatomo(info.site_id);
+      this.setFavicons(this.stateService.env.customize);
+      this.seoService.setCustomMeta(this.stateService.env.customize);
       this.seoService.setEnterpriseTitle(info.title, true);
       this.info$.next(info);
     } else {
@@ -67,6 +69,50 @@ export class EnterpriseService {
     }
   }
 
+  setFavicons(customize: Customization): void {
+    const enterprise = customize.enterprise;
+    const head = this.document.getElementsByTagName('head')[0];
+
+    const faviconLinks = [
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: `/resources/${enterprise}/favicons/apple-touch-icon.png`
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: `/resources/${enterprise}/favicons/favicon-32x32.png`
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: `/resources/${enterprise}/favicons/favicon-16x16.png`
+      },
+      {
+        rel: 'manifest',
+        href: `/resources/${enterprise}/favicons/site.webmanifest`
+      },
+      {
+        rel: 'shortcut icon',
+        href: `/resources/${enterprise}/favicons/favicon.ico`
+      }
+    ];
+
+    faviconLinks.forEach(linkInfo => {
+      let link = this.document.querySelector(`link[rel="${linkInfo.rel}"]${linkInfo.sizes ? `[sizes="${linkInfo.sizes}"]` : ''}`) as HTMLLinkElement;
+      if (!link) {
+        link = this.document.createElement('link');
+        head.appendChild(link);
+      }
+      Object.entries(linkInfo).forEach(([attr, value]) => {
+        link.setAttribute(attr, value);
+      });
+    });
+  }
+
   insertMatomo(siteId?: number): void {
     let statsUrl = '//stats.mempool.space/';
 

frontend/src/app/services/opengraph.service.ts

@@ -12,6 +12,9 @@ import { LanguageService } from '@app/services/language.service';
 export class OpenGraphService {
   network = '';
   defaultImageUrl = '';
+  defaultImageType = 'image/png';
+  defaultImageWidth = '1000';
+  defaultImageHeight = '500';
   previewLoadingEvents = {};
   previewLoadingCount = 0;
 
@@ -25,12 +28,17 @@ export class OpenGraphService {
   ) {
     // save og:image tag from original template
     const initialOgImageTag = metaService.getTag("property='og:image'");
-    this.defaultImageUrl = initialOgImageTag?.content || 'https://mempool.space/resources/previews/mempool-space-preview.jpg';
+    this.defaultImageUrl = (this.stateService.env.customize?.meta?.image?.src ? this.stateService.env.customize.meta.image.src : initialOgImageTag?.content) || 'https://mempool.space/resources/previews/mempool-space-preview.jpg';
+    this.defaultImageType = (this.stateService.env.customize?.meta?.image?.type ? this.stateService.env.customize.meta.image.type : 'image/png');
+    this.defaultImageWidth = (this.stateService.env.customize?.meta?.image?.width ? this.stateService.env.customize.meta.image.width : '1000');
+    this.defaultImageHeight = (this.stateService.env.customize?.meta?.image?.height ? this.stateService.env.customize.meta.image.height : '500');
     this.router.events.pipe(
       filter(event => event instanceof NavigationEnd),
       map(() => this.activatedRoute),
       map(route => {
-        while (route.firstChild) route = route.firstChild;
+        while (route.firstChild) {
+          route = route.firstChild;
+        }
         return route;
       }),
       filter(route => route.outlet === 'primary'),
@@ -45,7 +53,7 @@ export class OpenGraphService {
 
     // expose routing method to global scope, so we can access it from the unfurler
     window['ogService'] = {
-      loadPage: (path) => { return this.loadPage(path) }
+      loadPage: (path) => { return this.loadPage(path); }
     };
   }
 
@@ -62,9 +70,9 @@ export class OpenGraphService {
   clearOgImage() {
     this.metaService.updateTag({ property: 'og:image', content: this.defaultImageUrl });
     this.metaService.updateTag({ name: 'twitter:image', content: this.defaultImageUrl });
-    this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
-    this.metaService.updateTag({ property: 'og:image:width', content: '1000' });
-    this.metaService.updateTag({ property: 'og:image:height', content: '500' });
+    this.metaService.updateTag({ property: 'og:image:type', content: this.defaultImageType });
+    this.metaService.updateTag({ property: 'og:image:width', content: this.defaultImageWidth });
+    this.metaService.updateTag({ property: 'og:image:height', content: this.defaultImageHeight });
   }
 
   setManualOgImage(imageFilename) {

frontend/src/app/services/seo.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, map, switchMap } from 'rxjs';
-import { StateService } from '@app/services/state.service';
+import { Customization, StateService } from '@app/services/state.service';
 
 @Injectable({
   providedIn: 'root'
@@ -23,13 +23,17 @@ export class SeoService {
     private activatedRoute: ActivatedRoute,
   ) {
     // save original meta tags
-    this.baseDescription = metaService.getTag('name=\'description\'')?.content || this.baseDescription;
-    this.baseTitle = titleService.getTitle()?.split(' - ')?.[0] || this.baseTitle;
-    try {
-      const canonicalUrl = new URL(this.canonicalLink?.href || '');
-      this.baseDomain = canonicalUrl?.host;
-    } catch (e) {
-      // leave as default
+    this.baseDescription = this.stateService.env.customize?.meta?.description || metaService.getTag('name=\'description\'')?.content || this.baseDescription;
+    this.baseTitle = this.stateService.env.customize?.meta?.title || titleService.getTitle()?.split(' - ')?.[0] || this.baseTitle;
+    if (this.stateService.env.customize?.domains?.length) {
+      this.baseDomain = this.stateService.env.customize.domains[0];
+    } else {
+      try {
+        const canonicalUrl = new URL(this.canonicalLink?.href || '');
+        this.baseDomain = canonicalUrl?.host;
+      } catch (e) {
+        // leave as default
+      }
     }
 
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
@@ -70,6 +74,22 @@ export class SeoService {
     this.resetTitle();
   }
 
+  setCustomMeta(customize: Customization) {
+    if (!customize.meta) {
+      return;
+    }
+    this.metaService.updateTag({ name: 'description', content: customize.meta.description});
+    this.metaService.updateTag({ name: 'twitter:description', content: customize.meta.description});
+    this.metaService.updateTag({ property: 'og:description', content: customize.meta.description});
+    this.metaService.updateTag({ name: 'twitter:image', content: customize.meta.image.src});
+    this.metaService.updateTag({ property: 'og:image', content: customize.meta.image.src});
+    this.metaService.updateTag({ property: 'og:image:type', content: customize.meta.image.type});
+    this.metaService.updateTag({ property: 'og:image:width', content: customize.meta.image.width});
+    this.metaService.updateTag({ property: 'og:image:height', content: customize.meta.image.height});
+    const domain = customize.domains?.[0] || window.location.hostname;
+    this.metaService.updateTag({ name: 'twitter:domain', content: domain});
+  }
+
   setDescription(newDescription: string): void {
     this.metaService.updateTag({ name: 'description', content: newDescription});
     this.metaService.updateTag({ name: 'twitter:description', content: newDescription});

frontend/src/app/services/services-api.service.ts

@@ -18,7 +18,6 @@ export interface IUser {
   subscription_tag: string;
   status: 'pending' | 'verified' | 'disabled';
   features: string | null;
-  fullName: string | null;
   countryCode: string | null;
   imageMd5: string;
   ogRank: number | null;
@@ -143,8 +142,8 @@ export class ServicesApiServices {
     return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/applePay`, { txInput: txInput, cardTag: cardTag, token: token, referenceId: referenceId, userApprovedUSD: userApprovedUSD });
   }
 
-  accelerateWithGooglePay$(txInput: string, token: string, verificationToken: string, cardTag: string, referenceId: string, userApprovedUSD: number) {
-    return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/googlePay`, { txInput: txInput, cardTag: cardTag, token: token, verificationToken: verificationToken, referenceId: referenceId, userApprovedUSD: userApprovedUSD });
+  accelerateWithGooglePay$(txInput: string, token: string, verificationToken: string, cardTag: string, referenceId: string, userApprovedUSD: number, userChallenged: boolean) {
+    return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/googlePay`, { txInput: txInput, cardTag: cardTag, token: token, verificationToken: verificationToken, referenceId: referenceId, userApprovedUSD: userApprovedUSD, userChallenged: userChallenged });
   }
 
   getAccelerations$(): Observable<Acceleration[]> {

frontend/src/app/services/state.service.ts

@@ -22,6 +22,7 @@ export interface MarkBlockState {
 export interface ILoadingIndicators { [name: string]: number; }
 
 export interface Customization {
+  domains: string[];
   theme: string;
   enterprise?: string;
   branding: {
@@ -33,6 +34,16 @@ export interface Customization {
     footer_img?: string;
     rounded_corner: boolean;
   },
+  meta: {
+    title: string;
+    description: string;
+    image: {
+      src: string;
+      type: string;
+      width: string;
+      height: string;
+    };
+  };
   dashboard: {
     widgets: {
       component: string;

frontend/src/app/shared/components/confirmations/confirmations.component.html

@@ -11,9 +11,9 @@
 <ng-template [ngIf]="!hideUnconfirmed && !confirmations && replaced">
   <button type="button" class="btn btn-sm btn-warning no-cursor {{buttonClass}}" i18n="transaction.replaced|Transaction replaced state">Replaced</button>
 </ng-template>
-<ng-template [ngIf]="!hideUnconfirmed && !confirmations && !replaced && removed">
+<ng-template [ngIf]="!hideUnconfirmed && !confirmations && !replaced && (removed || cached)">
   <button type="button" class="btn btn-sm btn-warning no-cursor {{buttonClass}}" i18n="transaction.audit.removed|Transaction removed state">Removed</button>
 </ng-template>
-<ng-template [ngIf]="!hideUnconfirmed && chainTip != null && !confirmations && !replaced && !removed">
+<ng-template [ngIf]="!hideUnconfirmed && chainTip != null && !confirmations && !replaced && !(removed || cached)">
   <button type="button" class="btn btn-sm btn-danger no-cursor {{buttonClass}}" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
 </ng-template>

frontend/src/app/shared/components/confirmations/confirmations.component.ts

@@ -12,6 +12,7 @@ export class ConfirmationsComponent implements OnChanges {
   @Input() height: number;
   @Input() replaced: boolean = false;
   @Input() removed: boolean = false;
+  @Input() cached: boolean = false;
   @Input() hideUnconfirmed: boolean = false;
   @Input() buttonClass: string = '';
 

frontend/src/app/shared/shared.module.ts

@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip, faTimeline, faCircleXmark, faCalendarCheck } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip, faTimeline, faCircleXmark, faCalendarCheck, faMoneyBillTrendUp } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '@components/menu/menu.component';
 import { PreviewTitleComponent } from '@components/master-page-preview/preview-title.component';
@@ -451,5 +451,6 @@ export class SharedModule {
     library.addIcons(faTimeline);
     library.addIcons(faCircleXmark);
     library.addIcons(faCalendarCheck);
+    library.addIcons(faMoneyBillTrendUp);
   }
 }

frontend/src/index.mempool.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>mempool - Bitcoin Explorer</title>
   <script src="/resources/config.js"></script>
-  <script src="/resources/customize.js"></script>
+  <script src="/api/v1/services/custom/config"></script>
   <base href="/">
 
   <meta name="description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />

production/nginx/location-api.conf

@@ -140,7 +140,8 @@ location @mempool-api-v1-cache-normal {
 	proxy_cache_valid 200 2s;
 	proxy_redirect off;
 
-	expires 2s;
+	# cache for 2 seconds on server, but send expires -1 so browser doesn't cache
+	expires -1;
 }
 
 location @mempool-api-v1-cache-disabled {