Merge calculateMempoolTxCpfp and calculateLocalTxCpfp

backend/src/api/bitcoin/bitcoin.routes.ts

@@ -54,6 +54,8 @@ class BitcoinRoutes {
       .post(config.MEMPOOL.API_URL_PREFIX + 'psbt/addparents', this.postPsbtCompletion)
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks-bulk/:from', this.getBlocksByBulk.bind(this))
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks-bulk/:from/:to', this.getBlocksByBulk.bind(this))
+      .post(config.MEMPOOL.API_URL_PREFIX + 'prevouts', this.$getPrevouts)
+      .post(config.MEMPOOL.API_URL_PREFIX + 'cpfp', this.getCpfpLocalTxs)
       // Temporarily add txs/package endpoint for all backends until esplora supports it
       .post(config.MEMPOOL.API_URL_PREFIX + 'txs/package', this.$submitPackage)
       ;
@@ -930,6 +932,92 @@ class BitcoinRoutes {
     }
   }
 
+  private async $getPrevouts(req: Request, res: Response) {
+    try {
+      const outpoints = req.body;
+      if (!Array.isArray(outpoints) || outpoints.some((item) => !/^[a-fA-F0-9]{64}$/.test(item.txid) || typeof item.vout !== 'number')) {
+        handleError(req, res, 400, 'Invalid outpoints format');
+        return;
+      }
+
+      if (outpoints.length > 100) {
+        handleError(req, res, 400, 'Too many outpoints requested');
+        return;
+      }
+
+      const result = Array(outpoints.length).fill(null);
+      const memPool = mempool.getMempool();
+
+      for (let i = 0; i < outpoints.length; i++) {
+        const outpoint = outpoints[i];
+        let prevout: IEsploraApi.Vout | null = null;
+        let unconfirmed: boolean | null = null;
+
+        const mempoolTx = memPool[outpoint.txid];
+        if (mempoolTx) {
+          if (outpoint.vout < mempoolTx.vout.length) {
+            prevout = mempoolTx.vout[outpoint.vout];
+            unconfirmed = true;
+          }
+        } else {
+          try {
+            const rawPrevout = await bitcoinClient.getTxOut(outpoint.txid, outpoint.vout, false);
+            if (rawPrevout) {
+              prevout = {
+                value: Math.round(rawPrevout.value * 100000000),
+                scriptpubkey: rawPrevout.scriptPubKey.hex,
+                scriptpubkey_asm: rawPrevout.scriptPubKey.asm ? transactionUtils.convertScriptSigAsm(rawPrevout.scriptPubKey.hex) : '',
+                scriptpubkey_type: transactionUtils.translateScriptPubKeyType(rawPrevout.scriptPubKey.type),
+                scriptpubkey_address: rawPrevout.scriptPubKey && rawPrevout.scriptPubKey.address ? rawPrevout.scriptPubKey.address : '',
+              };
+              unconfirmed = false;
+            }
+          } catch (e) {
+            // Ignore bitcoin client errors, just leave prevout as null
+          }
+        }
+
+        if (prevout) {
+          result[i] = { prevout, unconfirmed };
+        }
+      }
+
+      res.json(result);
+
+    } catch (e) {
+      handleError(req, res, 500, 'Failed to get prevouts');
+    }
+  }
+
+  private getCpfpLocalTxs(req: Request, res: Response) {
+    try {
+      const transactions = req.body;
+
+      if (!Array.isArray(transactions) || transactions.some(tx =>
+        !tx || typeof tx !== 'object' ||
+        !/^[a-fA-F0-9]{64}$/.test(tx.txid) ||
+        typeof tx.weight !== 'number' ||
+        typeof tx.sigops !== 'number' ||
+        typeof tx.fee !== 'number' ||
+        !Array.isArray(tx.vin) ||
+        !Array.isArray(tx.vout)
+      )) {
+        handleError(req, res, 400, 'Invalid transactions format');
+        return;
+      }
+
+      if (transactions.length > 1) {
+        handleError(req, res, 400, 'More than one transaction is not supported yet');
+        return;
+      }
+
+      const cpfpInfo = calculateMempoolTxCpfp(transactions[0], mempool.getMempool(), true);
+      res.json([cpfpInfo]);
+
+    } catch (e) {
+      handleError(req, res, 500, 'Failed to calculate CPFP info');
+    }
+  }
 }
 
 export default new BitcoinRoutes();

backend/src/api/cpfp.ts

