Merge pull request #1850 from siiky/fix/lam-1057/shorten-ln-addresses

LAM-1057 feat: shorten long addresses

packages/admin-ui/src/pages/Funding/Funding.jsx

@@ -1,5 +1,4 @@
 import { useQuery, gql } from '@apollo/client'
-import { formatCryptoAddress } from '@lamassu/coins/lightUtils'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
 import { format } from 'date-fns/fp'
@@ -25,6 +24,7 @@ import {
   Label3,
 } from '../../components/typography/index.jsx'
 import CopyToClipboard from '../../components/CopyToClipboard.jsx'
+import { formatAddress } from '../../utils/string'
 
 import { primaryColor } from '../../styling/variables.js'
 
@@ -57,8 +57,6 @@ const GET_FUNDING = gql`
   }
 `
 
-const formatAddress = (cryptoCode = '', address = '') =>
-  formatCryptoAddress(cryptoCode, address).replace(/(.{4})/g, '$1 ')
 const sumReducer = (acc, value) => acc.plus(value)
 const formatNumber = it => new BigNumber(it).toFormat(2)
 
@@ -149,6 +147,10 @@ const Funding = () => {
   const pendingTotal = getPendingTotal(funding)
   const signIfPositive = num => (num >= 0 ? '+' : '')
 
+  const { address, addressDisplay } = formatAddress(
+    selected?.cryptoCode,
+    selected?.fundingAddress,
+  )
   return (
     <>
       <div>
@@ -223,11 +225,9 @@ const Funding = () => {
                   <strong>
                     <CopyToClipboard
                       buttonClassname={classes.copyToClipboard}
-                      key={selected.cryptoCode}>
-                      {formatAddress(
-                        selected.cryptoCode,
-                        selected.fundingAddress,
-                      )}
+                      key={selected.cryptoCode}
+                      value={address}>
+                      {addressDisplay}
                     </CopyToClipboard>
                   </strong>
                 </div>

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>
-              {formatAddress(tx.cryptoCode, tx.toAddress)}
-            </CopyToClipboard>
+            <CopyToClipboard value={address}>{addressDisplay}</CopyToClipboard>
           </div>
         </div>
         <div data-cy="transactionId" className="w-70">