diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
new file mode 100644
index 000000000..00b3160ed
--- /dev/null
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
@@ -0,0 +1,32 @@
+
+
+ TXID |
+ Amount |
+ {{ currency }} |
+ Date |
+
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
new file mode 100644
index 000000000..851da5996
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts
new file mode 100644
index 000000000..c3fc4260e
--- /dev/null
+++ b/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 | null;
+ @Input() isPubkey: boolean = false;
+
+ currencySubscription: Subscription;
+ currency: string;
+
+ transactions$: Observable;
+
+ 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();
+ }
+}