From 73f2d54a2689d175ce8aaa0e734e6b4b30a9ce57 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 16 Jan 2023 16:47:05 -0600
Subject: [PATCH] support inner links in truncated string component

---
 .../bisq-address/bisq-address.component.html  |  8 +++----
 .../bisq-transaction.component.html           |  6 ++---
 .../address/address-preview.component.html    |  4 +---
 .../components/address/address.component.html | 16 +++++--------
 .../app/components/asset/asset.component.html |  8 +++----
 .../transaction/transaction.component.html    | 23 +++++++------------
 .../channel-box/channel-box.component.html    |  8 +++----
 .../channels-list.component.html              |  8 +++----
 .../app/lightning/node/node.component.html    |  6 ++---
 .../truncate/truncate.component.html          | 18 +++++++++++----
 .../truncate/truncate.component.scss          |  8 +++++++
 .../components/truncate/truncate.component.ts |  1 +
 12 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/frontend/src/app/bisq/bisq-address/bisq-address.component.html b/frontend/src/app/bisq/bisq-address/bisq-address.component.html
index 3a66b68b3..c2cbbb76a 100644
--- a/frontend/src/app/bisq/bisq-address/bisq-address.component.html
+++ b/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">
-        <app-clipboard [text]="addressString"></app-clipboard>
-      </app-truncate>
-    </a>
+    <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
+      <app-clipboard [text]="addressString"></app-clipboard>
+    </app-truncate>
   </span>
   <br>
 
diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
index 0c53bceab..11f981774 100644
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
+++ b/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">
-          <app-truncate [text]="bisqTx.id" [lastChars]="12">
+        <span class="txid">
+          <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">
diff --git a/frontend/src/app/components/address/address-preview.component.html b/frontend/src/app/components/address/address-preview.component.html
index 5ff9616af..1924d1a4c 100644
--- a/frontend/src/app/components/address/address-preview.component.html
+++ b/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"></app-truncate>
-              </a>
+              <app-truncate [text]="addressInfo.unconfidential" [lastChars]="7" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]"></app-truncate>
             </td>
           </tr>
           <ng-template [ngIf]="!address.electrum">
diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index d6c141efa..d3b23315a 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/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">
-          <app-clipboard [text]="addressString"></app-clipboard>
-        </app-truncate>
-      </a>
+      <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
+        <app-clipboard [text]="addressString"></app-clipboard>
+      </app-truncate>
     </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">
-                      <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
-                    </app-truncate>
-                  </a>
+                  <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+                    <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
+                  </app-truncate>
                 </td>
               </tr>
               <ng-template [ngIf]="!address.electrum">
diff --git a/frontend/src/app/components/asset/asset.component.html b/frontend/src/app/components/asset/asset.component.html
index 1608f2355..862055f22 100644
--- a/frontend/src/app/components/asset/asset.component.html
+++ b/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">
-          <app-clipboard [text]="assetString"></app-clipboard>
-        </app-truncate>
-      </a>
+      <app-truncate [text]="assetString" [lastChars]="8" [link]="['/assets/asset/' | relativeUrl, assetString]">
+        <app-clipboard [text]="assetString"></app-clipboard>
+      </app-truncate>
     </div>
   </div>
 
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 8c0cfe967..b1e9afaf2 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/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"></app-truncate>
-      </a>
+      <app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
     </div>
 
     <ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
       <h1 i18n="shared.transaction">Transaction</h1>
 
       <span class="tx-link">
-        <a [routerLink]="['/tx/' | relativeUrl, txId]" class="txid">
-          <app-truncate [text]="txId" [lastChars]="12">
+        <span class="txid">
+          <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]">
-                    <app-truncate [text]="cpfpTx.txid"></app-truncate>
-                  </a>
+                <td>
+                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
                 </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"></app-truncate>
-                  </a>
+                  <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
                 </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"></app-truncate>
-                  </a>
+                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
                 </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>
diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
index 7f098ac71..9fe9b100b 100644
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
+++ b/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">
-        <app-clipboard [text]="channel.public_key"></app-clipboard>
-      </app-truncate>
-    </a>
+    <app-truncate [text]="channel.public_key" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, channel.public_key]">
+      <app-clipboard [text]="channel.public_key"></app-clipboard>
+    </app-truncate>
   </div>
   <div class="box-right">
     <div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: channel.channels }"></ng-container></div>
diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.html b/frontend/src/app/lightning/channels-list/channels-list.component.html
index 9fc92401a..f89100666 100644
--- a/frontend/src/app/lightning/channels-list/channels-list.component.html
+++ b/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">
-          <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
-        </app-truncate>
-      </a>
+      <app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, node.public_key]">
+        <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
+      </app-truncate>
     </div>
   </td>
   <td class="alias text-left d-none d-md-table-cell">
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index bc3f0dc9a..4331767ef 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/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]">
-        <app-truncate [text]="node.public_key" [lastChars]="8">
+      <span class="node-id">
+        <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>
 
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.html b/frontend/src/app/shared/components/truncate/truncate.component.html
index 728f2e82a..31d1b1b88 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.html
+++ b/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">
-      <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
+    <ng-container *ngIf="link">
+      <a [routerLink]="link" class="truncate-link">
+        <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
+      </a>
     </ng-container>
-    <ng-container *ngIf="rtl">
-      <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
+    <ng-container *ngIf="!link">
+      <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>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.scss b/frontend/src/app/shared/components/truncate/truncate.component.scss
index 357f40762..ea69e32c3 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.scss
+++ b/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;
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.ts b/frontend/src/app/shared/components/truncate/truncate.component.ts
index da9965be3..27e705997 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.ts
+++ b/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;