diff --git a/frontend/src/app/components/address-labels/address-labels.component.html b/frontend/src/app/components/address-labels/address-labels.component.html index dfc6647f4..b055cf606 100644 --- a/frontend/src/app/components/address-labels/address-labels.component.html +++ b/frontend/src/app/components/address-labels/address-labels.component.html @@ -4,7 +4,7 @@ {{ label }} @@ -15,6 +15,6 @@ {{ label }} \ No newline at end of file diff --git a/frontend/src/app/components/address-labels/address-labels.component.ts b/frontend/src/app/components/address-labels/address-labels.component.ts index 2365c167f..867fc9970 100644 --- a/frontend/src/app/components/address-labels/address-labels.component.ts +++ b/frontend/src/app/components/address-labels/address-labels.component.ts @@ -15,6 +15,7 @@ export class AddressLabelsComponent implements OnChanges { @Input() vin: Vin; @Input() vout: Vout; @Input() channel: any; + @Input() class: string = ''; label?: string; diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html index 98b432521..ba4884219 100644 --- a/frontend/src/app/components/address/address.component.html +++ b/frontend/src/app/components/address/address.component.html @@ -14,40 +14,39 @@
-
- - - - - - - - - - - - - - - - - - - - - -
Unconfidential - - - -
Total received
Total sent
Balance
-
-
-
-
- + @if (isMobile) { +
+ + + + + + + + + +
-
+ } @else { +
+ + + + + + +
+
+
+ + + + + + +
+
+ }
@@ -182,3 +181,57 @@
+ + + + + Balance + + + + + + + pending + + + + + + + Unspent TXOs + {{ chainStats.utxos }} + + + + + + pending + {{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }} + + + + + + Volume + + + + + + + Type + + + + + + + Unconfidential + + + + + + + \ No newline at end of file diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss index da615376c..45b684a49 100644 --- a/frontend/src/app/components/address/address.component.scss +++ b/frontend/src/app/components/address/address.component.scss @@ -25,7 +25,7 @@ tr td { &:last-child { text-align: right; - @media (min-width: 576px) { + @media (min-width: 768px) { text-align: left; } } diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index 4ef67ed5f..b485167cf 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { ElectrsApiService } from '../../services/electrs-api.service'; import { switchMap, filter, catchError, map, tap } from 'rxjs/operators'; -import { Address, ChainStats, Transaction } from '../../interfaces/electrs.interface'; +import { Address, ChainStats, Transaction, Vin, Vout } from '../../interfaces/electrs.interface'; import { WebsocketService } from '../../services/websocket.service'; import { StateService } from '../../services/state.service'; import { AudioService } from '../../services/audio.service'; @@ -79,6 +79,10 @@ class AddressStats implements ChainStats { return this.funded_txo_sum - this.spent_txo_sum; } + get volume(): number { + return this.funded_txo_sum + this.spent_txo_sum; + } + get utxos(): number { return this.funded_txo_count - this.spent_txo_count; } @@ -92,6 +96,8 @@ class AddressStats implements ChainStats { export class AddressComponent implements OnInit, OnDestroy { network = ''; + isMobile: boolean; + address: Address; addressString: string; isLoadingAddress = true; @@ -110,6 +116,10 @@ export class AddressComponent implements OnInit, OnDestroy { chainStats: AddressStats; mempoolStats: AddressStats; + exampleChannel?: any; + exampleVin?: Vin; + exampleVout?: Vout; + now = Date.now() / 1000; balancePeriod: 'all' | '1m' = 'all'; @@ -147,6 +157,9 @@ export class AddressComponent implements OnInit, OnDestroy { this.isLoadingTransactions = true; this.transactions = null; this.addressInfo = null; + this.exampleChannel = null; + this.exampleVin = null; + this.exampleVout = null; document.body.scrollTo(0, 0); this.addressString = params.get('id') || ''; if (/^[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100}|04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}$/.test(this.addressString)) { @@ -252,6 +265,18 @@ export class AddressComponent implements OnInit, OnDestroy { } this.isLoadingTransactions = false; + for (const tx of this.transactions) { + if (!this.exampleVin) { + this.exampleVin = tx.vin.find(v => v.prevout?.scriptpubkey_address === this.address.address); + } + if (!this.exampleVout) { + this.exampleVout = tx.vout.find(v => v.scriptpubkey_address === this.address.address); + } + if (this.exampleVin && this.exampleVout) { + break; + } + } + if (!this.showBalancePeriod()) { this.setBalancePeriod('all'); } else { @@ -370,6 +395,11 @@ export class AddressComponent implements OnInit, OnDestroy { ); } + @HostListener('window:resize', ['$event']) + onResize(): void { + this.isMobile = window.innerWidth < 768; + } + ngOnDestroy(): void { this.mainSubscription.unsubscribe(); this.mempoolTxSubscription.unsubscribe(); diff --git a/frontend/src/app/shared/components/address-type/address-type.component.html b/frontend/src/app/shared/components/address-type/address-type.component.html new file mode 100644 index 000000000..fbe041cb5 --- /dev/null +++ b/frontend/src/app/shared/components/address-type/address-type.component.html @@ -0,0 +1,29 @@ +@switch (vout?.scriptpubkey_type || null) { + @case ('fee') { + fee + } + @case ('empty') { + empty + } + @case ('v0_p2wpkh') { + P2WPKH + } + @case ('v0_p2wsh') { + P2WSH + } + @case ('v1_p2tr') { + P2TR + } + @case ('provably_unspendable') { + provably unspendable + } + @case ('multisig') { + bare multisig + } + @case (null) { + unknown + } + @default { + {{ vout.scriptpubkey_type.toUpperCase() }} + } +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/address-type/address-type.component.ts b/frontend/src/app/shared/components/address-type/address-type.component.ts new file mode 100644 index 000000000..34077330a --- /dev/null +++ b/frontend/src/app/shared/components/address-type/address-type.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; +import { Vout } from '../../../interfaces/electrs.interface'; + +@Component({ + selector: 'app-address-type', + templateUrl: './address-type.component.html', + styleUrls: [] +}) +export class AddressTypeComponent { + @Input() vout: Vout; +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 3b56d3510..ead9060ae 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -87,6 +87,7 @@ import { ChangeComponent } from '../components/change/change.component'; import { SatsComponent } from './components/sats/sats.component'; import { BtcComponent } from './components/btc/btc.component'; import { FeeRateComponent } from './components/fee-rate/fee-rate.component'; +import { AddressTypeComponent } from './components/address-type/address-type.component'; import { TruncateComponent } from './components/truncate/truncate.component'; import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component'; import { TimestampComponent } from './components/timestamp/timestamp.component'; @@ -202,6 +203,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir SatsComponent, BtcComponent, FeeRateComponent, + AddressTypeComponent, TruncateComponent, SearchResultsComponent, TimestampComponent, @@ -343,6 +345,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir SatsComponent, BtcComponent, FeeRateComponent, + AddressTypeComponent, TruncateComponent, SearchResultsComponent, TimestampComponent,