Allow CTRL F an address on the transaction list component

frontend/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
 import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
+import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
 import { GraphsComponent } from './components/graphs/graphs.component';
 import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
@@ -163,6 +164,7 @@ import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weight
     StorageService,
     LanguageService,
     ShortenStringPipe,
+    CapAddressPipe,
     { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -65,7 +65,10 @@
                       <ng-template #defaultAddress>
                         <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
                           <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
-                          <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
+                          <span class="d-none d-lg-flex justify-content-start">
+                            <span class="addr-left flex-grow-1" [style]="vin.prevout.scriptpubkey_address.length > 40 ? 'max-width: 235px' : ''">{{ vin.prevout.scriptpubkey_address }}</span>
+                            <span *ngIf="vin.prevout.scriptpubkey_address.length > 40" class="addr-right">{{ vin.prevout.scriptpubkey_address | capAddress: 40: 10 }}</span>
+                          </span>
                         </a>
                         <div>
                           <app-address-labels [vin]="vin"></app-address-labels>
@@ -156,7 +159,10 @@
                 <td>
                   <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                     <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
-                    <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
+                    <span class="d-none d-lg-flex justify-content-start">
+                      <span class="addr-left flex-grow-1" [style]="vout.scriptpubkey_address.length > 40 ? 'max-width: 235px' : ''">{{ vout.scriptpubkey_address }}</span>
+                      <span *ngIf="vout.scriptpubkey_address.length > 40" class="addr-right">{{ vout.scriptpubkey_address | capAddress: 40: 10 }}</span>
+                    </span>
                   </a>
                   <div>
                     <app-address-labels [vout]="vout"></app-address-labels>

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -129,3 +129,14 @@ h2 {
 .summary {
 	margin-top: 10px;
 }
+
+.addr-left {
+	font-family: monospace;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-right: -7px
+}
+
+.addr-right {
+	font-family: monospace;
+}

frontend/src/app/shared/pipes/cap-address-pipe/cap-address-pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'capAddress' })
+export class CapAddressPipe implements PipeTransform {
+  transform(str: string, cap: number, leftover: number) {
+    if (!str) { return; }
+    if (str.length <= cap) {
+      return str;
+    }
+    return str.slice(-Math.max(cap - str.length, leftover));
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -29,6 +29,7 @@ import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blo
 import { BlockchainBlocksComponent } from '../components/blockchain-blocks/blockchain-blocks.component';
 import { AmountComponent } from '../components/amount/amount.component';
 import { RouterModule } from '@angular/router';
+import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
 
 @NgModule({
   declarations: [
@@ -51,6 +52,7 @@ import { RouterModule } from '@angular/router';
     WuBytesPipe,
     CeilPipe,
     ShortenStringPipe,
+    CapAddressPipe,
     Decimal2HexPipe,
     FeeRoundingPipe,
     ColoredPriceDirective,
@@ -103,6 +105,7 @@ import { RouterModule } from '@angular/router';
     WuBytesPipe,
     CeilPipe,
     ShortenStringPipe,
+    CapAddressPipe,
     Decimal2HexPipe,
     FeeRoundingPipe,
     ColoredPriceDirective,