support inner links in truncated string component

frontend/src/app/bisq/bisq-address/bisq-address.component.html

@@ -1,11 +1,9 @@
 <div class="container-xl">
   <h1 i18n="shared.address">Address</h1>
   <span class="address-link">
-    <a  [routerLink]="['/address/' | relativeUrl, addressString]">
+    <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
-      <app-truncate [text]="addressString" [lastChars]="8">
       <app-clipboard [text]="addressString"></app-clipboard>
     </app-truncate>
-    </a>
   </span>
   <br>
 

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -7,11 +7,11 @@
       </div>
 
       <span class="tx-link">
-        <a [routerLink]="['/tx/' | relativeUrl, bisqTx.id]" class="txid">
+        <span class="txid">
-          <app-truncate [text]="bisqTx.id" [lastChars]="12">
+          <app-truncate [text]="bisqTx.id" [lastChars]="12" [link]="['/tx/' | relativeUrl, bisqTx.id]">
             <app-clipboard [text]="bisqTx.id"></app-clipboard>
           </app-truncate>
-        </a>
+        </span>
       </span>
       <span class="grow"></span>
       <div class="container-buttons">

frontend/src/app/components/address/address-preview.component.html

@@ -14,9 +14,7 @@
           <tr *ngIf="addressInfo && addressInfo.unconfidential">
             <td i18n="address.unconfidential">Unconfidential</td>
             <td>
-              <a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+              <app-truncate [text]="addressInfo.unconfidential" [lastChars]="7" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]"></app-truncate>
-                <app-truncate [text]="addressInfo.unconfidential" [lastChars]="7"></app-truncate>
-              </a>
             </td>
           </tr>
           <ng-template [ngIf]="!address.electrum">

frontend/src/app/components/address/address.component.html

@@ -2,11 +2,9 @@
   <div class="title-address">
     <h1 i18n="shared.address">Address</h1>
     <div class="tx-link">
-      <a [routerLink]="['/address/' | relativeUrl, addressString]" >
+      <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
-        <app-truncate [text]="addressString" [lastChars]="8">
         <app-clipboard [text]="addressString"></app-clipboard>
       </app-truncate>
-      </a>
     </div>
   </div>
 
@@ -22,11 +20,9 @@
               <tr *ngIf="addressInfo && addressInfo.unconfidential">
                 <td i18n="address.unconfidential">Unconfidential</td>
                 <td>
-                  <a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+                  <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
-                    <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8">
                     <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
                   </app-truncate>
-                  </a>
                 </td>
               </tr>
               <ng-template [ngIf]="!address.electrum">

frontend/src/app/components/asset/asset.component.html

@@ -2,11 +2,9 @@
   <div class="title-asset">
     <h1 i18n="asset|Liquid Asset page title">Asset</h1>
     <div class="tx-link">
-      <a [routerLink]="['/assets/asset/' | relativeUrl, assetString]">
+      <app-truncate [text]="assetString" [lastChars]="8" [link]="['/assets/asset/' | relativeUrl, assetString]">
-        <app-truncate [text]="assetString" [lastChars]="8">
         <app-clipboard [text]="assetString"></app-clipboard>
       </app-truncate>
-      </a>
     </div>
   </div>
 

frontend/src/app/components/transaction/transaction.component.html

@@ -3,20 +3,18 @@
   <div class="title-block">
     <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
       <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
-      <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]">
+      <app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
-        <app-truncate [text]="rbfTransaction.txid" [lastChars]="12"></app-truncate>
-      </a>
     </div>
 
     <ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
       <h1 i18n="shared.transaction">Transaction</h1>
 
       <span class="tx-link">
-        <a [routerLink]="['/tx/' | relativeUrl, txId]" class="txid">
+        <span class="txid">
-          <app-truncate [text]="txId" [lastChars]="12">
+          <app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
             <app-clipboard [text]="txId"></app-clipboard>
           </app-truncate>
-        </a>
+        </span>
       </span>
 
       <div class="container-buttons">
@@ -158,9 +156,8 @@
             <ng-template [ngIf]="cpfpInfo?.descendants?.length">
               <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
                 <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                  <td><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
+                <td>
-                    <app-truncate [text]="cpfpTx.txid"></app-truncate>
+                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                  </a>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
                 <td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@@ -171,9 +168,7 @@
               <tr>
                 <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
                 <td class="txids">
-                  <a [routerLink]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]">
+                  <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
-                    <app-truncate [text]="cpfpInfo.bestDescendant.txid"></app-truncate>
-                  </a>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
                 <td>{{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@@ -184,9 +179,7 @@
               <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
                 <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
                 <td class="txids">
-                  <a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
+                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                    <app-truncate [text]="cpfpTx.txid"></app-truncate>
-                  </a>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
                 <td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>

frontend/src/app/lightning/channel/channel-box/channel-box.component.html

@@ -1,11 +1,9 @@
 <div class="mb-2 box-top">
   <div class="box-left text-truncate">
     <h3 class="mb-0 text-truncate">{{ channel.alias || '?' }}</h3>
-    <a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
+    <app-truncate [text]="channel.public_key" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, channel.public_key]">
-      <app-truncate [text]="channel.public_key" [lastChars]="6">
       <app-clipboard [text]="channel.public_key"></app-clipboard>
     </app-truncate>
-    </a>
   </div>
   <div class="box-right">
     <div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: channel.channels }"></ng-container></div>

frontend/src/app/lightning/channels-list/channels-list.component.html

@@ -46,11 +46,9 @@
   <td class="alias text-left">
     <div>{{ node.alias || '?' }}</div>
     <div class="second-line">
-      <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
+      <app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, node.public_key]">
-        <app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6">
         <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
       </app-truncate>
-      </a>
     </div>
   </td>
   <td class="alias text-left d-none d-md-table-cell">

frontend/src/app/lightning/node/node.component.html

@@ -3,11 +3,11 @@
   <div class="title-container mb-2" *ngIf="!error">
     <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
     <span class="tx-link">
-      <a class="node-id" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
+      <span class="node-id">
-        <app-truncate [text]="node.public_key" [lastChars]="8">
+        <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
           <app-clipboard [text]="node.public_key"></app-clipboard>
         </app-truncate>
-      </a>
+      </span>
     </span>
   </div>
 

frontend/src/app/shared/components/truncate/truncate.component.html

@@ -1,9 +1,19 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
-    <ng-container *ngIf="!rtl">
+    <ng-container *ngIf="link">
-      <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
+      <a [routerLink]="link" class="truncate-link">
+        <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
+      </a>
     </ng-container>
-    <ng-container *ngIf="rtl">
+    <ng-container *ngIf="!link">
-      <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
+      <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
     </ng-container>
     <ng-content></ng-content>
 </span>
+
+<ng-template #ltrTruncated>
+  <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
+</ng-template>
+
+<ng-template #rtlTruncated>
+  <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
+</ng-template>

frontend/src/app/shared/components/truncate/truncate.component.scss

@@ -4,6 +4,14 @@
   flex-direction: row;
   align-items: baseline;
 
+  .truncate-link {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+
   .first {
     flex-grow: 0;
     flex-shrink: 1;

frontend/src/app/shared/components/truncate/truncate.component.ts

@@ -7,6 +7,7 @@ import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
 })
 export class TruncateComponent {
   @Input() text: string;
+  @Input() link: any = null;
   @Input() lastChars: number = 4;
   @Input() maxWidth: number = null;
   rtl: boolean;