custom dashboard wallet widgets

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

@@ -257,6 +257,36 @@
             </div>
           </div>
         }
+        @case ('walletBalance') {
+          <div class="col card-wrapper" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="main-title" i18n="dashboard.treasury">Treasury</div>
+            <app-balance-widget [addressSummary$]="walletSummary$"></app-balance-widget>
+          </div>
+        }
+        @case ('wallet') {
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="card graph-card">
+              <div class="card-body">
+                <span class="title-link">
+                  <h5 class="card-title d-inline" i18n="dashboard.balance-history">Balance History</h5>
+                </span>
+                <app-address-graph [addressSummary$]="walletSummary$" [period]="widget.props.period || 'all'" [widget]="true" [height]="graphHeight"></app-address-graph>
+              </div>
+            </div>
+          </div>
+        }
+        @case ('walletTransactions') {
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="card">
+              <div class="card-body">
+                <span class="title-link">
+                  <h5 class="card-title d-inline" i18n="dashboard.treasury-transactions">Treasury Transactions</h5>
+                </span>
+                <app-address-transactions-widget [addressSummary$]="walletSummary$"></app-address-transactions-widget>
+              </div>
+            </div>
+          </div>
+        }
         @case ('twitter') {
           <div class="col" style="min-height:410px" [style.order]="isMobile && widget.mobileOrder || 8">
             <div class="card graph-card">

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

@@ -62,8 +62,10 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
   widgets;
 
   addressSubscription: Subscription;
+  walletSubscription: Subscription;
   blockTxSubscription: Subscription;
   addressSummary$: Observable<AddressTxSummary[]>;
+  walletSummary$: Observable<AddressTxSummary[]>;
   address: Address;
 
   goggleResolution = 82;
@@ -107,6 +109,10 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
       this.websocketService.stopTrackingAddress();
       this.address = null;
     }
+    if (this.walletSubscription) {
+      this.walletSubscription.unsubscribe();
+      this.websocketService.stopTrackingWallet();
+    }
     this.destroy$.next(1);
     this.destroy$.complete();
   }
@@ -260,6 +266,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
     });
 
     this.startAddressSubscription();
+    this.startWalletSubscription();
   }
 
   handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
@@ -358,6 +365,51 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
     }
   }
 
+  startWalletSubscription(): void {
+    if (this.stateService.env.customize && this.stateService.env.customize.dashboard.widgets.some(w => w.props?.wallet)) {
+      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(
+        catchError(e => {
+          return of(null);
+        }),
+        map((walletTransactions) => {
+          const transactions = Object.values(walletTransactions).flatMap(wallet => wallet.transactions);
+          return this.deduplicateWalletTransactions(transactions);
+        }),
+        switchMap(initial => this.stateService.walletTransactions$.pipe(
+          startWith(null),
+          scan((summary, walletTransactions) => {
+            if (walletTransactions) {
+              const transactions: AddressTxSummary[] = [...summary, ...Object.values(walletTransactions).flat()];
+              return this.deduplicateWalletTransactions(transactions);
+            }
+            return summary;
+          }, initial)
+        )),
+        share(),
+      );
+    }
+  }
+
+  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 {
+        transactions.set(tx.txid, tx);
+      }
+    }
+    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;
+    });
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {