migrate old text truncation implementations to new component

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

@@ -2,10 +2,10 @@
   <h1 i18n="shared.address">Address</h1>
   <span class="address-link">
     <a  [routerLink]="['/address/' | relativeUrl, addressString]">
-      <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
-      <span class="d-none d-lg-inline">{{ addressString }}</span>
+      <app-truncate [text]="addressString" [lastChars]="8">
+        <app-clipboard [text]="addressString"></app-clipboard>
+      </app-truncate>
     </a>
-    <app-clipboard [text]="addressString"></app-clipboard>
   </span>
   <br>
 

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

@@ -6,12 +6,12 @@
         <h1 i18n="shared.transaction">Transaction</h1>
       </div>
 
-      <span class="tx-link float-left">
-        <a [routerLink]="['/tx' | relativeUrl, bisqTx.id]">
-          <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
-          <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
+      <span class="tx-link">
+        <a [routerLink]="['/tx/' | relativeUrl, bisqTx.id]" class="txid">
+          <app-truncate [text]="bisqTx.id" [lastChars]="12">
+            <app-clipboard [text]="bisqTx.id"></app-clipboard>
+          </app-truncate>
         </a>
-        <app-clipboard [text]="bisqTx.id"></app-clipboard>
       </span>
       <span class="grow"></span>
       <div class="container-buttons">

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

@@ -6,17 +6,18 @@
     <div class="col-md">
       <div class="row d-flex justify-content-between">
         <div class="title-wrapper">
-          <h1 class="title truncated"><span class="first">{{addressString.slice(0,-4)}}</span><span class="last-four">{{addressString.slice(-4)}}</span></h1>
+          <h1 class="title"><app-truncate [text]="addressString"></app-truncate></h1>
         </div>
       </div>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr *ngIf="addressInfo && addressInfo.unconfidential">
             <td i18n="address.unconfidential">Unconfidential</td>
-            <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
-              <span class="d-inline d-lg-none">{{ addressInfo.unconfidential | shortenString : 14 }}</span>
-              <span class="d-none d-lg-inline">{{ addressInfo.unconfidential }}</span>
-            </a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
+            <td>
+              <a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+                <app-truncate [text]="addressInfo.unconfidential" [lastChars]="7"></app-truncate>
+              </a>
+            </td>
           </tr>
           <ng-template [ngIf]="!address.electrum">
             <tr>

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

@@ -3,10 +3,10 @@
     <h1 i18n="shared.address">Address</h1>
     <div class="tx-link">
       <a [routerLink]="['/address/' | relativeUrl, addressString]" >
-        <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
-        <span class="d-none d-lg-inline">{{ addressString }}</span>
+        <app-truncate [text]="addressString" [lastChars]="8">
+          <app-clipboard [text]="addressString"></app-clipboard>
+        </app-truncate>
       </a>
-      <app-clipboard [text]="addressString"></app-clipboard>
     </div>
   </div>
 
@@ -21,10 +21,13 @@
             <tbody>
               <tr *ngIf="addressInfo && addressInfo.unconfidential">
                 <td i18n="address.unconfidential">Unconfidential</td>
-                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
-                  <span class="d-inline d-lg-none">{{ addressInfo.unconfidential | shortenString : 14 }}</span>
-                  <span class="d-none d-lg-inline">{{ addressInfo.unconfidential }}</span>
-                </a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></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>
+                </td>
               </tr>
               <ng-template [ngIf]="!address.electrum">
                 <tr>

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

@@ -3,10 +3,10 @@
     <h1 i18n="asset|Liquid Asset page title">Asset</h1>
     <div class="tx-link">
       <a [routerLink]="['/assets/asset/' | relativeUrl, assetString]">
-        <span class="d-inline d-lg-none">{{ assetString | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ assetString }}</span>
+        <app-truncate [text]="assetString" [lastChars]="8">
+          <app-clipboard [text]="assetString"></app-clipboard>
+        </app-truncate>
       </a>
-      <app-clipboard [text]="assetString"></app-clipboard>
     </div>
   </div>
 

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -64,26 +64,6 @@
     white-space: nowrap;
     margin: 0;
     display: inline-block;
-
-    &.truncated {
-      text-overflow: unset;
-      display: flex;
-      flex-direction: row;
-      align-items: baseline;
-
-      .first {
-        flex-grow: 1;
-        flex-shrink: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin-right: -2px;
-      }
-
-      .last-four {
-        flex-shrink: 0;
-        flex-grow: 0;
-      }
-    }
   }
 
   ::ng-deep .title-wrapper {

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

@@ -4,7 +4,7 @@
   </app-preview-title>
   <div class="row d-flex justify-content-between full-width-row">
     <div class="title-wrapper">
-      <h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>
+      <h1 class="title truncated"><app-truncate [text]="txId"></app-truncate></h1>
     </div>
     <div *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" class="features">
       <app-tx-features [tx]="tx"></app-tx-features>

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

@@ -4,20 +4,19 @@
     <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]">
-        <span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
+        <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 float-left">
-        <a [routerLink]="['/tx/' | relativeUrl, txId]">
-          <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
-          <span class="d-none d-lg-inline">{{ txId }}</span>
+      <span class="tx-link">
+        <a [routerLink]="['/tx/' | relativeUrl, txId]" class="txid">
+          <app-truncate [text]="txId" [lastChars]="12">
+            <app-clipboard [text]="txId"></app-clipboard>
+          </app-truncate>
         </a>
-        <app-clipboard [text]="txId"></app-clipboard>
       </span>
 
       <div class="container-buttons">
@@ -144,12 +143,12 @@
       <br>
 
       <h2 class="text-left">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="xs"></fa-icon></h2>
-      <div class="box">
-        <table class="table table-borderless table-striped">
+      <div class="box cpfp-details">
+        <table class="table table-fixed table-borderless table-striped">
           <thead>
             <tr>
               <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
-              <th i18n="dashboard.latest-transactions.txid">TXID</th>
+              <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
               <th class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
               <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
               <th class="d-none d-lg-table-cell"></th>
@@ -160,8 +159,7 @@
               <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]">
-                    <span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
-                    <span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
+                    <app-truncate [text]="cpfpTx.txid"></app-truncate>
                   </a>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
@@ -172,10 +170,9 @@
             <ng-template [ngIf]="cpfpInfo?.bestDescendant">
               <tr>
                 <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td>
+                <td class="txids">
                   <a [routerLink]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]">
-                    <span class="d-inline d-lg-none">{{ cpfpInfo.bestDescendant.txid | shortenString : 8 }}</span>
-                    <span class="d-none d-lg-inline">{{ cpfpInfo.bestDescendant.txid }}</span>
+                    <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>
@@ -186,9 +183,9 @@
             <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
               <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
                 <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
-                  <td><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
-                    <span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
-                    <span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
+                <td class="txids">
+                  <a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
+                    <app-truncate [text]="cpfpTx.txid"></app-truncate>
                   </a>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>

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

@@ -19,22 +19,33 @@
   }
 }
 .tx-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: baseline;
+  width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  margin-right: 0px;
   margin-bottom: 0px;
   margin-top: 8px;
-  display: inline-block;
-  width: 100%;
-  flex-shrink: 0;
   @media (min-width: 651px) {
-    display: flex;
-    width: auto;
     flex-grow: 1;
     margin-bottom: 0px;
+    margin-right: 1em;
     top: 1px;
     position: relative;
   }
   @media (max-width: 650px) {
+    width: 100%;
     order: 3;
   }
+
+  .txid {
+    width: 200px;
+    min-width: 200px;
+    flex-grow: 1;
+  }
 }
 
 .td-width {
@@ -188,4 +199,10 @@
       margin-left: 8px;
     }
   }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
 }

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

@@ -1,16 +1,14 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
   <div *ngIf="!transactionPage" class="header-bg box tx-page-container">
-    <a class="float-left" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
-      <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
-      <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
+    <a class="tx-link" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
+      <app-truncate [text]="tx.txid"></app-truncate>
     </a>
-    <div class="float-right">
+    <div>
       <ng-template [ngIf]="tx.status.confirmed">&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-template>
       <ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
         <i><app-time-since [time]="tx.firstSeen" [fastRender]="true"></app-time-since></i>
       </ng-template>
     </div>
-    <div class="clearfix"></div>
   </div>
 
   <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [attr.data-cy]="'tx-' + i">
@@ -18,7 +16,7 @@
     <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
     <div class="row">
       <div class="col">
-        <table class="table table-borderless smaller-text table-sm table-tx-vin">
+        <table class="table table-fixed table-borderless smaller-text table-sm table-tx-vin">
           <tbody>
             <ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
@@ -49,7 +47,7 @@
                     </ng-template>
                   </ng-template>
                 </td>
-                <td>
+                <td class="address-cell">
                   <div [ngSwitch]="true">
                     <ng-container *ngSwitchCase="vin.is_coinbase"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid' && network !== 'liquidtestnet'">&nbsp;<span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template><br /><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></a></ng-container>
                     <ng-container *ngSwitchCase="vin.is_pegin">
@@ -66,12 +64,8 @@
                         </ng-template>
                       </ng-template>
                       <ng-template #defaultAddress>
-                        <a class="shortable-address" *ngIf="vin.prevout.scriptpubkey_address; else vinScriptPubkeyType" [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-inline-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 class="address" *ngIf="vin.prevout.scriptpubkey_address; else vinScriptPubkeyType" [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
+                          <app-truncate [text]="vin.prevout.scriptpubkey_address" [lastChars]="8"></app-truncate>
                         </a>
                         <ng-template #vinScriptPubkeyType>
                           {{ vin.prevout.scriptpubkey_type?.toUpperCase() }}
@@ -162,20 +156,16 @@
       </div>
       <div class="w-100 d-block d-md-none"></div>
       <div class="col mobile-bottomcol">
-        <table class="table table-borderless smaller-text table-sm table-tx-vout">
+        <table class="table table-fixed table-borderless smaller-text table-sm table-tx-vout">
           <tbody>
             <ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
                 'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
                 'highlight': vout.scriptpubkey_address === this.address && this.address !== ''
               }">
-                <td>
-                  <a class="shortable-address" *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-inline-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>
+                <td class="address-cell">
+                  <a class="address" *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
+                    <app-truncate [text]="vout.scriptpubkey_address" [lastChars]="8"></app-truncate>
                   </a>
                   <div>
                     <app-address-labels [vout]="vout" [channel]="tx._channels && tx._channels.outputs[vindex] ? tx._channels.outputs[vindex] : null"></app-address-labels>
@@ -185,13 +175,11 @@
                       <ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container>
                       <ng-template #pegOutLink>
                         <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
-                          <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                          <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
+                          <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
                         </a>
                         <ng-template #localPegoutLink>
                           <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
-                            <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                            <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
+                            <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
                           </a>
                         </ng-template>
                       </ng-template>

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

@@ -1,6 +1,6 @@
 
 .arrow-td {
-	width: 20px;
+	width: 30px;
 	padding-top: 0;
 	padding-bottom: 0;
 }
@@ -45,6 +45,10 @@
 	}
 }
 
+td.amount {
+	width: 32.5%;
+}
+
 .extra-info {
 	display: none;
 	@media (min-width: 576px) {
@@ -81,6 +85,10 @@
 }
 
 .tx-page-container {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	white-space: nowrap;
 	padding: 10px;
 	margin-bottom: 10px;
 	margin-top: 10px;
@@ -130,14 +138,7 @@ h2 {
 	margin-top: 10px;
 }
 
-.addr-left {
-	font-family: monospace;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-right: -7px
-}
-
-.addr-right {
+.address {
 	font-family: monospace;
 }
 
@@ -146,3 +147,9 @@ h2 {
 	font-style: italic;
 	font-size: 12px;
 }
+
+.tx-link {
+	width: 0;
+	flex-grow: 1;
+	margin-right: 2em;
+}

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html

@@ -31,8 +31,7 @@
       <p *ngIf="!isConnector">Peg Out</p>
       <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
       <p class="address">
-        <span class="first">{{ line.pegout.slice(0, -4) }}</span>
-        <span class="last-four">{{ line.pegout.slice(-4) }}</span>
+        <app-truncate [text]="line.pegout"></app-truncate>
       </p>
     </ng-container>
   </ng-template>
@@ -49,8 +48,7 @@
       <ng-container *ngIf="isConnector && line.txid">
         <p>
           <span i18n="transaction">Transaction</span>&nbsp;
-          <span class="first">{{ line.txid.slice(0, 8) }}</span>...
-          <span class="last-four">{{ line.txid.slice(-4) }}</span>
+          <app-truncate [text]="line.txid"></app-truncate>
         </p>
           <ng-container [ngSwitch]="line.type">
             <p *ngSwitchCase="'input'"><span i18n="transaction.output">Output</span>&nbsp; #{{ line.vout + 1 }}</p>
@@ -60,8 +58,7 @@
       <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
       <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
       <p *ngIf="line.type !== 'fee' && line.address" class="address">
-        <span class="first">{{ line.address.slice(0, -4) }}</span>
-        <span class="last-four">{{ line.address.slice(-4) }}</span>
+        <app-truncate [text]="line.address"></app-truncate>
       </p>
   </ng-template>
 </div>

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss

@@ -17,22 +17,5 @@
   .address {
     width: 100%;
     max-width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: flex-start;
-
-    .first {
-      flex-grow: 0;
-      flex-shrink: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-right: -2px;
-    }
-
-    .last-four {
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
   }
 }

frontend/src/app/dashboard/dashboard.component.html

@@ -127,7 +127,11 @@
             </thead>
             <tbody>
               <tr *ngFor="let transaction of transactions$ | async; let i = index;">
-                <td class="table-cell-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
+                <td class="table-cell-txid">
+                  <a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
+                    <app-truncate [text]="transaction.txid" [lastChars]="6"></app-truncate>
+                  </a>
+                </td>
                 <td class="table-cell-satoshis"><app-amount *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'; else liquidAmount" [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount><ng-template #liquidAmount i18n="shared.confidential">Confidential</ng-template></td>
                 <td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
                 <td class="table-cell-fees">{{ transaction.fee / transaction.vsize | 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

@@ -2,9 +2,10 @@
   <div class="box-left text-truncate">
     <h3 class="mb-0 text-truncate">{{ channel.alias || '?' }}</h3>
     <a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
-      {{ channel.public_key | shortenString : 12 }}
+      <app-truncate [text]="channel.public_key" [lastChars]="6">
+        <app-clipboard [text]="channel.public_key"></app-clipboard>
+      </app-truncate>
     </a>
-    <app-clipboard [text]="channel.public_key"></app-clipboard>
   </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

@@ -47,9 +47,10 @@
     <div>{{ node.alias || '?' }}</div>
     <div class="second-line">
       <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
-        <span>{{ node.public_key | shortenString : publicKeySize }}</span>
+        <app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6">
+          <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
+        </app-truncate>
       </a>
-      <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
     </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 [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
-        <span class="d-inline d-lg-none">{{ node.public_key | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ node.public_key }}</span>
+      <a class="node-id" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
+        <app-truncate [text]="node.public_key" [lastChars]="8">
+          <app-clipboard [text]="node.public_key"></app-clipboard>
+        </app-truncate>
       </a>
-      <app-clipboard [text]="node.public_key"></app-clipboard>
     </span>
   </div>
 

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

@@ -8,6 +8,11 @@
 	flex-wrap: wrap;
 }
 
+.node-id {
+  width: 0;
+  flex-grow: 1;
+}
+
 .qr-wrapper {
   background-color: #FFF;
   padding: 10px;