diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts
index b5f7acc46..4e40d4e67 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -24,7 +24,7 @@ import { SighashFlag } from '@app/shared/transaction.utils';
templateUrl: './transactions-list.component.html',
styleUrls: ['./transactions-list.component.scss'],
standalone: false,
- changeDetection: ChangeDetectionStrategy.OnPush,
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
network = '';
@@ -91,7 +91,7 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
private ref: ChangeDetectorRef,
private priceService: PriceService,
private storageService: StorageService,
- private route: ActivatedRoute
+ private route: ActivatedRoute,
) {
this.signaturesMode = this.forceSignaturesMode || this.stateService.signaturesMode$.value;
}
diff --git a/frontend/src/app/shared/components/address-text/address-text.component.html b/frontend/src/app/shared/components/address-text/address-text.component.html
new file mode 100644
index 000000000..ae8643349
--- /dev/null
+++ b/frontend/src/app/shared/components/address-text/address-text.component.html
@@ -0,0 +1,17 @@
+
+@if (similarity) {
+
+} @else {
+
+
+
+}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/address-text/address-text.component.scss b/frontend/src/app/shared/components/address-text/address-text.component.scss
new file mode 100644
index 000000000..3b5bf50b7
--- /dev/null
+++ b/frontend/src/app/shared/components/address-text/address-text.component.scss
@@ -0,0 +1,32 @@
+.address-text {
+ text-overflow: unset;
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ position: relative;
+
+ font-family: monospace;
+
+ .infix {
+ flex-grow: 0;
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ user-select: none;
+
+ text-decoration: underline 2px;
+ }
+
+ .prefix, .postfix {
+ flex-shrink: 0;
+ flex-grow: 0;
+ user-select: none;
+
+ text-decoration: underline var(--red) 2px;
+ }
+}
+
+.poison-alert {
+ margin-left: .5em;
+ color: var(--yellow);
+}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/address-text/address-text.component.ts b/frontend/src/app/shared/components/address-text/address-text.component.ts
new file mode 100644
index 000000000..65ae3006a
--- /dev/null
+++ b/frontend/src/app/shared/components/address-text/address-text.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { AddressMatch, AddressTypeInfo } from '@app/shared/address-utils';
+
+@Component({
+ selector: 'app-address-text',
+ templateUrl: './address-text.component.html',
+ styleUrls: ['./address-text.component.scss'],
+ standalone: false,
+})
+export class AddressTextComponent {
+ @Input() address: string;
+ @Input() info: AddressTypeInfo | null;
+ @Input() similarity: { score: number, match: AddressMatch, group: number } | null;
+
+ min = Math.min;
+
+ groupColors: string[] = [
+ 'var(--primary)',
+ 'var(--success)',
+ 'var(--info)',
+ 'white',
+ ];
+}
diff --git a/frontend/src/app/shared/components/chunked-address/chunked-address.component.html b/frontend/src/app/shared/components/chunked-address/chunked-address.component.html
deleted file mode 100644
index f22953079..000000000
--- a/frontend/src/app/shared/components/chunked-address/chunked-address.component.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ chunk.text.slice(0, chunk.prefixLength) }}{{ chunk.text.slice(chunk.prefixLength || 0, chunk.text.length - (chunk.postfixLength || 0)) }}{{ chunk.text.slice(chunk.text.length - chunk.postfixLength) }}
-
- {{ chunk.text }}
-
-
-
-
-
-
-
-
- {{ address.slice(0, -lastChars) }}
-
-
-
-
-
-
- {{ address.slice(-lastChars) }}
-
-
{{ address }}
-
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss b/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss
deleted file mode 100644
index 5ee17cea8..000000000
--- a/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-.address {
- text-overflow: unset;
- display: flex;
- flex-direction: row;
- align-items: start;
- position: relative;
- font-family: monospace;
-
- .address-link, .address-content {
- direction: ltr;
- display: flex;
- flex-direction: row;
- align-items: baseline;
- flex-shrink: 1;
- overflow: hidden;
- min-width: 0;
- }
-
- .address-link:hover {
- filter: brightness(0.85);
- }
-
- .first {
- flex-grow: 0;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- user-select: none;
- }
-
- .last {
- flex-shrink: 0;
- flex-grow: 0;
- user-select: none;
- }
-
- .first, .last {
- direction: ltr;
- > span {
- padding-inline-end: 2px;
- &:nth-child(even) {
- color: #18e2cf;
- }
-
- &.partial {
- padding-inline-end: 0;
- }
-
- &.hidden {
- visibility: hidden;
- width: 0;
- padding-inline-end: 0;
- }
-
- &:has(> .prefix, > .infix, > .postfix) {
- padding-inline-end: 0;
-
- > :last-child {
- padding-inline-end: 2px;
- }
-
- &.partial > :last-child {
- padding-inline-end: 0;
- }
- }
- }
- }
-
- .last span:last-child {
- padding-inline-end: 0;
- }
-
- &.inline {
- display: inline-flex;
- }
-
- .hidden-content {
- color: transparent;
- position: absolute;
- max-width: 300px;
- overflow: hidden;
- }
-
- .disabled {
- pointer-events: none;
- opacity: 0.8;
- }
-
- .infix {
- flex-grow: 0;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- user-select: none;
-
- border-bottom: 2px solid;
- }
-
- .prefix, .postfix {
- flex-shrink: 0;
- flex-grow: 0;
- user-select: none;
-
- border-bottom: 2px solid var(--red);
- }
-}
-
-.poison-alert {
- margin-left: .5em;
- color: var(--yellow);
-}
-
-@media (max-width: 567px) {
- .hidden-content {
- max-width: 150px !important;
- }
-}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts b/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts
deleted file mode 100644
index ee3e4eb61..000000000
--- a/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
-import { AddressMatch } from '@app/shared/address-utils';
-
-interface AddressChunk {
- text: string;
- prefixLength?: number;
- postfixLength?: number;
-}
-
-@Component({
- selector: 'app-chunked-address',
- templateUrl: './chunked-address.component.html',
- styleUrls: ['./chunked-address.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
-})
-export class ChunkedAddressComponent implements OnChanges {
- @Input() address: string;
- @Input() similarity: { score: number, match: AddressMatch, group: number } | null;
- @Input() link: any = null;
- @Input() external: boolean = false;
- @Input() queryParams: any = undefined;
- @Input() lastChars: number = 8;
- @Input() maxWidth: number = null;
- @Input() inline: boolean = false;
- @Input() textAlign: 'start' | 'end' = 'start';
- @Input() disabled: boolean = false;
- @Input() showClipboard: boolean = false;
- @Input() chunkSize = 4;
-
- headChunks: AddressChunk[] = [];
- tailChunks: AddressChunk[] = [];
-
- groupColors: string[] = [
- 'var(--primary)',
- 'var(--success)',
- 'var(--info)',
- 'white',
- ];
-
- matchColor: string = 'var(--primary)';
-
- ngOnChanges(): void {
- if (this.similarity) {
- this.matchColor = this.groupColors[this.similarity.group % (this.groupColors.length)];
- }
- this.updateView();
- }
-
- private updateView(): void {
- if (!this.address) {
- return;
- }
-
- const split = this.address.length - this.lastChars;
- const prefixLen = this.similarity?.match?.prefix?.length || 0;
- const postfixStart = this.address.length - (this.similarity?.match?.postfix?.length || 0);
- this.headChunks = [];
- this.tailChunks = [];
-
- for (let i = 0; i < this.address.length; i += this.chunkSize) {
- const text = this.address.slice(i, i + this.chunkSize);
- const chunk = {
- text,
- prefixLength: prefixLen > i ? Math.min(text.length, prefixLen - i) : undefined,
- postfixLength: postfixStart < i + text.length ? Math.min(text.length, i + text.length - postfixStart) : undefined,
- };
- if (i + this.chunkSize <= split) {
- this.headChunks.push(chunk);
- } else if (i >= split) {
- this.tailChunks.push(chunk);
- } else {
- // split chunk across head and tail
- const [ headChunk, tailChunk ] = this.splitChunk(chunk, split - i);
- this.headChunks.push(headChunk);
- this.tailChunks.push(tailChunk);
- }
- }
- }
-
- private splitChunk(chunk: AddressChunk, at: number): [AddressChunk, AddressChunk] {
- return [{
- text: chunk.text.slice(0, at),
- prefixLength: chunk.prefixLength ? Math.min(chunk.prefixLength, at) : undefined,
- postfixLength: chunk.postfixLength ? Math.max(0, at - chunk.postfixLength) : undefined,
- }, {
- text: chunk.text.slice(at),
- prefixLength: chunk.prefixLength ? Math.max(0, at - chunk.prefixLength) : undefined,
- postfixLength: chunk.postfixLength ? Math.min(chunk.postfixLength, chunk.text.length - at) : undefined,
- }];
- }
-}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.ts b/frontend/src/app/shared/components/truncate/truncate.component.ts
index 49ce9cf66..9da856982 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.ts
+++ b/frontend/src/app/shared/components/truncate/truncate.component.ts
@@ -26,4 +26,4 @@ export class TruncateComponent {
this.rtl = true;
}
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index b82e4951e..eabb7bbd3 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -97,6 +97,7 @@ import { SatsComponent } from '@app/shared/components/sats/sats.component';
import { BtcComponent } from '@app/shared/components/btc/btc.component';
import { FeeRateComponent } from '@app/shared/components/fee-rate/fee-rate.component';
import { AddressTypeComponent } from '@app/shared/components/address-type/address-type.component';
+import { AddressTextComponent } from '@app/shared/components/address-text/address-text.component';
import { TruncateComponent } from '@app/shared/components/truncate/truncate.component';
import { SearchResultsComponent } from '@components/search-form/search-results/search-results.component';
import { TimestampComponent } from '@app/shared/components/timestamp/timestamp.component';
@@ -132,8 +133,6 @@ import { BitcoinInvoiceComponent } from '@components/bitcoin-invoice/bitcoin-inv
import { OnlyVsizeDirective, OnlyWeightDirective } from '@app/shared/components/weight-directives/weight-directives';
import { GithubLogin } from '@components/github-login.component/github-login.component';
-import { ChunkedAddressComponent } from '@app/shared/components/chunked-address/chunked-address.component';
-
@NgModule({
declarations: [
ClipboardComponent,
@@ -223,6 +222,7 @@ import { ChunkedAddressComponent } from '@app/shared/components/chunked-address/
BtcComponent,
FeeRateComponent,
AddressTypeComponent,
+ AddressTextComponent,
TruncateComponent,
SearchResultsComponent,
TimestampComponent,
@@ -256,7 +256,6 @@ import { ChunkedAddressComponent } from '@app/shared/components/chunked-address/
TwitterLogin,
GithubLogin,
BitcoinInvoiceComponent,
- ChunkedAddressComponent
],
imports: [
CommonModule,
@@ -376,6 +375,7 @@ import { ChunkedAddressComponent } from '@app/shared/components/chunked-address/
BtcComponent,
FeeRateComponent,
AddressTypeComponent,
+ AddressTextComponent,
TruncateComponent,
SearchResultsComponent,
TimestampComponent,
@@ -407,8 +407,6 @@ import { ChunkedAddressComponent } from '@app/shared/components/chunked-address/
OnlyVsizeDirective,
OnlyWeightDirective,
-
- ChunkedAddressComponent
]
})
export class SharedModule {