feat: shorten long addresses

packages/admin-ui/src/pages/Transactions/DetailsCard.jsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useMutation, gql } from '@apollo/client'
-import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils'
+import { toUnit } from '@lamassu/coins/lightUtils'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { add, differenceInYears, format, sub, parse } from 'date-fns/fp'
@@ -32,6 +32,7 @@ import {
 } from '../../styling/variables'
 import { SWEEPABLE_CRYPTOS } from '../../utils/constants'
 import * as Customer from '../../utils/customer'
+import { formatAddress } from '../../utils/string'
 
 import CopyToClipboard from '../../components/CopyToClipboard.jsx'
 import { getStatus, getStatusDetails } from './helper'
@@ -93,9 +94,6 @@ const getCryptoFeeAmount = tx => {
     .toFixed(2, 1)
 }
 
-const formatAddress = (cryptoCode = '', address = '') =>
-  formatCryptoAddress(cryptoCode, address).replace(/(.{5})/g, '$1 ')
-
 const Label = ({ children }) => {
   return (
     <Label1 noMargin className="text-comet mb-1">
@@ -234,6 +232,8 @@ const DetailsRow = ({ it: tx, timezone }) => {
     return isCashIn ? cashInMessage : cashOutMessage
   }
 
+  const { address, addressDisplay } = formatAddress(tx.cryptoCode, tx.toAddress)
+
   return (
     <div data-cy="details" className="flex flex-col mt-6">
       <div className="flex flex-row mb-9">
@@ -358,9 +358,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
             )}
           </div>
           <div>
-            <CopyToClipboard>
+            <CopyToClipboard value={address}>{addressDisplay}</CopyToClipboard>
-              {formatAddress(tx.cryptoCode, tx.toAddress)}
-            </CopyToClipboard>
           </div>
         </div>
         <div data-cy="transactionId" className="w-70">

packages/admin-ui/src/utils/string.js

@@ -1,4 +1,24 @@
 import * as R from 'ramda'
+import { formatCryptoAddress } from '@lamassu/coins/lightUtils'
+
+const shortenByEllipses = (str, contextLength, ellipsesLength) =>
+  str.length <= contextLength * 2
+    ? str
+    : [
+        str.slice(0, contextLength),
+        '.'.repeat(ellipsesLength),
+        str.slice(str.length - contextLength),
+      ].join('')
+
+const formatAddress = (cryptoCode, address) => {
+  address = formatCryptoAddress(cryptoCode, address)
+  let addressDisplay =
+    address.length > 84 /* 2*BTC */
+      ? shortenByEllipses(address, 10, 5)
+      : address
+  addressDisplay = addressDisplay.replace(/(.{5})/g, '$1 ')
+  return { address, addressDisplay }
+}
 
 const formatLong = value => {
   if (!value || value.length <= 20) return value
@@ -30,6 +50,7 @@ const singularOrPlural = (amount, singularStr, pluralStr) =>
 export {
   startCase,
   onlyFirstToUpper,
+  formatAddress,
   formatLong,
   singularOrPlural,
   sentenceCase,