@@ -167,8 +167,10 @@ export function calculateGoodBlockCpfp(height: number, transactions: MempoolTran
 /**
  * Takes a mempool transaction and a copy of the current mempool, and calculates the CPFP data for
  * that transaction (and all others in the same cluster)
+ * If the passed transaction is not guaranteed to be in the mempool, set localTx to true: this will
+ * prevent updating the CPFP data of other transactions in the cluster
  */
-export function calculateMempoolTxCpfp(tx: MempoolTransactionExtended, mempool: { [txid: string]: MempoolTransactionExtended }): CpfpInfo {
+export function calculateMempoolTxCpfp(tx: MempoolTransactionExtended, mempool: { [txid: string]: MempoolTransactionExtended }, localTx: boolean = false): CpfpInfo {
   if (tx.cpfpUpdated && Date.now() < (tx.cpfpUpdated + CPFP_UPDATE_INTERVAL)) {
     tx.cpfpDirty = false;
     return {
@@ -198,17 +200,26 @@ export function calculateMempoolTxCpfp(tx: MempoolTransactionExtended, mempool:
     totalFee += tx.fees.base;
   }
   const effectiveFeePerVsize = totalFee / totalVsize;
-  for (const tx of cluster.values()) {
-    mempool[tx.txid].effectiveFeePerVsize = effectiveFeePerVsize;
-    mempool[tx.txid].ancestors = Array.from(tx.ancestors.values()).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
-    mempool[tx.txid].descendants = Array.from(cluster.values()).filter(entry => entry.txid !== tx.txid && !tx.ancestors.has(entry.txid)).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
-    mempool[tx.txid].bestDescendant = null;
-    mempool[tx.txid].cpfpChecked = true;
-    mempool[tx.txid].cpfpDirty = true;
-    mempool[tx.txid].cpfpUpdated = Date.now();
-  }
 
-  tx = mempool[tx.txid];
+  if (localTx) {
+    tx.effectiveFeePerVsize = effectiveFeePerVsize;
+    tx.ancestors = Array.from(cluster.get(tx.txid)?.ancestors.values() || []).map(ancestor => ({ txid: ancestor.txid, weight: ancestor.weight, fee: ancestor.fees.base }));
+    tx.descendants = Array.from(cluster.values()).filter(entry => entry.txid !== tx.txid && !cluster.get(tx.txid)?.ancestors.has(entry.txid)).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
+    tx.bestDescendant = null;
+  } else {
+    for (const tx of cluster.values()) {
+      mempool[tx.txid].effectiveFeePerVsize = effectiveFeePerVsize;
+      mempool[tx.txid].ancestors = Array.from(tx.ancestors.values()).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
+      mempool[tx.txid].descendants = Array.from(cluster.values()).filter(entry => entry.txid !== tx.txid && !tx.ancestors.has(entry.txid)).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
+      mempool[tx.txid].bestDescendant = null;
+      mempool[tx.txid].cpfpChecked = true;
+      mempool[tx.txid].cpfpDirty = true;
+      mempool[tx.txid].cpfpUpdated = Date.now();
+    }
+
+    tx = mempool[tx.txid];
+
+  }
 
   return {
     ancestors: tx.ancestors || [],

backend/src/api/rbf-cache.ts

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

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

@@ -7,7 +7,6 @@ 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)
     ;
   }
 
@@ -23,11 +22,6 @@ 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();

backend/src/api/transaction-utils.ts

@@ -420,6 +420,29 @@ class TransactionUtils {
 
     return { prioritized, deprioritized };
   }
+
+  // Copied from https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/api/bitcoin/bitcoin-api.ts#L324
+  public translateScriptPubKeyType(outputType: string): string {
+    const map = {
+      'pubkey': 'p2pk',
+      'pubkeyhash': 'p2pkh',
+      'scripthash': 'p2sh',
+      'witness_v0_keyhash': 'v0_p2wpkh',
+      'witness_v0_scripthash': 'v0_p2wsh',
+      'witness_v1_taproot': 'v1_p2tr',
+      'nonstandard': 'nonstandard',
+      'multisig': 'multisig',
+      'anchor': 'anchor',
+      'nulldata': 'op_return'
+    };
+
+    if (map[outputType]) {
+      return map[outputType];
+    } else {
+      return 'unknown';
+    }
+  }
+  
 }
 
 export default new TransactionUtils();

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

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

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

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

@@ -478,30 +478,25 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   }
 
   extendSummary(summary) {
-    const extendedSummary = summary.slice();
+    let 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 maxTime = Date.now() / 1000;
-
-    const oneHour = 60 * 60;
+    let oneHour = 60 * 60;
     // Fill gaps longer than interval
     for (let i = 0; i < extendedSummary.length - 1; i++) {
-      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);
+      let hours = Math.floor((extendedSummary[i + 1].time - extendedSummary[i].time) / oneHour);      
       if (hours > 1) {
         for (let j = 1; j < hours; j++) {
-          const newTime = extendedSummary[i].time - oneHour * j;
+          let newTime = extendedSummary[i].time + oneHour * j;
           extendedSummary.splice(i + j, 0, { time: newTime, value: 0 });
         }
         i += hours - 1;
       }
     }
 
-    return extendedSummary;
+    return extendedSummary.reverse();
   }
 }

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 || event.target instanceof HTMLTextAreaElement) {
+    if (event.target instanceof HTMLInputElement) {
       return;
     }
     // prevent arrow key horizontal scrolling

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

@@ -172,19 +172,13 @@ 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 {
@@ -453,7 +447,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 && this.vertexArray) {
+    if (this.scene && this.gl) {
       /* SET UP SHADER UNIFORMS */
       // screen dimensions
       this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);
@@ -495,7 +489,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.running && this.scene && now <= (this.scene.animateUntil + 500)) {
       this.doRun();
     } else {
-      clearTimeout(this.animationHeartBeat);
+      if (this.animationHeartBeat) {
+        clearTimeout(this.animationHeartBeat);
+      }
       this.animationHeartBeat = window.setTimeout(() => {
         this.start();
       }, 1000);

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

@@ -19,7 +19,6 @@ export class FastVertexArray {
   freeSlots: number[];
   lastSlot: number;
   dirty = false;
-  destroyed = false;
 
   constructor(length, stride) {
     this.length = length;
@@ -33,9 +32,6 @@ export class FastVertexArray {
   }
 
   insert(sprite: TxSprite): number {
-    if (this.destroyed) {
-      return;
-    }
     this.count++;
 
     let position;
@@ -49,14 +45,11 @@ export class FastVertexArray {
       }
     }
     this.sprites[position] = sprite;
-    this.dirty = true;
     return position;
+    this.dirty = true;
   }
 
   remove(index: number): void {
-    if (this.destroyed) {
-      return;
-    }
     this.count--;
     this.clearData(index);
     this.freeSlots.push(index);
@@ -68,26 +61,20 @@ export class FastVertexArray {
   }
 
   setData(index: number, dataChunk: number[]): void {
-    if (this.destroyed) {
-      return;
-    }
     this.data.set(dataChunk, (index * this.stride));
     this.dirty = true;
   }
 
-  private clearData(index: number): void {
+  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);
   }
 
-  private expand(): void {
+  expand(): void {
     this.length *= 2;
     const newData = new Float32Array(this.length * this.stride);
     newData.set(this.data);
@@ -95,7 +82,7 @@ export class FastVertexArray {
     this.dirty = true;
   }
 
-  private compact(): void {
+  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) {
@@ -123,13 +110,4 @@ 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({ bufferSize: 1, refCount: true })
+      shareReplay(1)
     );
 
     this.overviewSubscription = block$.pipe(
@@ -176,8 +176,5 @@ 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({ bufferSize: 1, refCount: true })
+      shareReplay(1)
     );
 
     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, Params, Router } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter, take } from 'rxjs/operators';
+import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter } 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,7 +68,6 @@ 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;
@@ -81,8 +80,8 @@ export class BlockComponent implements OnInit, OnDestroy {
   timeLtr: boolean;
   childChangeSubscription: Subscription;
   auditPrefSubscription: Subscription;
-  isAuditEnabledSubscription: Subscription;
   oobSubscription: Subscription;
+  
   priceSubscription: Subscription;
   blockConversion: Price;
 
@@ -119,7 +118,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.setAuditAvailable(this.auditSupported);
 
     if (this.auditSupported) {
-      this.isAuditEnabledSubscription = this.isAuditEnabledFromParam().subscribe(auditParam => {
+      this.isAuditEnabledFromParam().subscribe(auditParam => {
         if (this.auditParamEnabled) {
           this.auditModeEnabled = auditParam;
         } else {
@@ -282,7 +281,7 @@ export class BlockComponent implements OnInit, OnDestroy {
         }
       }),
       throttleTime(300, asyncScheduler, { leading: true, trailing: true }),
-      shareReplay({ bufferSize: 1, refCount: true })
+      shareReplay(1)
     );
 
     this.overviewSubscription = this.block$.pipe(
@@ -364,7 +363,6 @@ 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 {
@@ -416,7 +414,6 @@ 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();
@@ -424,16 +421,8 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.queryParamsSubscription?.unsubscribe();
     this.timeLtrSubscription?.unsubscribe();
     this.childChangeSubscription?.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();
-    });
+    this.oobSubscription?.unsubscribe();
   }
 
   // TODO - Refactor this.fees/this.reward for liquid because it is not
@@ -744,18 +733,19 @@ export class BlockComponent implements OnInit, OnDestroy {
   toggleAuditMode(): void {
     this.stateService.hideAudit.next(this.auditModeEnabled);
 
-    const queryParams = { ...this.currentQueryParams };
-    delete queryParams['audit'];
+    this.route.queryParams.subscribe(params => {
+      const queryParams = { ...params };
+      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;
@@ -772,7 +762,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,11 +281,9 @@
           <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
             <div class="card">
               <div class="card-body">
-                <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/wallet/' + widget.props.wallet | relativeUrl]">
+                <span class="title-link">
                   <h5 class="card-title d-inline" i18n="dashboard.treasury-transactions">Treasury Transactions</h5>
-                  <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>
+                </span>
                 <app-address-transactions-widget [addressSummary$]="walletSummary$"></app-address-transactions-widget>
               </div>
             </div>

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

@@ -162,9 +162,6 @@ 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,7 +120,6 @@ 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/cpfp-info.component.html

@@ -0,0 +1,56 @@
+<br>
+<div class="title">
+  <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
+</div>
+<div class="box cpfp-details">
+  <table class="table table-fixed table-borderless table-striped">
+    <thead>
+      <tr>
+        <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
+        <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
+        <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
+        <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
+        <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
+        <th class="d-none d-lg-table-cell"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-template [ngIf]="cpfpInfo?.descendants?.length">
+        <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
+          <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
+          <td>
+            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+      <ng-template [ngIf]="cpfpInfo?.bestDescendant">
+        <tr>
+          <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
+          <td class="txids">
+            <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+      <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
+        <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
+          <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
+          <td class="txids">
+            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+    </tbody>
+  </table>
+</div>

frontend/src/app/components/transaction/cpfp-info.component.scss

@@ -0,0 +1,32 @@
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
+
+  @media (max-width: 500px) {
+    .txids {
+      width: 40%;
+    }
+  }
+}
+
+.arrow-green {
+	color: var(--success);
+}
+
+.arrow-red {
+	color: var(--red);
+}
+
+.badge {
+	position: relative;
+	top: -1px;
+}

frontend/src/app/components/transaction/cpfp-info.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { CpfpInfo } from '@interfaces/node-api.interface';
+import { Transaction } from '@interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-cpfp-info',
+  templateUrl: './cpfp-info.component.html',
+  styleUrls: ['./cpfp-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CpfpInfoComponent implements OnInit {
+  @Input() cpfpInfo: CpfpInfo;
+  @Input() tx: Transaction;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  roundToOneDecimal(cpfpTx: any): number {
+    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
+  }
+}

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

@@ -0,0 +1,205 @@
+<div class="container-xl">
+
+  @if (!transaction) {
+
+    <h1 style="margin-top: 19px;" i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</h1>
+
+    <form [formGroup]="pushTxForm" (submit)="decodeTransaction()" novalidate>
+      <div class="mb-3">
+        <textarea formControlName="txRaw" class="form-control" rows="5" i18n-placeholder="transaction.hex" placeholder="Transaction hex"></textarea>
+      </div>
+      <button [disabled]="isLoading" type="submit" class="btn btn-primary mr-2" i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</button>
+      <input type="checkbox" [checked]="!offlineMode" id="offline-mode" (change)="onOfflineModeChange($event)">
+      <label class="label" for="offline-mode">
+        <span i18n="transaction.fetch-prevout-data">Fetch prevout data</span>
+      </label>
+      <p *ngIf="error" class="red-color d-inline">Error decoding transaction, reason: {{ error }}</p>
+    </form>
+  }
+
+  @if (transaction && !error && !isLoading) {
+    <div class="title-block">
+      <h1 i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</h1>
+
+      <span class="tx-link">
+        <span class="txid">
+          <app-truncate [text]="transaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, transaction.txid]" [disabled]="!successBroadcast">
+            <app-clipboard [text]="transaction.txid"></app-clipboard>
+          </app-truncate>
+        </span>
+      </span>
+
+      <div class="container-buttons">
+        <button *ngIf="!successBroadcast" [disabled]="isLoadingBroadcast" type="button" class="btn btn-sm btn-primary" i18n="transaction.broadcast|Broadcast" (click)="postTx()">Broadcast</button>
+        <button *ngIf="successBroadcast" type="button" class="btn btn-sm btn-success no-cursor" i18n="transaction.broadcasted|Broadcasted">Broadcasted</button>
+        <button class="btn btn-sm" style="margin-left: 10px; padding: 0;" (click)="resetForm()">&#10005;</button>
+      </div>
+
+    </div>
+
+    <p class="red-color d-inline">{{ errorBroadcast }}</p>
+
+    <div class="clearfix"></div>
+
+    @if (!hasPrevouts) {
+      <div class="alert alert-mempool">
+        @if (offlineMode) {
+          <span><strong>Prevouts are not loaded, some fields like fee rate cannot be displayed.</strong></span>
+        } @else {
+          <span><strong>Error loading prevouts</strong>. {{ errorPrevouts ? 'Reason: ' + errorPrevouts : '' }}</span>
+        }
+      </div>
+    }
+
+    @if (errorCpfpInfo) {
+      <div class="alert alert-mempool">
+        <span><strong>Error loading CPFP data</strong>. Reason: {{ errorCpfpInfo }}</span>
+      </div>
+    }
+
+    <app-transaction-details
+      [network]="stateService.network"
+      [tx]="transaction"
+      [isLoadingTx]="false"
+      [isMobile]="isMobile"
+      [isLoadingFirstSeen]="false"
+      [featuresEnabled]="true"
+      [filters]="filters"
+      [hasEffectiveFeeRate]="false"
+      [cpfpInfo]="null"
+      [ETA$]="ETA$"
+      [hasEffectiveFeeRate]="hasEffectiveFeeRate"
+      [cpfpInfo]="cpfpInfo"
+      [hasCpfp]="hasCpfp"
+      (toggleCpfp$)="this.showCpfpDetails = !this.showCpfpDetails"
+    ></app-transaction-details>
+  
+    <app-cpfp-info *ngIf="showCpfpDetails" [cpfpInfo]="cpfpInfo" [tx]="transaction"></app-cpfp-info>
+    <br>
+
+    <ng-container *ngIf="flowEnabled; else flowPlaceholder">
+      <div class="title float-left">
+        <h2 id="flow" i18n="transaction.flow|Transaction flow">Flow</h2>
+      </div>
+
+      <button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="toggleGraph()" i18n="hide-diagram">Hide diagram</button>
+
+      <div class="clearfix"></div>
+
+      <div class="box">
+        <div class="graph-container" #graphContainer>
+          <tx-bowtie-graph
+            [tx]="transaction"
+            [cached]="true"
+            [width]="graphWidth"
+            [height]="graphHeight"
+            [lineLimit]="inOutLimit"
+            [maxStrands]="graphExpanded ? maxInOut : 24"
+            [network]="stateService.network"
+            [tooltip]="true"
+            [connectors]="true"
+            [inputIndex]="null" [outputIndex]="null"
+          >
+          </tx-bowtie-graph>
+        </div>
+        <div class="toggle-wrapper" *ngIf="maxInOut > 24">
+          <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>
+          <ng-template #collapseBtn>
+            <button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
+          </ng-template>
+        </div>
+      </div>
+
+      <br>
+    </ng-container>
+    <ng-template #flowPlaceholder>
+      <div class="box hidden">
+        <div class="graph-container" #graphContainer>
+        </div>
+      </div>
+    </ng-template>
+
+    <div class="subtitle-block">
+      <div class="title">
+        <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+      </div>
+
+      <div class="title-buttons">
+        <button *ngIf="!flowEnabled" type="button" class="btn btn-outline-info flow-toggle btn-sm" (click)="toggleGraph()" i18n="show-diagram">Show diagram</button>
+        <button type="button" class="btn btn-outline-info btn-sm" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+      </div>
+    </div>
+
+
+    <app-transactions-list #txList [transactions]="[transaction]" [transactionPage]="true" [txPreview]="true"></app-transactions-list>
+
+    <div class="title text-left">
+      <h2 i18n="transaction.details|Transaction Details">Details</h2>
+    </div>
+    <div class="box">
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="block.size">Size</td>
+                <td [innerHTML]="'&lrm;' + (transaction.size | bytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
+                <td [innerHTML]="'&lrm;' + (transaction.weight / 4 | vbytes: 2)"></td>
+              </tr>
+              <tr *ngIf="adjustedVsize">
+                <td><ng-container i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize</ng-container>
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-is-adjusted-vsize">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
+                <td [innerHTML]="'&lrm;' + (adjustedVsize | vbytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="block.weight">Weight</td>
+                <td [innerHTML]="'&lrm;' + (transaction.weight | wuBytes: 2)"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="transaction.version">Version</td>
+                <td [innerHTML]="'&lrm;' + (transaction.version | number)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.locktime">Locktime</td>
+                <td [innerHTML]="'&lrm;' + (transaction.locktime | number)"></td>
+              </tr>
+              <tr *ngIf="transaction.sigops >= 0">
+                <td><ng-container i18n="transaction.sigops|Transaction Sigops">Sigops</ng-container>
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-are-sigops">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
+                <td [innerHTML]="'&lrm;' + (transaction.sigops | number)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.hex">Transaction hex</td>
+                <td><app-clipboard [text]="pushTxForm.get('txRaw').value" [leftPadding]="false"></app-clipboard></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (isLoading) {
+    <div class="text-center">
+      <div class="spinner-border text-light mt-2 mb-2"></div>
+      <h3 i18n="transaction.error.loading-prevouts">
+        Loading {{ isLoadingPrevouts ? 'transaction prevouts' : isLoadingCpfpInfo ? 'CPFP' : '' }}
+      </h3>
+    </div>
+  }
+</div>

frontend/src/app/components/transaction/transaction-raw.component.scss

@@ -0,0 +1,194 @@
+.label {
+  margin: 0 5px;
+}
+
+.container-buttons {
+  align-self: center;
+}
+
+.title-block {
+  flex-wrap: wrap;
+  align-items: baseline;
+  @media (min-width: 650px) {
+    flex-direction: row;
+  }
+  h1 {
+    margin: 0rem;
+    margin-right: 15px;
+    line-height: 1;
+  }
+}
+
+.tx-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: baseline;
+  width: 0;
+  max-width: 100%;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-top: 8px;
+  @media (min-width: 651px) {
+    flex-grow: 1;
+    margin-bottom: 0px;
+    margin-right: 1em;
+    top: 1px;
+    position: relative;
+  }
+  @media (max-width: 650px) {
+    width: 100%;
+    order: 3;
+  }
+
+  .txid {
+    width: 200px;
+    min-width: 200px;
+    flex-grow: 1;
+  }
+}
+
+.container-xl {
+	margin-bottom: 40px;
+}
+
+.row {
+	flex-direction: column;
+	@media (min-width: 850px) {
+		flex-direction: row;
+	}
+}
+
+.box.hidden {
+  visibility: hidden;
+  height: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.graph-container {
+  position: relative;
+  width: 100%;
+  background: var(--stat-box-bg);
+  padding: 10px 0;
+  padding-bottom: 0;
+}
+
+.toggle-wrapper {
+  width: 100%;
+  text-align: center;
+  margin: 1.25em 0 0;
+}
+
+.graph-toggle {
+  margin: auto;
+}
+
+.table {
+  tr td {
+		padding: 0.75rem 0.5rem;
+		@media (min-width: 576px) {
+			padding: 0.75rem 0.75rem;
+		}
+		&:last-child {
+			text-align: right;
+			@media (min-width: 850px) {
+        text-align: left;
+			}
+		}
+		.btn {
+			display: block;
+		}
+
+    &.wrap-cell {
+      white-space: normal;
+    }
+	}
+}
+
+.effective-fee-container {
+	display: block;
+	@media (min-width: 768px){
+		display: inline-block;
+	}
+  @media (max-width: 425px){
+		display: flex;
+    flex-direction: column;
+	}
+}
+
+.effective-fee-rating {
+  @media (max-width: 767px){
+    margin-right: 0px !important;
+  }
+}
+
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+}
+
+.btn-outline-info {
+	margin-top: 5px;
+	@media (min-width: 768px){
+		margin-top: 0px;
+	}
+}
+
+.flow-toggle {
+  margin-top: -5px;
+  margin-left: 10px;
+	@media (min-width: 768px){
+		display: inline-block;
+    margin-top: 0px;
+    margin-bottom: 0px;
+	}
+}
+
+.subtitle-block {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+
+  .title {
+    flex-shrink: 0;
+  }
+
+  .title-buttons {
+    flex-shrink: 1;
+    text-align: right;
+    .btn {
+      margin-top: 0;
+      margin-bottom: 8px;
+      margin-left: 8px;
+    }
+  }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
+
+  @media (max-width: 500px) {
+    .txids {
+      width: 40%;
+    }
+  }
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.no-cursor {
+  cursor: default !important;
+  pointer-events: none;
+}

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

@@ -0,0 +1,328 @@
+import { Component, OnInit, HostListener, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { Transaction, Vout } from '@interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { Filter, toFilters } from '../../shared/filters.utils';
+import { decodeRawTransaction, getTransactionFlags, addInnerScriptsToVin, countSigops } from '../../shared/transaction.utils';
+import { ETA, EtaService } from '../../services/eta.service';
+import { combineLatest, firstValueFrom, map, Observable, startWith, Subscription } from 'rxjs';
+import { WebsocketService } from '../../services/websocket.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { ApiService } from '../../services/api.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { CpfpInfo } from '../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-transaction-raw',
+  templateUrl: './transaction-raw.component.html',
+  styleUrls: ['./transaction-raw.component.scss'],
+})
+export class TransactionRawComponent implements OnInit, OnDestroy {
+
+  pushTxForm: UntypedFormGroup;
+  isLoading: boolean;
+  isLoadingPrevouts: boolean;
+  isLoadingCpfpInfo: boolean;
+  offlineMode: boolean = false;
+  transaction: Transaction;
+  error: string;
+  errorPrevouts: string;
+  errorCpfpInfo: string;
+  hasPrevouts: boolean;
+  missingPrevouts: string[];
+  isLoadingBroadcast: boolean;
+  errorBroadcast: string;
+  successBroadcast: boolean;
+
+  isMobile: boolean;
+  @ViewChild('graphContainer')
+  graphContainer: ElementRef;
+  graphExpanded: boolean = false;
+  graphWidth: number = 1068;
+  graphHeight: number = 360;
+  inOutLimit: number = 150;
+  maxInOut: number = 0;
+  flowPrefSubscription: Subscription;
+  hideFlow: boolean = this.stateService.hideFlow.value;
+  flowEnabled: boolean;
+  adjustedVsize: number;
+  filters: Filter[] = [];
+  hasEffectiveFeeRate: boolean;
+  fetchCpfp: boolean;
+  cpfpInfo: CpfpInfo | null;
+  hasCpfp: boolean = false;
+  showCpfpDetails = false;
+  ETA$: Observable<ETA | null>;
+  mempoolBlocksSubscription: Subscription;
+
+  constructor(
+    public route: ActivatedRoute,
+    public router: Router,
+    public stateService: StateService,
+    public etaService: EtaService,
+    public electrsApi: ElectrsApiService,
+    public websocketService: WebsocketService,
+    public formBuilder: UntypedFormBuilder,
+    public seoService: SeoService,
+    public apiService: ApiService,
+    public relativeUrlPipe: RelativeUrlPipe,
+  ) {}
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@meta.title.preview-tx:Preview Transaction`);
+    this.seoService.setDescription($localize`:@@meta.description.preview-tx:Preview a transaction to the Bitcoin${seoDescriptionNetwork(this.stateService.network)} network using the transaction's raw hex data.`);
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.pushTxForm = this.formBuilder.group({
+      txRaw: ['', Validators.required],
+    });
+  }
+
+  async decodeTransaction(): Promise<void> {
+    this.resetState();
+    this.isLoading = true;
+    try {
+      const tx = decodeRawTransaction(this.pushTxForm.get('txRaw').value, this.stateService.network);
+      await this.fetchPrevouts(tx);
+      await this.fetchCpfpInfo(tx);
+      this.processTransaction(tx);
+    } catch (error) {
+      this.error = error.message;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async fetchPrevouts(transaction: Transaction): Promise<void> {
+    if (this.offlineMode) {
+      return;
+    }
+
+    const prevoutsToFetch = transaction.vin.map((input) => ({ txid: input.txid, vout: input.vout }));
+
+    if (!prevoutsToFetch.length || transaction.vin[0].is_coinbase) {
+      this.hasPrevouts = true;
+      return;
+    }
+
+    try {
+      this.missingPrevouts = [];
+      this.isLoadingPrevouts = true;
+
+      const prevouts: { prevout: Vout, unconfirmed: boolean }[] = await firstValueFrom(this.apiService.getPrevouts$(prevoutsToFetch));
+
+      if (prevouts?.length !== prevoutsToFetch.length) {
+        throw new Error();
+      }
+
+      transaction.vin = transaction.vin.map((input, index) => {
+        if (prevouts[index]) {
+          input.prevout = prevouts[index].prevout;
+          addInnerScriptsToVin(input);
+        } else {
+          this.missingPrevouts.push(`${input.txid}:${input.vout}`);
+        }
+        return input;
+      });
+
+      if (this.missingPrevouts.length) {
+        throw new Error(`Some prevouts do not exist or are already spent (${this.missingPrevouts.length})`);
+      }
+
+      transaction.fee = transaction.vin.some(input => input.is_coinbase)
+        ? 0
+        : transaction.vin.reduce((fee, input) => {
+          return fee + (input.prevout?.value || 0);
+        }, 0) - transaction.vout.reduce((sum, output) => sum + output.value, 0);
+      transaction.feePerVsize = transaction.fee / (transaction.weight / 4);
+      transaction.sigops = countSigops(transaction);
+
+      this.hasPrevouts = true;
+      this.isLoadingPrevouts = false;
+      this.fetchCpfp = prevouts.some(prevout => prevout?.unconfirmed);
+    } catch (error) {
+      console.log(error);
+      this.errorPrevouts = error?.error?.error || error?.message;
+      this.isLoadingPrevouts = false;
+    }
+  }
+
+  async fetchCpfpInfo(transaction: Transaction): Promise<void> {
+    // Fetch potential cpfp data if all prevouts were parsed successfully and at least one of them is unconfirmed
+    if (this.hasPrevouts && this.fetchCpfp) {
+      try {
+        this.isLoadingCpfpInfo = true;
+        const cpfpInfo: CpfpInfo[] = await firstValueFrom(this.apiService.getCpfpLocalTx$([{
+          txid: transaction.txid,
+          weight: transaction.weight,
+          sigops: transaction.sigops,
+          fee: transaction.fee,
+          vin: transaction.vin,
+          vout: transaction.vout
+        }]));
+
+        if (cpfpInfo?.[0]?.ancestors?.length) {
+          const { ancestors, effectiveFeePerVsize } = cpfpInfo[0];
+          transaction.effectiveFeePerVsize = effectiveFeePerVsize;
+          this.cpfpInfo = { ancestors, effectiveFeePerVsize };
+          this.hasCpfp = true;
+          this.hasEffectiveFeeRate = true;
+        }
+        this.isLoadingCpfpInfo = false;
+      } catch (error) {
+        this.errorCpfpInfo = error?.error?.error || error?.message;
+        this.isLoadingCpfpInfo = false;
+      }
+    }
+  }
+
+  processTransaction(tx: Transaction): void {
+    this.transaction = tx;
+
+    this.transaction.flags = getTransactionFlags(this.transaction, null, null, null, this.stateService.network);
+    this.filters = this.transaction.flags ? toFilters(this.transaction.flags).filter(f => f.txPage) : [];
+    if (this.transaction.sigops >= 0) {
+      this.adjustedVsize = Math.max(this.transaction.weight / 4, this.transaction.sigops * 5);
+    }
+
+    this.setupGraph();
+    this.setFlowEnabled();
+    this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => {
+      this.hideFlow = !!hide;
+      this.setFlowEnabled();
+    });
+    this.setGraphSize();
+
+    this.ETA$ = combineLatest([
+      this.stateService.mempoolBlocks$.pipe(startWith(null)),
+      this.stateService.difficultyAdjustment$.pipe(startWith(null)),
+    ]).pipe(
+      map(([mempoolBlocks, da]) => {
+        return this.etaService.calculateETA(
+          this.stateService.network,
+          this.transaction,
+          mempoolBlocks,
+          null,
+          da,
+          null,
+          null,
+          null
+        );
+      })
+    );
+
+    this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe(() => {
+      if (this.transaction) {
+        this.stateService.markBlock$.next({
+          txid: this.transaction.txid,
+          txFeePerVSize: this.transaction.effectiveFeePerVsize || this.transaction.feePerVsize,
+        });
+      }
+    });
+  }
+
+  async postTx(): Promise<string> {
+    this.isLoadingBroadcast = true;
+    this.errorBroadcast = null;
+    return new Promise((resolve, reject) => {
+      this.apiService.postTransaction$(this.pushTxForm.get('txRaw').value)
+      .subscribe((result) => {
+        this.isLoadingBroadcast = false;
+        this.successBroadcast = true;
+        this.transaction.txid = result;
+        resolve(result);
+      },
+      (error) => {
+        if (typeof error.error === 'string') {
+          const matchText = error.error.replace(/\\/g, '').match('"message":"(.*?)"');
+          this.errorBroadcast = 'Failed to broadcast transaction, reason: ' + (matchText && matchText[1] || error.error);
+        } else if (error.message) {
+          this.errorBroadcast = 'Failed to broadcast transaction, reason: ' + error.message;
+        }
+        this.isLoadingBroadcast = false;
+        reject(this.error);
+      });
+    });
+  }
+
+  resetState() {
+    this.transaction = null;
+    this.error = null;
+    this.errorPrevouts = null;
+    this.errorBroadcast = null;
+    this.successBroadcast = false;
+    this.isLoading = false;
+    this.isLoadingPrevouts = false;
+    this.isLoadingCpfpInfo = false;
+    this.isLoadingBroadcast = false;
+    this.adjustedVsize = null;
+    this.showCpfpDetails = false;
+    this.hasCpfp = false;
+    this.fetchCpfp = false;
+    this.cpfpInfo = null;
+    this.hasEffectiveFeeRate = false;
+    this.filters = [];
+    this.hasPrevouts = false;
+    this.missingPrevouts = [];
+    this.stateService.markBlock$.next({});
+    this.mempoolBlocksSubscription?.unsubscribe();
+  }
+
+  resetForm() {
+    this.resetState();
+    this.pushTxForm.reset();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  setGraphSize(): void {
+    this.isMobile = window.innerWidth < 850;
+    if (this.graphContainer?.nativeElement && this.stateService.isBrowser) {
+      setTimeout(() => {
+        if (this.graphContainer?.nativeElement?.clientWidth) {
+          this.graphWidth = this.graphContainer.nativeElement.clientWidth;
+        } else {
+          setTimeout(() => { this.setGraphSize(); }, 1);
+        }
+      }, 1);
+    } else {
+      setTimeout(() => { this.setGraphSize(); }, 1);
+    }
+  }
+
+  setupGraph() {
+    this.maxInOut = Math.min(this.inOutLimit, Math.max(this.transaction?.vin?.length || 1, this.transaction?.vout?.length + 1 || 1));
+    this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);
+  }
+
+  toggleGraph() {
+    const showFlow = !this.flowEnabled;
+    this.stateService.hideFlow.next(!showFlow);
+  }
+
+  setFlowEnabled() {
+    this.flowEnabled = !this.hideFlow;
+  }
+
+  expandGraph() {
+    this.graphExpanded = true;
+    this.graphHeight = this.maxInOut * 15;
+  }
+
+  collapseGraph() {
+    this.graphExpanded = false;
+    this.graphHeight = Math.min(360, this.maxInOut * 80);
+  }
+
+  onOfflineModeChange(e): void {
+    this.offlineMode = !e.target.checked;
+  }
+
+  ngOnDestroy(): void {
+    this.mempoolBlocksSubscription?.unsubscribe();
+    this.flowPrefSubscription?.unsubscribe();
+    this.stateService.markBlock$.next({});
+  }
+
+}

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

@@ -24,7 +24,6 @@
           [height]="tx?.status?.block_height"
           [replaced]="replaced"
           [removed]="this.rbfInfo?.mined && !this.tx?.status?.confirmed"
-          [cached]="isCached"
         ></app-confirmations>
       </div>
     </ng-container>
@@ -67,64 +66,7 @@
   <ng-template [ngIf]="!isLoadingTx && !error">
 
     <!-- CPFP Details -->
-    <ng-template [ngIf]="showCpfpDetails">
-      <br>
-      <div class="title">
-        <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
-      </div>
-      <div class="box cpfp-details">
-        <table class="table table-fixed table-borderless table-striped">
-          <thead>
-            <tr>
-              <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
-              <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
-              <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
-              <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
-              <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
-              <th class="d-none d-lg-table-cell"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ng-template [ngIf]="cpfpInfo?.descendants?.length">
-              <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
-                <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td>
-                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-            <ng-template [ngIf]="cpfpInfo?.bestDescendant">
-              <tr>
-                <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td class="txids">
-                  <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-            <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
-              <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
-                <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
-                <td class="txids">
-                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-          </tbody>
-        </table>
-      </div>
-    </ng-template>
+    <app-cpfp-info *ngIf="showCpfpDetails" [cpfpInfo]="cpfpInfo" [tx]="tx"></app-cpfp-info>
 
     <!-- Accelerator -->
     <ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary && (ETA$ | async) as eta;">

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

@@ -227,18 +227,6 @@
   }
 }
 
-.cpfp-details {
-  .txids {
-    width: 60%;
-  }
-
-  @media (max-width: 500px) {
-    .txids {
-      width: 40%;
-    }
-  }
-}
-
 .tx-list {
   .alert-link {
     display: block;

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?.[0] > 0 || this.tx.status?.confirmed),
+        filter((transactionTimes) => transactionTimes?.length && transactionTimes[0] > 0 && !this.tx.status?.confirmed),
         take(1),
       )),
     )
@@ -1054,10 +1054,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.stateService.markBlock$.next({});
   }
 
-  roundToOneDecimal(cpfpTx: any): number {
-    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
-  }
-
   setupGraph() {
     this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
     this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);

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

@@ -9,6 +9,8 @@ import { TransactionExtrasModule } from '@components/transaction/transaction-ext
 import { GraphsModule } from '@app/graphs/graphs.module';
 import { AccelerateCheckout } from '@components/accelerate-checkout/accelerate-checkout.component';
 import { AccelerateFeeGraphComponent } from '@components/accelerate-checkout/accelerate-fee-graph.component';
+import { TransactionRawComponent } from '@components/transaction/transaction-raw.component';
+import { CpfpInfoComponent } from '@components/transaction/cpfp-info.component';
 
 const routes: Routes = [
   {
@@ -16,6 +18,10 @@ const routes: Routes = [
     redirectTo: '/',
     pathMatch: 'full',
   },
+  {
+    path: 'preview',
+    component: TransactionRawComponent,
+  },
   {
     path: ':id',
     component: TransactionComponent,
@@ -49,12 +55,15 @@ export class TransactionRoutingModule { }
     TransactionDetailsComponent,
     AccelerateCheckout,
     AccelerateFeeGraphComponent,
+    TransactionRawComponent,
+    CpfpInfoComponent,
   ],
   exports: [
     TransactionComponent,
     TransactionDetailsComponent,
     AccelerateCheckout,
     AccelerateFeeGraphComponent,
+    CpfpInfoComponent,
   ]
 })
 export class TransactionModule { }

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

@@ -37,6 +37,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   @Input() addresses: string[] = [];
   @Input() rowLimit = 12;
   @Input() blockTime: number = 0; // Used for price calculation if all the transactions are in the same block
+  @Input() txPreview = false;
 
   @Output() loadMore = new EventEmitter();
 
@@ -81,7 +82,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       this.refreshOutspends$
         .pipe(
           switchMap((txIds) => {
-            if (!this.cached) {
+            if (!this.cached && !this.txPreview) {
               // break list into batches of 50 (maximum supported by esplora)
               const batches = [];
               for (let i = 0; i < txIds.length; i += 50) {
@@ -119,7 +120,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         ),
         this.refreshChannels$
           .pipe(
-            filter(() => this.stateService.networkSupportsLightning()),
+            filter(() => this.stateService.networkSupportsLightning() && !this.txPreview),
             switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
             catchError((error) => {
               // handle 404
@@ -187,7 +188,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       }
 
       this.transactionsLength = this.transactions.length;
-      this.cacheService.setTxCache(this.transactions);
+      
+      if (!this.txPreview) {
+        this.cacheService.setTxCache(this.transactions);
+      }
 
       const confirmedTxs = this.transactions.filter((tx) => tx.status.confirmed).length;
       this.transactions.forEach((tx) => {
@@ -202,12 +206,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             for (const address of this.addresses) {
               switch (address.length) {
                 case 130: {
-                  if (v.scriptpubkey === '41' + address + 'ac') {
+                  if (v.scriptpubkey === '21' + address + 'ac') {
                     return v.value;
                   }
                 } break;
                 case 66: {
-                  if (v.scriptpubkey === '21' + address + 'ac') {
+                  if (v.scriptpubkey === '41' + address + 'ac') {
                     return v.value;
                   }
                 } break;
@@ -224,12 +228,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             for (const address of this.addresses) {
               switch (address.length) {
                 case 130: {
-                  if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
+                  if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
                     return v.prevout?.value;
                   }
                 } break;
                 case 66: {
-                  if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
+                  if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
                     return v.prevout?.value;
                   }
                 } break;
@@ -351,7 +355,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   }
 
   loadMoreInputs(tx: Transaction): void {
-    if (!tx['@vinLoaded']) {
+    if (!tx['@vinLoaded'] && !this.txPreview) {
       this.electrsApiService.getTransaction$(tx.txid)
         .subscribe((newTx) => {
           tx['@vinLoaded'] = true;

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>{{ walletName }}</h1>
+    <h1 i18n="shared.wallet">Wallet</h1>
   </div>
 
   <div class="clearfix"></div>
@@ -74,36 +74,6 @@
     </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,8 +9,6 @@ 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[];
@@ -26,7 +24,6 @@ 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,
@@ -112,17 +109,12 @@ 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;
 
@@ -137,8 +129,6 @@ export class WalletComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private stateService: StateService,
     private apiService: ApiService,
-    private electrsApiService: ElectrsApiService,
-    private audioService: AudioService,
     private seoService: SeoService,
   ) { }
 
@@ -182,21 +172,6 @@ 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> = {};
@@ -292,57 +267,8 @@ 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[] {
@@ -373,6 +299,5 @@ 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, wsApiDocsData } from '@app/docs/api-docs/api-docs-data';
+import { restApiDocsData } from '@app/docs/api-docs/api-docs-data';
 import { faqData } from '@app/docs/api-docs/api-docs-data';
 
 @Component({
@@ -28,8 +28,6 @@ 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,43 +108,18 @@
       </div>
     </div>
 
-    <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 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>
-        </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 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>
+          <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,21 +470,3 @@ 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' ) || ( this.whichTab === 'websocket' ) ) && targetId ) {
+    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) ) && targetId ) {
       const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
       const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
       const endPointContentElHeight = endpointContentEl.clientHeight;
@@ -207,29 +207,13 @@ 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 } from "./electrs.interface";
+import { AddressTxSummary, Block, ChainStats, Transaction } from "./electrs.interface";
 
 export interface OptimizedMempoolStats {
   added: number;

frontend/src/app/route-guards.ts

@@ -14,7 +14,7 @@ class GuardService {
   trackerGuard(route: Route, segments: UrlSegment[]): boolean {
     const preferredRoute = this.router.getCurrentNavigation()?.extractedUrl.queryParams?.mode;
     const path = this.router.getCurrentNavigation()?.extractedUrl.root.children.primary.segments;
-    return (preferredRoute === 'status' || (preferredRoute !== 'details' && this.navigationService.isInitialLoad())) && window.innerWidth <= 767.98 && !(path.length === 2 && ['push', 'test'].includes(path[1].path));
+    return (preferredRoute === 'status' || (preferredRoute !== 'details' && this.navigationService.isInitialLoad())) && window.innerWidth <= 767.98 && !(path.length === 2 && ['push', 'test', 'preview'].includes(path[1].path));
   }
 }
 

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

@@ -565,6 +565,14 @@ export class ApiService {
     return this.httpClient.post(this.apiBaseUrl + this.apiBasePath + '/api/v1/acceleration/request/' + txid, '');
   }
 
+  getPrevouts$(outpoints: {txid: string; vout: number}[]): Observable<any> {
+    return this.httpClient.post(this.apiBaseUrl + this.apiBasePath + '/api/v1/prevouts', outpoints);
+  }
+
+  getCpfpLocalTx$(tx: any[]): Observable<CpfpInfo[]> {
+    return this.httpClient.post<CpfpInfo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/cpfp', tx);
+  }
+
   // Cache methods
   async setBlockAuditLoaded(hash: string) {
     this.blockAuditLoaded[hash] = true;

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

@@ -142,16 +142,12 @@ 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.post<Transaction[]>(
-      this.apiBaseUrl + this.apiBasePath + '/api/addresses/txs',
-      addresses,
-      { params }
-    );
+    return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs?addresses=${addresses.join(',')}`, { params });
   }
 
   getAddressSummary$(address: string,  txid?: string): Observable<AddressTxSummary[]> {
@@ -167,7 +163,7 @@ export class ElectrsApiService {
     if (txid) {
       params = params.append('after_txid', txid);
     }
-    return this.httpClient.post<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/addresses/txs/summary', addresses, { params });
+    return this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs/summary?addresses=${addresses.join(',')}`, { params });
   }
 
   getScriptHashTransactions$(script: string,  txid?: string): Observable<Transaction[]> {
@@ -186,7 +182,7 @@ export class ElectrsApiService {
       params = params.append('after_txid', txid);
     }
     return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
-      switchMap(scriptHashes => this.httpClient.post<Transaction[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthashes/txs', scriptHashes, { params })),
+      switchMap(scriptHashes => this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs?scripthashes=${scriptHashes.join(',')}`, { params })),
     );
   }
 
@@ -216,7 +212,7 @@ export class ElectrsApiService {
       params = params.append('after_txid', txid);
     }
     return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
-      switchMap(scriptHashes => this.httpClient.post<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthashes/txs/summary', scriptHashes, { params })),
+      switchMap(scriptHashes => this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs/summary?scripthashes=${scriptHashes.join(',')}`, { 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 { Customization, StateService } from '@app/services/state.service';
+import { StateService } from '@app/services/state.service';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
@@ -51,8 +51,6 @@ 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 {
@@ -69,50 +67,6 @@ 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,9 +12,6 @@ import { LanguageService } from '@app/services/language.service';
 export class OpenGraphService {
   network = '';
   defaultImageUrl = '';
-  defaultImageType = 'image/png';
-  defaultImageWidth = '1000';
-  defaultImageHeight = '500';
   previewLoadingEvents = {};
   previewLoadingCount = 0;
 
@@ -28,17 +25,12 @@ export class OpenGraphService {
   ) {
     // save og:image tag from original template
     const initialOgImageTag = metaService.getTag("property='og:image'");
-    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.defaultImageUrl = initialOgImageTag?.content || 'https://mempool.space/resources/previews/mempool-space-preview.jpg';
     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'),
@@ -53,7 +45,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) }
     };
   }
 
@@ -70,9 +62,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: this.defaultImageType });
-    this.metaService.updateTag({ property: 'og:image:width', content: this.defaultImageWidth });
-    this.metaService.updateTag({ property: 'og:image:height', content: this.defaultImageHeight });
+    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' });
   }
 
   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 { Customization, StateService } from '@app/services/state.service';
+import { StateService } from '@app/services/state.service';
 
 @Injectable({
   providedIn: 'root'
@@ -23,17 +23,13 @@ export class SeoService {
     private activatedRoute: ActivatedRoute,
   ) {
     // save original meta tags
-    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.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.stateService.networkChanged$.subscribe((network) => this.network = network);
@@ -74,22 +70,6 @@ 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,6 +18,7 @@ export interface IUser {
   subscription_tag: string;
   status: 'pending' | 'verified' | 'disabled';
   features: string | null;
+  fullName: string | null;
   countryCode: string | null;
   imageMd5: string;
   ogRank: number | null;
@@ -142,8 +143,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, 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 });
+  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 });
   }
 
   getAccelerations$(): Observable<Acceleration[]> {

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

@@ -22,7 +22,6 @@ export interface MarkBlockState {
 export interface ILoadingIndicators { [name: string]: number; }
 
 export interface Customization {
-  domains: string[];
   theme: string;
   enterprise?: string;
   branding: {
@@ -34,16 +33,6 @@ 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 || cached)">
+<ng-template [ngIf]="!hideUnconfirmed && !confirmations && !replaced && removed">
   <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 || cached)">
+<ng-template [ngIf]="!hideUnconfirmed && chainTip != null && !confirmations && !replaced && !removed">
   <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,7 +12,6 @@ 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/components/global-footer/global-footer.component.html

@@ -76,6 +76,7 @@
           <p><a [routerLink]="['/blocks' | relativeUrl]" i18n="dashboard.recent-blocks">Recent Blocks</a></p>
           <p><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
           <p><a [routerLink]="['/tx/test' | relativeUrl]" i18n="shared.test-transaction|Test Transaction">Test Transaction</a></p>
+          <p><a [routerLink]="['/tx/preview' | relativeUrl]" i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</a></p>
           <p *ngIf="officialMempoolSpace"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>
           <p><a [routerLink]="['/docs/api' | relativeUrl]" i18n="footer.api-documentation">API Documentation</a></p>
         </div>

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

@@ -1,6 +1,6 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
     <ng-container *ngIf="link">
-      <a [routerLink]="link" [queryParams]="queryParams" class="truncate-link" [target]="external ? '_blank' : '_self'">
+      <a [routerLink]="link" [queryParams]="queryParams" class="truncate-link" [target]="external ? '_blank' : '_self'" [class.disabled]="disabled">
         <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
       </a>
     </ng-container>

frontend/src/app/shared/components/truncate/truncate.component.scss

@@ -37,6 +37,12 @@
     max-width: 300px;
     overflow: hidden;
   }
+
+  .disabled {
+    pointer-events: none;
+    opacity: 0.8;
+    color: #fff;
+  }
 }
 
 @media (max-width: 567px) {

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

@@ -15,6 +15,7 @@ export class TruncateComponent {
   @Input() maxWidth: number = null;
   @Input() inline: boolean = false;
   @Input() textAlign: 'start' | 'end' = 'start';
+  @Input() disabled: boolean = false;
   rtl: boolean;
 
   constructor(

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, faMoneyBillTrendUp } 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 } 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,6 +451,5 @@ export class SharedModule {
     library.addIcons(faTimeline);
     library.addIcons(faCircleXmark);
     library.addIcons(faCalendarCheck);
-    library.addIcons(faMoneyBillTrendUp);
   }
 }

frontend/src/app/shared/transaction.utils.ts

@@ -1,8 +1,9 @@
 import { TransactionFlags } from '@app/shared/filters.utils';
-import { getVarIntLength, opcodes, parseMultisigScript, isPoint } from '@app/shared/script.utils';
-import { Transaction } from '@interfaces/electrs.interface';
+import { getVarIntLength, parseMultisigScript, isPoint } from '@app/shared/script.utils';
+import { Transaction, Vin } from '@interfaces/electrs.interface';
 import { CpfpInfo, RbfInfo, TransactionStripped } from '@interfaces/node-api.interface';
 import { StateService } from '@app/services/state.service';
+import { Hash } from './sha256';
 
 // Bitcoin Core default policy settings
 const MAX_STANDARD_TX_WEIGHT = 400_000;
@@ -588,3 +589,762 @@ export function identifyPrioritizedTransactions(transactions: TransactionStrippe
 
   return { prioritized, deprioritized };
 }
+
+// Adapted from mempool backend https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/api/transaction-utils.ts#L254
+// Converts hex bitcoin script to ASM
+function convertScriptSigAsm(hex: string): string {
+
+  const buf = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < buf.length; i++) {
+    buf[i] = parseInt(hex.substr(i * 2, 2), 16);
+  }
+
+  const b = [];
+  let i = 0;
+
+  while (i < buf.length) {
+    const op = buf[i];
+    if (op >= 0x01 && op <= 0x4e) {
+      i++;
+      let push;
+      if (op === 0x4c) {
+        push = buf[i];
+        b.push('OP_PUSHDATA1');
+        i += 1;
+      } else if (op === 0x4d) {
+        push = buf[i] | (buf[i + 1] << 8);
+        b.push('OP_PUSHDATA2');
+        i += 2;
+      } else if (op === 0x4e) {
+        push = buf[i] | (buf[i + 1] << 8) | (buf[i + 2] << 16) | (buf[i + 3] << 24);
+        b.push('OP_PUSHDATA4');
+        i += 4;
+      } else {
+        push = op;
+        b.push('OP_PUSHBYTES_' + push);
+      }
+
+      const data = buf.slice(i, i + push);
+      if (data.length !== push) {
+        break;
+      }
+
+      b.push(uint8ArrayToHexString(data));
+      i += data.length;
+    } else {
+      if (op === 0x00) {
+        b.push('OP_0');
+      } else if (op === 0x4f) {
+        b.push('OP_PUSHNUM_NEG1');
+      } else if (op === 0xb1) {
+        b.push('OP_CLTV');
+      } else if (op === 0xb2) {
+        b.push('OP_CSV');
+      } else if (op === 0xba) {
+        b.push('OP_CHECKSIGADD');
+      } else {
+        const opcode = opcodes[op];
+        if (opcode) {
+          b.push(opcode);
+        } else {
+          b.push('OP_RETURN_' + op);
+        }
+      }
+      i += 1;
+    }
+  }
+
+  return b.join(' ');
+}
+
+// Copied from mempool backend https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/api/transaction-utils.ts#L327
+/**
+ * This function must only be called when we know the witness we are parsing
+ * is a taproot witness.
+ * @param witness An array of hex strings that represents the witness stack of
+ *                the input.
+ * @returns null if the witness is not a script spend, and the hex string of
+ *          the script item if it is a script spend.
+ */
+function witnessToP2TRScript(witness: string[]): string | null {
+  if (witness.length < 2) return null;
+  // Note: see BIP341 for parsing details of witness stack
+
+  // If there are at least two witness elements, and the first byte of the
+  // last element is 0x50, this last element is called annex a and
+  // is removed from the witness stack.
+  const hasAnnex = witness[witness.length - 1].substring(0, 2) === '50';
+  // If there are at least two witness elements left, script path spending is used.
+  // Call the second-to-last stack element s, the script.
+  // (Note: this phrasing from BIP341 assumes we've *removed* the annex from the stack)
+  if (hasAnnex && witness.length < 3) return null;
+  const positionOfScript = hasAnnex ? witness.length - 3 : witness.length - 2;
+  return witness[positionOfScript];
+}
+
+// Copied from mempool backend https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/api/transaction-utils.ts#L227
+// Fills inner_redeemscript_asm and inner_witnessscript_asm fields of fetched prevouts for decoded transactions
+export function addInnerScriptsToVin(vin: Vin): void {
+  if (!vin.prevout) {
+    return;
+  }
+
+  if (vin.prevout.scriptpubkey_type === 'p2sh') {
+    const redeemScript = vin.scriptsig_asm.split(' ').reverse()[0];
+    vin.inner_redeemscript_asm = convertScriptSigAsm(redeemScript);
+    if (vin.witness && vin.witness.length > 2) {
+      const witnessScript = vin.witness[vin.witness.length - 1];
+      vin.inner_witnessscript_asm = convertScriptSigAsm(witnessScript);
+    }
+  }
+
+  if (vin.prevout.scriptpubkey_type === 'v0_p2wsh' && vin.witness) {
+    const witnessScript = vin.witness[vin.witness.length - 1];
+    vin.inner_witnessscript_asm = convertScriptSigAsm(witnessScript);
+  }
+
+  if (vin.prevout.scriptpubkey_type === 'v1_p2tr' && vin.witness) {
+    const witnessScript = witnessToP2TRScript(vin.witness);
+    if (witnessScript !== null) {
+      vin.inner_witnessscript_asm = convertScriptSigAsm(witnessScript);
+    }
+  }
+}
+
+// Adapted from bitcoinjs-lib at https://github.com/bitcoinjs/bitcoinjs-lib/blob/32e08aa57f6a023e995d8c4f0c9fbdc5f11d1fa0/ts_src/transaction.ts#L78
+// Reads buffer of raw transaction data
+function fromBuffer(buffer: Uint8Array, network: string): Transaction {
+  let offset = 0;
+
+  function readInt8(): number {
+    if (offset + 1 > buffer.length) {
+      throw new Error('Buffer out of bounds');
+    }
+    return buffer[offset++];
+  }
+
+  function readInt16() {
+    if (offset + 2 > buffer.length) {
+      throw new Error('Buffer out of bounds');
+    }
+    const value = buffer[offset] | (buffer[offset + 1] << 8);
+    offset += 2;
+    return value;
+  }
+
+  function readInt32(unsigned = false): number {
+    if (offset + 4 > buffer.length) {
+      throw new Error('Buffer out of bounds');
+    }
+    const value = buffer[offset] | (buffer[offset + 1] << 8) | (buffer[offset + 2] << 16) | (buffer[offset + 3] << 24);
+    offset += 4;
+    if (unsigned) {
+      return value >>> 0;
+    }
+    return value;
+  }
+
+  function readInt64(): bigint {
+    if (offset + 8 > buffer.length) {
+      throw new Error('Buffer out of bounds');
+    }
+    const low = BigInt(buffer[offset] | (buffer[offset + 1] << 8) | (buffer[offset + 2] << 16) | (buffer[offset + 3] << 24));
+    const high = BigInt(buffer[offset + 4] | (buffer[offset + 5] << 8) | (buffer[offset + 6] << 16) | (buffer[offset + 7] << 24));
+    offset += 8;
+    return (high << 32n) | (low & 0xffffffffn);
+  }
+
+  function readVarInt(): bigint {
+    const first = readInt8();
+    if (first < 0xfd) {
+      return BigInt(first);
+    } else if (first === 0xfd) {
+      return BigInt(readInt16());
+    } else if (first === 0xfe) {
+      return BigInt(readInt32(true));
+    } else if (first === 0xff) {
+      return readInt64();
+    } else {
+      throw new Error("Invalid VarInt prefix");
+    }
+  }
+
+  function readSlice(n: number | bigint): Uint8Array {
+    const length = Number(n);
+    if (offset + length > buffer.length) {
+      throw new Error('Cannot read slice out of bounds');
+    }
+    const slice = buffer.slice(offset, offset + length);
+    offset += length;
+    return slice;
+  }
+
+  function readVarSlice(): Uint8Array {
+    return readSlice(readVarInt());
+  }
+
+  function readVector(): Uint8Array[] {
+    const count = readVarInt();
+    const vector = [];
+    for (let i = 0; i < count; i++) {
+      vector.push(readVarSlice());
+    }
+    return vector;
+  }
+
+  // Parse raw transaction
+  const tx = {
+    status: {
+      confirmed: null,
+      block_height: null,
+      block_hash: null,
+      block_time: null,
+    }
+  } as Transaction;
+  
+  tx.version = readInt32();
+
+  const marker = readInt8();
+  const flag = readInt8();
+
+  let hasWitnesses = false;
+  if (
+    marker === 0x00 &&
+    flag === 0x01
+  ) {
+    hasWitnesses = true;
+  } else {
+    offset -= 2;
+  }
+
+  const vinLen = readVarInt();
+  tx.vin = [];
+  for (let i = 0; i < vinLen; ++i) {
+    const txid = uint8ArrayToHexString(readSlice(32).reverse());
+    const vout = readInt32(true);
+    const scriptsig = uint8ArrayToHexString(readVarSlice());
+    const sequence = readInt32(true);
+    const is_coinbase = txid === '0'.repeat(64);
+    const scriptsig_asm = convertScriptSigAsm(scriptsig);
+    tx.vin.push({ txid, vout, scriptsig, sequence, is_coinbase, scriptsig_asm, prevout: null });
+  }
+
+  const voutLen = readVarInt();
+  tx.vout = [];
+  for (let i = 0; i < voutLen; ++i) {
+    const value = Number(readInt64());
+    const scriptpubkeyArray = readVarSlice();
+    const scriptpubkey = uint8ArrayToHexString(scriptpubkeyArray)
+    const scriptpubkey_asm = convertScriptSigAsm(scriptpubkey);
+    const toAddress = scriptPubKeyToAddress(scriptpubkey, network);
+    const scriptpubkey_type = toAddress.type;
+    const scriptpubkey_address = toAddress?.address;
+    tx.vout.push({ value, scriptpubkey, scriptpubkey_asm, scriptpubkey_type, scriptpubkey_address });
+  }
+
+  let witnessSize = 0;
+  if (hasWitnesses) {
+    const startOffset = offset;
+    for (let i = 0; i < vinLen; ++i) {
+      tx.vin[i].witness = readVector().map(uint8ArrayToHexString);
+    }
+    witnessSize = offset - startOffset + 2;
+  }
+
+  tx.locktime = readInt32(true);
+
+  if (offset !== buffer.length) {
+    throw new Error('Transaction has unexpected data');
+  }
+  
+  tx.size = buffer.length;
+  tx.weight = (tx.size - witnessSize) * 3 + tx.size;
+
+  tx.txid = txid(tx);
+
+  return tx;
+}
+
+export function decodeRawTransaction(rawtx: string, network: string): Transaction {
+  if (!rawtx.length || rawtx.length % 2 !== 0 || !/^[0-9a-fA-F]*$/.test(rawtx)) {
+    throw new Error('Invalid hex string');
+  }
+
+  const buffer = new Uint8Array(rawtx.length / 2);
+  for (let i = 0; i < rawtx.length; i += 2) {
+    buffer[i / 2] = parseInt(rawtx.substring(i, i + 2), 16);
+  }
+
+  return fromBuffer(buffer, network);
+}
+
+function serializeTransaction(tx: Transaction): Uint8Array {
+  const result: number[] = [];
+
+  // Add version
+  result.push(...intToBytes(tx.version, 4));
+
+  // Add input count and inputs
+  result.push(...varIntToBytes(tx.vin.length));
+  for (const input of tx.vin) {
+    result.push(...hexStringToUint8Array(input.txid).reverse());
+    result.push(...intToBytes(input.vout, 4));
+    const scriptSig = hexStringToUint8Array(input.scriptsig);
+    result.push(...varIntToBytes(scriptSig.length));
+    result.push(...scriptSig);
+    result.push(...intToBytes(input.sequence, 4));
+  }
+
+  // Add output count and outputs
+  result.push(...varIntToBytes(tx.vout.length));
+  for (const output of tx.vout) {
+    result.push(...bigIntToBytes(BigInt(output.value), 8));
+    const scriptPubKey = hexStringToUint8Array(output.scriptpubkey);
+    result.push(...varIntToBytes(scriptPubKey.length));
+    result.push(...scriptPubKey);
+  }
+
+  // Add locktime
+  result.push(...intToBytes(tx.locktime, 4));
+
+  return new Uint8Array(result);
+}
+
+function txid(tx: Transaction): string {
+  const serializedTx = serializeTransaction(tx);
+  const hash1 = new Hash().update(serializedTx).digest();
+  const hash2 = new Hash().update(hash1).digest();
+  return uint8ArrayToHexString(hash2.reverse());
+}
+
+// Copied from mempool backend https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/api/transaction-utils.ts#L177
+export function countSigops(transaction: Transaction): number {
+  let sigops = 0;
+
+  for (const input of transaction.vin) {
+    if (input.scriptsig_asm) {
+      sigops += countScriptSigops(input.scriptsig_asm, true);
+    }
+    if (input.prevout) {
+      switch (true) {
+        case input.prevout.scriptpubkey_type === 'p2sh' && input.witness?.length === 2 && input.scriptsig && input.scriptsig.startsWith('160014'):
+        case input.prevout.scriptpubkey_type === 'v0_p2wpkh':
+          sigops += 1;
+          break;
+
+        case input.prevout?.scriptpubkey_type === 'p2sh' && input.witness?.length && input.scriptsig && input.scriptsig.startsWith('220020'):
+        case input.prevout.scriptpubkey_type === 'v0_p2wsh':
+          if (input.witness?.length) {
+            sigops += countScriptSigops(convertScriptSigAsm(input.witness[input.witness.length - 1]), false, true);
+          }
+          break;
+
+        case input.prevout.scriptpubkey_type === 'p2sh':
+          if (input.inner_redeemscript_asm) {
+            sigops += countScriptSigops(input.inner_redeemscript_asm);
+          }
+          break;
+      }
+    }
+  }
+
+  for (const output of transaction.vout) {
+    if (output.scriptpubkey_asm) {
+      sigops += countScriptSigops(output.scriptpubkey_asm, true);
+    }
+  }
+
+  return sigops;
+}
+
+function scriptPubKeyToAddress(scriptPubKey: string, network: string): { address: string, type: string } {
+  // P2PKH
+  if (/^76a914[0-9a-f]{40}88ac$/.test(scriptPubKey)) {
+    return { address: p2pkh(scriptPubKey.substring(6, 6 + 40), network), type: 'p2pkh' };
+  }
+  // P2PK
+  if (/^21[0-9a-f]{66}ac$/.test(scriptPubKey) || /^41[0-9a-f]{130}ac$/.test(scriptPubKey)) {
+    return { address: null, type: 'p2pk' };
+  }
+  // P2SH
+  if (/^a914[0-9a-f]{40}87$/.test(scriptPubKey)) {
+    return { address: p2sh(scriptPubKey.substring(4, 4 + 40), network), type: 'p2sh' };
+  }
+  // P2WPKH
+  if (/^0014[0-9a-f]{40}$/.test(scriptPubKey)) {
+    return { address: p2wpkh(scriptPubKey.substring(4, 4 + 40), network), type: 'v0_p2wpkh' };
+  }
+  // P2WSH
+  if (/^0020[0-9a-f]{64}$/.test(scriptPubKey)) {
+    return { address: p2wsh(scriptPubKey.substring(4, 4 + 64), network), type: 'v0_p2wsh' };
+  }
+  // P2TR
+  if (/^5120[0-9a-f]{64}$/.test(scriptPubKey)) {
+    return { address: p2tr(scriptPubKey.substring(4, 4 + 64), network), type: 'v1_p2tr' };
+  }
+  // multisig
+  if (/^[0-9a-f]+ae$/.test(scriptPubKey)) {
+    return { address: null, type: 'multisig' };
+  }
+  // anchor
+  if (scriptPubKey === '51024e73') {
+    return { address: p2a(network), type: 'anchor' };
+  }
+  // op_return
+  if (/^6a/.test(scriptPubKey)) {
+    return { address: null, type: 'op_return' };
+  }
+  return { address: null, type: 'unknown' };
+}
+
+function p2pkh(pubKeyHash: string, network: string): string {
+  const pubkeyHashArray = hexStringToUint8Array(pubKeyHash);
+  const version = ['testnet', 'testnet4', 'signet'].includes(network) ? 0x6f : 0x00;
+  const versionedPayload = Uint8Array.from([version, ...pubkeyHashArray]);
+  const hash1 = new Hash().update(versionedPayload).digest();
+  const hash2 = new Hash().update(hash1).digest();
+  const checksum = hash2.slice(0, 4);
+  const finalPayload = Uint8Array.from([...versionedPayload, ...checksum]);
+  const bitcoinAddress = base58Encode(finalPayload);
+  return bitcoinAddress;
+}
+
+function p2sh(scriptHash: string, network: string): string {
+  const scriptHashArray = hexStringToUint8Array(scriptHash);
+  const version = ['testnet', 'testnet4', 'signet'].includes(network) ? 0xc4 : 0x05;
+  const versionedPayload = Uint8Array.from([version, ...scriptHashArray]);
+  const hash1 = new Hash().update(versionedPayload).digest();
+  const hash2 = new Hash().update(hash1).digest();
+  const checksum = hash2.slice(0, 4);
+  const finalPayload = Uint8Array.from([...versionedPayload, ...checksum]);
+  const bitcoinAddress = base58Encode(finalPayload);
+  return bitcoinAddress;
+}
+
+function p2wpkh(pubKeyHash: string, network: string): string {
+  const pubkeyHashArray = hexStringToUint8Array(pubKeyHash);
+  const hrp = ['testnet', 'testnet4', 'signet'].includes(network) ? 'tb' : 'bc';
+  const version = 0;
+  const words = [version].concat(toWords(pubkeyHashArray));
+  const bech32Address = bech32Encode(hrp, words);
+  return bech32Address;
+}
+
+function p2wsh(scriptHash: string, network: string): string {
+  const scriptHashArray = hexStringToUint8Array(scriptHash);
+  const hrp = ['testnet', 'testnet4', 'signet'].includes(network) ? 'tb' : 'bc';
+  const version = 0;
+  const words = [version].concat(toWords(scriptHashArray));
+  const bech32Address = bech32Encode(hrp, words);
+  return bech32Address;
+}
+
+function p2tr(pubKeyHash: string, network: string): string {
+  const pubkeyHashArray = hexStringToUint8Array(pubKeyHash);
+  const hrp = ['testnet', 'testnet4', 'signet'].includes(network) ? 'tb' : 'bc';
+  const version = 1;
+  const words = [version].concat(toWords(pubkeyHashArray));
+  const bech32Address = bech32Encode(hrp, words, 0x2bc830a3);
+  return bech32Address;
+}
+
+function p2a(network: string): string {
+  const pubkeyHashArray = hexStringToUint8Array('4e73');
+  const hrp = ['testnet', 'testnet4', 'signet'].includes(network) ? 'tb' : 'bc';
+  const version = 1;
+  const words = [version].concat(toWords(pubkeyHashArray));
+  const bech32Address = bech32Encode(hrp, words, 0x2bc830a3);
+  return bech32Address;
+}
+
+// base58 encoding
+function base58Encode(data: Uint8Array): string {
+  const BASE58_ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+
+  let hexString = Array.from(data)
+    .map(byte => byte.toString(16).padStart(2, '0'))
+    .join('');
+  
+  let num = BigInt("0x" + hexString);
+
+  let encoded = "";
+  while (num > 0) {
+    const remainder = Number(num % 58n);
+    num = num / 58n;
+    encoded = BASE58_ALPHABET[remainder] + encoded;
+  }
+
+  for (let byte of data) {
+    if (byte === 0) {
+      encoded = "1" + encoded;
+    } else {
+      break;
+    }
+  }
+
+  return encoded;
+}
+
+// bech32 encoding
+// Adapted from https://github.com/bitcoinjs/bech32/blob/5ceb0e3d4625561a459c85643ca6947739b2d83c/src/index.ts
+function bech32Encode(prefix: string, words: number[], constant: number = 1) {
+  const BECH32_ALPHABET = "qpzry9x8gf2tvdw0s3jn54khce6mua7l";
+
+  const checksum = createChecksum(prefix, words, constant);
+  const combined = words.concat(checksum);
+  let result = prefix + '1';
+  for (let i = 0; i < combined.length; ++i) {
+    result += BECH32_ALPHABET.charAt(combined[i]);
+  }
+  return result;
+}
+
+function polymodStep(pre) {
+  const GENERATORS = [0x3b6a57b2, 0x26508e6d, 0x1ea119fa, 0x3d4233dd, 0x2a1462b3];
+  const b = pre >> 25;
+  return (
+    ((pre & 0x1ffffff) << 5) ^
+    ((b & 1 ? GENERATORS[0] : 0) ^
+      (b & 2 ? GENERATORS[1] : 0) ^
+      (b & 4 ? GENERATORS[2] : 0) ^
+      (b & 8 ? GENERATORS[3] : 0) ^
+      (b & 16 ? GENERATORS[4] : 0))
+  );
+}
+
+function prefixChk(prefix) {
+  let chk = 1;
+  for (let i = 0; i < prefix.length; ++i) {
+    const c = prefix.charCodeAt(i);
+    chk = polymodStep(chk) ^ (c >> 5);
+  }
+  chk = polymodStep(chk);
+  for (let i = 0; i < prefix.length; ++i) {
+    const c = prefix.charCodeAt(i);
+    chk = polymodStep(chk) ^ (c & 0x1f);
+  }
+  return chk;
+}
+
+function createChecksum(prefix: string, words: number[], constant: number) {
+  const POLYMOD_CONST = constant;
+  let chk = prefixChk(prefix);
+  for (let i = 0; i < words.length; ++i) {
+    const x = words[i];
+    chk = polymodStep(chk) ^ x;
+  }
+  for (let i = 0; i < 6; ++i) {
+    chk = polymodStep(chk);
+  }
+  chk ^= POLYMOD_CONST;
+
+  const checksum = [];
+  for (let i = 0; i < 6; ++i) {
+    checksum.push((chk >> (5 * (5 - i))) & 31);
+  }
+  return checksum;
+}
+
+function convertBits(data, fromBits, toBits, pad) {
+  let acc = 0;
+  let bits = 0;
+  const ret = [];
+  const maxV = (1 << toBits) - 1;
+
+  for (let i = 0; i < data.length; ++i) {
+    const value = data[i];
+    if (value < 0 || value >> fromBits) throw new Error('Invalid value');
+    acc = (acc << fromBits) | value;
+    bits += fromBits;
+    while (bits >= toBits) {
+      bits -= toBits;
+      ret.push((acc >> bits) & maxV);
+    }
+  }
+  if (pad) {
+    if (bits > 0) {
+      ret.push((acc << (toBits - bits)) & maxV);
+    }
+  } else if (bits >= fromBits || ((acc << (toBits - bits)) & maxV)) {
+    throw new Error('Invalid data');
+  }
+  return ret;
+}
+
+function toWords(bytes) {
+  return convertBits(bytes, 8, 5, true);
+}
+
+// Helper functions
+function uint8ArrayToHexString(uint8Array: Uint8Array): string {
+  return Array.from(uint8Array).map(byte => byte.toString(16).padStart(2, '0')).join('');
+}
+
+function hexStringToUint8Array(hex: string): Uint8Array {
+  const buf = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < buf.length; i++) {
+    buf[i] = parseInt(hex.substr(i * 2, 2), 16);
+  }
+  return buf;
+}
+
+function intToBytes(value: number, byteLength: number): number[] {
+  const bytes = [];
+  for (let i = 0; i < byteLength; i++) {
+    bytes.push((value >> (8 * i)) & 0xff);
+  }
+  return bytes;
+}
+
+function bigIntToBytes(value: bigint, byteLength: number): number[] {
+  const bytes = [];
+  for (let i = 0; i < byteLength; i++) {
+    bytes.push(Number((value >> BigInt(8 * i)) & 0xffn));
+  }
+  return bytes;
+}
+
+function varIntToBytes(value: number | bigint): number[] {
+  const bytes = [];
+
+  if (typeof value === 'number') {
+    if (value < 0xfd) {
+      bytes.push(value);
+    } else if (value <= 0xffff) {
+      bytes.push(0xfd, value & 0xff, (value >> 8) & 0xff);
+    } else if (value <= 0xffffffff) {
+      bytes.push(0xfe, ...intToBytes(value, 4));
+    }
+  } else {
+    if (value < 0xfdn) {
+      bytes.push(Number(value));
+    } else if (value <= 0xffffn) {
+      bytes.push(0xfd, Number(value & 0xffn), Number((value >> 8n) & 0xffn));
+    } else if (value <= 0xffffffffn) {
+      bytes.push(0xfe, ...intToBytes(Number(value), 4));
+    } else {
+      bytes.push(0xff, ...bigIntToBytes(value, 8));
+    }
+  }
+
+  return bytes;
+}
+
+// Inversed the opcodes object from https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/utils/bitcoin-script.ts#L1
+const opcodes = {
+  0: 'OP_0',
+  76: 'OP_PUSHDATA1',
+  77: 'OP_PUSHDATA2',
+  78: 'OP_PUSHDATA4',
+  79: 'OP_PUSHNUM_NEG1',
+  80: 'OP_RESERVED',
+  81: 'OP_PUSHNUM_1',
+  82: 'OP_PUSHNUM_2',
+  83: 'OP_PUSHNUM_3',
+  84: 'OP_PUSHNUM_4',
+  85: 'OP_PUSHNUM_5',
+  86: 'OP_PUSHNUM_6',
+  87: 'OP_PUSHNUM_7',
+  88: 'OP_PUSHNUM_8',
+  89: 'OP_PUSHNUM_9',
+  90: 'OP_PUSHNUM_10',
+  91: 'OP_PUSHNUM_11',
+  92: 'OP_PUSHNUM_12',
+  93: 'OP_PUSHNUM_13',
+  94: 'OP_PUSHNUM_14',
+  95: 'OP_PUSHNUM_15',
+  96: 'OP_PUSHNUM_16',
+  97: 'OP_NOP',
+  98: 'OP_VER',
+  99: 'OP_IF',
+  100: 'OP_NOTIF',
+  101: 'OP_VERIF',
+  102: 'OP_VERNOTIF',
+  103: 'OP_ELSE',
+  104: 'OP_ENDIF',
+  105: 'OP_VERIFY',
+  106: 'OP_RETURN',
+  107: 'OP_TOALTSTACK',
+  108: 'OP_FROMALTSTACK',
+  109: 'OP_2DROP',
+  110: 'OP_2DUP',
+  111: 'OP_3DUP',
+  112: 'OP_2OVER',
+  113: 'OP_2ROT',
+  114: 'OP_2SWAP',
+  115: 'OP_IFDUP',
+  116: 'OP_DEPTH',
+  117: 'OP_DROP',
+  118: 'OP_DUP',
+  119: 'OP_NIP',
+  120: 'OP_OVER',
+  121: 'OP_PICK',
+  122: 'OP_ROLL',
+  123: 'OP_ROT',
+  124: 'OP_SWAP',
+  125: 'OP_TUCK',
+  126: 'OP_CAT',
+  127: 'OP_SUBSTR',
+  128: 'OP_LEFT',
+  129: 'OP_RIGHT',
+  130: 'OP_SIZE',
+  131: 'OP_INVERT',
+  132: 'OP_AND',
+  133: 'OP_OR',
+  134: 'OP_XOR',
+  135: 'OP_EQUAL',
+  136: 'OP_EQUALVERIFY',
+  137: 'OP_RESERVED1',
+  138: 'OP_RESERVED2',
+  139: 'OP_1ADD',
+  140: 'OP_1SUB',
+  141: 'OP_2MUL',
+  142: 'OP_2DIV',
+  143: 'OP_NEGATE',
+  144: 'OP_ABS',
+  145: 'OP_NOT',
+  146: 'OP_0NOTEQUAL',
+  147: 'OP_ADD',
+  148: 'OP_SUB',
+  149: 'OP_MUL',
+  150: 'OP_DIV',
+  151: 'OP_MOD',
+  152: 'OP_LSHIFT',
+  153: 'OP_RSHIFT',
+  154: 'OP_BOOLAND',
+  155: 'OP_BOOLOR',
+  156: 'OP_NUMEQUAL',
+  157: 'OP_NUMEQUALVERIFY',
+  158: 'OP_NUMNOTEQUAL',
+  159: 'OP_LESSTHAN',
+  160: 'OP_GREATERTHAN',
+  161: 'OP_LESSTHANOREQUAL',
+  162: 'OP_GREATERTHANOREQUAL',
+  163: 'OP_MIN',
+  164: 'OP_MAX',
+  165: 'OP_WITHIN',
+  166: 'OP_RIPEMD160',
+  167: 'OP_SHA1',
+  168: 'OP_SHA256',
+  169: 'OP_HASH160',
+  170: 'OP_HASH256',
+  171: 'OP_CODESEPARATOR',
+  172: 'OP_CHECKSIG',
+  173: 'OP_CHECKSIGVERIFY',
+  174: 'OP_CHECKMULTISIG',
+  175: 'OP_CHECKMULTISIGVERIFY',
+  176: 'OP_NOP1',
+  177: 'OP_CHECKLOCKTIMEVERIFY',
+  178: 'OP_CHECKSEQUENCEVERIFY',
+  179: 'OP_NOP4',
+  180: 'OP_NOP5',
+  181: 'OP_NOP6',
+  182: 'OP_NOP7',
+  183: 'OP_NOP8',
+  184: 'OP_NOP9',
+  185: 'OP_NOP10',
+  186: 'OP_CHECKSIGADD',
+  253: 'OP_PUBKEYHASH',
+  254: 'OP_PUBKEY',
+  255: 'OP_INVALIDOPCODE',
+};

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="/api/v1/services/custom/config"></script>
+  <script src="/resources/customize.js"></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,8 +140,7 @@ location @mempool-api-v1-cache-normal {
 	proxy_cache_valid 200 2s;
 	proxy_redirect off;
 
-	# cache for 2 seconds on server, but send expires -1 so browser doesn't cache
-	expires -1;
+	expires 2s;
 }
 
 location @mempool-api-v1-cache-disabled {