address wallet page by name

frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts

@@ -39,14 +39,19 @@ export class AddressesTreemap implements OnChanges {
   }
 
   prepareChartOptions(): void {
-    const maxTxs = this.addresses.reduce((max, address) => Math.max(max, address.chain_stats.tx_count), 0);
     const data = this.addresses.map(address => ({
-        address: address.address,
+      address: address.address,
-        value: address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum,
+      value: address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum,
-        stats: address.chain_stats,
+      stats: address.chain_stats,
-        itemStyle: {
+    }));
-          color: lerpColor('#1E88E5', '#D81B60', address.chain_stats.tx_count / maxTxs),
+    // only consider visible items for the color gradient
-        }
+    const totalValue = data.reduce((acc, address) => acc + address.value, 0);
+    const maxTxs = data.filter(address => address.value > (totalValue / 2000)).reduce((max, address) => Math.max(max, address.stats.tx_count), 0);
+    const dataItems = data.map(address => ({
+      ...address,
+      itemStyle: {
+        color: lerpColor('#1E88E5', '#D81B60', address.stats.tx_count / maxTxs),
+      }
     }));
     this.chartOptions = {
       tooltip: {
@@ -64,7 +69,7 @@ export class AddressesTreemap implements OnChanges {
           top: 0,
           roam: false,
           type: 'treemap',
-          data: data,
+          data: dataItems,
           nodeClick: 'link',
           progressive: 100,
           tooltip: {
@@ -87,7 +92,7 @@ export class AddressesTreemap implements OnChanges {
                       <td colspan="2"><b style="color: white; margin-left: 2px">${value.data.address}</b></td>
                     </tr>
                     <tr>
-                      <td>Recieved</td>
+                      <td>Received</td>
                       <td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum)}</td>
                     </tr>
                     <tr>

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

@@ -370,23 +370,47 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
       const walletName = this.stateService.env.customize.dashboard.widgets.find(w => w.props?.wallet).props.wallet;
       this.websocketService.startTrackingWallet(walletName);
 
-      this.walletSummary$ = this.apiService.getWallet$(walletName).pipe(
+      this.walletSummary$ =  this.apiService.getWallet$(walletName).pipe(
         catchError(e => {
-          return of(null);
+          return of({});
         }),
-        map((walletTransactions) => {
+        switchMap(wallet => this.stateService.walletTransactions$.pipe(
-          const transactions = Object.values(walletTransactions).flatMap(wallet => wallet.transactions);
+          startWith([]),
-          return this.deduplicateWalletTransactions(transactions);
+          scan((summaries, newTransactions) => {
-        }),
+            const newSummaries: AddressTxSummary[] = [];
-        switchMap(initial => this.stateService.walletTransactions$.pipe(
+            for (const tx of newTransactions) {
-          startWith(null),
+              const funded: Record<string, number> = {};
-          scan((summary, walletTransactions) => {
+              const spent: Record<string, number> = {};
-            if (walletTransactions) {
+              const fundedCount: Record<string, number> = {};
-              const transactions: AddressTxSummary[] = [...summary, ...Object.values(walletTransactions).flat()];
+              const spentCount: Record<string, number> = {};
-              return this.deduplicateWalletTransactions(transactions);
+              for (const vin of tx.vin) {
+                const address = vin.prevout?.scriptpubkey_address;
+                if (address && wallet[address]) {
+                  spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
+                  spentCount[address] = (spentCount[address] ?? 0) + 1;
+                }
+              }
+              for (const vout of tx.vout) {
+                const address = vout.scriptpubkey_address;
+                if (address && wallet[address]) {
+                  funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
+                  fundedCount[address] = (fundedCount[address] ?? 0) + 1;
+                }
+              }
+              for (const address of Object.keys({ ...funded, ...spent })) {
+                // add tx to summary
+                const txSummary: AddressTxSummary = {
+                  txid: tx.txid,
+                  value: (funded[address] ?? 0) - (spent[address] ?? 0),
+                  height: tx.status.block_height,
+                  time: tx.status.block_time,
+                };
+                wallet[address].transactions?.push(txSummary);
+                newSummaries.push(txSummary);
+              }
             }
-            return summary;
+            return [...summaries, ...this.deduplicateWalletTransactions(newSummaries)];
-          }, initial)
+          }, this.deduplicateWalletTransactions(Object.values(wallet).flatMap(address => address.transactions)))
         )),
         share(),
       );

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

@@ -5,7 +5,7 @@
 
   <div class="clearfix"></div>
 
-  <ng-template [ngIf]="!isLoadingAddress && !error">
+  <ng-container *ngIf="(walletAddresses$ | async) as walletAddresses; else loadingTemplate">
     <div class="box">
 
       <div class="row">
@@ -35,31 +35,31 @@
                   </div>
                 </td>
               </tr>
-              <ng-template [ngIf]="!addresses[0].electrum">
+              <ng-container *ngIf="(walletStats$ | async) as walletStats">
+                <tr>
+                  <td i18n="address.confirmed-balance">Confirmed balance</td>
+                  <td class="wrap-cell"><app-amount [satoshis]="walletStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="walletStats.balance"></app-fiat></span></td>
+                </tr>
+                <tr>
+                  <td i18n="address.confirmed-utxos">Confirmed UTXOs</td>
+                  <td class="wrap-cell">{{ walletStats.utxos }}</td>
+                </tr>
                 <tr>
                   <td i18n="address.total-received">Total received</td>
-                  <td *ngIf="addresses[0].chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received" [noFiat]="true"></app-amount></td>
+                  <td class="wrap-cell"><app-amount [satoshis]="walletStats.totalReceived"></app-amount></td>
                 </tr>
-                <tr>
+              </ng-container>
-                  <td i18n="address.total-sent">Total sent</td>
-                  <td *ngIf="addresses[0].chain_stats.spent_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="sent" [noFiat]="true"></app-amount></td>
-                </tr>
-              </ng-template>
-              <tr>
-                <td i18n="address.balance">Balance</td>
-                <td *ngIf="addresses[0].chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received - sent" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="received - sent"></app-fiat></span></td>
-              </tr>
             </tbody>
           </table>
         </div>
         <div class="w-100 d-block d-md-none"></div>
         <div class="col-md treemap-col">
-          <app-addresses-treemap [addresses]="addresses" [isLoading]="isLoadingAddress"></app-addresses-treemap>
+          <app-addresses-treemap [addresses]="addresses" [isLoading]="isLoadingWallet"></app-addresses-treemap>
         </div>
       </div>
     </div>
 
-    <ng-container *ngIf="addresses && addresses.length && transactions && transactions.length > 2">
+    <ng-container *ngIf="(walletStats$ | async) as walletStats">
       <br>
       <div class="title-tx">
         <h2 class="text-left" i18n="address.balance-history">Balance History</h2>
@@ -67,56 +67,16 @@
       <div class="box">
         <div class="row">
           <div class="col-md">
-            <app-address-graph [addresses]="addressStrings" [isPubkey]="addresses[0]?.is_pubkey" [balance]="chainBalance" />
+            <app-address-graph [addressSummary$]="walletSummary$" period="all" />
           </div>
         </div>
       </div>
     </ng-container>
+  </ng-container>
 
-    <br>
+  <ng-template #loadingTemplate>
-    <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="box" *ngIf="!error; else errorTemplate">
-
-    <div class="text-center">
-      <ng-template [ngIf]="isLoadingTransactions">
-
-        <ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
-          <div class="header-bg box" style="padding: 12px; margin-bottom: 10px;">
-            <div class="progress progress-dark">
-              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
-            </div>
-          </div>
-        </ng-container>
-
-        <div class="header-bg box">
-          <div class="row" style="height: 107px;">
-            <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>
-
-  <ng-template [ngIf]="isLoadingAddress && !error">
-
-    <div class="box">
       <div class="row">
         <div class="col">
           <table class="table table-borderless table-striped">
@@ -142,21 +102,11 @@
 
   </ng-template>
 
-  <ng-template [ngIf]="error">
+  <ng-template #errorTemplate>
     <br>
     <ng-template [ngIf]="error.status === 413 || error.status === 405 || error.status === 504" [ngIfElse]="displayServerError">
       <div class="text-center">
         <span i18n="address.error.loading-wallet-data">Error loading wallet data.</span>
-        <br>
-        <ng-container i18n="Electrum server limit exceeded error">
-          <i>There many transactions in this wallet, more than your backend can handle. See more on <a href="/docs/faq#address-lookup-issues">setting up a stronger backend</a>.</i>
-          <br><br>
-          Consider viewing this wallet on the official Mempool website instead:
-        </ng-container>
-        <br>
-        <a href="https://mempool.space/wallet?addresses={{ addressStrings.join(',') }}" target="_blank">https://mempool.space/wallet?addresses={{ addressStrings.join(',') }}</a>
-        <br>
-        <a href="http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/wallet?addresses={{ addressStrings.join(',') }}" target="_blank">http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/wallet?addresses={{ addressStrings.join(',') }}</a>
         <br><br>
         <i class="small">({{ error | httpErrorMsg }})</i>
       </div>
@@ -172,10 +122,6 @@
 
 <br>
 
-<ng-template #confidentialTd>
-  <td i18n="shared.confidential">Confidential</td>
-</ng-template>
-
 <ng-template #headerLoader>
   <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
     <span class="skeleton-loader"></span>

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

@@ -1,15 +1,101 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { switchMap, catchError, map, tap, shareReplay, startWith, scan } from 'rxjs/operators';
-import { switchMap, filter, catchError, map, tap, share } from 'rxjs/operators';
+import { Address, AddressTxSummary, ChainStats, Transaction } from '../../interfaces/electrs.interface';
-import { Address, Transaction } from '../../interfaces/electrs.interface';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from '../../services/state.service';
-import { AudioService } from '../../services/audio.service';
 import { ApiService } from '../../services/api.service';
-import { of, merge, Subscription, Observable, combineLatest, forkJoin } from 'rxjs';
+import { of, Observable, Subscription } from 'rxjs';
 import { SeoService } from '../../services/seo.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { WalletAddress } from '../../interfaces/node-api.interface';
+
+class WalletStats implements ChainStats {
+  addresses: string[];
+  funded_txo_count: number;
+  funded_txo_sum: number;
+  spent_txo_count: number;
+  spent_txo_sum: number;
+  tx_count: number;
+
+  constructor (stats: ChainStats[], addresses: string[]) {
+    Object.assign(this, stats.reduce((acc, stat) => {
+        acc.funded_txo_count += stat.funded_txo_count;
+        acc.funded_txo_sum += stat.funded_txo_sum;
+        acc.spent_txo_count += stat.spent_txo_count;
+        acc.spent_txo_sum += stat.spent_txo_sum;
+        return acc;
+      }, {
+        funded_txo_count: 0,
+        funded_txo_sum: 0,
+        spent_txo_count: 0,
+        spent_txo_sum: 0,
+        tx_count: 0,
+      })
+    );
+    this.addresses = addresses;
+  }
+
+  public addTx(tx: Transaction): void {
+    for (const vin of tx.vin) {
+      if (this.addresses.includes(vin.prevout?.scriptpubkey_address)) {
+        this.spendTxo(vin.prevout.value);
+      }
+    }
+    for (const vout of tx.vout) {
+      if (this.addresses.includes(vout.scriptpubkey_address)) {
+        this.fundTxo(vout.value);
+      }
+    }
+    this.tx_count++;
+  }
+
+  public removeTx(tx: Transaction): void {
+    for (const vin of tx.vin) {
+      if (this.addresses.includes(vin.prevout?.scriptpubkey_address)) {
+        this.unspendTxo(vin.prevout.value);
+      }
+    }
+    for (const vout of tx.vout) {
+      if (this.addresses.includes(vout.scriptpubkey_address)) {
+        this.unfundTxo(vout.value);
+      }
+    }
+    this.tx_count--;
+  }
+
+  private fundTxo(value: number): void {
+    this.funded_txo_sum += value;
+    this.funded_txo_count++;
+  }
+
+  private unfundTxo(value: number): void {
+    this.funded_txo_sum -= value;
+    this.funded_txo_count--;
+  }
+
+  private spendTxo(value: number): void {
+    this.spent_txo_sum += value;
+    this.spent_txo_count++;
+  }
+
+  private unspendTxo(value: number): void {
+    this.spent_txo_sum -= value;
+    this.spent_txo_count--;
+  }
+
+  get balance(): number {
+    return this.funded_txo_sum - this.spent_txo_sum;
+  }
+
+  get totalReceived(): number {
+    return this.funded_txo_sum;
+  }
+
+  get utxos(): number {
+    return this.funded_txo_count - this.spent_txo_count;
+  }
+}
 
 @Component({
   selector: 'app-wallet',
@@ -19,16 +105,16 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
 export class WalletComponent implements OnInit, OnDestroy {
   network = '';
 
-  addresses: Address[];
+  addresses: Address[] = [];
-  addressStrings: string[];
+  addressStrings: string[] = [];
-  isLoadingAddress = true;
+  walletName: string;
-  transactions: Transaction[];
+  isLoadingWallet = true;
-  isLoadingTransactions = true;
+  wallet$: Observable<Record<string, WalletAddress>>;
-  retryLoadMore = false;
+  walletAddresses$: Observable<Record<string, Address>>;
+  walletSummary$: Observable<AddressTxSummary[]>;
+  walletStats$: Observable<WalletStats>;
   error: any;
-  mainSubscription: Subscription;
+  walletSubscription: Subscription;
-  wsSubscription: Subscription;
-  addressLoadingStatus$: Observable<number>;
 
   collapseAddresses: boolean = true;
 
@@ -38,16 +124,10 @@ export class WalletComponent implements OnInit, OnDestroy {
   sent = 0;
   chainBalance = 0;
 
-  private tempTransactions: Transaction[];
-  private timeTxIndexes: number[];
-  private lastTransactionTxId: string;
-
   constructor(
     private route: ActivatedRoute,
-    private electrsApiService: ElectrsApiService,
     private websocketService: WebsocketService,
     private stateService: StateService,
-    private audioService: AudioService,
     private apiService: ApiService,
     private seoService: SeoService,
   ) { }
@@ -55,275 +135,156 @@ export class WalletComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
     this.websocketService.want(['blocks']);
-
+    this.wallet$ = this.route.paramMap.pipe(
-    const addresses$ = this.route.queryParamMap.pipe(
+      map((params: ParamMap) => params.get('wallet') as string),
-      map((queryParams) => (queryParams.get('addresses') as string)?.split(',').map(this.normalizeAddress)),
+      tap((walletName: string) => {
-      tap(addresses => {
+        this.walletName = walletName;
-        this.addressStrings = addresses;
+        this.websocketService.startTrackingWallet(walletName);
-        this.error = undefined;
+        this.seoService.setTitle($localize`:@@wallet.component.browser-title:Wallet: ${walletName}:INTERPOLATION:`);
-        this.isLoadingAddress = true;
+        this.seoService.setDescription($localize`:@@meta.description.bitcoin.wallet:See mempool transactions, confirmed transactions, balance, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} wallet ${walletName}:INTERPOLATION:.`);
-        this.fullyLoaded = false;
-        this.addresses = [];
-        this.isLoadingTransactions = true;
-        this.transactions = null;
-        document.body.scrollTo(0, 0);
-        const titleLabel = addresses[0] + (addresses.length > 1 ? ` +${addresses.length - 1} addresses` : '');
-        this.seoService.setTitle($localize`:@@address.component.browser-title:Address: ${titleLabel}}:INTERPOLATION:`);
-        this.seoService.setDescription($localize`:@@meta.description.bitcoin.address:See mempool transactions, confirmed transactions, balance, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} address ${titleLabel}:INTERPOLATION:.`);
       }),
-      share()
+      switchMap((walletName: string) => this.apiService.getWallet$(walletName).pipe(
+        catchError((err) => {
+          this.error = err;
+          this.seoService.logSoft404();
+          console.log(err);
+          return of({});
+        })
+      )),
+      shareReplay(1),
     );
 
-    this.addressLoadingStatus$ = addresses$
+    this.walletAddresses$ = this.wallet$.pipe(
-      .pipe(
+      map(wallet => {
-        switchMap(() => this.stateService.loadingIndicators$),
+        const walletInfo: Record<string, Address> = {};
-        map((indicators) => indicators['address-' + this.addressStrings.join(',')] !== undefined ? indicators['address-' + this.addressStrings.join(',')] : 0)
+        for (const address of Object.keys(wallet)) {
-      );
+          walletInfo[address] = {
-
+            address,
-    this.mainSubscription = combineLatest([
+            chain_stats: wallet[address].stats,
-      addresses$,
+            mempool_stats: {
-      merge(
+              funded_txo_count: 0,
-        of(true),
+              funded_txo_sum: 0,
-        this.stateService.connectionState$.pipe(filter((state) => state === 2 && this.transactions && this.transactions.length > 0)),
+              spent_txo_count: 0, spent_txo_sum: 0, tx_count: 0
-      ),
+            },
-    ]).pipe(
+          };
-        switchMap(([addresses]) => {
-            return forkJoin(
-              addresses.map((address) => 
-                address.match(/04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}/)
-                  ? this.electrsApiService.getPubKeyAddress$(address)
-                  : this.electrsApiService.getAddress$(address)
-              )
-            );
-        }),
-        tap((addresses: Address[]) => {
-          this.addresses = addresses;
-          this.updateChainStats();
-          this.isLoadingAddress = false;
-          this.isLoadingTransactions = true;
-          this.websocketService.startTrackAddresses(addresses.map(address => address.address));
-        }),
-        switchMap((addresses) => {
-          return addresses[0].is_pubkey
-              ? this.electrsApiService.getScriptHashesTransactions$(addresses.map(address => (address.address.length === 66 ? '21' : '41') + address.address + 'ac'))
-              : this.electrsApiService.getAddressesTransactions$(addresses.map(address => address.address));
-        }),
-        switchMap((transactions) => {
-          this.tempTransactions = transactions;
-          if (transactions.length) {
-            this.lastTransactionTxId = transactions[transactions.length - 1].txid;
-          }
-
-          const fetchTxs: string[] = [];
-          this.timeTxIndexes = [];
-          transactions.forEach((tx, index) => {
-            if (!tx.status.confirmed) {
-              fetchTxs.push(tx.txid);
-              this.timeTxIndexes.push(index);
-            }
-          });
-          if (!fetchTxs.length) {
-            return of([]);
-          }
-          return this.apiService.getTransactionTimes$(fetchTxs).pipe(
-            catchError((err) => {
-              this.isLoadingAddress = false;
-              this.isLoadingTransactions = false;
-              this.error = err;
-              this.seoService.logSoft404();
-              console.log(err);
-              return of([]);
-            })
-          );
-        })
-      )
-      .subscribe((times: number[] | null) => {
-        if (!times) {
-          return;
         }
-        times.forEach((time, index) => {
+        return walletInfo;
-          this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time;
+      }),
-        });
+      switchMap(initial => this.stateService.walletTransactions$.pipe(
-        this.tempTransactions.sort((a, b) => {
+        startWith(null),
-          if (b.status.confirmed) {
+        scan((wallet, walletTransactions) => {
-            if (b.status.block_height === a.status.block_height) {
+          for (const tx of (walletTransactions || [])) {
-              return b.status.block_time - a.status.block_time;
+            const funded: Record<string, number> = {};
+            const spent: Record<string, number> = {};
+            const fundedCount: Record<string, number> = {};
+            const spentCount: Record<string, number> = {};
+            for (const vin of tx.vin) {
+              const address = vin.prevout?.scriptpubkey_address;
+              if (address && wallet[address]) {
+                spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
+                spentCount[address] = (spentCount[address] ?? 0) + 1;
+              }
             }
-            return b.status.block_height - a.status.block_height;
+            for (const vout of tx.vout) {
-          }
+              const address = vout.scriptpubkey_address;
-          return b.firstSeen - a.firstSeen;
+              if (address && wallet[address]) {
-        });
+                funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
-
+                fundedCount[address] = (fundedCount[address] ?? 0) + 1;
-        this.transactions = this.tempTransactions;
+              }
-        this.isLoadingTransactions = false;
+            }
-      },
+            for (const address of Object.keys({ ...funded, ...spent })) {
-      (error) => {
+              // update address stats
-        console.log(error);
+              wallet[address].chain_stats.tx_count++;
-        this.error = error;
+              wallet[address].chain_stats.funded_txo_count += fundedCount[address] || 0;
-        this.seoService.logSoft404();
+              wallet[address].chain_stats.spent_txo_count += spentCount[address] || 0;
-        this.isLoadingAddress = false;
+              wallet[address].chain_stats.funded_txo_sum += funded[address] || 0;
-      });
+              wallet[address].chain_stats.spent_txo_sum += spent[address] || 0;
-
-    this.wsSubscription = this.stateService.multiAddressTransactions$.subscribe(update => {
-      for (const address of Object.keys(update)) {
-        for (const transaction of update[address].mempool) {
-          this.addTransaction(transaction);
-        }
-        for (const transaction of update[address].confirmed) {
-          const tx = this.transactions.find((t) => t.txid === transaction.txid);
-          if (tx) {
-            this.removeTransaction(tx);
-            tx.status = transaction.status;
-            this.transactions = this.transactions.slice();
-            this.audioService.playSound('magic');
-          } else {
-            if (this.addTransaction(transaction, false)) {
-              this.audioService.playSound('magic');
             }
           }
-        }
+          return wallet;
-        for (const transaction of update[address].removed) {
+        }, initial)
-          this.removeTransaction(transaction);
+      )),
-        }
+      tap(() => {
-      }
+        this.isLoadingWallet = false;
-    });
-  }
-
-  addTransaction(transaction: Transaction, playSound: boolean = true): boolean {
-    if (this.transactions.some((t) => t.txid === transaction.txid)) {
-      return false;
-    }
-
-    this.transactions.unshift(transaction);
-    this.transactions = this.transactions.slice();
-    this.txCount++;
-
-    if (playSound) {
-      if (transaction.vout.some((vout) => this.addressStrings.includes(vout?.scriptpubkey_address))) {
-        this.audioService.playSound('cha-ching');
-      } else {
-        this.audioService.playSound('chime');
-      }
-    }
-
-    for (const address of this.addresses) {
-      let match = false;
-      transaction.vin.forEach((vin) => {
-        if (vin?.prevout?.scriptpubkey_address === address.address) {
-          match = true;
-          this.sent += vin.prevout.value;
-          if (transaction.status?.confirmed) {
-            address.chain_stats.funded_txo_count++;
-            address.chain_stats.funded_txo_sum += vin.prevout.value;
-          } else {
-            address.mempool_stats.funded_txo_count++;
-            address.mempool_stats.funded_txo_sum += vin.prevout.value;
-          }
-        }
-      });
-      transaction.vout.forEach((vout) => {
-        match = true;
-        if (vout?.scriptpubkey_address === address.address) {
-          this.received += vout.value;
-        }
-        if (transaction.status?.confirmed) {
-          address.chain_stats.spent_txo_count++;
-          address.chain_stats.spent_txo_sum += vout.value;
-        } else {
-          address.mempool_stats.spent_txo_count++;
-          address.mempool_stats.spent_txo_sum += vout.value;
-        }
-      });
-      if (match) {
-        if (transaction.status?.confirmed) {
-          address.chain_stats.tx_count++;
-        } else {
-          address.mempool_stats.tx_count++;
-        }
-      }
-    }
-
-    return true;
-  }
-
-  removeTransaction(transaction: Transaction): boolean {
-    const index = this.transactions.findIndex(((tx) => tx.txid === transaction.txid));
-    if (index === -1) {
-      return false;
-    }
-
-    this.transactions.splice(index, 1);
-    this.transactions = this.transactions.slice();
-    this.txCount--;
-
-    for (const address of this.addresses) {
-      let match = false;
-      transaction.vin.forEach((vin) => {
-        if (vin?.prevout?.scriptpubkey_address === address.address) {
-          match = true;
-          this.sent -= vin.prevout.value;
-          if (transaction.status?.confirmed) {
-            address.chain_stats.funded_txo_count--;
-            address.chain_stats.funded_txo_sum -= vin.prevout.value;
-          } else {
-            address.mempool_stats.funded_txo_count--;
-            address.mempool_stats.funded_txo_sum -= vin.prevout.value;
-          }
-        }
-      });
-      transaction.vout.forEach((vout) => {
-        match = true;
-        if (vout?.scriptpubkey_address === address.address) {
-          this.received -= vout.value;
-        }
-        if (transaction.status?.confirmed) {
-          address.chain_stats.spent_txo_count--;
-          address.chain_stats.spent_txo_sum -= vout.value;
-        } else {
-          address.mempool_stats.spent_txo_count--;
-          address.mempool_stats.spent_txo_sum -= vout.value;
-        }
-      });
-      if (match) {
-        if (transaction.status?.confirmed) {
-          address.chain_stats.tx_count--;
-        } else {
-          address.mempool_stats.tx_count--;
-        }
-      }
-    }
-
-    return true;
-  }
-
-  loadMore(): void {
-    if (this.isLoadingTransactions || this.fullyLoaded) {
-      return;
-    }
-    this.isLoadingTransactions = true;
-    this.retryLoadMore = false;
-
-    (this.addresses[0].is_pubkey
-        ? this.electrsApiService.getScriptHashesTransactions$(this.addresses.map(address => (address.address.length === 66 ? '21' : '41') + address.address + 'ac'), this.lastTransactionTxId)
-        : this.electrsApiService.getAddressesTransactions$(this.addresses.map(address => address.address), this.lastTransactionTxId)
-    ).pipe(
-      catchError((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();
-          }
-          return of([]);
       })
-    ).subscribe((transactions: Transaction[]) => {
+    );
-      if (transactions && transactions.length) {
+
-        this.lastTransactionTxId = transactions[transactions.length - 1].txid;
+    this.walletSubscription = this.walletAddresses$.subscribe(wallet => {
-        this.transactions = this.transactions.concat(transactions);
+      this.addressStrings = Object.keys(wallet);
+      this.addresses = Object.values(wallet);
+    });
+
+    this.walletSummary$ = this.wallet$.pipe(
+      switchMap(wallet => this.stateService.walletTransactions$.pipe(
+        startWith([]),
+        scan((summaries, newTransactions) => {
+          const newSummaries: AddressTxSummary[] = [];
+          for (const tx of newTransactions) {
+            const funded: Record<string, number> = {};
+            const spent: Record<string, number> = {};
+            const fundedCount: Record<string, number> = {};
+            const spentCount: Record<string, number> = {};
+            for (const vin of tx.vin) {
+              const address = vin.prevout?.scriptpubkey_address;
+              if (address && wallet[address]) {
+                spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
+                spentCount[address] = (spentCount[address] ?? 0) + 1;
+              }
+            }
+            for (const vout of tx.vout) {
+              const address = vout.scriptpubkey_address;
+              if (address && wallet[address]) {
+                funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
+                fundedCount[address] = (fundedCount[address] ?? 0) + 1;
+              }
+            }
+            for (const address of Object.keys({ ...funded, ...spent })) {
+              // add tx to summary
+              const txSummary: AddressTxSummary = {
+                txid: tx.txid,
+                value: (funded[address] ?? 0) - (spent[address] ?? 0),
+                height: tx.status.block_height,
+                time: tx.status.block_time,
+              };
+              wallet[address].transactions?.push(txSummary);
+              newSummaries.push(txSummary);
+            }
+          }
+          return [...summaries, ...this.deduplicateWalletTransactions(newSummaries)];
+        }, this.deduplicateWalletTransactions(Object.values(wallet).flatMap(address => address.transactions)))
+      )),
+    );
+
+    this.walletStats$ = this.wallet$.pipe(
+      switchMap(wallet => {
+        const walletStats = new WalletStats(Object.values(wallet).map(w => w.stats), Object.keys(wallet));
+        return this.stateService.walletTransactions$.pipe(
+          startWith([]),
+          scan((stats, newTransactions) => {
+            for (const tx of newTransactions) {
+              stats.addTx(tx);
+            }
+            return stats;
+          }, walletStats),
+        );
+      }),
+    );
+  }
+
+  deduplicateWalletTransactions(walletTransactions: AddressTxSummary[]): AddressTxSummary[] {
+    const transactions = new Map<string, AddressTxSummary>();
+    for (const tx of walletTransactions) {
+      if (transactions.has(tx.txid)) {
+        transactions.get(tx.txid).value += tx.value;
       } else {
-        this.fullyLoaded = true;
+        transactions.set(tx.txid, tx);
       }
-      this.isLoadingTransactions = false;
+    }
+    return Array.from(transactions.values()).sort((a, b) => {
+      if (a.height === b.height) {
+        return b.tx_position - a.tx_position;
+      }
+      return b.height - a.height;
     });
   }
 
@@ -335,26 +296,8 @@ export class WalletComponent implements OnInit, OnDestroy {
     }
   }
 
-  updateChainStats(): void {
-    let received = 0;
-    let sent = 0;
-    let txCount = 0;
-    let chainBalance = 0;
-    for (const address of this.addresses) {
-      received += address.chain_stats.funded_txo_sum + address.mempool_stats.funded_txo_sum;
-      sent += address.chain_stats.spent_txo_sum + address.mempool_stats.spent_txo_sum;
-      txCount += address.chain_stats.tx_count + address.mempool_stats.tx_count;
-      chainBalance += (address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum);
-    }
-    this.received = received;
-    this.sent = sent;
-    this.txCount = txCount;
-    this.chainBalance = chainBalance;
-  }
-
   ngOnDestroy(): void {
-    this.mainSubscription.unsubscribe();
+    this.websocketService.stopTrackingWallet();
-    this.websocketService.stopTrackingAddresses();
+    this.walletSubscription.unsubscribe();
-    this.wsSubscription.unsubscribe();
   }
 }

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

@@ -90,7 +90,7 @@ const routes: Routes = [
         }
       },
       {
-        path: 'wallet',
+        path: 'wallet/:wallet',
         children: [],
         component: WalletComponent,
         data: {

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

@@ -1,4 +1,4 @@
-import { AddressTxSummary, Block, Transaction } from "./electrs.interface";
+import { AddressTxSummary, Block, ChainStats, Transaction } from "./electrs.interface";
 
 export interface OptimizedMempoolStats {
   added: number;
@@ -474,5 +474,6 @@ export interface TxResult {
 export interface WalletAddress {
   address: string;
   active: boolean;
-  transactions?: AddressTxSummary[];
+  stats: ChainStats;
+  transactions: AddressTxSummary[];
 }

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

@@ -159,7 +159,7 @@ export class StateService {
   mempoolRemovedTransactions$ = new Subject<Transaction>();
   multiAddressTransactions$ = new Subject<{ [address: string]: { mempool: Transaction[], confirmed: Transaction[], removed: Transaction[] }}>();
   blockTransactions$ = new Subject<Transaction>();
-  walletTransactions$ = new Subject<Record<string, AddressTxSummary[]>>();
+  walletTransactions$ = new Subject<Transaction[]>();
   isLoadingWebSocket$ = new ReplaySubject<boolean>(1);
   isLoadingMempool$ = new BehaviorSubject<boolean>(true);
   vbytesPerSecond$ = new ReplaySubject<number>(1);