Check in missing address transactions widget component

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html

@@ -0,0 +1,32 @@
+<table class="table latest-transactions">
+  <thead>
+    <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
+    <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
+    <th class="table-cell-fiat">{{ currency }}</th>
+    <th class="table-cell-date" i18n="transaction.fee|Transaction fee">Date</th>
+  </thead>
+  <tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
+    <tr *ngFor="let transaction of transactions; let i = index;">
+      <td class="table-cell-txid">
+        <a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
+          <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
+        </a>
+      </td>
+      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount></td>
+      <td class="table-cell-fiat" ><app-fiat [value]="transaction.value" [blockConversion]="transaction.price" digitsInfo="1.0-0"></app-fiat></td>
+      <td class="table-cell-date"><app-time kind="since" [time]="transaction.time" [fastRender]="true"></app-time></td>
+    </tr>
+  </tbody>
+  <div class="">&nbsp;</div>
+</table>
+
+<ng-template #recentTransactionsSkeleton>
+  <tbody>
+    <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
+      <td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fiat"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+    </tr>
+  </tbody>
+</ng-template>

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss

@@ -0,0 +1,50 @@
+.latest-transactions {
+  width: 100%;
+  text-align: left;
+  table-layout:fixed;
+  tr, td, th {
+    border: 0px;
+    padding-top: 0.71rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+  td {
+    overflow:hidden;
+    width: 25%;
+  }
+  .table-cell-satoshis {
+    display: none;
+    text-align: right;
+    @media (min-width: 576px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 1100px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-fiat {
+    display: none;
+    text-align: right;
+    @media (min-width: 485px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 992px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-date {
+    text-align: right;
+  }
+}
+.skeleton-loader-transactions {
+  max-width: 250px;
+  position: relative;
+  top: 2px;
+  margin-bottom: -3px;
+  height: 18px;
+}

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { Observable, Subscription, catchError, map, of, switchMap, zip } from 'rxjs';
+import { PriceService } from '../../services/price.service';
+
+@Component({
+  selector: 'app-address-transactions-widget',
+  templateUrl: './address-transactions-widget.component.html',
+  styleUrls: ['./address-transactions-widget.component.scss'],
+})
+export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() address: string;
+  @Input() addressInfo: Address;
+  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
+  @Input() isPubkey: boolean = false;
+  
+  currencySubscription: Subscription;
+  currency: string;
+
+  transactions$: Observable<any[]>;
+
+  isLoading: boolean = true;
+  error: any;
+
+  constructor(
+    public stateService: StateService,
+    private electrsApiService: ElectrsApiService,
+    private priceService: PriceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.currency = fiat;
+    });
+    this.startAddressSubscription();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.startAddressSubscription();
+  }
+
+  startAddressSubscription(): void {
+    this.isLoading = true;
+    if (!this.address || !this.addressInfo) {
+      return;
+    }
+    this.transactions$ = (this.addressSummary$ || (this.isPubkey
+      ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
+      : this.electrsApiService.getAddressSummary$(this.address)).pipe(
+      catchError(e => {
+        this.error = `Failed to fetch address history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
+        return of(null);
+      })
+    )).pipe(
+      map(summary => {
+        return summary?.slice(0, 6);
+      }),
+      switchMap(txs => {
+        return (zip(txs.map(tx => this.priceService.getBlockPrice$(tx.time, true, this.currency).pipe(
+          map(price => {
+            return {
+              ...tx,
+              price,
+            };
+          })
+        ))));
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.currencySubscription.unsubscribe();
+  }
+}